Responsive Web Design book review

06 Dec 2011

After having read 'HTML5 For Web Designers' by Jeremy Keith, and A Book Apart's N°. 3, 'CSS3 For Web Designers' by Dan Cederholm, I finally found time to read N°. 4 of the list 'Responsive Web Design' by Ethan Marcotte. I know I'm seriously behind in my reading, as this book was launched months ago, and there are already 2 new ones waiting to be read. Still, the topic of the book is pretty hot and we're just starting to see this web design approach in action. I'm pretty sure there still are many people who haven't heard of this technique… high time for a review of this book.

Table of contents

This book is about designing for the web using a flexible grid-based layout, flexible images and media, in combination with media queries. In other words the book explains an approach that makes your design responsive. The book has 150 pages and consists of five chapters:

  • Chapter 1: Our Responsive Web
  • Chapter 2: The Flexible Grid
  • Chapter 3: Flexible Images
  • Chapter 4: Media Queries
  • Chapter 5: Becoming Responsive

Chapter 1: Our Responsive Web

Ethan starts his book talking about how web design inherited its vocabulary from print, and how it has borrowed the concept of “the canvas”. We, web designers, try to mimic the process of starting with a blank canvas, a blank document with a predefined width and height. But there is a problem with this approach, namely the web’s flexibility: the browser window and all its inconsistencies and imperfections. The solution to this problem is trying to create a design that is imposed on the web’s innate flexibility. In other words, a web design that is responsive, that adapts itself to the media that renders them.

Chapter 2: The Flexible Grid

Via an example web site, Ethan explains how you can turn a pixel-based design created in Photoshop into a flexible layout using a simple math formula. It’s the same fluid grid technique explained in one of the chapters in “Handcrafted CSS” which is only the foundation of responsive web design.

Chapter 3: Flexible Images

Since modern browsers resize images proportionally, the image ratio remains intact when using Ethan’s flexible technique of setting a maximum width of 100% for each “img” element via CSS. The image will then resize itself when the flexible container shrinks or enlarges. This same technique can be applied to other rich media or video.

Image source A Book Apart

Chapter 4: Media Queries

As a staunch proponent of non-fixed layouts, Ethan explains how we can build some measure of fluidity into our designs by using media queries. This chapter covers the essence of this book, and so this is the most important one, but also the most extended, where I learned the most from. He explains how media queries work, and how you can implement them. He shows us ways on how you can make a layout responsive, a layout that “responds” to the context it’s viewed in. He also explains why responsive web design isn't just about making your design accessible for smaller screens, and shows us ways on how we can adjust our design for wide screens. He concludes this chapter with explaining the reason why this approach is a flexible foundation which allows us to deal with the emerging range of different mobile devices, followed by a few beautiful example websites where the responsive approach has been used.

Chapter 5: Becoming Responsive

In this chapter Ethan explains us different ways of how we can incorporate the responsive approach to our work. One of the approaches is to design for mobile first, a design philosophy introduced by Luke Wroblewski in 2009. Based on this approach, Ethan demonstrates us a responsive workflow where the process of the design and development phase kind of blend with each other. Followed is a hands-on practical demonstration on how you can use the progressive enhancement technique to ensure quality access for all. He shows that you can use jQuery to the advantage for mobile users with a fall-back for when JavaScript isn't available. Ethan concludes that web design is all about asking the right questions, and that responsive web design is just a possible solution for the web's inherent flexibility.

On another note…

A perfect companion when reading this book, is "Adaptive Web Design" by Aaron Gustafson. A review of this book can be found here, but for those who wonder, this book is all about "progressive enhancement". So the term "adaptive" doesn't stand for another technique as some people like to believe. Aaron explains the difference between "adaptive web design" and "responsive web design" well in this post. You could say that "responsive" is a subset of "adaptive". More about this subject in a future post where I'll review the book.

I'm also kinda wondering about the implications towards creativity with these techniques as they all require that you think in boxes that can move below each other when there is a smaller screen. Maybe it is my typical designer brain that feels the urge for boundless creativity, I don't know, but I haven't seen a site like this one being made responsive. I'm sure it's possible, but I'm pretty convinced it would be a gigantic task. Most sites that I've seen all share the same approach towards lay-out, because the basis of this technique requires it. Of course it is still early days, and this approach is new and will grow up when more solutions become available. Anyway that's me thinking out loud, and subject for another post sometime in the future.

Conclusion

This book shows that designing for the web today has become very different from how it was couple of years ago. It's one way of how you can adapt your design by making it fully flexible for both desktop and the mobile web, using the same HTML markup. It's a must read for everyone who understands HTML and CSS, and who wants to get an insight in this “responsive design” technique. It's the perfect basis to get started, and you'll find a lot of valuable source material and information for fall-backs in certain situations. Even with my earlier rambling in the above paragraph, I still believe this book is a valuable asset for any web designer's arsenal.

Comments

  1. 1 Jonathan Longnecker 06 Dec 2011

    Hey Veerle,

    I’m glad you see the potential downfalls of being stuck in the grid/box, too :) I made a lot of people angry writing about it for .net magazine a few months back, but I’m still worried we’re focusing too much on the tech and not enough on the art. Still think the overall idea of Responisve is great, though!

  2. 2 David 08 Dec 2011

    Awesome article and thanks for the review! I hope it’s ok that I posted a small link from my site featuring your article with a link back to this page (my pingback are currently not working).

    Take a look and leave some feedback! I’d appreciate it a lot: Responsive Web Design by Ethan Marcotte.

    All the best
    David

  3. 3 alex 20 Dec 2011

    Thanks for the review, I like new books where the authors write about new technics and not 10 years old solutions.

  4. 4 Tim 23 Dec 2011

    There are plenty of web designs where the grid is implied: you have to look carefully to see the grid. I suspect the solution to responsive design’s reliance on boxes will be similar. Good designers will find ways to use colors and images to hide the box that holds the design.

    My concern about responsive design is that it is one more step away from the web being accessible to first timers, people who might use View > Source in their web browsers to figure out how to achieve an effect. All the CSS, jQuery, and HTML5 jujitsu can result in complex weedy code.