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:
I tried resizing in Chrome with no joy :-(
Thanks for the heads up Steven. There seems to be an issue with serving the site from CloudFlare. I’ve disabled it and it should be responding now.
I’m going to check in with those guys to see if they have any insight on this.
All good in the hood :-)
[...] found out the hard way (Thanks Steven) that certain of these techniques can strip web browsers ability to read @media or [...]
J’aime beaucoup toutes ces couleur!
en ce moment, j’aime vraiment toutes tes tenues; les couleurs te vont vraiment bien!