Responsive web design

Responsive web design is the latest trend to set the web design/ development world ablaze with the usual mix of responses ranging from "this is universe-changing" to "It's stupid, get over it".

What is responsive web design exactly? Well, just like 'Web 2.0' or 'HTML5' there's a whole lot of 'buzz' but also plenty of definitions, opinions and interpretations over what constitutes responsive web design.

The slightly high-brow theoretical driving force behind it can be expressed something like:

"How design responds to context"

Which largely seems to be interpreted as:

"Getting designs to work on little screens"

Almost everything you'll read about responsive web design is about layouts that change depending on screen size.

This Smashing Magazine article recognises the theory is much more:

"â€Ĥ responsive Web design is not only about adjustable screen resolutions and automatically resizable images, but rather about a whole new way of thinking about design."

But then continues for over 6,000 words with plenty of screen shots and code snippets dedicated to dealing with different screen sizes (focused almost entirely on getting 'desktop' designs to work well on small mobile screens). Only about 250 words and an image (no code snippets) deal with something different – 'touchscreen vs cursors'.

And so it is around the net. The reason being, it's the boom in smaller-screened mobile devices that are driving the need for designs that don't just work on desktops.

Do you adapt to conditions, respond or ignore them?

How do you handle the myriad of devices in which your website will be accessed? There are 3 general approaches:

1. Static design – one design no matter the context.
2. Adaptive design – there's some fluidity where certain elements adapt to their context.
3. Responsive design – everything's fluid and responds to changes in context.

With 'non-desktop' devices looking set to become the dominant way the internet is accessed, it clearly makes sense to optimise designs for much more then just desktop use. For that you can either serve up a different version or make "one design to rule them all" (the hypothetical zenith of responsive web design).

There's always a Frodo to crash the partyâ€Ĥ

"One design to rule them all" sounds like a great concept, perhaps it is. But it's not without its drawbacks:

1. For mobile devices where connections are slower, speed is crucial. Many 'responsive' techniques (media queries, fluid imagesâ€Ĥ) mean more to download.
2. Is one design that responds to a particular context (e.g. mobile) more effective than one specifically designed for it?
3. Is it really more practical to respond to ALL contexts rather than adapt to key ones?
4. Do users want a 'responsive' design? If I change device or resize my viewport do I want the interface changing?

And there's much more to optimising user experiences than just changing layouts to match screen sizesâ€Ĥ. e.g. mobile users have different behaviours and the simple fact that mobile devices have phone/ GPS capabilities.

Responsive web design is a useful approach to think about handling context. But is the focus on a single design for all contexts better than targeting each with specifically-tailored solutions? Respond or adapt?