Implementing Responsive Design with CSS

The web is everywhere.  It's on your desktop, in your pocket, and even waiting in your e-mail.  How do you tame your HTML when it can find itself in some tight situations?  Media Queries is one tool that can help.

I delivered a presentation at DocType Society on the topic of CSS Media Queries alongside Eric Zanol.  We tried to show media queries as a tool for reshaping content to fit the user's experience.  We covered some of the theory of responsive design, basics of declaring a media query, then ran over a host of examples harnessing the power of CSS3.  The presentation materials, instead of being traditional slides, were several examples conglomerated into a single HTML file.  It is available for download here.

If you pull down the zip file and open "demo.html" in a modern browser (Safari or Chrome preferred), one is bombarded with a few notes on what Media Queries are and basics on their anatomy.  When you reach the iPad, that's when the fun begins.  Try resizing the width of the browser window to see the examples in action.  Viewing source, you can see the HTML & CSS for each example, along with sparse notes on the origin of the example and how it was implemented.

Media queries allow for not only intelligent scaling and re-organizing at different screen sizes, but also the ability to make a printed version of your site more readable and less filled with cruft.  While some bloggers might implement these features, truly I am wating for the day I can print out CNN without all the navigation cruft chewing up my ink cartridge.  Also, e-mail on mobile devices is beginning to support media queries, enabling the millions of HTML e-mail messages to scale to fit what is becoming the most common way to read them.

We had a host of device for demonstrating the effect, including an iPad (thanks Adam Brault), Color Nook (thanks John), Android, iPhone, and 4:3 monitor (thanks Shenoa Lawrence).  We had intended to allow for people to view their own sites on these devices, but sadly no one tooks up on it.  Thankfully, Eric rather brilliantly had people bring up Dribbble on their phones while displaying it fullscreen on the projector.  I think that allowed people to see how something can be different on the screen compared to in their hands, expressing the capabilities of media queries.  Once you see their power for yourself, you'll want to harness them to make everything ready to be everywhere.