Delivering consistency across all touch-points is the mantra of anyone seeking to create a brand experience worth its salt. Of course, in the last year or two we’ve seen an explosion in the number of internet enabled devices. Mobile is predicted to replace the desktop as the most common web browsing device by next year. At the same time, according to w3schools.com, we’re also browsing on much larger screens too. This has led to some interesting new developments in how to serve content consistently across a plethora of platforms.

Our clients have become increasingly alert to the need to service their users on a variety of devices. In particular, we are seeing a lot of demand to provide versions of our sites that are optimised for viewing on smartphones. This means producing two or maybe even three distinct designs: targeting the small, medium and larger screens that our web pages need to look beautiful on. Looking forward, we can foresee the need to support an ever-widening range of devices.

At the same time, our clients don’t necessarily have the budget needed to produce several distinct versions of their websites. Ideally, what they need is a flexible design that adapts itself to suit any context…

What is ‘responsive design’?

Using the magic of CSS3 media queries (or other methods) it is now possible to provide a design which varies in response to the browser viewport size, the platform or the orientation of the device. This means that a single site can offer a range of dramatically different layouts. For example, on a small screen it can present the page content in a single column. On a very large screen it might present additional columns. And images of differing dimensions can be optimised for each screen size to overcome the poor results you would get if you were merely resizing them.

The best way to understand ‘responsive design’ is to look at an example on a large screen and watch how it responds when you resize the browser (see below). Observe the ‘break-points’ in the design which define precise moments where the site pops between stylesheets:

Clients with tight budgets are already (and quite rightly) nervous of ‘agile’ UX processes and the notion of ‘responsive design’ may open up huge issues with regard to experience definition, budget and sign-off. If I can suddenly have two (or more) variants of every page, should I template them all? If I can’t afford to, who makes the functional and creative decisions for the numerous variants? Does it also mean doubling the overheads associated with development, testing and support?

There is no doubt that this approach is complex and therefore more expensive than the traditional approach needed to produce a fixed-width or a fluid-layout site. For one thing, there are no established UX methodologies for documenting it. There are no tools that make it easy to produce wireframes or prototypes for a responsive design. Building and testing the site is going to take longer. Whichever way you look at it, more effort will be required!

Does it fit?

However, if it is accepted that a mobile and a desktop version must be produced, then it is already clear that extra effort will be needed. ‘Responsive design’ offers a way to reduce the extra cost by targeting a small set of distinct screen-widths instead of producing a separate version of the site tailored for every current and future device.

The ‘responsive design’ approach is still in its infancy (the term was born in May 2010 with this post). Its technologies and techniques are not yet employed by many major brands (The Boston Globe was the biggest brand we could find at the date of writing to do so). See also a showcase of sites here).

Nevertheless an exciting opportunity is emerging here. CSS3 is now widely supported in all major browsers (particularly on mobile platforms), and there are also mature javascript libraries which can be used to plug the hole in the non-supporting browsers (e.g. IE8 and lower). As devices continue to proliferate and mobile usage increases, we need to move beyond the static page design, whilst remaining cost-effective, extensible and future-proof. ‘Responsive design’ provides a genuinely exciting opportunity in this regard and as such we can expect to see a lot more it.