With the recent release of Andy Clarke’s Hardboiled Web Design, and articles like Ethan Marcotte’s Responsive Web Design, it’s clear that change is in the air, and web design is on the cusp of some pretty interesting things. Responsiveness, a renewed interest in accessibility, and new approaches to legacy browser support are just a few examples.

I started writing a single post about all this stuff, but it quickly started to get pretty long, and I’m not a big fan of posts that take more than 10 minutes to read. So I’ve broken it up into a handful of posts, starting with this little piece on responsive web design.

Responsive Web Design

Before his article on responsive web design, Ethan Marcotte jumpstarted the idea of designing with flexibility in mind in his May 2009 piece on fluid grids. Marcotte called BS on the “minimum screen resolution” principal that most designers used to justify their fixed-width creations (essentially giving anyone with a smaller screen resolution narrower than 1024 pixels the scroll bar).

we’ll jump through flaming hoops of acid to support legacy browsers, but nonchalantly brush off anyone with a smaller screen resolution

It seems incredible that this was an acceptable practice. We’ll jump through flaming hoops of acid to support legacy browsers (you know, like IE6), but nonchalantly brush off anyone with a smaller screen resolution (like OLPC machines, for example). Weird. Especially since the web is, by nature, a flexible medium.

However, what’s really going to push responsive web design into the mainstream isn’t sympathy for users with small screens; it’s the insane rate of increase in mobile browsing. Having a mobile optimized and accessible website is no longer a bonus, it’s a requirement.

How It’s Done

start thinking about your designs as living things that react to context

The coolest thing about responsive web design is that it’s relatively simple. It’s different, and takes some getting used to, but once you are it becomes natural to start thinking about your designs as living things that react to context, and aren’t just static. Here’s what you need to know to get started:

Percentages, not Pixels
Your layout  will now be set in percentages, not pixels. See the Fluid Grids article, or Bulletproof CSS for more on this, but essentially all it takes is some simple math.

You start by giving your layout a max-width, instead of simply a width. This lets you design a “pixel perfect” version of your full-size site. When the browser width scales down, though, so does your site.

To size your grid elements, you then use the formula target / context = result. For example, if you want a 300 pixel wide column in a 960 pixel wide layout, just divide 300 by 960, and you know your column width needs to be 31.25%. At full size, you’ve got your 300 pixel wide column, and when the browser width scales down, your column does so as well.

Fluid Images
I feel like this is turning into the Ethan Marcotte show, but the dude has done a lot of innovative work around this stuff. Including developing and refining a great technique for using images in a flexible way.

Read this post for more detail, but the gist of it is that you set every image on your site to 100% using img { width:100%; } and then rely on the context (e.g. containing elements) the images are placed in to size them correctly. Not only does this make your images fluid, it also allows you to repurpose single image files at multiple sizes.

Be sure and check out Marcottes sweet image sizer javascript to really optimize this effect.

Media Queries
In CSS3 Media Queries have moved beyond setting different styles for screen and print, and allow us to detect the capabilities of a device or browser and set styles appropriately. We can now do things like detect the maximum device width, and reposition and restyle the content of our site, thus creating an optimized version particular to the context it’s being viewed in. You can even detect maximum browser width (as some of the examples above demonstrate) and your site will respond in real-time to changes in the width of the browser window.

The syntax is simple: @media only screen and (min-device-width : 320px) { styles specific to this min-device-width here }.

For more on media queries, check out this Smashing Mag article.

perfection is not achieved by having every pixel in precisely the same spot in every browser

Paradigm Shift
To design responsively, you’ve got to change your mindset. In the context of web design, perfection is not achieved by having every pixel in precisely the same spot in every browser. That’s an outdated way of thinking, a holdover from print design. Embrace the fluidity of the web, and let go of your desire for pixel-level perfection. You can then start creating context aware websites that provide visitors with experiences optimized for them, not your obsessive design sensibilities.

See it in Action

StPauls

Here are a few solid examples of responsive design in action. You’ll notice that half of these are sites for designers, a clear indication that the mainstream hasn’t yet picked up on the practice of designing responsivley: