Why Responsive Web Design is Not the Holy Grail for Mobile

Responsive Design, Responsive Web Design, Responsive Mobile Website

Overview

It’s probably safe to say that if you’ve found this article, you are likely in the process of researching the best way to take your website mobile. Let me help out by summarizing the top three choices available:

1. Mobile-Specific Website: A separate website/URL with separate content
2. Transcoded Website: A separate website/URL with content transcoded (copied) from your main site
3. Responsive Website: A single website/URL that automatically adjusts to fit the user’s screen resolution

We will not be going into the pros and cons of each approach in this article – you can find all of that in our free guide, “How to Build a Mobile Website”. This article will be focused on why, for most marketers, Option #3 (aka responsive design) is not really the Holy Grail or silver bullet for mobile that some are saying it is. In most cases, fitting your entire website, along with all of its content and images, into the smaller screen of a mobile device is not the right option.

For the purpose of this article, consider mobile CSS stylesheets, like those found in plugins for WordPress and other CMS platforms, in the same category as responsive design. They can present a different layout, but not different content to mobile users.

Let’s get into it, shall we?

When is a Separate Mobile Website needed?

I admit, on the surface, the idea of one website for all screen resolutions is an attractive one, however it’s simply not enough for most websites with the main purpose of marketing a product or service. Perhaps someday we will realize that dream, but for now it falls a bit short when it comes to mobile. This is an area of heated debate, but as mobile SEO Bryson Meunier pointed out in a recent article on the topic, the founder of the responsive design movement himself, Ethan Marcotte, stated in his book titled Responsive Design that, “most importantly, responsive web design isn’t intended to serve as a replacement for mobile web sites.”

For those websites with a main goal of marketing a product or service, the best option is to create a separate mobile website with content uniquely suited to mobile users. The exception to this rule is websites that are purely content sites, like blogs and online publications. For these websites, responsive is usually the better option. An example is the Boston Globe’s responsive website.

Mobile is a Behavior

To understand why you need to create a separate experience for your mobile user, you first need to understand that mobile is not just a smaller screen resolution; mobile is a behavior. Think about it for a second: people do not use their smartphones the same way they use a laptop, desktop, or tablet. The size of their screen is not the only thing that defines them. They are usually on-the-go or distracted by another form of media (sitting in front of the TV). They may be impatient or looking for specific pages, and if your site does not load within 3 seconds 60% of them will simply leave and never come back (Compuware, “What Users Want from Mobile,” 2011).

Consider the infographic below; we’ve provided a side-by-side comparison using one of our customers, Beth Israel Deaconess Medical Center, as an example. They wanted a streamlined mobile experience for their hospital’s patients and visitors. On the left is an example of how one page of their website would have looked if they had adopted a responsive design, and on the right is that same page on their mobile-optimized site. Not only does the mobile-optimized version load faster, the content is easier to digest and offers call-to-action links at the very top of the page.

Responsive Design vs Mobile Website Infographic

To have a truly optimized experience, you need to change the content of your site to meet the needs of mobile users, not just the structure and design. This is exactly where responsive falls short. Responsive design simply rearranges the content of your site to fit on a mobile screen. Responsive only solves one half of the mobile equation, it does not optimize for the behavior, it only optimizes for the resolution.

Separate Mobile Website Pros/Cons

Some people who are opposed to the idea of a separate mobile website point out that it’s not efficient to update content in multiple locations. However, when you sit back and think about it, if you’re running a marketing website, there are probably only a few pages that you update regularly, such as your blog, news page, calendar, or something similar. The rest of your content changes very infrequently.

At Bluetrain Mobile we have solved this problem by offering a platform that can pull in content from your main website, so you don’t need to worry about updating both websites with frequently changing content. This is really a hybrid approach that includes the pros of maintaining a separate mobile website with fewer of the cons. If you’re not using a platform like Bluetrain for your mobile website, you can achieve something similar by setting up XML feeds for specific content into your mobile website, or by selectively transcoding certain pages.

Conclusion

Responsive design is great, and if you’re planning a website redesign you should certainly consider it. However, if your main goal is mobile optimization, then responsive is simply not enough. Unless your website is just a blog or an online publication, you really should create a separate mobile website. Ultimately, you should ask yourself if the behavior of your mobile users will be different than those of your desktop users. If you know it will not, as is the case with blogs and online newspapers, then responsive may be your Holy Grail after all. For the rest of us, a separate mobile website is the best option.