Responsive Web Design: Another Evolutionary Step

As a continuation of my recent work with Django, I have been exploring "responsive web design". It seems to be the next natural step in the evolution of webpage design and layout.

I first got into web design in 1999. At that time, CSS was fairly new. Most designers were excited about the possibilities, but browser support for it was still rather spotty. Webpage designers still craved the exact layout they could get with print media. Most of the design books on the bookstore shelves described the old way to control layout with HTML tables and spacer gifs. A spacer gif was a single pixel gif--either transparent or the color of your background--that you could stretch to whatever size you needed by specifying its width in HTML. This let you force table cells to a particular absolute size in order to produce gutters, margins, and whitespace.

However, platform differences meant such pixel-perfect control of layout was nearly impossible to achieve in practice. Netscape, Internet Explorer, and Opera had slightly different layout behaviors. Available fonts and their sizes differed across operating systems, meaning text took up a different amount of space on different systems even if the rest of the page design was rigidly inflexible. There were only 216 colors that could be displayed without dithering on all systems. Many people were still surfing with 640x480 CRT monitors, and WebTV seemed a possibility, which required an even lower resolution. Yet, most designers wanted to design for at least 800x600 screens. Those that wanted absolute control built a version of their site for each browser or system they wanted to support.

As CSS entered the scene, the design pundits called for more flexible designs. Rather than designing with absolute pixel-based values that would force horizontal scrollbars on smaller screens, they suggested creating pages with relative sizes that would let your design shift and resize at different resolution screens. CSS offered a way to do all of this elegantly without tables or spacer gifs. As a designer, you only had to accept that your design wasn't going look the same everywhere; but, if done right, it could still look good anywhere.

Fast-forward to today. The same argument continues in a new form. There is still a practical group designing based on absolute pixel sizes, now often in a well-defined grid of columns used to streamline page design. They have largely embraced CSS though, separating layout from the HTML semantics.

And, given the diverse range of devices and system, there is still a group of idealists that call for a single design that can morph gracefully to handle any platform or screen size. This is now called responsive web design, and there are two essential components to it.

The first is to lay your page out in a flexible, fluid grid. Rather than specifying dimensions in pixels (which can't scale), specify them as percentages or ems. Since the default normal font size on most systems is 16 pixels, you can design your page assuming 1em = 16px. This gives you a baseline on how to work images and videos--normally a fixed pixel size--into your design.

I think one of the most important parts of a fluid grid is the ability to also scale your images as the grid changes size. (This was always a problem in the past: images always stayed the same size, but text areas and whitespace would grow and shrink with the screen size. This would completely mess up the relative layout of the page elements.) The CSS to do this is fairly simple nowadays if you are sizing everything in terms of the fluid grid.

Although a fluid grid lets you keep the same relative layout of all page elements at a wide range of viewport sizes, it still tends to break down at the small and large ends of the size range. This is where the second part of responsive web design comes in: media queries.

Media queries are a new addition to CSS that allow you to query the browser for details about the display environment, including screen dimensions, color, resolution, screen orientation, aspect-ratio, etc. With easy access to this information (rather than having to rely on JavaScript hacks to figure it out), it becomes possible to adapt the design at certain points. For example, you might have a three column fluid grid that scales gracefully on screens that are between 400px and 1000px wide. However, if the screen is less than 400px, you can activate CSS rules that produce a single column "mobile" view. Or, at over 1000px wide, you could take advantage of the extra space with a six column view.

The difficulties in implementing such a flexible design are much the same as they always have been. The diversity of browsers and platforms means you need to think about design differently, because there is no longer a single authoritative view of your site. Full and consistent browser support for the required technology may take a little while yet, requiring a few work-arounds to support older or incompatible browsers. For example, browsers differ on how they handle half-pixel lengths, leading to subtle differences in layout if any rounding is done.

This last leads to a challenge that is fairly specific to responsive web design: the degree of math precision required. Every measurement needs to be converted to a relative measure, but this relative measure needs to have as many significant digits as possible to ensure the resulting rendering will produce the correct proportion of pixels for each page element. A tool like Less or Sass could really help alleviate some of this, though.

It's fun to return to webpage design and see what has changed and how much as stayed the same. I still find myself in the idealist camp: that we can surely overcome the technical inconsistencies and irritations to produce a single flexible design that will look great in every viewing context. I look forward to learning more.