Responsive Web Design: What it is and Why Your Business Needs it

Mobile users are here and they are demanding your attention. If you are not catering to your visitor’s needs, your competitors will; and you will lose business because of that. In this post, I will explain a solution that will help you meet the needs of mobile users without breaking your budget.
 

The Current State of Mobile Browsing

Mobile device usage is growing at an incredibly rapid pace. There are over four billion mobile phones in the world and of those, more than 30% are smart phones. Over 60 million tablets were sold in 2011 and that number is projected to double in 2012. Along with other devices such as e-Readers and portable gaming systems, we have come into an era when users without an Internet-capable mobile device are actually a minority. So what does this mean for businesses?

The concept of a mobile strategy is not a new one. What is new is the rate at which that is changing from something you should do to something you must do. Mobile Internet usage is growing so rapidly that numerous industry reports suggest mobile browser usage will surpass traditional desktop usage by 2014. This means that companies without a mobile website are no longer alienating just a subset of their users; they are alienating the majority of their users.

While most smart phones today do an acceptable job of displaying a desktop optimized site in their browser, they do not offer an optimized user experience. Typically, users will have to pinch and zoom to read content and click on links. Also, some common desktop technologies such as Adobe Flash are widely unsupported. This can quickly become cumbersome and annoying, so much so that users will leave your site to find a competitor who has an optimized mobile experience.
 

Interesting Stats

1. A bad experience on a mobile website leaves mobile web users much less likely to return to, or recommend, a particular website. Nearly half of mobile web users are unlikely to return to a website that they had trouble accessing from their phone, and 57% are unlikely to recommend the site. — Source: Compuware - What Users Want from Mobile
2. 31% of mobile internet users rarely or never use a desktop to browse the internet. — Source: Pew Internet – Cell Internet User 2012
3. There were a total of $241 billion in mobile web transactions in 2011 — Source: Mobile Web Rockstar - 13 Killer Mobile Web Usage Statistics

 

Past Solutions & Issues

The past strategy to this problem was to build a separate site that was optimized for mobile phones. This typically had reduced graphics and only a subset of the content from the desktop website. While this served an immediate need, it is also short-sighted and presents other problems or challenges.

A separate mobile site requires additional development time as well as additional content management time. As a result, it requires significantly more money to build and maintain than a single desktop optimized site. The other challenge is that these sites are typically either optimized for mobile phones or tablets but not both. Again, to optimize for both requires double the additional effort and investment. For many businesses, this cost is too large and the additional management time is something they cannot support, which leaves them with no other choice than to alienate their mobile users and lose potential revenue.
 

The Present Solution & Its Effectiveness

The current and most forward thinking solution to this mobile quandary is Responsive Web Design, a technique that produces a single website leveraging new advancements in HTML5 and CSS3 to adapt its layout based on the viewport size of the browsing device. For older browsers without HTML5 and CSS3 support, JavaScript is used to achieve the same results. This provides a business with a single website that offers optimal user experience across all mobile devices.

While a responsive design takes some additional effort and planning when compared to an exclusively desktop-optimized site, this additional effort is far less than the work required to build separate mobile-optimized sites. Also, since this is a single responsive site, the content only has to be managed in one location, which saves the employee time and effort and allows them to focus on other aspects of the business. Responsive Web Design provides businesses the ability to support mobile users, and do so at a marginal cost increase over a desktop optimized site. The ROI on this solution can be significant.

Responsive Web Design is a solution that not only handles the devices of today, but can also support all the devices of the future including the ones that have not yet been conceptualized. Even if situations arise when drastic new viewport resolutions come out, responsive designs can typically be updated to support these cases with minimal effort. These designs can also be built to handle large screen devices such as Internet-connected televisions.

Because responsive designs are accomplished using primarily CSS and clean, semantic HTML, they do not hinder search engine optimization in any way. In fact, Google and Bing have publicly identified Responsive Web Design as the optimal method for building mobile-optimized websites.

When it comes to usability, responsive design has obvious benefits with its cross-device optimization. However, that alone does not make a site highly usable. To achieve great usability, careful planning backed by research and proven principles must be implemented from the beginning of the project regardless of the choice to implement a responsive design.
 

Example

To illustrate how Responsive Web Design caters to mobile users, let's take a look at the Starbucks website. First, we will look at the traditional desktop version:
 
There's nothing remarkable to discuss here, just a standard desktop site. However, pay attention to the layout as I demonstrate how it responds to different viewport sizes.

Let's take a look at the exact same site as if we were viewing it on a standard tablet in portrait orientation: