“Developing fixed-size Web pages is a fundamentally flawed practice. Not only does it result in Web pages that remain at a constant size regardless of the user’s browser size, but it fails to take advantage of the medium’s flexibility.”
The above quote is something I wrote back in March of 2001. At the time, the standard resolution to design to was 800×600, but things were changing to 1024×768. There were debates at the time as to whether web pages can be optimized for larger screens. My article, entitled “The Myth of 800×600,” essentially attacked fixed-width screen design in general. (Perhaps a better title might have been “The Myth of Fixed-Width Design.”)
I concluded that article with a prediction:
“With an increase of alternative browsing devises on the horizon, such as WebTV, public access kiosks, video gaming systems, e-Books, small handheld devices, and other nonstandard applications, the continuum of viewable browsing sizes will only expand. Never before has the demand for flexibility been greater.”
A decade later that contention seems to more true than it was back then. This post reviews the relevance of responsive web design in current practice.
At the time I was working with Razorfish on the relaunch of the Audi.com and Audi.de websites. I summarized a case study of that project in an article on Boxes and Arrows. (See: “Challenging the Status Quo: Audi Redesigned,” originally given as a presentation at the IA Summit 2002 in Baltimore.).
One of the themes covered in the case study is an innovative approach to screen resolution. We called it “jumping boxes” at the time, referring to a layout that had three different states: small, medium and large. This was achieved by making components “jump” down on the page as the resolution got smaller (and vice-versa).
I wrote in the case study summary:
“Razorfish, Germany wanted to address the fact that users surf with different browser window sizes. We believed developing pages for one fixed size is fundamentally inappropriate for web design and ignores the basic flexibility of the medium. … [Therefore], the Audi sites have ‘smart’ pages that detect browser size and serve up the right layout automatically. Entire content areas of a page appear in different locations depending on the user’s resolution. These content boxes appear to ‘jump’ around in the layout, hence the phrase ‘jumping boxes.'”
In the end, the jumping boxes approach didn’t bring much to the site or to our client. It was more a philosophy of web design than anything practical. And the website has since been relaunched several times without the flexible layout.
Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design, but it also requires a different way of thinking. Rather than quarantining our content into disparate, device-specific experiences, we can use media queries to progressively enhance our work within different viewing contexts. That’s not to say there isn’t a business case for separate sites geared toward specific devices; for example, if the user goals for your mobile site are more limited in scope than its desktop equivalent, then serving different content to each might be the best approach.
But that kind of design thinking doesn’t need to be our default. Now more than ever, we’re designing work meant to be viewed along a gradient of different experiences. Responsive web design offers us a way forward, finally allowing us to “design for the ebb and flow of things.”
The layout for the Boston Globe website is a good example of responsive web design. Below are three screenshots from the site at different sizes:
Figure 1: BostonGlobe.com at its maximum width of about 1280 pixels (click to enlarge)
Figure 2: BostonGlobe.com at about 800 pixels wide
Figure 3: BostonGlobe.com at about 220 pixels wide
These screenshots are of the same page, taken only minutes apart. There is no horizontal scrollbar needed at any size. And the layout works at all of these resolutions.
This is far more sophisticated than what we were attempting in 2001 with the Audi website. We didn’t even come close. But we were falling the same aesthetic–one that breaks away from the what I call “the four corners syndrome.” Typically, web designers determine a fixed a size and begin filling in the corners with stuff. This is reminiscent of print design, really.
Now, with a veritable continuum of sizes to accommodate, picking just one doesn’t go very far. Responsive web design seeks to address that. It’s quite possible–from a design perspective and from an implementation perspective–to create a single website that scales as needed and takes advantage of a truly flexible medium to work on nearly any browser size. I, for one, welcome the further development and adoption of responsive web design. At a minimum, we should strive to have a single size be our default starting point for web design.