Responsive Web Design

Photo by Jeremy Keith

This was a great overview of the world of Responsive Web Design. Of course, the phrase and this specific set of techniques was invented/curated by the author, so I (correctly) assumed it would be the very helpful guide that it is.

While you could get most of the technical know-how you need to use this technique by reading the A List Apart Article, this book goes into depth on the more subtle aspects. It also thoroughly answers the question “why should I use this?”, and even points out situations where RWD might not be ideal.

Each of the three ingredients of RWD are given their own chapter (the other two chapters of the book are the introduction and the summary—short and sweet).

1. Flexible, Grid-Based Layout
   • This is your basic fluid/liquid layout with some grid goodness.
   • How to define things in relative measurements rather than pixels.
   • The formula: target ÷ context = result
     • target = the pixel dimensions you’re aiming for in your ideal layout
     • context = the area in which the target item is sitting
     • result = a huge, decimal-happy number such as 0.4583333333333333 that you put in your CSS (hopefully with a comment next to it showing how the number was derived.)
2. Flexible Images
   • This stuff just seems magical. I especially love the technique of clipping images in certain circumstances.
3. Media Queries
   • Before reading this book, this is the #1 thing that came to mind when the topic of Responsive Web Design came up. Of course, it is the magic sauce that gives the technique its main wow-factor, but it is only one third (although I would argue the most important third) of the technique.

While I understand the need to support older browsers, the depth to which this book goes in explaining how to get things to work in IE6 seemed quaint. I also was a little disappointed that he didn’t go whole hog and use HTML5. However, I understand that we can’t always use the new shiny things, so I don’t fault him too much for this.

The book ends with a (quite clever) recommendation of designing for the smallest screen first, and then adding complexity as the browser’s viewport gets larger. This has a couple of benefits:

1. Mobile-first is a good way to design. These quotes nail the value in the approach:

   … we assume mobile users need less content in part because desktop users can tolerate more …

   … just because desktop users can sift through more content does that mean they need to? … why is easy access to key tasks only the domain of mobile users? Why can’t all users of our sites enjoy the same level of focused, curated content?

2. Putting the more advanced CSS (and potentially bigger downloads) behind media queries with progressively higher min-widths means that devices that can’t use the advanced rules don’t have to be penalized by downloading things they can’t see.

A note on the electronic version: I now want to read all technical books on the iPad. The embedded videos that demonstrate how things adjust when you resize the browser window were invaluable. Not only is this better than a print version, it’s tons better than even a Kindle version.

After reading this, I feel much better equipped to determine when and how RWD should be used in my future projects. If you have anything to do with website creation (design, development, ownership), you owe it to yourself to read this book.

Software

If software isn’t solving your problem, and you can’t write it yourself or pay for its development, then software isn’t the solution.