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.
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
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.
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.