Where responsive design fits

Can one site fit all sizes of access device, from smartphone to widescreen TV, in one version and perform well on them all? Scott Payton and Rob Curran square off.

Featured sites

The Boston Globe

Responsive design is a model for creating websites that automatically reconfigure themselves to look good and work well on different devices – including smartphones and tablets as well as desktop computers. The term ‘responsive web design’ was first used by US web developer Ethan Marcotte in an article for the May 2010 edition of A List Apart magazine. Since then the concept has built up a loyal and enthusiastic following in the web design industry and beyond. Advocates of the model argue that it represents the future of web design in an age of proliferating internet-enabled devices. Others are sceptical.

The pros and cons of responsive design have also been a source of lively debate within Bowen Craggs in recent weeks. Below, analyst Scott Payton sets out the reasons for being suspicious of responsive design, while his colleague Rob Curran argues the case for it as a powerful model for the future.

A start not an end in itself

Scott Payton

The most vocal champions of responsive design claim that it is a ‘silver bullet’ for creating a single website that works well on multiple devices. They are wrong.

Is responsive design a useful starting point for building a website for devices of different shapes and sizes? Absolutely. But it is just that: a starting point.

The idea that responsive design will allow web teams to create just one version of a site that will automatically reconfigure itself to provide an aesthetically, functionally and editorially perfect service on smartphones, tablets, internet televisions, desktop PCs and so on is deeply misleading. A website will only be able to do this effectively and appropriately if online teams spend time and money editing content, reconfiguring navigation systems, restructuring user journeys and, on occasion, creating brand new content (for a location-based service for smartphone users, for example) for each type of device.

These parts of the process – and, crucially, the decision-making that underpins them – cannot be automated. Sure, responsive design can automate the delivery of the right content, in the right structure, with the right navigation tools, to the right device. But it cannot automate the creation of the structure, navigation system or content that is appropriate for each device. In other words, responsive design can automatically reconfigure a site according the device being used. But someone needs to decide how that reconfiguration process takes place: whether a new navigation bar appears on a larger screen or whether a particular piece of content disappears on a smaller screen, for instance. Doing this well takes – and will continue to take – a lot of thought, time and effort.

Why the continued need for this non-automatable work? Because the potential requirements of users of diverse devices, and the technological and physical characteristics of the devices themselves, are too different for responsive design to cater for – unless the design parameters and content for each version of the site have been carefully tailored by hand.

A navigation menu that works well on a mouse-driven desktop computer can be almost unusable on a smartphone touch screen – and vice-versa. An ‘about us’ introduction that feels just the right length on a smartphone can seem ridiculously brief on a desktop – and vice versa. Can you use responsive design to create a website that avoids these problems? Yes – but only if you’ve first solved the problems manually by creating device-specific layouts, navigation mechanisms and content.

Responsive design is not a magic formula for creating websites that work well on all devices. It is merely one of the tools that companies can use to deliver a tailored online service to users of different devices – and a much more limited tool than many would have you believe.

Approach with an open mind

Rob Curran

For many companies, responsive design presents a cost effective, versatile and intelligent method of serving the enormous range of devices that make up the mobile web. Why? Because it is simply too time consuming and expensive to design, build and maintain a bespoke site for every shape and size of web-enabled machine, from Apple smartphones, via Android tablets, to the incoming influx of internet TVs. Responsive design offers an elegant, pragmatic solution: one website that adapts to multiple devices.

However, in order to explore the specific benefits of responsive design, it’s important first to dispel two myths.

Myth 1 Responsive design merely takes all the content on your site and squeezes it onto a smaller screen, making it unwieldy to navigate

To be clear, a responsive design approach does not involve putting all of your content in front of the reader – that’s just responsive CSS (cascading style sheets). Responsive design is about putting the right content in users’ hands according to the device they are using. Menus, text, images and columns can all be shifted, changed, resized and, yes, even hidden or removed depending on the screen size. If combined with a well thought out content strategy, this makes for a genuinely usable site at any size. Take a look at The Boston Globe’s responsive site, for example – a content-rich site that is easily navigated at whichever size it is viewed, with no compromises.

Myth 2 All mobile users are ‘on the go’ and should therefore be served with a mobile site containing cut-down, at-a-glance content

Not all users of phones and tablets are out and about, and most want more than bite-sized content. Yes, a significant and growing number of people use smartphones as their only method of using the internet (22 per cent in the UK, 25 per cent in the US, 59 per cent in India, 22 per cent in China,). And numerous surveys reveal that a significant proportion of mobile users browse the web on their phones and tablets in peace, at the office, in the living room or bedroom, on the sofa, often while watching TV. But what was formerly the ‘mobile context’ is becoming increasingly difficult to define. We no longer live in a simple ‘mobile vs. desktop’ world. Just because someone visits your site on a small screen doesn’t mean they won’t want access to all the same things they would see on a slightly larger screen.

Mobile users increasingly demand more than a stripped-down version of what webmasters think they will want to view. Users want a more intelligent solution; one that works perfectly on whichever device they are using, whether it has a 3.5-inch or 52-inch screen. Responsive design allows one site (with one URL) to be truly optimised for all screen sizes.

I don’t envy the company that spends the time and resources to create separate sites to serve perfectly the same range of devices. Responsive design is a cost-effective choice since there is only one site to create and maintain. Rather than spending lots of money on a mobile site(s) that will not suit many devices, why not spend less money giving users a great experience on all devices?

I would encourage any web manager to investigate responsive design. It certainly won’t be the right approach for everyone, but an open mind may discover distinct advantages over the alternatives.

Join the debate at the Web Effectiveness Network LinkedIn group (member access restrictions apply) or add comment through our app (see below).

Versions available in iPhone/iPad and Android

First published on 11 July, 2012