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.
Update 2/28/11:
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.
I’ve read an interview of yours and some excerpts from your books. I’m really impressed with the techniques and insight you’re able to give. I’ve traditionally been a fixed layout designer but with the advent of tablet and smart phone markets exploding it’s time to do it your way. Thanks for leading the charge. π
Love Flexible Design over Fixed design. Started to implement it in every project since last year. Learn from viewing others work and site like yours. Love to have a real reference. Thank you!
I’d love to have this book to be a responsive design angel :p
I would love to win your books. I’m a web project manager and like to be able to know what’s going on so I try broaden my HTML/CSS skills so I can grasp what developers I work with tell me.
Hi Zoe, I’ve read the Flexible book and am part way through the Stunning CSS3 book. They are both excellent and easy to read. I think they are well worth the purchase. I’m intending to redesign my own site and for a brief moment I considered reverting to a fixed width design but have now seen sense π and will instead build on what I already have with a new flexible, elastic layout + media queries.
PS: Would be interested to hear your thoughts on this approach using ‘mobile’ as the default style sheet http://www.broken-links.com/2011/02/21/using-media-queries-in-the-real-world/
No tweets required? Whatβs the world coming to? π
When I first read about media queries, they sounded too good to be true. I then played around a bit with them and saw that, in the browsers that supported them, they worked exactly as they were supposed to. Now I canβt wait to find some time to make something useful using media queries.
Cheers!
(I think I already have Flexible Web Design, so you can omit me from the draw.)
I work for a large mortgage company and have been fighting the good fight to get others in the responsive mindset. I’ve managed to convince my team, marketing, and our business analysts. Now it’s just a matter of execution on a bloated codebase. These books would go a long way in explaining the “how” of what I’ve been preaching. I’m really hoping to be one of the first major corporations to implement responsive web design and hopefully help push it’s use in the industry I’m in. keep up the good work!
Here’s an entry!
Great resource. I’d love to get my hands on these!
Well, I already own both books, so don’t pick this comment… π
Just wanted to say that even though I haven’t been able to finish reading the books yet (I had to go read the parts I needed the most, first, for urgent work!), I really really really recommend both of them. It’s a great topic and the books are very well written!
First!!! Thanks for speaking at UNC’s technology conference awhile back. Your presentation on the highlights of CSS3 was very lucid and exciting.
I’m a web development student and I’ve enjoyed what all your work has taught me so far!
This is an exciting contest, your two books are on my Amazon Wish-List.
I teach a web development course, where in the first term we cover HTML, CSS, and intro to Javascript. I’ve noticed that the Javascript section is too fast and by the time second term comes around JS is kinda forgotten. I am now changing the course to remove the JS stuff and add in more complex layout techniques and more advanced CSS related topics. Your books seem like they would be very helpful for my students and it’s always extremely helpful for me to read how other people teach the same subjects.
Thanks for the post. We’ve been having discussions about moving our clients to liquid design for some time now. You’re right, the biggest challenge is shifting perceptions of what the means, exactly. For the clients who want to “smell” their web design, I’m not sure what they’re going to think π
Excellent, I already own Stunning CSS3 and I’ve been looking at purchasing Flexible Web Design ever since reading it. This would be great to win π
Forget to say, don’t pick me because I have both books. Just wanted to comment, that’s all.
Hello,
I am very interested in the subject of responsive web design.
I based the work of my personal website on the concept of liquid/fluid designs, but I would like to gain more knowledge on responsive web design.
As Andy Clark said and I completely agree with him “Web design is responsive design, Responsive Web Design is web design, done right”, and an expert like you would be ideal to help me enrich my background on the matter.
Olga Pantelidou
Started to learn about media-queries lately & played with it a bit it`s great. Also i have downloaded your sample chapters & i like the way you write & how easily you explain things .
No need to pick me since I also already have both books, but let me add my thumbs up for both. Must-haves, and proof positive you have some major web design mojo going on.
To tell you the truth I’m a little scared of flexible design, well maybe not scared but just not a huge fan. I think the responsive way with CSS3 media queries looks like it could be a winner though and I would love to know more about them!
I really enjoy your site. I’ve been following via RSS for a little while now and now following on twitter. I bet your book is just marvelous and would love to win it π
As someone who is more familiar (perhaps comfortable?) with fixed-width sites, I’d love to know more about working with comps & building pages that are more adaptable to various environments.
This is something we’re working on for our clients so some of my co-workers have been updating existing code to get it to work. A book on the subject would be really helpful (so I’ll clearly have to buy it if I don’t win).
Oh, Dee/ar β (Shamelessly fawning fan mail!) Hey, thanks a bundle just for WRITING them. To say nothing of then offering a chance to WIN! Best wishes to all!
Hi, Zoe!
4 years ago I tried to write a “flexible” layout for my website, because one of my cousins suffers from really bad eyesight and I wanted her and everybody else to be able to upscale the fonts as they wish without breaking the layout. I believe that the web should be readable and beautiful. I’m neither a designer nor a developer so it took me a while to learn how to do that. The css-discuss-list, Position is everything, Eric Meyer, A List Apart and many more free ressources were a great help. Now I’m going to try a “redesign” with html5, css3 and media queries. A N D in utf 8. π Thank you for good advice during those years.
Thanks. Count me in!
Hi Zoe
I saw you at the online book launch for Stunning CSS3 and you honestly rocked my world. I’d heard of liquid layouts but thought they were too much hassle and I just didn’t get the benefit. Now I’ve been thinking about flexible design and media queries ever since… and wondering which sites I’ll be able to start redeveloping ‘liquidly’.
Thanks!
(p.s. why don’t you use favicons? π
Just found your site and am excited to read your books. I have been creating web sites since the early 90’s but never really had a chance to work with liquid designs. I left a very stable, good paying job and returned to school to earn my degree as an Internet Professional. I graduate in May and hope to have my own business very soon. These books would be a giant step in helping me learn how to create this type of layout. Thanks for having this “contest”.
Wow, glad I came across this. Your books are on my wishlist, but since I do webdev as a part-time moonlighting thing, I don’t have the funds to buy them just yet. I am especially excited about media queries and hope to leverage my knowledge into convincing my workplace that they need a full-time webmaster who knows how to program properly, but I need to better my skills if I’m going to claim that! So, your books would definitely put me on the ight road! π
Thanks!
Would it be terrible of me to write a comment just to be in with a chance to win the books? Delurking is hard sometimes!
Anyway, I do love your work, Zoe, your twitter feed is always full of incredibly useful stuff! Pick me, pick me!
Bruce Lee once said, “Empty your mind, be formless, shapeless – like water. Now you put water into a cup, it becomes the cup, you put water into a bottle, it becomes the bottle, you put it in a teapot, it becomes the teapot. Now water can flow or it can crash. Be water, my friend”
I’m sure you can make the connection here. π
Teaching myself responsive Web design and want your books!!!!!!!! I saw your CSS3 talk at Adobe MAX and I’ve been following you since. Great work!
Sweet, would really enjoy the chance to read your works, working with a small team of junior developers, who I would love to share some of this knowledge with. Thanks.
Dare I say Responsive is the new Unresponsive.
You are stunning.
I’m responsive.
Let’s get flexible.
I already own stunning CSS3, but would love a copy of your first book. If I win, feel free to pick an additional commenter to give the SCSS3 book to, otherwise I will donate it to the local library who’s books on web development are about 10 years out of date.
I actually flipped through the Flexible Web Design book in a bookstore some while ago. Looked interesting, and a specific treatment of the subject. Would love to read it at some point, though. I’ve been a web developer for some time, and have stuck to mostly fixed designs – have been meaning to try some flexible design ideas!
Ethan’s article on Responsive Web Design had the power to bind togheter different techniques under a label that even clients can understand.
This is giving a new perspective to what we do as web designers, forcing us, once and for all, to “think fluid” and start making the new generation of websites.
Looks like your books are exactly what we need to start.
Fixed layouts are a curse, designed by the clueless. Nothing, but nothing, on the web annoys me more than fixed layouts. Well, except for Flash – more power to Steve Jobs on this one.
Excellent! Thanks very much, so glad I won. π
Chris, I sent you an email but it got returned to me. Can you please shoot me a message through the contact form in the sidebar and let me know the best way to get in touch with you? Thanks!
Done π
I need it, good news.
I’m on chapter 4 of Stunning CSS3 … this book is a winner, as was your first one, which helped me to move over to elastic/flexible layouts. Cutting-edge CSS techniques and the use of media queries are explained in understandable detail. Thanks for another great read!
un articulo muy interesasnte.