Andy Clarke just helped turn the standard approach to web design on its head.

Until this moment web designers have begun by designing for computer monitors, then adding simplified designs for mobile devices at the end of things.

But stop and think about it: With the proliferation of mobile devices — iPhones, iPads, Androids, Xooms … — why start with a stylesheet that sends heavy layers of complex styles and megabytes of background images to these devices?

The shift is commonsense when you think about it:

• Start with the simple styles that make your site eminently usable and quick-loading in all browsers, no matter the device.
• Then, for those users with more capable browsers, add your additional more complex styles just for them.

It just makes sense.

Except that it requires exploding tradition and re-arranging our standard practices.

Thankfully, Andy has worked with the folks at HTML5 Boilerplate to provide a new boilerplate extension, including a CSS template crafted to approach things from this upside-down angle.

Pretty soon we’ll look back and realize this is the new right-side-up.

Go!

Get the 320 and Up boilerplate extension

Read

• Andy Clarke’s post about the extension
• A piece that helped prod Andy in this direction: “Using Media Queries in the Real World,” by Peter Gasston