With sites being accessed by an increasing array of devices and browsers, users deserve a quality experience no matter the size of their display. Ethan Marcotte explains how our designs can become more responsive

A professor of mine once told me that every artistic movement was a response to the one before it. Bebop threw off the melodic strictures of swing, while film noir countered the glossy sheen of big studio comedies with gritty antiheroes. George Lucas watched a few too many Kurosawa films and a bunch of old Westerns, and Star Wars was the result.

Influence and inheritance: it’s an old song. The still-young field of web design is no exception, and is very much influenced by its predecessor, print.

Unlike print, though, much is out of our control: browser incompatibilities, a reliance on locally installed fonts, an ever-changing browser window: it’s enough to drive a poor designer mad. So in the face of every inconsistency, we impose constraints on our medium to better establish a sense of control. Fixed-width layouts and minimum screen resolution are two such constraints: they better help us isolate the problems we feel we can solve from those we can’t. Divide, quarantine and conquer.

But the web is becoming more unpredictable, not less. There are more devices, more browsers than ever before. The explosive adoption of excellent small-screen browsers such as Mobile WebKit has further compounded the effect.

Unfortunately, our early attempts at designing beyond the desktop have felt all too similar to our divide-and-quarantine approach from the past.

Note the webkit subdomain: the site’s owners had quarantined the ‘mobile experience’ on a separate subdomain, fixing the width to 320px. Once that link was shared (via email, or saved to Delicious or Instapaper), readers were locked into that context, regardless of browser. As you might guess, the reading experience was less than optimal (read: “awful”) on a desktop browser.
Fragmented content

You could argue that this example simply suffers from poor execution, that some simple browser sniffing could easily redirect users to the “full” article. But I think it’s symptomatic of our general approach to designing beyond the desktop: in the face of the many uncertainties, we place constraints on our designs, such as a minimum screen resolution, to better isolate the problems we can fix from those we feel we can’t. But fragmenting our content across different “device-optimised” domains is a losing proposition. We simply can’t compete with the pace of technology, updating our sites each time a new web dseign company, competent browser hits the market.

Rather than creating disconnected designs, each tailored to a particular device or browser, we need to treat them as facets of the same experience. Responsive web design means creating an adaptive design that’s aware of the context it’s viewed in and optimises its display accordingly. And we can do so simply by embedding standards-based technologies in our work. By starting with a flexible grid (with flexible media), we can incorporate media queries to create that responsive design.