cross-screen marketing solutions

Responding to responsive design and why it fails for mobile

Over-simply put; responsive web design takes one design and responds to varying screen sizes to present the same content across multiple platforms in a layout suited to individual devices. The appeal is obvious; one site that responds to whatever screen size is presented and reshuffles content, size and layout based on this. In short, brands can finally overcome a complex problem with a simple fix, one site and one set of content for all their consumers regardless of which device they are visiting with. Or can they?

Yes, you can deliver the entire reshuffled, resized web site to mobile devices and it is indeed this adaptive developmental approach that enables our own platform to produce and reproduce content to all mobile devices. Our developers are web developers first but with years of mobile experience layered on the top.  It is this experience that has taught us something very valuable; To be responsive and adaptive is part of life, part of developing, part of the reason our mobile platform is so successful, but it is important to recognise the stop point. The needs, size and location of a 21 inch shared desktop user are vastly different to the needs, size, mobility and personal elements of a mobile consumer. Mobile Web is quite simply not the same channel as web and shoehorning a desktop site into a mobile screen is not optimal at all.

Mobile is its own channel with its own needs, users, devices, design and usability issues and it is the failure to recognise this starting point that means responsive web fails for mobile.

Five errors of responsive design for mobile

Same Users, Same Web.  To presume the same activity is being carried out in the same manner across web and mobile is where the first error of responsive web design occurs. We use the web differently based on time, location and device to hand and these differences affect our motivation and needs from the web, which content we require and how we interact with a website.  Dumping an entire desktop site into a mobile screen undermines the power of mobile.

Designing for Devices not Users.
Adapting content based entirely on screen size not for the users needs is another responsive fail.  Using the screen size to present content is useful to a point but overlooks usability issues such as the absence of hover state on mobile, the difference in size of a mouse pointer and a thumb for click-able areas, the need to “tap” as opposed to “click” and how each of these issues impacts mobile design.

Confusing Content and Context. The analogy that content is “liquid” and can be poured into any size container is attractive, yet this requires all content to be equal, regardless of context, and from this blanket approach arise a further slew of usability issues for mobile users.  An example being, when on a desktop site location is not high priority.  When on mobile searching for the same business is higher priority.

All for one and one for all. The fourth fail is to push all desktop content through to the mobile user. Stuffing huge amounts of content and assets through a small channel leaves the end user frustrated waiting for a site to load.  Altering the aspect ratio of an image does not alter the size, so a 2mb image is still being given to the mobile user.  This is detrimental for the mobile user and the brand presenting a mobile website as we know users will wait between 3 and 10 seconds for a site to load before moving elsewhere.

A mobile needle in a haystack.  A less investigated issue is the impact responsive web has on Search Engine Optimisation.   I’ve already raised that mobile web users are not looking for the same content as desktop users therefore it is likely their search terms will reflect this differing need.  This could explain why most of the higher ranking mobile sites in mobile search are designed specifically for mobile as they’ve taken in to account the mobile consumers mind set, needs and unique mobile-only prerequisites such as localisation.

Recognising the strengths and unique capabilities of each channel ensures you design, develop and deliver the optimum experience to end-users.  When creating a movie from a book you don’t hand each of the actors the book and ask them to read aloud from it.   You take what is beautiful and unique about TV and adapt the storytelling to these strengths.

Instagram CEO Kevin Systrom recently summarised it as “You can’t take a desktop experience and shove it into a 3-by-4-in screen. It’s a very different behavior pattern…People interact with their phones very differently than they do with their PCs and…when you design from the ground up with mobile in mind, you create a very different product…”

Responsive web design most certainly has it’s place and will continue to evolve to deliver greater web experiences especially across desktop devices but assuming screen size is the only differentiator between mobile, tablet and pc as a basic fundamental is incorrect and not a strong foundation to develop and build a lasting mobile strategy from.

If you want a great website find a great web agency, but if you want a mobile website find a great mobile web agency.

4 Responses

  1. Interesting article but I’m a little unclear on a couple of bits, probably just my misunderstanding but was wondering if you could give your thoughts.

    1. I’m not really sure what the first google graph is meant to show, as far as I can see it shows users doing the same thing but on different devices at different times. That doesn’t seem to relate specifically to responsive design in any negative way.

    2. You mention a couple of times “dumping desktop content into a mobile”. That’s just poor design and content strategy, not a fault of responsive design specifically.


    I’ve probably just misread those couple of bits but things like the Instagram CEO quote highlight an approach (squish desktop into mobile) that is entirely at odds with the principles of responsive/mobile first design and could therefore lead to confusion?



  2. I certainly agree about the server side stuff, there’s very little beyond @lukew’s “RESS” suggestion but I suspect that the big savings in future will be done server side once we’ve got more reliable detection and delivery systems. We’re giving it a lot of thought @offroadcode for projects but nothing concrete and reliable is coming together right now.

    I view RWD very much as an 80/20 tool that is by no means a solution to everything but will give improved results to most users and that’s a good thing. Mobile first is a wonderful philosophy to design and develop by and it’s vital to note it’s nowhere near the same thing as desktop into small screens which some are doing. It’s very much a ground up thing.



  3. StephenAust says:

    Thank you for helping clarify some things for me. Sometimes when I read this responsive web design stuff it reads like its the only choice for mobile but I for one cant afford to redo my entire web site responsively and am not sure I want to compromise on everything web and everything mobile, leaving noone happy, in order to do so. I wanted to diversify into mobile as do many of my clients so for me starting again with a mobile specific site is the answer and until I read this I’d not considered the SEO stuff, thanks Stephen

  4. [...] Wapple Blog pekar på att användningen på dator och mobilt skiljer sig väldigt mycket åt då användarens förutsättningar är så olika. Med en smartphone har du till exempel en GPS, vilket gör att du kan använda tjänster som bygger på geografisk placering. Den funktionen finns inte på en vanlig dator. Om du designar så att allt ska passa alla medier, så utnyttjar du inte de olika mediernas styrkor som mobilens GPS, kamera och NFC eller datorns stora skärm och mus. [...]