Responsive Web Design (Book review)
Reading Ethan Marcotte’s book Responsive Web Design was a strange experience in some ways. While much of the techniques and philosophies described in the book are familiar to me, reading about everything from flexible design to mobile first with media queries carefully distilled into one book was something of a revelation that brought back feelings from over a decade ago.
Ethan opens the book with this:
As I begin writing this book, I realize I can’t guarantee you’ll read these words on a printed page, holding a tiny paperback in your hands. Maybe you’re sitting at your desk with an electronic copy of the book up on your screen. Perhaps you’re on your morning commute, tapping through pages on your phone, or swiping along on a tablet. Or maybe you don’t even see these words as I do: maybe your computer is simply reading this book aloud.
Ultimately, I know so little about you. I don’t know how you’re reading this. I can’t.
That last sentence pretty well sums up the reality we as web designers and developers face every day. We cannot – except in rare cirumstances – assume much about how our users (or our clients’ users) access the sites or applications we build. We need to base our work on flexibility and adaptability, especially with the browser landscape diverging more and more, making it even harder to make assumptions about our end users. As Ethan puts it:
The long and short of it is that we’re designing for more devices, more input types, more resolutions than ever before. The web has moved beyond the desktop, and it’s not turning back.
So how do we approach this need for flexibility? The approach described in the book involves three major components:
- A flexible, grid-based layout
- Flexible images and media
- Media queries
The book has a chapter devoted to each of these components, explaining them in detail. Not only the idealistic theory, but also a few somewhat dirty workarounds necessary to make this work well in older, inferior browsers. In other words you will come away with practical knowledge you can apply right now.
In the first part of the book, the responsiveness techniques start from the “full”, or desktop, version of a design, making it adapt well to smaller screens or browser windows. That approach works, but some argue that starting at the other end is a better and more mobile-friendly choice. The book’s final chapter discusses this, which is usually referred to as “mobile first”.
I remember thinking “Ah, yes, this is the right way forward” after reading Jeffrey Zeldman’s article To Hell With Bad Browsers over ten years ago. Reading Responsive Web Design gives me that same feeling of wanting to apply what I’ve just read about right away. It could very well turn out to be a classic comparable to Jeffrey Zeldman’s Designing with Web Standards.
Responsive Web Design is an absolutely essential read.
- Previous post: The iOS Zoom setting disables maximum-scale=1 and user-scalable=no
- Next post: On using h1 for all heading levels in HTML5