The increasing ubiquity of smartphones and tablets has lead to exponential grown in the percentage of visitors accessing the web from mobile devices over the last few years.  In a study of the mobile statistics of Brick Factory clients we found that site visits from tablets and smartphones has doubled every year the last three years.  20% of the visitors to our client websites now come from smartphones and tablets.

Given these figures, the question is no longer “Should I optimize for mobile?” but “How should I optimize for mobile?”.

Traditionally, there have been two main ways to make your website mobile-friendly:

1. You can create a mobile-specific template that is served to visitors who access your site from smartphones and/or tablets.  Essentially you are designing one site aimed at desktop/laptop users and another aimed at smartphone users.
2. You can create a responsive design that automatically resizes the content based on the user’s screen size. The result is a website that is optimized for all devices, from desktops to iPads to iPhones. If you visit the website we designed for No Labels and resize your browser you will see the concept in action.

A few years ago option 1 was the most popular approach.  The iPhone was the dominant smartphone for web browsing and the iPad hadn’t really taken off yet, so creating a mobile template tailored for the iPhone made pretty good sense.

While mobile-specific themes are still a popular approach in some sectors, such as the news industry, I think it is safe to say that a consensus has formed around responsive design the last few years.  I think a big part of the reason for the move towards responsive design is the increase in the number of screen sizes you have to deal with now.  Check out this finding from our mobile study:

The number of screen resolutions used to access our average client website doubled from 2012 to 2013.

There are a variety of reasons for the increase, beyond the simple fact that more people are using smartphones and tablets.Android has gained a ton of market share the last few years, and Android-based phones and tablets come in a variety of screen resolutions.   Desktop monitors are getting bigger and bigger – we are now seeing screen sizes as large as 2909*1606. There is more variance in the screen sizes for laptops then there used to be.

The diversity of screen sizes has made building websites much more complicated than it was a few years ago.  Two or three years ago you could design your site for a typical desktop size (say 1024*768) and create a specific theme for mobile.  And you were done.

Now?  You’ve got to account for visitors coming from screens both much smaller and larger than that 1024*768 target.  A site designed for 1024*768 may not look so good on a 1600*900 screen, much less one that is 2909*1606 or 320*568.

The increase in the diversity screen sizes has made creating device-specific themes impractical.  There are just too many resolutions to deal with now to create a specific theme aimed at a few target screen sizes. Responsive design is the most efficient way to deal with the increasing diversity with which people are accessing the web.