Responsive Web Design
Ethan Marcotte combines fluid grids, flexible images and media queries to demonstrate how best to design for “the ebb and flow of things”. His final example adapts from a single-column layout optimised for handheld devices through to a two-column layout with three alternative navigation styles based upon the width of the browser’s viewport.
This is brilliant. Essentially talking about using a fluid layout with CSS3 media queries to change a style sheet based on things like browser width or PPI. Meaning that you don’t have a style sheet for iPhone and one for iPad and one for T-Hub and one for Android and one for Nokia… But you have one style sheet that adapts, based on the device.
It’s essentially a way to future-proof yourself for all the hundreds of mobile devices that are bound to come out over the next few years. It’s a bigger, harder job than just doing one style sheet for one user agent. But you’re far less likely to need to re-do it when the next big device comes out.
