How and Why Responsive Design Can Go Wrong

Stephan Jukic

The mobile revolution is taking off and the number of internet users who are accessing web pages from mobile devices of different types is higher than ever, and growing almost daily.

For you, this means that your website has to be highly accessible to mobile users unless you want to miss out on a large and possibly crucial segment of your target market.

This need for a mobile friendly design applies even more if you’re operating in certain cultural or tech friendly niches whose readers are much more likely to be surfing your content from mobile screens

And by many commonly accepted practices for mobile design integration, your best bet for creating a mobile site that works is through the use of responsive design techniques, At least according to much of the latest conventional wisdom.

On the surface, this seems to make sense: Responsive design is a methodology for page layout that allows the various elements on your site pages to reshape and resize themselves based on the screen size of the device they’re being viewed from. Under the right circumstances, responsive design can look elegant, beautiful and at the same time impart enormous functionality to almost any website.

But pay attention to those key words there: “under the right circumstances”.

Because while responsive design can be beautiful and very useful, it can also lead to some serious web design failures under the wrong sorts of circumstances.

Here are a few of them, watch out for these and any others that would lead to the same logical result.

Sometimes it’s just unnecessary

Building and maintaining a fully functional desktop website is usually much harder than doing the same for its mobile counterpart. Thus, if you’ve already got a pretty, fully functional desktop site up and running, you probably won’t want to tear it all down and begin again for the same of the responsive mobile experience.

And the point here is that you usually don’t have to. Your site works well for the PC/laptop user crowd and is probably fine for most tablets since their screens are usually quite large. Thus, you only really need to cover usability for your smart phone viewing visitors and for this you almost certainly don’t need a whole new responsive design rebuild.

Instead, you can get away with creating a mobile friendly secondary version of your regular site and programming your pages to redirect its way any time someone accesses your content from a smart phone. Not only is this much cheaper and simpler, it also has several other potential advantages.

Speed is crucial and responsive design might not have It

Mobile users expect practically the same levels of site load speed as any conventional desktop user and disappointing them can lead to extremely high bounce rates.

Considering the fact that mobile browsing often depends on weaker connectivity and lighter processing resources than what you’d get with a laptop/desktop browser, you had better create a mobile site that’s feather light and loads as quickly as possible — ideally, in less than three seconds.

This is where responsive design can really fail and burn you badly. Evidence shows that an overwhelming percentage of responsive site platforms tend to weigh just as much as their desktop counterparts despite their “responsive” reformatting ability. This means that, while they’re adaptable to a mobile experience, they’re not at all optimized for it. And optimizing your responsive design can cost quite a bit of time and money.

Going with a lean mobile design eliminates the above problem easily and quickly.

Trying to fit too much in is pointless

Chances are that not all the information and displays on your website are equally important or necessary for most of your audience. This applies especially to your mobile viewers.

They’re coming to your pages for the sake of getting their hands on specific content such as directions, schedules, prices etc, and they don’t need to be wowed by clutter or too many browsing options.

Where responsive design often fails is in its attempt to squeeze most of what a desktop site contains into a tiny mobile format. You don’t need this. You’re likely better off going for a much leaner more mobile optimized layout that gives readers a site with essential, core information in a quick loading format.

The bottom line is that there’s more to the mobile experience than simply scaling down intelligently. The process should also involve a certain amount of selective culling of elements and even design changes that are better for mobile optimization, as this research from Venturebeat shows.

While this can be done with responsive design through careful planning, the end compromise might limit too much both your desktop page layout and your “mobile friendly” layout.

Advertising failures

One additional, possibly minor, possibly major (depending on your main revenue model) potential failure of responsive design is the resizing of advertisements that is going to happen as your page reshapes to a different screen.

Some advertisers are paying you for specific ad sizes and to see what they put money down on reshaped into a smaller mess might not make them happy.

Lack of user choice

Finally, we get down to a single basic failure of responsive design that can leave many of your tablet loving users annoyed: people like choice and they normally hate having their experience dictated or constrained by minor technological quirks that they can’t control.

With responsive design, this can become problematic as your site automatically resizes for different screen size when a user who wants to see it in a specific format tries to load a page. Some users, especially those on tablets, might not necessarily want to use your responsive mobile format and being forced into it might annoy them.

A couple of final words

None of the above is to say that responsive design is terrible or that you should absolutely go for more conventional mobile site formats.

No, instead, simply think about what best optimizes for your website needs and go from there, whether it leads you to choosing responsive design or certain other ideas.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Andrea

    Speed is not a responsive issue…if one is good at Web Performance the Responsive version should have the same load time of the desktop one…if not better.

    • Anonymous

      If not better? Keeping it simple, the basis of responsive web design is “@media”. No matter how you look at it, the desktop PC has to download the extra CSS it’s never going to use (unless you’re playing around and re-sizing the window), and vice-versa, the mobile device has to download the extra css to render the full website which it never gets to see. Just do a view source on the sitepoint website, open the css file, and look for max-width.

      • Andrea

        This is not true ChristosHrouisis.
        If you design in the correct way you don’t have any extra overhead for the media part and you can render the page in less than one second…on Mobile and on Desktop.
        The problem is in bad FEO and not in RWD itself.

        • Anonymous

          This is not a design issue but a context issue. Design is more than just “graphic”. In certain cases, you want to give a more imersive experience on desktop that need a lot of resources. In this case, a dedicated mobile site designed for this context (performance + experience) is a more effective solution.

          • Mike

            Nowadays users want the same experience/content across devices, since we all switch between laptops, tablets and mobiles all the time. Different content is just a big no no. Also, when I share a page on social media, my friends must be able to land on the same URL on any device. Special content should never be an issue: A big form can be replaced by a simple “call now” button – as you are holding a phone already, etc. Google also recommends responsive sites, as it’s an SEO issue to have several versions.

  • Anonymous

    In response to lack of user’s choice I feel like that is more of a concern when designing a completely separate mobile experience as opposed to just have responsive design. In my experience it’s much more annoying to arrive automatically at a “mobile version” of a site that doesn’t have the same links/content as the desktop site than to arrive on the site with a different layout.

  • Anonymous

    I think that there is a good deal of pre planning and strategy both on the creative/ux and business side before anyone puts a smidgen of work into it. Sometimes the analytics and traffic just don’t justify the cost/manpower to do a redesign (at that point) and sometimes they do. I do think that making a mobile dedicated site is a good band-aid in certain situations, but i think you have to potentially be aware that you’re going on a path where you are going to have forked content which potentially adds to the amount of upkeep and curating you might end up having to do as a long term plan, which at times can add up to how much effort it would have taken to just refurbish the whole thing.

  • Stephanie Boucher

    I agree with Custom TaylorWeb, I don’t like arriving on “pared-down” versions of a full site that don’t have the information I need.

  • Larry O,Brien

    From a customer experience (not user experience) perspective we should always give customers what they want, choice and control. I believe modern sites should have a responsive design so as a solution how about offering the customer a standard button or shortcut to allow them switch between both displays. If I am on a PC I can then view what a page would look like on a pad or smart device and likewise if I need to see the full content from my phone I have the option to switch views. A little extra coding but hey..!

  • Inder Singh

    I have facing many times page loading in my mobile sites. What is the main reason behind this., can i use display: “none” property for mobile designs ?

  • cdaniels@portphillip.vic.gov.au

    Another tip from the customer point of view, I don’t mind if a advert pops up and it’s huge. Now I know why. “Some advertisers are paying you for specific ad sizes and to see what they put money down on reshaped into a smaller mess might not make them happy.” But I do mind when the dismiss function doesn’t work. So developers test that. Because when I can’t close an ad I don’t want to see, I often don’t go back to the site, even if its content is inticing.

  • Rachel Reveley

    I agree with Andrea, we converted our large ecommerce site to responsive, the responsive version is slightly larger than our format fixed width layout but we are still a B grade on YSlow. There’s no need for bloat.

  • Steve H

    @Inder Singh: No, for none still loads the content, whether image, JS or whatever; it just doesn’t display it.