Fluid Layouts Are Now Viable

I’ve always liked the idea of fluid Web layouts — Web pages that adjust to fit the size of the window in which they find themselves. The drawback, however, has always been that fluid layouts promise more than they can achieve — that they work well within a range of widths and then break down ludicrously when you stretch them beyond that range.

Ethan Marcotte’s recent piece in A List Apart solves this problem. CSS media queries, white are normally used to let you style separately for screen and print, also let you vary your styles depending on the environment. What’s even nicer — and still not widely known — is that you can use them to qualify individual styles:

This means, for example, that you can have style rules that say "Use nice big 24/28pt type, please, except if you're on a tiny little cellphone screen, let’s stick with 13/15." You can drop entire columns when the window gets too narrow. Jon Hicks uses this technique to craft a quietly spectacular blog redesign that holds together from 320px all the way to 1280 and beyond.