Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

February 26 2014


February 24 2014

Sponsored post

February 17 2014


February 03 2014


A Guide to Social Logins

This reference guide will discuss what social login is, look at social login examples in web apps, and provide links to relevant documentation and tutorials.

What is Social Login?

Social login gives users the option to sign-up and login on app using their account on a social network like Facebook, Twitter, or Google+.

Here’s a beautiful social login example on the to-do list app Wunderlist:


The app allows its users to sign-up and login using Facebook, Google, or by providing a username and password.

Social login is a type of single sign-on, a software design pattern that allows people to use the same username and password to access different systems.

Social login is also called social sign-in or social sign-on.

Social Login Examples

Let’s look at some real-world examples of web apps using social login.

Example 1: Pinterest

Example 1: Pinterest

The social image board gives users the option to sign-up and connect their Pinterest account with Facebook.

Pinterest, with permission, can post on their users’ Facebook timelines, giving their product more exposure and possibly more sign-ups from friends of their users.

Example 2: StumbleUpon

Example 2: StumbleUpon

StumbleUpon’s (SU’s) social login option is an example of how social logins can make the onboarding process easier for people.

Signing up using a Facebook account requires less effort compared to SU’s email sign-up option which asks users to fill out 8 input fields: name, email, username, password, birth date, sex, and birth date. Most of this information can be attained from a person’s Facebook profile if they already have them up there, and their SU username can be auto-suggested based on their Facebook ID.

Example 3: Canva

Example 3: Canva

Canva is a design collaboration app. The social nature of web-based collaboration makes a Facebook login a logical option.

Additionally, since Canva is relatively new (it just launched 6 months ago) people who trust Facebook with their username/password credentials more than the new app might be more compelled to sign-up.

Example 4: RunKeeper

Example 4: RunKeeper

Many studies show that social support has health/fitness benefits.

That could be a reason why it’s a good idea for RunKeeper — a mobile app for tracking your running activities — to give users the option to sign-in and connect their accounts to their Facebook and Google+ networks.

Posting progress and activities on social networks can be an avenue for social encouragement, motivation, and support for runners using the app.

Example 5: Karma

Example 5: Karma

Karma is a pocket-sized WiFi hotspot that allows people around you to connect and share your wireless Internet connection.

Karma users using Facebook social login allows the company to store and use the person’s Facebook profile data (photo, email address, Facebook ID).

With opt-in permission, web apps can use information sourced from social media accounts to automatically pre-populate user account information so that the person doesn’t have to, for instance, manually upload a photo or input their email address.

But when they launched, reviews by early adopters and tech news sites like TechCrunch and Gizmodo criticized the requirement of Facebook authentication as a condition to using Karma.

So, now, Facebook social sign-in is an option on Karma, but not a requirement. This clues us in to a best practice: Give users a choice of whether or not they would like to connect their social network to your app.

Example 6: Airbnb

Example 6: Airbnb

On Airbnb, users who connect their Airbnb account to their Facebook account get additional privileges compared to those who don’t.

Benefits include added trust, safety and verification, which is required for booking or hosting in some cases.

Example 7: Buffer

Example 7: Buffer

In a few cases, social login is mandatory. This is true for web apps like Buffer, which helps you manage your social media posts. In order to do its job, Buffer needs permission to access your social media accounts.

Example 8: Quora

Example 8: Quora

On Quora, creating an account is required to access all of the site’s content.

According to Quora, requiring people to sign-in is because the site "depends on everyone being able to pitch in when they know something" and — the thinking goes — forced sign-in reduces the tendency of individuals to lurk without chipping in.

Forced sign-in on Quora has been criticized by journalists and some Quora users. However, the social sign-in option on Quora at least makes the process quicker for people who take advantage of social login.

Here are other sites that use social logins:

Example 9: Weebly

Example 9: Weebly

Example 10: Gumroad

Example 9: Weebly

Example 11: Asana

Example 11: Asana

Example 12: Foursquare

Example 12: Foursquare

Example 13: Fitocracy

Example 13: Fitocracy

Example 14: hackpad

Example 14: hackpad

Example 15: Map your runs

Benefits of Social Login

As we can see from the examples above, users and developers can gain several advantages by using social login.

Benefits for Users

Users get these advantages:

Ease of signing up to a website

Social logins make signing up to sites and apps quicker because it usually involves clicking a few buttons.

Predictability of the sign-up process

Using social login give users who regularly use the method a streamlined and uniform process regardless of which site their signing into.

Manage fewer accounts

Using social login means users will have fewer web app accounts to deal with.


It might be hard for some site visitors to get the feeling of confidence they need to compel them to provide their personal information to an unknown site.

People might be more comfortable having their information handled by familiar social networking platforms they already trust.

Benefits for Developers

Developers get these advantages:

Authentication of users

For apps, allowing social login can provide an additional layer of verification that the user is a real person.

It’s free (under most conditions)

Implementing social logins entails using APIs like Google+ API or Facebook Login that are usually free and publically accessible.

However, some APIs have a quota for how much a third-party app can use them, and the app developer might be required to pay if they need more resources than the limit allocated to them.

Individualized user experiences

Users who choose to connect their social network to your app allows you to leverage existing information in their social graph that can improve their experience while using your app.

Pre-population of blank state inputs

Users who choose to sign-in to your app using their existing social media account gives you the ability to auto-suggest or auto-populate their account settings (e.g. profile photo, email address, phone number) if the information is present in their social media account. This in turn can ease or improve the first-run blank slate experience.

Make your app more social and engaging

Social logins can connect your app to your users’ social networks (if they permit you), giving your app more exposure and engagement opportunities.

Reduce failed login attempts and forgotten password requests

If a person is already logged into Facebook (for example), they don’t need to retype or remember their password to access your system.

Spam protection

Requiring authentication can slow down spam because signing into the system requires third-party verification.

Spam protection also comes in the form of the social network’s more mature spam-prevention technology.

It just makes sense for social apps

Some apps simply need to use social login. For example, at JustUnfollow and Buffer (mentioned earlier), which are tools for helping you manage your social media account, social login is required in order for them to do their jobs.


Why You Wouldn’t Use Social Logins

There are several reasons for choosing not to provide social logins as an option for your users.

Dependence on External Platforms

Using any third-party service subjects you to terms-of-use changes.

Terms can (and do) change. Restrictions are often put into place. Web services get closed down permanently.

If your mission-critical processes rely heavily on third-party services, you might find yourself in trouble if – for instance – Facebook, Google, or Twitter suddenly make changes to their platforms that restrict your use of their services.

Some apps have shut down or have failed due to API changes (e.g. Twit Cleaner).

Privacy Concerns

It’s been revealed that social platforms use their APIs as a source of user data outside of their own domains.

One such example is the Facebook Like button that the social network uses to learn about people’s browsing behavior.

Facebook Login, the service allowing other sites and apps to use Facebook as a mode of user authentication, is different from the Like button, but we could reasonably come to a conclusion that analogous data-mining techniques could be used by the platform.

Dealing with Multiple Account Types

Developers will need to create a system that’s able to negotiate between normal email sign-ins and various social sign-ins.

Decision Paralysis

It’s been shown in some studies that too much choice can negatively affect conversion rates.

The idea can apply to the situation where you’re presenting users with several methods for creating an account on your app.

Dilution of Your Brand Identity

By showing Facebook-, Google-, and Twitter-branded buttons in your login forms, we could argue that this competes with your own business identity. This is what Oliver Reichenstein, founder of strategic design company, iA, says about social media buttons: "What we know for sure is that these magic buttons promote their own brands — and that they tend to make you look a little desperate."

It’s Not Worth It

In a discussion about social login, Aarron Walter, director of UX design at MailChimp, concluded that the benefits of allowing their users to sign-in using Facebook or Twitter didn’t provide the company with enough incentives to keep the social login option. They witnessed only 3.4% of their users using social logins, which is not worth negative impact of diluting their own brand identity, according to the blog post.

Tips for Social Login Implementation

Based on my observations, here are tips for those who are considering social login options.

Social Login Should be Optional

As discussed earlier, apps and services requiring people to connect their social media profiles are criticized for the decision. Social login should be an option, not a requirement.

Limit the Number of Social Login Options

Decision paralysis could come into play if you provide too many social login options, which in turn could affect user acquisition.

Stick to the most popular options, which are currently Facebook, Twitter, and Google.

Have an Exit Strategy

Always plan for the event that the social login platforms you’re using suddenly decide to restrict or remove your access. It has happened in the past. It could happen in the future.

Popular Social Login API Docs

Here is a reference table for popular social login APIs:

Platform Link to API documentation Facebook Facebook Login Google Google+ Sign-In Instagram Authentication LinkedIn Authentication Twitter Application-only authentication

Social Login Tutorials and Resources






Related Content

About the Author

Jacob Gube is the founder and editor-in-chief of Six Revisions. He’s a front-end web developer by profession. If you’d like to connect with him, head on over to the contact page or follow him on Twitter: @sixrevisions.

The post A Guide to Social Logins appeared first on Six Revisions.


Factors to Consider When Choosing an E-Commerce Platform

Choosing the right e-commerce platform for your website is now easy task. There are hundreds of different options available with options in all different price ranges and with varying features. If you're overwhelmed at the process of choosing the right platform for your site, or for the site of a client, the decision usually becomes much clearer once you've determined what is most important for your site. In this article we'll look at some specific questions to ask yourself, or your client, to help lead to the right choice. Make sure that you take the time to make a wise and informed decision, because changing platforms down the road can often be a time consuming and costly experience.

General Categories of E-Commerce Options

Before we look at the factors that you need to consider, let's first take a look at the general categories of e-commerce platforms. Most of the hundreds or thousands of e-commerce platforms out there will fall into one of these six categories.

1. Enterprise E-Commerce

Enterprise e-commerce systems like Magento's Enterprise Edition are feature-rich and robust systems that are typically used by large or fast-growing companies. Of course, with the advanced features and capabilities comes a higher price tag. Magento Enterprise

January 28 2014


New Development Courses Available on Tuts+ Premium

Tuts+ Premium courses teach you a single skill from top to bottom, inside out.

Currently, more than 15,000 members are sharpening their skills in web design, web development, photography, Photoshop, vector design, video effects and much more. Our dedicated team adds new content weekly, so there’s always something fresh to sink your teeth into. Today, we’re highlighting a few of the latest and greatest course additions to Tuts+ Premium.

New Development Courses

Ember Testing

In this course we’ll learn how to test Ember applications. We’ll review how to set up an Ember app for testing, what testing helpers are available to us, how to write integration and unit testing, and much more.

Machine Learning Distilled

Welcome to “Machine Learning Distilled.” In this course, we’ll review machine learning in a very compressed way. In other words, what is machine learning, why would you want to do it, and how is it done?

Perfect Workflow in Resharper

Are you struggling trying to figure out how to improve your productivity? Do you have a good handle on the C# language, but still feel like it takes you forever to write code. Well, no more. Enter Resharper by Jetbrains. Resharper is a fantastic extension for Visual Studio that will help you to increase your productivity and decrease your development time.

Diving into Octopress

A lot of blogging frameworks are great if you have a large site that needs the features of a content management system, but what if you want something simpler? Let’s talk about Octopress.

Object-Oriented Design in PHP

Object-Oriented Design can offer a developer a structured way to break apart an application into logical, maintainable chunks. In this course, we go over various different OOD techniques, patterns, and concepts to help you improve the sustainability and testability of your code base.

Join Tuts+ Premium for Courses, eBooks, and More

Tuts+ Premium has a huge collection of courses, eBooks, source files and guides on hundreds of creative and technical topics. And we’re adding new content every week. Sign up now and develop your skills today!

January 21 2014


How To Design Custom Pricing Plan Tables with HTML5 and CSS3

Advertise here with BSA

Any company selling a service with payment plans usually breaks up the structure into different packages. Smaller packages will cost less but also provide fewer features. Pricing tables are the perfect UI component to display these packages in an easy-to-compare design.

For this tutorial I want to demonstrate how we can create pricing tables with just a bit of HTML5 and CSS3. Despite the name, I haven’t actually used any <table> elements within the design. You might feel these are easier but they also depend on a rigid formulaic structure. Pricing tables can have many facets including service terms, plan details, pricing details, and of course the purchase/signup button.

custom designed html5 css3 pricing tables tutorial open source

Live DemoDownload Source Code

Getting Started

This demonstration is mostly built around aesthetics so I haven’t even bothered touching the jQuery library. The document header references a single stylesheet named styles.css which imports an external web font Alegreya Sans.

Looking towards the internal table itself you will see it’s built using a container div, along with internal block elements like <header> and <section>. This makes everything easier to read when skimming through the code. And we can separate block sections from each table to distinguish between background colors and font styles.

<div id="pricing" class="clearfix">
  <div class="price-table">
    <section class="price-details">
      <p>$19<span class="price-recur">per month</span></p>
    <section class="details">
      <ul class="details-list">
        <li class="wizard">Easy Setup Wizard</li>
        <li class="storage">250GB Storage</li>
        <li class="scripts">Open Source Scripts</li>
        <li class="support">24/7 Tech Support</li>
    <section class="purchase-btn"><a href="javascript:void(0);">Purchase</a></section>
  </div><!-- @end "Basic" .price-table -->

To save room I’ve only copied the very first pricing table HTML for the “Basic” plan. The header section uses a background gradient plus a small text shadow to stand apart from the page. Pricing details are split using a span element with the class .price-recur. So the numeric cost will appear much larger than the denoted timeframe(per month).

You’ll also notice the .details-list contains list items with different classes. These each represent a different background icon from the Gentle Edges icon set. The PNGs are white by default which is perfect for this dark tabular color scheme.

The outer container #pricing uses a clearfix class to keep everything aligned properly. The tables are floated next to each other using fixed width values. These could be redefined to use flexible widths based on the container, if your layout is responsive. Basically you can adjust these numbers in CSS to get them aligned any way you’d like.

Typical CSS Styles

Each of the table designs follows the same class structure. Higher-priced tables have more listed icon features, and so they appear longer on the page.

/* page structure */
#w {
  display: block;
  width: 800px;
  margin: 0 auto;
  padding: 15px 10px;
  background: #fff;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: 1px 2px 4px rgba(0,0,0,0.55);
  -moz-box-shadow: 1px 2px 4px rgba(0,0,0,0.55);
  box-shadow: 1px 2px 4px rgba(0,0,0,0.55);

#pricing {
  display: block;
  margin-bottom: 20px;

.price-table {
  display: block;
  float: left;
  width: 185px;
  text-align: center;
  color: #fff;
  background: #6f8590;
  margin-right: 10px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;

Each inner table is fixed at 185px width. This comes out to 740px along with an extra 10px margin. The total body wrapper is 800px so these tables come in at just about the perfect width value. Also the table itself has rounded corners which are then translated to other elements such as the header.

.price-table header {
  display: block;
  padding: 15px 0;
  border-bottom: 1px solid #54656d;
  -webkit-border-top-right-radius: 5px;
  -webkit-border-top-left-radius: 5px;
  -moz-border-radius-topright: 5px;
  -moz-border-radius-topleft: 5px;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  background-color: #5f8597;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#324a56), to(#5f8597));
  background-image: -webkit-linear-gradient(top, #324a56, #5f8597);
  background-image: -moz-linear-gradient(top, #324a56, #5f8597);
  background-image: -ms-linear-gradient(top, #324a56, #5f8597);
  background-image: -o-linear-gradient(top, #324a56, #5f8597);
  background-image: linear-gradient(top, #324a56, #5f8597);
.price-table header h3 {
  font-size: 2.7em;
  font-weight: bold;
  text-shadow: 1px 2px 0 rgba(0,0,0,0.3);

.price-table .price-details {
  padding: 20px 0;
  background: #cedee6;
  font-size: 4.46em;
  line-height: 1.1em;
  font-weight: bold;
  color: #4b5d72;
  margin-bottom: 15px;
  text-shadow: 1px 2px 0 rgba(255,255,255,0.6);
.price-table .price-details .price-recur {
  display: block;
  font-size: 0.4em;
  line-height: 0.9em;
  font-weight: normal;

.price-table .details-list {
  list-style: none;
  text-align: left;
  margin-bottom: 10px;
.price-table .details-list li {
  display: block;
  padding: 8px 0;
  padding-left: 40px;
  font-size: 1.2em;
  line-height: 20px;
  font-weight: bold;
  background-position: 6px 5px;
  background-repeat: no-repeat;
  border-bottom: 1px solid #a7b7bf;

You’ll notice the header uses a CSS3 background gradient with browser prefixes to create the glossy effect. As we move down to .price-details the background turns into a stationary color, and the pricing table itself uses a darker gray for the original background. Each of these sections will appear divided and still come together forming a recognizable pricing table.

On each of the .details-list li elements we need to keep the same background properties, but swap out different images. I figured the simplest way to do this would be including the same background-position and background-repeat values for each list item. Then for individual classes we switch between the icon URL itself.

The Recommended Table

You may have already noticed that the “Pro” table has a lighter purple hue in comparison to the darker teal. Many pricing tables will encapsulate one of the plans to appear more noticeable than the others. Companies offer these plans as the best deal for your money, and hope to persuade visitors into choosing that plan for its greater value.

The recommended table’s header is much shorter in height because I’ve included a small notice to catch people’s attention. You could get fancy using ribbons or badges, however I wanted to avoid extraneous images for this design. The table itself has an additional class so we can target internal elements using .price-table.recommended as the selector.

.price-table.recommended {
  background: #6c7b9b;

.price-table.recommended header {
  padding: 5px 0;
  background-color: #5a76b1;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#495e8a), to(#5a76b1));
  background-image: -webkit-linear-gradient(top, #495e8a, #5a76b1);
  background-image: -moz-linear-gradient(top, #495e8a, #5a76b1);
  background-image: -ms-linear-gradient(top, #495e8a, #5a76b1);
  background-image: -o-linear-gradient(top, #495e8a, #5a76b1);
  background-image: linear-gradient(top, #495e8a, #5a76b1);
  border-bottom: 1px solid #3b577e;
.price-table.recommended .notice {
 font-size: 1.2em;
 line-height: 20px;
 background: #3b577e;
 font-weight: bold;

.price-table.recommended .price-details {
  background: #bac7ea;
  padding: 20px 0;

To compensate for the loss of space I’ve reduced the header padding from 30px down to 10px. This is also why the small .notice text uses a line-height of 20px. I wanted the last two tables to stay perfectly aligned, even though they do feature slightly different content. Mostly all of the background colors have been updated along with the purchase button.

.price-table.recommended .purchase-btn a {
  border-color: #6a3fc2 #7045bf #651fbb;
  background: #6149ad;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#7a67d8), to(#6149ad));
  background-image: -webkit-linear-gradient(top, #7a67d8, #6149ad);
  background-image: -moz-linear-gradient(top, #7a67d8, #6149ad);
  background-image: -ms-linear-gradient(top, #7a67d8, #6149ad);
  background-image: -o-linear-gradient(top, #7a67d8, #6149ad);
  background-image: linear-gradient(to bottom, #7a67d8, #6149ad);
.price-table.recommended .purchase-btn a:hover {
  background: #634fc2;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#8876e2), to(#634fc2));
  background-image: -webkit-linear-gradient(top, #8876e2, #634fc2);
  background-image: -moz-linear-gradient(top, #8876e2, #634fc2);
  background-image: -ms-linear-gradient(top, #8876e2, #634fc2);
  background-image: -o-linear-gradient(top, #8876e2, #634fc2);
  background-image: linear-gradient(to bottom, #8876e2, #634fc2);
.price-table.recommended .purchase-btn a:active {
  background: #503d88;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#6d58bd), to(#503d88));
  background-image: -webkit-linear-gradient(top, #6d58bd, #503d88);
  background-image: -moz-linear-gradient(top, #6d58bd, #503d88);
  background-image: -ms-linear-gradient(top, #6d58bd, #503d88);
  background-image: -o-linear-gradient(top, #6d58bd, #503d88);
  background-image: linear-gradient(to bottom, #6d58bd, #503d88);

custom designed html5 css3 pricing tables tutorial open source

Live DemoDownload Source Code


You won’t find a need for pricing plan tables in every project. Actually you probably won’t need them for a majority of web projects. But there are many companies which offer a recurring service, like TypeKit or MaxCDN. These are the designs which can truly incorporate pricing tables with a sense of purpose. Feel free to use my source code in your own website layouts, and to share any questions or ideas you may have in the post discussion area below.

Advertise here with BSA

January 07 2014


28 Beginner Tutorials for Modern API Web Development

Advertise here with BSA

Web development has grown far beyond the typical HTML/CSS/JS code structure. Modern web services like Facebook and Twitter are built with something called an Application Programming Interface. This allows developers to connect into 3rd party services and pull out data to be displayed on another website.

For this post I’ve collected a number of free online tutorials which delve into API development. These are perfect for anybody new to the scene who wants to learn a bit more about typical web services. Some will require an API key while others may simply return XML/JSON data on command. Either way these articles detail many popular development techniques in an easy-to-understand fashion.

Facebook’s Graph API Explorer

facebooks graph api explorer to grab insights data

Using the Pinterest API

pinterest api howto tutorial development

DeviantArt API Instant Search App

deviantart api instant search howto jquery ajax php tutorial

Google Places API

google places api tutorial jquery howto development

Login and Register using LinkedIn

linkedin oauth api login register howto tutorial

Guide to the HTML5 APIs

Using the Etsy API

using the etsy api development tutorial howto

A Look at the WordPress HTTP API

http api wordpress practical wp remote post tutorial

How To Create a Twitter Widget

creating a twitter widget howto tutorial api

Beginner’s Guide To jQuery-Based JSON API Clients

json based clients api development howto learning article

The Reddit API in Python

reddit api python howto tutorial open source

Objective-C JSON and the Flickr API

objectivec json flickr api tutorial howto

Vine’s Undocumented API vine api social video sharing howto tutorial

Basic YouTube API Tutorial

pulling videos youtube api tutorial web development

Integrate the Mailchimp API in PHP

integrate mailchimp api development php tutorial

Google Maps API and Custom Overlays

google maps api custom overlays

Create a Twitter-Like “Load More” Widget

create twitter style load more widget tutorial

Creating an API-Centric Web Application

api centric web application tutorial howto

Build an Integrated Facebook App

design code howto tutorial integrated facebook application

Facebook Invite Friends API

facebook invite friends api howto coding tutorial

Dead-Simple Twitter Feed with jQuery

dead simple twitter feed using jquery tutorial

REST API Integration with iPhone App

rest api into iphone application objective-c tutorial

Coding a Dynamic IMDb Webapp

dynamic imdb webapp my movie api howto tutorial jquery

Simple Github API Webapp

coding jquery ajax howto tutorial github api

Game Audio with the Web Audio API

browser game audio web api htmnl5 howto tutorial

Access Dropbox Using PHP

access tutorial api php dropbox howto coding

Google Analytics API

access google api analytics howto tutorial coding


simple php rest api tutorial open source

Advertise here with BSA

December 24 2013


Advanced Image Optimization Tricks

You can use automated image optimization tools to compress your images. However, if you also take the time to manually optimize them, you can further improve your results. Here are five techniques for manually optimizing images.

Gaussian Blur JPEG Optimization

Gaussian blur softens the details of an image. In photo-editing, it’s typically used to enhance a photo’s quality or to give it an interesting visual effect.

However, if you only introduce a small amount of Gaussian blur to a photo — an amount that doesn’t alter its visual fidelity too much — you can lower its file size.


The following image is 60.9 KB:

We’ll open the image in Photoshop and then we will apply Filter > Blur > Gaussian Blur.

We then increase the Radius option until it starts to noticeably reduce the sharpness of the image. When then choose a value that’s visually acceptable to us.

After applying the Gaussian Blur filter, we then save our image in the normal manner.

Here is the optimized image:

The optimized image is 58.7 KB — a 3.6% decrease in file size.

Image Posterization

Posterization allows us to lower the file size of an image without harming the perceived image quality too much. Posterization works by converting continuous color gradients into non-continuous segments that require fewer colors to render.


In this demo, I will use a PNG image from a freebie:

The PNG image above is 51.0 KB.

I opened the PNG image in Photoshop to posterize it.

To posterize the image, go to Image > Adjustments > Posterize. In the Posterize dialog window, check the Preview option to see your edits in real-time. Set the Levels option to the lowest possible value you can get away with.

For my example, at a Levels value less than 76, the perceived image quality degradation is no longer acceptable to me.

After applying the image adjustment, we then just save the PNG as we normally would.

Below is the optimized image:

Because I was very aggressive with the posterization, the optimized image is only 37.6 KB — a 26.3% decrease in file size.

Further Reading


Pixel-fitting is a useful technique for ensuring high-quality results for vector graphics that are converted to raster graphics.

Simple, non-photographic images such as icons and logos are best created as vector graphics because doing so allows us to scale them to different sizes without fidelity loss.

However, a problem often occurs when vector graphics are converted into static image formats (raster graphics) such as JPEG or PNG. When we use an image-editing software like Photoshop to automatically convert a vector graphic to a raster graphic, it tries to do its best to smooth out the edges — an automated process referred to as anti-aliasing.

The results of anti-aliasing varies. Often it leads to poor-quality results. In order to enhance the quality of the graphic, we can manually edit the pixels to make sure they fit inside the pixel grid. This is called pixel-fitting (or pixel hinting).


Using an image editor such as Photoshop, you can zoom into the vector graphic and then manually move its vector paths a bit until they fit perfectly inside the pixel grid before you save the vector as a raster:

Pixel-fitting only works for straight lines so you will have to rely on anti-aliasing to display curves.

Further Reading on Pixel-fitting

8-pixel Grid JPEG Optimization

I came across this trick from Smashing Magazine’s article called Clever JPEG Optimization Techniques. In the same article, you will also find other useful tricks for optimizing JPEGs.

A JPEG image is divided into 8x8px blocks, and each block can be treated as its own entity.

By carefully aligning parts of the image within the 8x8px grid you can lower the file size of the image as well as get better image-quality results.

To demonstrate: I created two identical 8x8px square objects that I then saved in JPEG using a very high compression level (to make the difference more pronounced). The top square is not aligned inside the 8x8px grid.

Notice the quality difference and the extra pixels that are rendered for the one that isn’t aligned to the 8x8px grid.

This optimization trick is useful for JPEG images containing rectangular objects because you can easily fit them in a grid.

Further Reading

  • JPEG optimization. Part 1 — Sergey Chikuyonok (author of the Smashing Magazine article mentioned above) discusses the 8x8px JPEG concept in this tutorial

Selective JPEG Compression

The way typical JPEG compression works is a fixed level of compression is applied to the entire image.

In selective JPEG compression, we manually specify different compression levels for different areas of the image.

For example, we might want important areas of a photo to have a lower level of compression/higher-quality because we want to ensure that those areas look good. But then for other parts of the same image, like the photo’s background and low-detailed sections, we might be able to get away with a higher level of compression/lower-quality.


Selective JPEG compression can be done using Adobe Fireworks.

The photo below is compressed at a quality level of 80. Its file size is 54.0 KB.

Looking at the original photo, it appears that we use selective image compression, particularly by increasing the compression/lowering the quality of the blue sky in the background and most of the black wires.

In Adobe Fireworks, we can mask the areas we want to protect. The masked area will have a higher quality level (80)/lower image compression. The rest of the image — the parts that are not masked — will get a lower quality level (60)/higher image compression.

We can use one of the Lasso tools (in my case, I used the Polygon Lasso tool) to place a marquee selection around parts we want to protect.

Once you are done selecting around the high-quality areas, go to Modify > Selective JPEG > Save Selection as JPEG Mask.

The parts of the image that will have a quality level of 80 will now be highlighted:

In the Optimize panel, lower the Quality option to 60 and set the Selective quality option to 80. (If you can’t see the Optimize panel, make sure Window > Optimize is checked.)

Then just go to File > Save as to save the original image as a JPEG.

The image shown below uses selective compression. It’s 50.2 KB – a 7.0% decrease in file size versus the non-selective compression I showed you earlier.

You will have to play around with the selective compression settings and masking in order to get your desired results. In the case example above, detail-oriented folks will notice a huge difference between the two images. However, the results of the optimization might be alright under most people’s standards.

Selective JPEG compression is very time-consuming and the file size reduction is only slight in most instances. It’s impractical if you’re dealing with a lot of photos. However, if you are really concerned about optimizing image quality and image file size, this is one option.

Further Reading


There are simpler ways to optimize an image. Just using automated tools such as Photoshop’s Save for Web & Devices command and lossless compression tools like can greatly reduce your image file sizes.

However, if you’re looking for finer image optimization control and even more file size reductions, try out the tricks above. An ideal workflow would be to use a lossless compression tool like or, which will remove a big chunk of your image’s file size without affecting its quality. And then you can use the appropriate tricks discussed above to fine-tune your results.

Related Content

About the Author

Rahul Mistry a web design enthusiast and writer for Heart Internet. Connect with Rahul on Twitter @mistry213 and Google+.

The post Advanced Image Optimization Tricks appeared first on Six Revisions.

December 03 2013


Technical Details to Consider Before Starting a Membership Website

Membership websites are often considered one of the best approaches for making money online. The recurring revenue generated by a successful membership website is an obvious reason that these sites are so desirable, but the truth is that running a membership website is not easy. Many customers are hesitant to sign up for on-going payments, so you’ll need to offer something that makes the recurring fee a worthwhile expense for your members. And in order to keep members you’ll need to work to add new, and valuable, content on a regular basis.

While getting and keeping members is certainly a challenges, it’s the technical aspects of setting up a membership site that present the biggest problems for most entrepreneurs who are looking to go this route.

A membership website needs to be able to do a few key things:

  • Allow new members to sign up
  • Process payments at the time of sign up and any recurring payments
  • Integrate the member accounts with the appropriate payments
  • Restrict access to protected content for anyone other than active logged in members
  • Provide active logged in members with the appropriate access to protected content

There are obviously other functions as well, but these are the basics. So if you want to start a membership website, how do you go about getting this set up? Of course, you could use a custom solution, but that would be very costly and/or time consuming. For the vast majority of people setting up membership websites the best option is to use an existing script or plugin that provides all of the needed functionality.

Finding the right option to power your membership website can be a challenge, but the good news is that there are more quality options than there were just a few years ago. Here are some of the leading options:

aMember Pro – aMember is a powerful, feature-rich solution that can integrate with a wide variety of content management systems. It’s probably the most popular option, in large part because it can be used with WordPress, Drupal, Joomla, Magento, phpBB, vBulletin, and much more. The down side of aMember is that it can be a little complicated to set up and it can be much more than is needed for some projects. The current cost for aMember is $179.95 for lifetime access with 6 months of free updates.


Wishlist Member – Wishlist Member is a popular WordPress plugin that allows you to add membership functionality to a WordPress-powered website. Wishlist Member, like other WordPress membership plugins, makes it very quick and easy to get membership functionality added to your site. While Wishlist Member is probably the most popular WordPress membership plugin, it’s not my favorite. I’ve used it on client websites but I prefer a few of the other options that I’ll mention in just a minute. That being said, Wishlist Member can get the job done. The cost of Wishlist Member is $97 for a single site license with 1 year of updates and support.

Wishlist Member

Restrict Content Pro – Restrict Content Pro is another WordPress membership plugin, and it is one that I prefer for basic membership sites. I find it to be more user-friendly and to function a little better than Wishlist Member, from my experience. The cost of a single site license is $42.

Restrict Content Pro

Member Mouse – Member Mouse is a robust and feature-rich WordPress membership plugin. I have tested Member Mouse just to try it out, but haven’t used it on a live site. From the limited experience that I have with it I would recommend Member Mouse if the features and functionality are a good fit for your needs. It’s very user-friendly and includes some functionality that you won’t find in most other membership plugins. Member Mouse involves a monthly fee, starting at $19.95 for sites with up to 1,000 members.

Member Mouse

Cart66 Cloud – Cart66 is a WordPress e-commerce plugin that has been around for several years, but Cart66 Cloud was just released earlier this year. Cart66 Cloud is a combination of a WordPress plugin and a hosted shopping cart. It includes both standard e-commerce and membership functionality, and the checkout is hosted by Cart66, so you won’t have to worry about SSL or other security issues. I’ve used Cart66 Cloud for several months now and I recommend it for sites where you want to sell individual products as well as offer membership. It’s not easy to find a good system that can support membership and an e-commerce site in one, so Cart66 Cloud stands out. It currently costs $25 per month.

Cart66 Cloud

Which Membership Platform is Right for You?

In the rest of this article we’ll take a look at things that you need to consider before choosing a membership platform, and we’ll also look at how the different options listed above will fit with these technical details of your site. There are obviously more options aside from just the 5 covered in this article, but these are some of the more popular options and to keep it simple we’ll stick with them.

Things to Consider Before Starting Your Membership Website

It’s important to think about how you want the site to function before jumping into it. With membership websites there are some details that you might not think about right away if you don’t have experience with these types of sites, and that is what I want to address in this article. Of course, some things can be changed later on, but with membership sites more so than other types of sites, making changes in the future can be very time consuming, costly, or impossible. It’s critical that you take the time to set it up properly from the start. Things like moving to another platform or changing the details of how the membership works can prove to be quite cumbersome later.

What Type of Content Will You Be Publishing, And What Will You Need to Protect?

There are a lot of different possibilities for membership websites. Will your site be a members-only forum? A blog with members-only posts? A site with products that can only be downloaded by members? The type of site and the content that is published may be a factor in deciding which platform to use. For example, aMember can integrate with lots of different CMSs and scripts, but the other options that I mentioned are WordPress plugins, so of course they will need to be used only with WordPress-powered websites. WordPress is capable of being used for forums, but specific forum scripts will usually be a better choice if that is the type of site that you will be building. So in this case, aMember would probably be a better solution.

Will your membership site protect video content? Most websites will host videos at YouTube or Vimeo and embed them into the site or blog, but if you’re looking to protect your videos so that only members can access them, that adds complexity. In this case you’ll probably want to self-host the videos so that you have maximum control over who sees them and who doesn’t.

Will you protect full pages or categories? If you’re protecting certain content so that only members can see the protected content, you’ll have a few options. You can protect the entire page, post, or in some cases category so that only active members can access it. Or, you can make the page itself unprotected with only a certain part of the content protected. For example, you could leave the page unprotected so anyone can access it and read the intro to an article, but the main body of the article can be protected for members only.

Will you protect download links? In some cases your membership site may need to include links for members to download certain products or resources. If this is the case you’ll, of course, need to protect those links.

aMember integrates with a lot of different CMSs and scripts. See the list here. WordPress users can protect any complete page, post, or category from the aMember protection panel. Alternately, any specific content in a page (including download links and videos) can be protected by the use of a shortcode.

Wishlist Member, Restrict Content Pro, Member Mouse and Cart66 Cloud all allow you to protect any complete page or post. And you can use shortcodes within the page or post to protect anything like video, downloads, or specific sections of content.

What Content Will Be Unprotected?

Most membership websites protect specific content, but not the entire site. For example, at Vandelay Premier we protect download links for members only, but everything else is visible to anyone. Some other sites may offer an excerpt and then protect the full article.

Before setting up your membership site you’ll need to think about what you want to protect and what you want to be available to all visitors. Keep in mind that having certain content that is unprotected can help for attracting search engine traffic, and it will also impact visitors decisions about whether or not to sign up. For example, at Vandelay Premier we leave all of the content except download links unprotected for a reason. Visitors are able to see preview images of the products/resources, which is critical to getting new members to sign up. If people couldn’t see those preview images to know what products and resources they would get by signing up, they probably wouldn’t sign up.

The good news is that all of the options that are being covered in this post will give you a great deal of flexibility here. Because you can protect entire pages/posts or just use shortcodes to protect specific content, you can leave whatever you want as unprotected. If you want to leave images and/or excerpts to be visible by anyone, just leave the page unprotected and use a shortcode to protect the members-only content.

Will You Need Different Levels of Membership?

Some membership websites will have only one level of membership, but others may have multiple levels. The different levels can be used as an upsell to offer something additional to those who sign up for the higher-priced membership levels.

For example, a site may offer Silver, Gold, and Platinum membership levels. Silver members may get access to written content, Gold members may get access to written content and videos, and Platinum members may get access to written content, videos, and exclusive forums.

With most membership platforms you will be able to add new membership levels later if you decide to, but it’s helpful to think about this ahead of time for planning the types of content that you want to offer, and also how the site will be set up. You won’t want to remove access later, so think about it in advance. For example, if you set up the site with one membership level that includes access to written content and videos and you decide later that you want to add a second level at a higher price, you won’t want to remove the video access for your current members. So make sure that you think this through before setting up.

aMember, Wishlist Member, Restrict Content Pro, Member Mouse, and Cart66 Cloud all allow you to set up an unlimited number of membership levels.

Will Members Have Lifetime Access, or for a Limited Period of Time?

Membership websites generally involve recurring payments, but not always. Sometimes the member may make a payment when they sign up that gives them lifetime access. Obviously, before you start you’ll want to think about how you want to set up your site. Lifetime access is attractive to customers, but recurring payments are what can really make membership websites profitable for the site owner.

Part of this decision will probably come down to the type of content that you’re offering to members, and if you will be adding new content. For example, at Vandelay Premier we add new resources for members just about every day. If you’re adding new content it’s logical that members will need to make recurring payments in order to keep their membership active. If your membership site is selling access to a series of videos but it’s unlikely that you’ll add new videos or other content in the future, members may not be interested in paying recurring fees to keep that access, so lifetime access might make sense here.

Another option is to use different membership levels to offer a few options to members when they sign up. You could offer a lifetime membership at a higher price than the regular membership. For example, Elegant Themes offers Personal and Developer membership levels that involve annual recurring fees in order to maintain an active membership. They also offer a Lifetime membership that will always be active for a one-time fee that is equal to about 2.75 times the cost of an annual Developers membership.

aMember, Wishlist Member, Restrict Content Pro, Member Mouse, and Cart66 Cloud all allow you to create membership levels with lifetime access or to re-bill at specific intervals.

Will You Drip Content?

Membership sites sometimes “drip” content to members rather than allowing all of the protected content to be accessible as soon as a member signs up. For example, if you are selling access to an online course you could set it up so that different sections of the course, whether it be text or video content, only become accessible to members a certain number of days after they signed up. So at the time of signup they could get access to the first lesson, a day later they are able to access the second lesson, and so on.

Dripping content can be helpful with some types of membership sites, but it’s not necessary for all. It’s possible to use content drips to help retain members and encourage them to keep their membership, and it’s also helpful for preventing information overload if your site offers large amounts of content to members. However, members will often prefer to be able to get access to everything right away, so it’s something to consider on a case-by case basis.

aMember, Wishlist Member, Member Mouse, and Cart66 Cloud all offer the option to drip content, although they each do it their own way. aMember handles it basically as described above, but they refer to it as Incremental Content Delivery in their documentation. Wishlist Member allows for what they call Sequential Upgrades. To use this you will set up multiple membership levels and members will be automatically and sequentially upgraded from one membership level to another according to how you set it up. You control the details of the membership levels and the intervals, and then you’ll protect the content according to membership level so that the content is dripped. Member Mouse allows you to set up a “drip content schedule” that controls members’ access to content. Cart66 Cloud allows you to deny access for a specific number of days after the subscription starts. You’ll just enter the number of days in the protection settings or in the shortcode.

Restrict Content Pro does not offer content drip functionality.

Will You Offer a Free Trial or Limited Free Memberships?

Some membership sites use free trials of limited free memberships in order to get people to try it out and ultimately to increase paid signups. With a free trial you’ll be offering full membership access (or access limited to a specific level) for a specified period of time before a payment needs to be made. For example, you could offer a 7-day trial that gives users access to your basic membership level for free, and then there membership will be de-activated unless they pay to keep it active.

The other alternative is to set up a free membership level that will remain free for life, or for an extended period of time, but this membership level will not include all of the benefits or access of the level paying members would get. Either way, you can use the free access as a way to encourage people to try your site.

Of course, you don’t want to give away too much that the user will no longer have a need for a paid membership. Be careful with free trials that provide full access. These trials can be very effective with some types of websites but counterproductive with others. For example, if your membership site offers hundreds or thousands of hours of video content, there is no way that people would be able to watch the majority of it with just a one-day unlimited free trial. They would be able to get a taste for what the site has to offer, but they wouldn’t be able to watch enough of the content that they would have no need for the paid membership. On the other hand if your site offers unlimited downloads to members, offering even a one-day free trial with full access could allow people to use the free trial to go through the site and download everything. Then they would have no need for a paid membership. A better option here would be to use a free membership level that doesn’t expire, but it only gives access to download certain things.

Free membership levels can be created with aMember, Wishlist Member, Restrict Content Pro, Member Mouse, and Cart66 Cloud. Free trials are supported by aMember, Wishlist Member, Restrict Content Pro, and Member Mouse. Cart66 Cloud does not support free trials.

Will You Be Selling One-Off Products?

Some membership sites offer products for sale individually in addition to offering membership. Our Vandelay Premier is an example. At Vandelay Premier you can buy products individually or you can get a membership that provides unlimited access to all products. It’s not uncommon for sites to offer a combination of regular e-commerce purchases and membership, but finding a system to suit your needs can be a real challenge. With Vandelay Premier we use aMember to manage memberships and E-Junkie to process individual purchases. Using two different systems is not ideal, but at the time the site was launched there weren’t any good options that could do everything we needed.

With aMember you set up “products” that you may or may not use as actual memberships. For example, several WordPress theme shops, like ThemeFuse, use aMember to sell themes individually and to sell club membership that provides access to all themes. So it is possible to use aMember for things aside from traditional memberships, but it has been created specifically with memberships in mind. aMember would not be an ideal solution for a site that needs to sell hundreds or thousands of different products in addition to membership.

Member Mouse allows you to create products as well as memberships, and they also include some interesting features like 1-click upsells and save-the-sale downsells. However, like aMember, Member Mouse is primarily a membership platform. While it can be used to sell products in addition to membership it is not an ideal solution for a site that will have hundreds or thousands of products.

Cart66 Cloud is, in my opinion, easily the best option for most sites that want to sell products and memberships. It can be used for typical e-commerce sites and also also handles memberships and subscriptions. As far as the membership aspect is concerned, it doesn’t have every single feature that you might get with some of the options, but it does do all of the essential things like managing member accounts, recurring payments, and restricting access to content.

Wishlist Member and Restrict Content Pro strictly manage memberships and do not support the sale of other products.

What Payment Gateway Will You Use?

There are a lot of different options when it comes to payment gateways. Popular choices include PayPal, Stripe,, and 2Checkout. Each membership platform will integrate with different gateways, so be sure to consider this when deciding on a platform.

aMember integrates with a huge number of payment gateways, but not all of them support recurring billing. See the list at aMember’s site for details.

Wishlist Member currently integrates with PayPal, 1ShoppingCart, Clickbank, Infusionsoft, Premium Web Cart, QuickPayPro, and Red Oak Cart.

Restrict Content Pro uses PayPal for all payments. You can purchase add-on plugins to use PayPal Pro/Express and Stripe.

Member Mouse supports PayPal, Stripe, Clickbank,, and Braintree Payments, but not all features of Member Mouse are possible with each gateway. See this page for details.

Cart66 Cloud currently supports 48 different payment gateways. See the list here. Cart66 Cloud allows recurring payments with any of these supported gateways.

Will You Have an Affiliate Program?

One of the best ways to market your membership website and to increase signups and revenue is to offer an affiliate program. With an affiliate program other website owners and bloggers can promote your membership website for you, and they’ll be paid a commission for each sale that they refer.

aMember includes a built-in affiliate program that you can configure.

Wishlist Member can be integrated with iDevAffiliate to run an affiliate program. Alternatively, if you’re using Clickbank or 1ShoppingCart as the payment gateway for Wishlist Member they have built-in affiliate programs.

Restrict Content Pro offers a free add-on that allows you to integrate your membership site with the Affiliates plugin.

Member Mouse includes built-in affiliate tracking and also integrates with iDevAffiliate.

Cart66 Cloud easily integrates with iDevAffiliate.

Are You Looking for a Platform with One-Time Cost or a Monthly Cost?

One last thing to consider is the way that you want to pay for the membership platform. None of the options covered in this article are free, and each one has it’s own pricing details.

aMember costs $179.95 for lifetime access with 6 months of upgrades included. The lifetime access sounds nice, but in reality you will need to upgrade your installation of aMember for security purposes. You will need to purchase renewal licenses beyond that initial 6 month period when you need the upgrade.

Wishlist Member costs $97 for a single site license that comes with 1 year of support and upgrades. If you need upgrades after the initial year (which you will in order to keep your WordPress site up-to-date) you’ll pay $47 per year for those upgrades.

Restrict Content Pro costs $42 for a single-site license with 1 year of upgrades. You’ll need to purchase another license when you need an upgrade beyond that 1 year.

Member Mouse comes with a monthly fee rather than a one-time license fee. The starting price is $19.95 per month to support up to 1,000 members at your site (they offer a 14-day free trial).

Cart66 Cloud also charges a monthly fee, and it uses a hosted shopping cart, and the monthly fee is pretty typical for a hosted solution. The current price is $25 per month, and that is a flat price with no increased pricing if you have a high number of members or products.

Although pricing and licensing details are a factor that you’ll want to consider, the truth is that if you’re managing an active membership site you will have some ongoing costs for the membership platform with any of these options, especially if you are using WordPress. If you’re using Member Mouse or Cart66 Cloud you’ll obviously have the monthly fee, but even if you use aMember, Wishlist Member, of Restrict Content Pro you will eventually need to upgrade to a new version of the plugin and you’ll need to buy the license in order to do that. Since WordPress releases several new upgrades each year, the plugins will also have to release upgrades in order to maintain compatibility and possibly to support new features of WordPress. And of course, the plugins will also need to release upgrades for security patches and bug fixes. So don’t plan to buy a license and never pay again for the membership platform because you will need to pay to keep it up-to-date.

Paying a license fee will usually be preferred over a monthly fee, but there are benefits to using Member Mouse and Cart66 Cloud that make the monthly fee a justifiable expense. From the limited experience I had with Member Mouse I found the support to be very good and very fast. It also has some features that you won’t find with any of the other options, so although it is not right for everyone, it can be a good option even with the monthly fee.

Likewise, I’ve found the Cart66 Cloud support to be good, and with the other features and functionality that it offers I have no problem with a monthly fee. However, you’ll need to consider your own situation and your specific site.

Conclusion and Recommendations

Hopefully this article has helped you to think about some important details before starting your membership site. We’ve covered the details of 5 good options for managing your site, and here are a few conclusions. Keep in mind, this is just the opinion of one person who has used or tried these 5 options, your situation may be different.

Best Options for…

A non-WordPress website: aMember
If your membership website will be a forum of will use some CMS aside from WordPress, take a look at aMember. It integrates with a ton of different systems which makes it pretty versatile.

A site that is a combination of e-commerce and membership: Cart66 Cloud
No other option offers the same combination of features for a traditional e-commerce site and for membership. I currently use it on a site and I strongly prefer it to using separate systems for membership and individual purchases.

A membership site that doesn’t need a ton of features: Restrict Content Pro
This is a great option that works well and is user-friendly. It doesn’t offer all the features of some of the other plugins, but if you’re not going to use those features they can just cause bloat.

A large membership site that needs some advanced features: Member Mouse
The monthly price will turn off some people who don’t need all the features, but Member Mouse includes some functionality that can help to make a membership site highly profitable. Things like 1-click upsells, save-the-sale downsells, dripped content, and engagement statistics make it a great option for those who will put these features to good use.

Other Options:

These aren’t the only options for membership websites. Some other popular options include:

What’s your experience? Do you have any recommendations?

Please note: All of the information in this post is intended to be accurate, but things like features, functions, and prices can change any time, so please verify any information on your own before making a purchase.

October 31 2013


Udemy Online Courses: Effective Online Training

Udemy offers the best in online education for creative professionals. Whether you want to get promoted, break into a new industry, start a company, further a passion, or just accelerate your life, Udemy helps you learn from the amazing instructors around the world, enabling you to get there faster.

Udemy’s team recruits the world’s top experts, including New York Times best-selling authors, CEOs, celebrities, and Ivy League professors. These instructors have taught over 500,000 students on Udemy, helping them learn everything from programming to photography to design to yoga and more. Founded in 2010, Udemy is funded by Insight Venture Partners, Lightbank, MHS Capital, 500 Startups and other investors who previously foresaw the internet giants YouTube, LinkedIn, Twitter, Groupon and Yelp. Udemy is headquartered in San Francisco, California.

Today for only 8 more hours our users have been offered 75% off of any single course. If you have been thinking about trying out their training now would be the perfect time to get the best deal we’ve ever seen them offer. Here are a few suggested courses for you to check out.


Creating Responsive Web Design

Screen Shot 2013-10-31 at 4.26.15 PM

Web Design From The Ground Up

Screen Shot 2013-10-31 at 4.45.39 PM

User Experience Design Fundamentals

Screen Shot 2013-10-31 at 4.48.59 PM

Don’t miss your chance at this great opportunity.

October 23 2013


October 22 2013


Bento: One-Stop Shop for Online-Courses on Web Development


It’s merely a few weeks ago, that we brought you a comprehensive overview of 22 of the online learning resources the planet has to offer. Just today we stumbled upon another effort for web designers, developers and programmers. An offering by the name of Bento curates the best learning resources in its field. The collection is community-based and as such more helpful than any Google search result could ever be ;-)

October 08 2013


September 04 2013


7 Useful Git Tips for Beginners

Back when I first started to use Git for version control, I wasn’t sure if all the learning I invested into it would pay off. Branching, staging, stashing — these Git terms were all foreign to me.

Today, I can’t imagine life without Git. Git not only gave me a much-needed ability to version-control my work, it also made me a better programmer.

Here’s a series of simple tips that will help you make Git an important part of your web development workflow.

Tip 1: Spend Some Time Learning Git Basics

Learning the basics doesn’t mean you have to read the entire Git documentation from start to finish (although if that’s your thing, I wouldn’t discourage you from doing it).

There’s so much educational content on Git that I’m sure there’s something out there that fits your personal preferences and optimal learning style.

Learn Git Basics

Here are a few Git learning resources to check out:

Tip 2: Start with a Simple Git Workflow

Less is more.

Often, Git is associated with complex workflows. Let me say this though: You don’t have to completely master Git in order to instantly reap its benefits.

Git workflows can be extremely simple — and in a lot of cases "simple" is exactly all you need. Sure, you can use multiple remote repositories, issue pull requests, rebase your changes, etc. but you don’t have to if you don’t want to.

Starting with a simple workflow also makes it easier to add more complexity later on when you need Git’s more advanced features. The advanced features will be there for you when you need them.

Here are some examples of various Git workflows that you can take ideas and inspiration from:

The overarching point is this: Don’t stress out about needing to learn everything about Git. You can start using Git today.

Tip 3: Stop Being Afraid of Making Mistakes

A great thing about Git is that it’s almost 100% foolproof.

Keeping the following things in mind should let you sleep easy at night:

  1. Git hardly ever deletes data. Even actions that seem to delete items in reality actually add data to the system that will let you quickly undo deletions.
  2. You can undo almost everything in Git. I encourage you to experiment and explore Git and try out your ideas because this is one of the major benefits of using a version control system.
  3. Every member of your team has a repository cloned on his/her computer. Essentially, this is sort of like a redundant backup of the whole version-controlled project (including the full history) in the very unlikely event you do mess things up big time and can’t recover your mistake.

Tip 4: Understand the Concept of Branching

The concept of branching in Git is one of the most useful things you can learn at the start. Branching allows you to keep separate developments of one project possible and is a key component of being an effective Git user.

It may not sound like a big deal at first, but once you fully understand the concept of branching, you’ll wonder how you could have possibly lived without this ability.

Although other version control systems use the branching concept too, Git is the first system that really makes it easy and useful.

Git branching

Here are some resources to read that will help you understand the Git branching concept:

Tip 5: Learn About the Staging Area

Version control is most useful when you wrap up only related changes in a commit. This guarantees the commit can be rolled back easily without side-effects. The habit of making frequent commits also helps your coworkers more easily understand the progression of your changes.

Git makes granular commits easier than any other version control system (VCS) because you can determine which changes exactly shall be in the next commit.

A Git feature called staging area makes this possible.

Learn to use and love the staging area because it’s one of the most essential and unique components of Git.

Here are some resources about Git’s staging area:

Tip 6: Use a Git GUI

Although using a GUI is definitely not a requirement, I highly recommend it.

Using a GUI makes a lot of tasks easier and gives you a head start.

After all, using Git is not about learning commands and parameters by heart, it’s about using Git to improve your coding workflow. If a GUI enhances your coding workflow, there’s no reason to make things harder on yourself.

GitX (L) screenshot

Here are some Git GUIs to check out:

  • Tortoise Git – open source Git GUI for Windows
  • GitX (L) – open source Mac OS X Git client
  • SourceTree – free Git (and Mercurial) GUI for Mac and Windows
  • git-cola – an open source Git GUI
  • Tower – My company’s Git GUI for Mac users

Using a GUI will not relieve you from having to learn the basics, but once you’re happy with the level of Git mastery you have, investigate the tools that will make your life easier.

Tip 7: Commit Yourself to Using Git

Using a new tool can cause a bit of a headache in the first few days. The only way to get through this learning curve is to keep going.

Don’t look back; make a full commitment. Introducing Git into your normal coding workflow will soon prove to be one of the biggest and most significant things you’ve done in a while.

Avoid making exceptions like "I’ll use Git for these projects, but not for these other projects." At least at first.

The mindset of fully committing to Git gives you more opportunities to practice, makes things simpler because you know that the current project you’re working on is using a version control system, and most importantly makes Git a part of your coding habits.

In the future, you’ll see that there are just some situations where you don’t need to use Git. You won’t know what those situations are until you use Git in all the situations you can.

At the start of your journey towards Git mastery, make a 100% commitment to it.

Related Content

About the Author

Tobias Günther is CEO and founder of fournova. In 2010, he set out to make Git easier to use: Together with his team, he develops the Git desktop client, Tower for Mac.

The post 7 Useful Git Tips for Beginners appeared first on Six Revisions.

August 23 2013


The 7 Stages of Drupal’s Learning Curve

The 7 Stages of Drupal's Learning Curve

Drupal is awesome. Drupal is flexible. But Drupal is also hard.

If you’re just starting off developing with Drupal or have gone through a handful Drupal projects, it’s OK to feel lost. We’ve all been there.

The stages to getting through the difficult times with Drupal are remarkably similar to the well-known Kubler-Ross model for dealing with grief.

Does that mean that Drupal is the same as grief? Not necessarily. While actual grief of a loved one is a serious matter, sometimes fighting through initial challenges yields rewards far exceeding your expectations.

Even more, the similarities for dealing with the complexities of Drupal development and for dealing with grief are uncanny.

The tips I’ll share with you are aimed at web developers interested in becoming professionally proficient with Drupal.

Stage 1: Shock and Denial

The Drupal learning curve is often regarded as difficult, and rightfully so. Your first challenge is to get over your denial and accept this reality.

Source: Learning Curve for Popular CMS

One shock for developers comes from the vast Drupal glossary of terms that you must understand to do a lot of the complex tasks.

Stage 2: Pain and Guilt

Once you’ve committed to developing on Drupal, certain aspects may seem a bit over your head.

Never fear, however, as our trusty friend Google can often get us out of traps.

While a good amount of quality answers from search results point to StackOverflow or StackExchange, the best resource for dealing with the pain is the robust Drupal API documentation.

If you’re more of a visual learner, the excellent series by Lullabot is a gold mine.

Stage 3: Anger and Bargaining

So you’ve resolved yourself to conquering Drupal, and the complexity of it is slowly revealing itself.

The "Drupal way" begins to dominate your lexicon as you balance between solving a problem with a quick solution or solving a problem with the most flexible solution.

The Drupal framework, like most web development frameworks, almost always offers ten ways of completing one task.

At first glance, this choice and flexibility seems awesome. In reality, analysis paralysis sets in as we are presented with too many options.

Stage 4: Depression and Reflection

As you get really good at implementing solutions to simpler problems, the chaining of methods to conquer more complex issues starts to introduce doubt within you.

You look at your code, your comments, and your TODO notes and give an exasperated chuckle.

While the feeling is normal, you may begin to stare off into space while holding your Pro Drupal Development book in your hands, a book which you have probably already purchased by this stage.

If you can hold on for a little while longer and have a bit of faith, your "aha" moment is just around the corner.

Stage 5: The Upward Turn

Nothing worth doing is easy.

The rhythm of explaining the inner workings of the entity infrastructure, the menu system, and the various permissions schemes yields positive results from clients.

Even more, you’ve bookmarked the Drupal 7 API in your browser and begin to find really helpful functions that save you a ton of time.

Beautiful designs in custom themes begin to play nicely with unique features in custom modules.

Stage 6:  Reconstruction

Now that you have two feet firmly planted under you, the question of "What’s next?" prompts a smile.

The revelation of the true beauty of Drupal is in its community.

It offers opportunities to contribute to Drupal documentation, help other developers going through their 7 stages of Drupal’s learning curve, or contribute code back to the Drupal ecosystem in the form of a contributed module or theme.

You feel comfortable sharing your triumphs and failures while also encouraging others to stick with it.

Stage 7: Acceptance and Hope

The death star of doubt has been destroyed!

As you hold hands with your project team basking in your awesome accomplishment, you suddenly realize that it wasn’t so bad.

Even more, you take pride in sticking with it.

Drupal is hard, but Drupal is awesome.


While the Drupal 7 mountain may have your flag planted on its summit, never forget that it’s about the journey, not the destination.

In that vain, take a deep breath because Drupal 8 could use your help!

For more in-depth analysis of these stages and to see code examples, check out my slides from Twin Cities Drupalcamp.

Related Content

About the Author

Fredric Mitchell is the Web Development Manager of Orbit Media, a web design company in Chicago. You can find Fredric on and Twitter.

The post The 7 Stages of Drupal’s Learning Curve appeared first on Six Revisions.

August 14 2013


Search Engine Rankings or Your Users?

Search Engine Rankings or Your Users?

Google isn’t completely transparent with how web pages are ranked on their search engine results pages, but Google employee Matt Cutts has in the past confirmed that site speed does have a bearing on search engine ranking. Why? "Faster sites create happy users," Cutts said.

A recent study by Moz (producers of SEO software) carried out by data scientist Matt Peters along with Zoompf (a website performance platform) took an in-depth look at the correlation between site speed and Google search engine rankings.

The findings confirmed that website speed does matter when it comes to search engine rankings, but it’s Time To First Byte (TTFB) that makes the difference rather than page load times.

When building commercial websites, we have to find a happy balance between usability and ensuring the site performs well on search engine rankings: User-friendly SEO.

SEO and usability, side by side, are both important. And, when done correctly and with the best intentions, SEO and usability will not be at odds, and they will actually reinforce one another.

If the conclusion of Peters’ study is true — that TTFB is the measurement used for determining how fast a website is, and thus, how a web page should be ranked in search engine results — this could change the way we go about building fast websites for SEO.

Why the Time To First Byte Study Was Done

To begin the research, Peters worked with the Moz team to create a list of 2,000 random search queries from the Searchmetrics 2013 Ranking Factors Study. They then chose a representative sample of queries with varying amounts of terms (1-5 search terms) and then they took the top 50 ranked results. This enabled the researchers to assemble a list of 100,000 pages to be used in the study.

They then launched 30 Amazon EC2 instances running in the Northern Virginia cloud. These were all loaded with a private version of WebPageTest, a popular website performance and optimization testing tool, to collect more than 40 test measurements.

Google Chrome was used as the test browser and each page was tested with an empty cache.

You can download the raw data from Moz.

The study took two measurements that are commonly associated with site speed. These are:

  1. Document Complete: the time it takes for a web page to load static content
  2. Fully Rendered: The time it takes for a web page to completely render, which means even dynamically-generated content (such as your third-party Twitter widget, Google AdWords widgets, JavaScripts, etc.) has been fully loaded and rendered

The researchers expected both of these metrics to have an influence on search engine rankings.

They were taken completely by surprise when no correlation was found.

That then led them to look at Time To First Byte.

Time To First Byte is measured as the time it takes for a web server to send the first byte to the requestor.

TTFB is traditionally a measurement of how responsive a web server is, not how fast and a web page is.

The study revealed "a clear correlation" between low search engine rankings and high TTFB times.

Why Use Time To First Byte?

According to the study, the most likely explanation for Google using TTFB to measure site speed is due to it being the "quickest and easiest metric for Google to capture."

This is because Google’s robots are capable of taking a full measurement of TTFB, whilst gathering document or rendering speeds would require more resources if it were done on a large scale. It’s highly unlikely that Google (or anyone else) would actually have the resources to carry this out, despite the company’s massive data centers, if you consider for a moment the sheer volume of web pages on the Web.

According to the researchers: "Not only is TTFB easy to calculate, but it is also a reasonable metric to gauge the performance of an entire site."

"TTFB is affected by 3 factors," the researchers said. These 3 factors are:

  • Network latency
  • How heavily loaded the web server is
  • The speed in which a site’s backend can push content to the requestor

These factors could be indicative of how fast a web page is, but not in a conclusive way like page loading times can.

Why TTFB is Not Important to Your Users

A study from CloudFlare states that TTFB is irrelevant to the user’s experience. And there is truth to that.

How fast a web page fully loads is all that matters when we begin to look at what is good for our users.

Some things that negatively affect TTFB are actually good for our users, the CloudFlare study discovered. For example, the CloudFlare study saw that when gzip compression was used, the page itself was downloaded 5x faster, but that this negatively affected TTFB by making the time 8x greater.

"From the end user perspective TTFB is almost useless. In this (real) example it’s actually negatively correlated with the download time: the worse the TTFB the better the download time," John Graham-Cumming, a respected programmer in the industry who works for CloudFlare, said.

Therefore, if you care about SEO and your users, in the scenario above, you’re at a crossroads. Do you optimize page speed for your users or TTFB for your search engine rankings?

When it comes to website performance as it relates to the user experience, frontend design is what matters most, and not so much the backend (web servers) which is what TTFB effectively measures.

Source: Performance Golden Rule

If a web server can push a byte quickly due to factors such as a shorter distance from the request, server resources, web server architecture, using a CDN, and what web server software you use, it doesn’t automatically mean that the web page being requested is designed optimally to ensure that the rest of the page is quick.

Though there is a good chance that TTFB is also an indicator of web page speed, TTFB is not the best metric to measure it, and there are other better options.

The Bottom Line

It’s important to note that these are just studies and assumptions.

We won’t know for sure whether TTFB is the only measurement that Google uses to determine a web page’s speed or not.

But if it is, then it’s an inadequate way of determining whether a user will have fast and responsive experience on a given web page.

Related Content

About the Author

Kerry Butters is a technology writer with a background in web design, tech and publishing. Kerry is passionate about all aspects of her job and heads up markITwrite, a digital content agency. Connect with Kerry on Google+.

The post Search Engine Rankings or Your Users? appeared first on Six Revisions.

July 26 2013


How to Quickly Get Started with Git

How to Quickly Get Started with Git

A basic understanding of version control has become a necessity for everyone working with code, no matter if you’re a software developer, a web designer, or even a graphics designer who has to work with developers in a team.

Apart from the have-to-know aspect, however, there are also a number of reasons why you should want to use a version control system (VCS).

Why You Want to Use a Version Control System

Version control makes collaboration in a team easier. Without a version control system, everybody on the team is probably working on the same shared set of files. It’s only a matter of time until someone overwrites someone else’s changes.

Also, a VCS takes care of combining changes from different people into one common version. In version control nomenclature, this is called merging. As a result, working on the same files simultaneously becomes safe and easy.

But even when you’re working on your own, a VCS still has plenty of benefits.

For example, version control makes storing and restoring versions of your project a lot easier.

Without a VCS, you’re probably saving versions of your files and folders using your own adventurous naming scheme, resulting in a horrifically unmanageable number of files and folders with file names like website-relaunch-homepage_2013-10-11_v3_JenniferSmith.html.

With a VCS in place, you only have a single project folder on your disk. All other versions and variants are safely stored in your version control system’s database, neatly described, and ready to be restored any time you want them.

Last but not least, one of the best aspects about using a VCS is that it serves as documentation, and also helps promote the act of documentation.

Since each major change is wrapped in a commit (more about this term later), and each commit is described with a message, you can very easily follow along and understand the incremental changes in a project. This becomes even more useful when problems arise and you have to find out where they originated.

Why You Should Use Git

A ton of version control systems are available on the market, each with their own pros and cons.

However, there are many reasons why you should choose Git.

Git, for one, is arguably the most popular open source version control system out there right now.

Git home page screenshot.

As a decentralized version control system, Git offers:

  • Incredible speed
  • The ability to work offline
  • The advantage of having a complete copy (including the project’s history) on your machine

Another big advantage of Git is its superior branching management. Although other version control systems also know the concept of branches, Git was really built around it, and thus it provides a super-fast and easy branching experience. Once understood, making use of this concept can really take code quality to another level.

Other concepts, like the Staging Area or the Stash, also contribute to making Git a very useful part of your coding tool belt.

When choosing any tool, you should also keep another factor in mind: Popularity. A tool without adoption in the market, without a community, is most often badly documented, can’t be integrated with other systems, and is not sure to survive in the long run.

Git has already arrived in the mainstream. With projects like the Linux kernel, Ruby on Rails, jQuery, and many other major open source projects, as well as big companies (such as Google, Facebook, and Twitter) using it, both of Git’s quality and its longevity are proven.

Install Git

Installing Git has become incredibly easy in recent times (lucky you!).

There are one-click installers for both Mac and Windows.

To follow along with this guide, please install Git on your computer first.

Also, having our free Git cheat sheet handy will be useful before we begin delving into Git.

With the Git cheat sheet, you don’t have to remember all the Git commands by heart, and it will allow you to deviate from this guide and explore Git on your own.

After completing the Git installation, it’s time to fire up your command line.

Two basic configurations should be made before you get started: Your name and your email.

To set your name and email, issue the two following Git commands, but modify them so that you’re using your own name and your own email address:

$ git config --global "Your Name"
$ git config --global "" 

Start Using Git with Your First Repository

There are two ways to start working on a project with version control: cloning an existing repository and creating a new repository.

Cloning an Existing Repository

When you’re getting on board of a project that’s already running with a version control system, you were probably provided with a URL to the project’s repository on a remote server.

What’s a repository? A repository is just a fancy term for a project’s set of files and folders.

For example, check out jQuery’s repository on GitHub:

To get a copy of a project’s repository on your local computer, use the git clone command, like this:

$ git clone

The command above will download the respective repository located at to your computer.

Note: If you don’t have a repository, feel free to clone from the above Git command example and fiddle with the test repository that it contains. You can also browse through open source projects on GitHub, find a repository that’s interesting to you, and then clone it to your computer.

Creating a New Repository

The other possibility to getting started with version control is when you already have an existing project that is currently not under version control yet.

Navigate into the project’s root folder with the command line, and then use the git init command to start versioning this project:

$ git init

Verifying the Presence the .git Folder

You might be wondering where Git stores all the data about your repository.

In both scenarios that I talked about — cloning an existing repository or creating a new repository — you should now have a hidden folder inside your project’s root folder. That folder is your local Git repository, and that folder’s name is .git.

You can verify this by issuing the ls Unix command like this:

ls -la

Knowing that this folder exists is more than enough. You should not touch anything inside this magical folder.

Working on Your Files

When working on your project’s files, you’ll have a great deal of peace of mind, and it will help liberate your creative and experimental thinking.

You don’t have to be fearful any longer about making changes to your files: modify, delete, add, copy, rename, or move them using whatever application you prefer (such as your favorite editor, a file browser, etc.).

Git will allow you to undo changes when necessary, and it won’t affect anyone else working on the same file.

Making Commits

It’s only when you feel you’ve reached a noteworthy state that you have to mind version control again.

At this point, when you have reached a good stage in your work, it’s time to wrap up your changes in a commit.

A commit just means submitting the changes you’ve made to your files, to your repository.

Get an Overview of the Changes You’ve Made

My recommendation and a good practice: As the first step to making a commit, give yourself an overview of what you’ve changed.

You can easily see an overview of your changes with the git status command:

$ git status

After issuing a git status command, Git will list all changes since you last committed, grouped into various categories.

Here’s our working example output after issuing the git status command:

Git output example

You might be unfamiliar with a couple of terms in the working example output above: 

  • Untracked files: Git calls files untracked when they aren’t yet under version control. In most cases, these are simply the new files you’ve created before committing to your repository.
  • Staged/Unstaged files: Just because a file was modified doesn’t mean it’s automatically included in the next commit. To include changes in a commit, you explicitly need to tell Git to include them. This is a major difference that Git has compared to other version control systems; and a major advantage, at the same time, because it allows you to compose a commit very precisely with only related changes. Changes that were marked for the next commit are called staged, while changes that should simply be left as local modifications are called unstaged.

Preparing to Commit

Now is the time to mark the changes you want to wrap up in the next commit. In Git lingo, this process means you’re staging your changes.

How do you stage your changes?

  • Use the git add command for modified and untracked files.
  • Use the git rm to confirm the deletion of a file.
  • In cases where you want to stage all of your changes you can use the git add -A command.

From our working example above, here’s how you would stage the index.html file (which was modified), the new-page.html file (which is untracked), and the two modified files in the css folder:

$ git add index.html new-page.html css/*

Here’s the command confirming that you’d like to delete the error.html file:

$ git rm error.html

If you look at the output of the git status command from our working example above, you’ll see that, additionally, the imprint.html file was modified. I deliberately didn’t stage it with the git add command, because I want to leave it for a later commit.

Review Before the Commit

Again, I suggest taking a look at what git status tells you before finally making the commit.

Here’s the output of our working example now, after I’ve staged the files I want to commit:

The Changes to be committed paragraph informs you about what you just staged.

Make the Commit

To save this set of changes in a commit, you only have to use the git commit command with a good, descriptive message that tells you and others what the commit is about, right after the -m option, like this:

$ git commit -m "Implement the new login box"

Inspecting the Commit History

If you want to see what happened in the project so far, you can get an overview with the git log command:

$ git log

This Git command lists all recorded commits in chronological order.

Your Next Steps to Git Mastery

Congratulations! By now, you’ve already grasped the most important concepts of version control and Git.

To get your Git knowledge to the next level, I suggest the following steps.

Try a Git GUI

A lot of tasks can be performed easier and more comfortably using a desktop client application, let alone not having to memorize all of the commands and parameters.

Windows users might want to have a look at Tortoise Git, while Mac OS users can give Tower a try, the Git desktop client my team and I have created to make Git easier to use.

Git Learning Resources

In recent years, the amount of documentation, tutorials, and articles on Git has increased a ton.

Read these resources to become better at using Git:


Version control has become an integral part in the modern developer’s workflow.

While version control used to be a chore in the past, systems like Git not only makes version control dead-simple, but also provides a lot of other workflow benefits.

Related Content

About the Author

Tobias Günther is CEO and founder of fournova. In 2010, he set out to make Git easier to use: Together with his team, he develops the Git desktop client, Tower for Mac.

The post How to Quickly Get Started with Git appeared first on Six Revisions.

July 19 2013


Fantastic Web Development Courses Available on Tuts+ Premium

Tuts+ Premium courses teach you a single skill from top to bottom, inside out.

Currently, more than 15,000 members are sharpening their skills in web design, web development, Photoshop, vector design, video effects and much more. Our dedicated team adds new content weekly, so there’s always something fresh to sink your teeth into.

Read on to discover just a few of the amazing courses available to help you master web development, and right now you can get 25% off a yearly subscription.

This offer ends on the 22nd of July, act fast to grab a 25% discount!

Web Development Courses

HTML5 Fundamentals


HTML5 is the new buzz term that even your grandparents are somehow familiar with. In step-by-step fashion, we’re going to dig into this new technology, including the various new HTML tags, feature detection and working with a couple of the new JavaScript APIs. Are you ready?

CSS3 Essentials


In this course, we’ll cover the essentials of what you absolutely must know about CSS3. This means we’ll review the basics, like border-radius and box-shadow; but, we’ll also work our way up to more advanced techniques, such as using animations to add flair to your designs.

PHP Fundamentals


So you’ve learned the basics — HTML and CSS — and are now ready to dig into building your own dynamic websites. Congratulations for getting this far; now it’s time for the fun part! In this course, I’ll teach you, from scratch, how to use PHP; we’ll also, naturally, have to learn a bit of MySQL in the process!

Connected to the Backbone


Have you tried to learn Backbone many times, but found that the various tutorials on the web moved too quickly, and didn’t explain the specifics enough? I know I felt that way at one point! Well, my job is to change that. In this course, I’ll painstakingly go over each and every detail. There’s no way you won’t learn it this time. It’s time to improve your JavaScript chops!

Tuts+ Premium Mid-Year Sale Ends Soon

Tuts+ Premium has a huge collection of courses, tutorials, eBooks and guides on hundreds of creative and technical topics. Right now you can get 25% off a yearly subscription – a cumulative saving of $93 on the monthly price!

But this offer ends 12pm on the 22nd of July, 2013 (AEST), so act fast! Become a Tuts+ Premium Member and take your creative and technical skills to a new level.

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
No Soup for you

Don't be the product, buy the product!

YES, I want to SOUP ●UP for ...