Bluetrain Mobile | Mobile Marketing Engine | Mobile CMS

In Transit Blog


Why Responsive Web Design is Not the Holy Grail for Mobile

by Tim Macchi

21
May
2012

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.

 

download-whitepaper
  • Pingback: Designing for Mobile: Optimize the Words « The Virtualist

  • Pingback: Should I Create a Tablet Version of My Website? | In Transit

  • Pingback: Choosing Fonts for Your Responsive Website | In Transit

  • http://www.smallmarketingcompany.com/ ijaz

    Good, Thanks for sharing. I worked before with duda mobile and
    squarespace but both of them are monthly subscription based and i want
    to do it by myself to control the screens and making mysite mobile
    friendly. Thanks now i can try to make it by myself.

  • Alice Ralph

    Completely agree that it depends on the visitors requirements. We have built sites for festivals/venues and found that if somebody is checking on their mobile, the chances are that they are trying to find some information “on the move” – for example, maybe the location of your venue or the running times of your festival. Prioritising this information in mobile over something that they are less likely to be doing – eg. buying tickets – is very important. That’s not to say you should cut out information from your mobile site, but maybe hide it on a separate page rather than presenting it on the homepage.

  • Pingback: Mobile SEO, The 'First Screen' Myth & Responsive Design: This Week in Mobile | Mobile Marketing Blog | In Transit - Bluetrain Mobile

  • Phil Gapp

    I like this article, but want to point out the distinction between ‘should I choose a responsive site or a mobile site’… the best choice is both! It is true that a person or organization should deliver a different site for mobile vs fullscreen displays, however responsive or percentage design delivers a better experience throughout varied browsers, devices and screen sizes.

    You can deliver content dynamically based on device capabilities, and have a responsive mobile design for tablets/phones – and then another for laptops/desktops/larger touch devices. This is how we do things :)

    @galalcticedge:twitter 

  • Pingback: 6 Key Considerations For Preparing A B2B Mobile Strategy

  • Juan

    Designing for mobile, as someone here said, depends on the project. Diferent solutions for many projects. But, ultimately thinking about the user experience, and making them do their part, since they were the ones who’s choice was to use a particular device, can we just ask them directly when they first go to a website and remember their choice? “website says, I see you’re on a Samsung XYZ, do you want the full version or a version for your device? And remember your choice?

  • http://twitter.com/mobilejson Jason Haag
    • http://mikemai.net/ Mike Mai

      Exactly! There’s room for both solutions. One is not better than the other. It all depends on your needs.

  • Chris Saint-Amant

    I’m a bit torn on this post.  I think the goal was to take a more nuanced view of how to implement solutions for mobile, which I appreciate.  There is too much focus these days on responsive design as a pure technology solution, and not enough time spent discussing the *process* of designing responsively.  I agree that responsive design (as a technology solution) is not the holy grail.  It can (and often should) be paired with a more pragmatic server-side adaptation approach.

    However, there are some statements in here that I don’t agree with:

    * Mobile device != mobile user — just because I’m on a smartphone, doesn’t mean I’m “mobile” and distracted.  I could be on an hour long commute, or sitting on the couch at home and be very focused.  To quote Josh Clark – “don’t confuse context with intent.”

    * Separate web site URLs are painful — unless you have a really solid strategy for mapping between the two.  If I’m looking at content about the CardioVascular Institute on my phone, and I send / post the link, will someone on a desktop see the mobile version?  If it’s conceptually the same entity, it should have a single canonical URL.

    * In the infographic example, if the “full” site page has too much content to work “responsively”, then it probably makes sense to re-think that content for all users (http://www.netmagazine.com/opinions/separate-mobile-website-no-forking-way). And if there are too many elements being loaded that slow down the experience, you could take the same content and push it through a different template on the server-side.

    • http://mikemai.net/ Mike Mai

      Hi Chris, you brought up some good points. As stated in my other comment, RWD doesn’t include server side components, what you are describing is RESS (http://www.lukew.com/ff/entry.asp?1392 ).

      • Chris Saint-Amant

        That’s where I disagree.  I do not think we should be dogmatic about responsive design, in saying that it is only responsive design if you are doing 100% client-side adaptation.  The really interesting part of responsive design has nothing to do with the technology used, and everything do with the *design* process.

        The folks at Yiibu talk about “pragmatic responsive design” (http://www.slideshare.net/yiibu/pragmatic-responsive-design) and encourage developers to do a cost/benefit analysis of every technique. A perfect example is the debate that is going on about responsive images.  If you try to solve this with a 100% client-side solution, it is fraught with risk.  However, it is very straightforward to do this with a combination of client AND server technologies.

        Do users know/care if a site is implemented using client-side or server-side solutions, or a combination of both?  The only way you can tell is if you resize your browser.  But that’s not the scenario we’re designing/building for.  The goal is to deliver your core product/service/content/functionality across multiple devices.  

  • http://www.designisphilosophy.com Morten Rand-Hendriksen

    I agree that responsive design is not always the right choice for mobile sites. However, responsive design is something that should be implemented regardless, because not everyone uses full-width browser windows any more, and even fewer are going to use them once Windows 8 comes out. Websites need to conform to the new reality of wide screen monitors where people separate their screens into multiple side-by-side windows that are narrower than expected. This is a purpose responsive design is fit to solve.

    I would also argue that a mobile-specific website is in fact “responsive design” as well. Though the term as originally coined was meant to refer to sites that realign and reformat to fit screen sizes, it should instead be used to refer to sites that conform to whatever platform, screen size or device used to access those sites.

    Finally, though the regular method of employing responsive design is media queries and simple CSS restructuring, it is not the final word in the matter. It is not too complicated to use conditional tags and code to completely reformat the markup for mobile devices. That way the issue of loading in tons of large images, extraneous content and extra bulk can be solved and you end up with a lean and mean mobile experience that is both responsive and mobile-specific without resorting to an entirely separate solution.

    • http://twitter.com/TimMacc Tim Macchi

      All good points Morten, thanks for your comment. The main point of this post is responsive (in the way that MOST people are implementing it) is not always enough when it comes to the optimal mobile experience. 

      • http://www.designisphilosophy.com Morten Rand-Hendriksen

        My thoughts exactly. Which is why I’m trying to get people to think beyond media queries.

    • http://mikemai.net/ Mike Mai

      Hi Morten. Your first point is really a WILD assumption. There is a good amount of users who enjoy using web browsers in full screen mode majority of the time. Especially with the Lion OS (or higher), a user can switch between apps by swiping with a few fingers on the trackpad. Keep in mind there is also a good amount of users who use multiple monitors.

      Your other points are valid, except if you are serving a completely different markup based on device type, aren’t you essentially creating a separate mobile website? Or maybe you are referring to the method of RESS, which is Responsive Design + Server Side Components (http://www.lukew.com/ff/entry.asp?1392 ).

      By itself, “responsive web design is a combination of fluid grids and images with media queries to change layout based on the size of a device viewport. It uses feature detection (mostly on the client) to determine available device capabilities and adapt accordingly.” RWD does not include server side optimizations.

      • http://www.designisphilosophy.com Morten Rand-Hendriksen

        It’s not as “wild” as you think Mike. I was of your opinion until I started a) looking at how people were using the web on laptops and computers with large wide-screen monitors and b) saw the new side-by-side features in Windows 8 that will be heavily used.

        As for the term discussion, I think the term “Responsive Web Design” as originally defined is far too restrictive. It is easy to for example write a small PHP script on a page that detects the current user device (iPhone, Android phone, Windows Phone etc) and then serves up different content through conditions. Yes, it’s server side, but it is not heavy handed. 

        In my humble opinion the term “Responsive Web Design” should be redefined as “a web experience that responds to the screen and / or device used to access the site and provides an appropriate and functional user experience.” But that’s just me.

        • http://mikemai.net/ Mike Mai

          Hi Morten. We’ll have to agree to disagree on your first point. I do not dismiss the fact that some people behave the way you described, but I can’t agree that is the majority or “new reality” as you put it, especially when devices are moving to a touch-screen future. But neither of us really have enough data or test cases to know how people utilize their browser windows at the moment.

          The rest of your points are well taken, I think RESS is another great solution for mobile.

        • http://twitter.com/TimMacc Tim Macchi

          Morten, I doubt the “official” definition will ever encompass separate mobile websites. However, it seems that any website that responds to screen size appropriately should be considered responsive (by definition). So I see your logic there.

  • http://twitter.com/nattaylor Nat Taylor

    I think it boils down to user experience with two main factors load time vs quality of content, and I think load time is king.  Mobile users are ADD and every second that they wait increases drop off.  From personal experience, I find myself thinking “Gahhhh, load!” far more often than “Ughhh, I really want all the content available on the online site.”

    • http://disqus.com/ekbharat/ One Nation

      Mobile site you mean, not ‘the online site’. All sites would be online, i suppose.

      If one uses a web designer to create websites, its fine, but as soon as you step into the realm of “self served” users using platforms like wix, moonfruit, yola etc things go for a toss.

      I do think there is benefit for small businesses in owning responsive websites. For one, they are not tech savvy enough to maintain one website, let alone manage two – and secondly, its is very hard to maintain the brand experience on a mobile website, unless, you are a good designer yourself.

  • Simon


    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.”

    This is the problem with people who truly don’t understand the principals behind “mobile first” and “responsive design”. It is not just about rearranging content to fit on a mobile screen. It’s about creating an experience that’s available to all users regardless of device and about not punishing a user by excluding content simply because someone is on a smartphone. Responsive design does not stop at media queries and rearranging items on a page. It’s about making thoughtful decisions about how we can give all users an equal experience regardless of device. IT’s about recognizing the fact that more and more people are doing all of their web browsing via mobile. Optimization is an integral part of this as well. Responsive does not dismiss this. In fact, most of the conversation is precisely around this topic. Ideas such as the proposed picture tag and ways to detect bandwidth set out to answer these exact questions.  Besides, mobile specific sites, or “m dot” sites rely on making a lot of assumptions that may or may not be true. Using things such as user agents to do device detection are becoming more unreliable as more devices come onto the scene and as more and more devices allow you to modify your user agent (functionality introduced because mobile users WANT the full website experience). Not to mention the disconnect with m dot sites when a google search is done on a mobile phone or a link to a site is sent via an email. I can’t tell you how many times I clicked on a link sent to me in an email on my phone only to be redirected to an m dot site that didn’t contain the content I was looking for. I’m not saying that RWD is the answer to all problems, and I agree that there are cases when a specific mobile version is the right answer,  but you should take the time to understand the full discussion before making such a shallow argument against it. 

    • http://twitter.com/TimMacc Tim Macchi

      Simon, thanks for your thoughtful comment. To be clear, my goal was not to argue against RWD in all use cases; I am personally excited about its potential. I appreciate the passion, where I disagree with you is the idea of providing equal experience to all users. It really depends on the website and its users. Providing a blanket statement that all users should have the same experience on all devices for all websites is as dangerous as saying all websites should have separate mobile versions (which I never said). I believe, like anything else in life, it’s simply not black and white, a more pragmatic approach is necessary. 

      I think the best case scenario for some is to have a responsive site AND a separate mobile site. The two are not mutually exclusive, which is why I chose my words carefully in the article by saying responsive design alone is not enough for some websites.

      As far as the issue with dead end links in e-mails and social media, this is a real issue that exists with separate mobile sites. As a best practice, any pages without a mobile equivalent should be excluded from the redirect to prevent this issue (we allow this in the Bluetrain CMS). In this case, it would help to have a responsive site in addition to a separate mobile website so these pages would be formatted for the screen size.

  • http://twitter.com/AppliedInfoSys Robert Wieseneck

    Good points, but I don’t think a responsive design like the one in your example is the way to go. You should design a responsive design for “mobile first”. Doing it that way the mobile user gets what is important, but since 50% of surfing is done on mobile devices, the full content is available if the user wants to see it.

    • http://twitter.com/TimMacc Tim Macchi

      Good point Robert. Most responsive sites are not built mobile first though. Also, mobile first is not practical in every situation.

  • Anonymous

    Mobile Website company surprisingly against not using mobile only websites.

    If you had taken to time to read around – there are plenty, PLENTY, of use cases of responsive image selection via Javascript that chop and change the image sizes and quantity of downloads.

    Additionally – further optimisation can be made for responsive sites using things like Lazy load where content isn’t actually downloaded until the user scrolls near it – further reducing load times and file sizes.

    Additionally – why should mobile users not get the full experience and have their hands shacked by m dots that more often than not restrict the functionality and make too many assumptions about the user and the experience they’re looking for.

    Responsive Design is and will continue to be a method that is hugely important moving forward and to design purely for fixed sizes and direct based on user device is insanity due to the variance and pace of new devices and screen sizes.

    • http://mikemai.net/ Mike Mai

      I do lots of responsive design myself so I do not dismiss the fact that you can do lots of optimization for responsive websites, but we have to agree that the optimization is not perfect at the moment. If you are going to argue for optimization for responsive websites against stand-alone mobile websites, you are not going to win. One has to realize that file size isn’t the only thing that effects mobile performance, another big factor is the total number of resources a website loads.

      For example, let’s say you created a responsive website, and you optimized it so well that you got the total size down to smaller or equal to the stand-alone mobile website I have created. Here’s the catch though, your responsive website loads 3 javascripts, my stand-alone mobile website loads only 1. Which will load faster on a 3G network? The answer is mine. Why? Because on mobile, resources are loaded one by one, instead of simultaneously. As you have said, you can use image selection, lazy load, etc. to optimize performance for responsive websites, but at the same time, you are adding more javascripts for the mobile browser to handle, and that’s not always a good trade off.

      Responsive design is awesome, but it’s not always the answer. Figure out your needs and choose the solution that makes most sense for you or your business.

    • http://mikemai.net/ Mike Mai

      I also want to add something Luke W had said in one of his articles:

      “Responsive Web design is for you IF:
      - If you want layout adjustments across devices.
      - You can live without complete optimization for specific devices.
      - You don’t have access to server-side solutions.
      - You really don’t trust device detection.”

      http://www.lukew.com/ff/entry.asp?1509


Bluetrain Mobile

Everything Mobile. Anything Possible.