Client Pay Portal
 mobile phone graph

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 mobile workerworld 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
 
mobile device stats
 

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.

html 5 logoWhile 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 business person choosinghinder 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:
 
starbucks desktop home page

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:
 
starbucks tablet view
Now, we can see the site looks a bit different in a different viewport. The content has remained the same, but its positioning has been adjusted for optimal viewing on this viewport. This is what has happened:
 
  1. The menu has been positioned below the logo and the sub-text for the menu items has been removed.
  2. The search box has been moved lower down on the page, near the footer.
  3. The main content of the content scroller has been scaled proportionately.
  4. The navigation items for the content scroller have been moved from the right side to the bottom of the content scroller.
  5. The "What's New" section now takes up the full width.
  6. The "Newest Blog Posts" section has been moved below the "What's New" section.

While this looks like a slightly different site, it is in fact the exact same site. By using Responsive Web Design techniques, the content has adapted to an optimal layout for a tablet user.

We have seen desktop and tablet in portrait orientation, now let's take a look at one more viewport: a mobile phone in portrait orientation.
starbucks mobile view
Now the site begins to look even more different than the desktop or the tablet view. The key though, is that it is still optimized for the current device and it is still the same site. Let’s take a look at what has happened in this view:
 
  1. The navigation has been converted to a drop-down menu referenced by the icon in the top right. This is because mobile devices do not have enough screen real estate for traditional navigation; this new functionality has become common practice on small touch devices.
  2. The content scroller has been scaled down proportionately again.
  3. The content scroller navigation items have been converted to just circles instead of full text. This again is because of the limited screen real estate.
  4. The "What's New" section has been converted to single column and the images have been scaled proportionately.
  5. The "Newest Blog Posts" stayed the same as the tablet version.
  6. The links in the footer have been distributed into rows with two columns.

Again, this appears to be a different site, but it isn't. Instead, Responsive Web Design techniques have been implemented to take the exact same content and adapt it to the user's device yet again.

You can see how a single site with one set of content can be optimized across many different devices, thus providing a great user experience to all site visitors no matter their choice of device. The references above are for three specific cases, but the same techniques can be applied to accommodate the viewports of all other devices. This is the power of Responsive Web Design.

To see more examples of responsive websites, visit Media Queries.
 

The Time to Act is Now

Mobile devices are here to stay and adoption is growing at astounding rates. Mobile users are currently playing mobile phone & moneya key role in revenue generation and the impact will only continue to grow. If your business does not have a mobile strategy, you are losing revenue and falling behind the curve.

Responsive Web Design provides an optimal solution to target this audience and requires minimal investment compared to solutions of the past. The benefits of this new strategy are unmistakable and the reluctance to adopt it could have a significant impact on business growth.

Author

Wiz E. Wig, Mascot & Director of Magic
Wiz E. Wig

Director of Magic