We’ve entered a new period of transition on the web, just after things seemed to be getting comfortable. I mean things were nice. We reached a least-common-denominator screen size of 1024px. (Good riddance 800 x 600!) All the modern browsers are using page zoom by default rather than text zoom. Designers could breathe easy and crank out 960px wide layouts and pretty much everyone could see the site as intended without horizontal scrolling or other nastiness.
Even the browsers were getting easier. Webkit and Mozilla based browsers were the most standards-compliant we’ve ever seen. IE8? Not bad for a Microsoft browser. IE7 was a bit of a mess, but nothing like IE6 which finally fell below 10% usage. Mobile? To some extent there were so many different phone operating systems and phone browsers that many of us had given up bothering. Call it a head-in-the-sand approach. But it sure made things nice.
Then Apple sold 3 million iPads in 80 days.
#*@&!
Oh yeah, and the iPhone4 is out with a super high-res screen. And mobile seems to be consolidating. The big three (in no particular order) are Android running Chrome (webkit), iOS running Safari (webkit), and Blackberry running who-knows-what but people who care can download Opera which is right there with webkit when it comes to web standards. So guess what. Mobile matters. It matters a lot. And the mobile space is clearly not as fragmented as before.
All of this adds up to a big problem. People are viewing our web sites on all kinds of screen sizes. 1024 is no longer a magic number. Not when mobile growth is 8x that of desktop growth. The pace is so hot that it looks like mobile web access will eclipse desktop web access in just 3 to 5 years. So yeah mobile matters. And size matters. The number of screen sizes we should care about just jumped through the roof given the variations of phones, iPads, tablets-yet-to-come, netbooks, laptops, desktops and external monitors that are already out in the field.
So what’s a designer to do? How can we avoid being thrown back to the horrid days of browser-sniffing and coding completely different HTML layouts for different browsers and devices?
The answer is blowing in the wind, and it’s called Responsive Design.
The core principles of Responsive Design for the web are using a flexible grid, sizing design elements as proportions (%) rather than pixels, and using CSS3 media queries to make your design responsive to the size of the viewport or device.
Wait wait wait you say: this sounds a lot like fluid layouts which have been around forever. Sort of, but in the words of Jeffrey Zeldman “It’s what some of us were going for with ‘liquid’ web design back in the 1990s, only it doesn’t suck.”
The lynchpin in this technique that doesn’t suck is the use of media queries, a CSS3 feature, that allows you to change how elements are displayed based on the size of the viewport. This even works dynamically while you are dragging the corner of your web browser around. This lets you create a design that morphs into a one column layout for small viewport or device sizes, and a three column layout for large viewports, but not TOO wide if you are on a 1920px wide browser. Yep, you can even keep line lengths readable.
But CSS3 isn’t supported by IE8. Or IE7. Or IE6. No problem. Turns out there a Javascript workaround that enables IE5+ (yes, that’s right, IE5+) to interpret media queries. http://code.google.com/p/css3-mediaqueries-js/ Now we’re talking!
Media queries are supported in the latest versions of all the other browsers that matter including: Opera 9.5+, Firefox 3.5+, Safari 3+, Chrome and Mobile Webkit.
And to sweeten the deal, the Javascript workaround mentioned above also allows Firefox 1+ and Safari 2 to use media queries
Ready to learn more? Start with the definitive article by Ethan Marcotte:
http://www.alistapart.com/articles/responsive-web-design/
Follow up here, which includes links to some related articles, shares the history of the very recent evolution of the technique, and includes links to several sites already using the technique:
http://www.zeldman.com/2010/06/23/responsive-design-is-the-new-black/
I’ll be demonstrating the techniques at the upcoming Fort Collins Internet Pros Meetup on Thursday, August 12. Learn more and RSVP here:
http://www.meetup.com/goFCIP/calendar/12297128/