Go Mobile with Responsive Design

Designing for the web has always been like catching a greased chameleon – as soon as you get a good grip everything changes and you’re looking for the elusive lizard on some new technological rock.

Varying screen resolutions, user preferences, and browser inconsistencies are just a few of the variables that have made designing for the web something a little left of eternal. Now that the mobile web has exploded you might as well add all the new screen sizes found on the iPhone, iPad, Android, Kindle, Blackberry, and Netbooks to the crazy mix. In the next few years there will probably be a dozen other new devices that we’ll need to design for. Will the madness ever end?

Responsive Web Design

Fortunately we are blessed with quite a few really smart people in this field. Ethan Marcotte wrote an article almost a year ago for A List Apart introducing the us all to what he called Responsive Web Design. Like all A List Apart articles this one goes in depth into the tools, the how-to, and the why. It’s definitely worth a read (or two) but it basically boils responsive design down to these three elements:

• Flexible Grids
• Flexible Images
• Media Queries.

You could even make the case that it’s just two elements: Flexible Everything and Media Queries.

See it in Action

To see this technique in action, I invite you to take a look at our front page, or our portfolio*. Resize the browser window by dragging the bottom right corner and watch as elements move and re-stack themselves. Look at it on a mobile device and remember that there are not separate sites built for each device.

*Yes I’m a little lame in that I don’t have each and every page of this site set up for this.

Get Yer Resources Here

Smarter folks than I have written clearer and more useable information about responsive web design. I encourage you to get it straight from the horses mouth:

• A List Apart: Responsive Web Design
• Smashing Magazine: Responsive Web Design: What It Is and How To Use It
• Six Revisions: Understanding the Elements of Responsive Web Design

Other Useful Resources

The following resources have been very helpful in making HTML5 and responsive design work for us:

• HTML5 Boilerplate: A Rock-Solid Default for HTML5 Awesome
• 320 and Up: Responsibly Responsive