Since Ethan Marcotte wrote his seminal article on responsive web design less than a year ago, the concept of creating liquid/fluid designs that make use of media queries to adapt to the user’s screen has taken off. I’m ecstatic about this. I’ve been designing and building primarily liquid sites for several years now, and I want others to do the same. Responsive web designs can offer tremendous usability and accessibility benefits, while still looking beautiful, not dumbed down.
From a technical standpoint, creating liquid designs with media queries is not that complicated, in theory. But doing so requires a sometimes huge shift in mindset and design process, and this is where brief online articles on the topic fall a little short, simply due to the nature of their publication medium. What we really need is a whole book on responsive web design, covering all its intricacies. Ethan Marcotte is working on one, and I can’t wait to get my hands on it when it comes out later this year.
But it turns out that there’s already a book on responsive web design. OK, technically, it’s more like 1.2 books. My first book, Flexible Web Design: Creating Liquid and Elastic Layouts with CSS, is the only book out there that’s entirely devoted to designing and building robust and attractive web sites that adapt to the user’s viewing preferences. It includes not only detailed instructions on how to create the CSS for the layouts, but also how to make the images within them flexible and how to design them from the comp stage with flexibility baked in.Β All you need to add to any of the layouts you learn about in Flexible Web Design to make them “responsive” is media queriesβand I cover those fully in chapter 6 of my new book Stunning CSS3: A Project-based Guide to the Latest in CSS. Put them together, and you have a detailed, comprehensive guide on how to create awesome responsive web designs.
I want everyone to start making responsive web designs, so I want to give away a bundle of both my books. Actually, I want to give away two bundles. So two people will get a copy each of Flexible Web Design and Stunning CSS3.
To win, I’m not going to ask you to follow me on Twitter (though I would really like it if you would) and retweet some canned message about this giveaway (though you’re certainly welcome to tweet about this). All you have to do to win my books is leave a comment on this post. Any comment will do, though I’d love to hear your thoughts on flexible design, media queries, CSS3, or anything relevant to the work we all do.
I’ll pick two commenters at random on Saturday, February 26, at 8am Eastern US time. Good luck!
In the meantime, you can learn more about my books and download free samples at their respective web sites: Flexible Web Design: Creating Liquid and Elastic Layouts with CSS and Stunning CSS3: A Project-based Guide to the Latest in CSS.
The winners, picked with a random number generator, are Chris Hawkins (comment 16) and Todd C (comment 33). Congrats guys! I’ll be in touch about sending your books.