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.