Ever since the folks at A Book Apart started publishing books, it was a pretty sure thing that the material and product would both be good. That has borne out.
All of the books have been valuable. But this one is the one that gave me the old lightning bolt of clarity that I used to get when my job meant learning something brand new every week. Not that I don’t still learn new things, but very few of them make me rethink my entire approach to how I work.
Ethan’s book did.
The ideas behind responsive design have been out there for a while now, all the way back to the first standards groundswell. Lots of people who understood the problems with using tables as layout tools also believed that fixing the width of a web page was unacceptable and counter to the medium. And lots of other people agreed in principle (Hi! I was one!) but felt like that was a bridge too far. We had enough work getting well-designed sites to work reliably across browsers without also having to worry about how the site would look at any old random resolution or width. So we gritted our teeth and did the best we could.
Fortunately, there were people who never gave up on those ideals. And now we have the tools (HTML5, CSS 3, various JavaScript libraries) to create this more perfect web, as well as a slew of highly compliant web browsers (even one from Microsoft!) to use them. And there are people who have been figuring out how to pull all these tools together.
What’s been lacking has been that one clear, concise overview for those of us who see the value of responsive design but haven’t had time to put all the pieces together in practice. That’s what this book does. Ethan lays out his methodology with great clarity, starting with a Photoshop comp and some familiar HTML and CSS and walking through the steps of turning a fixed-width layout into something that has been carefully crafted to look good on everything from smartphones to giant flatscreen monitors. The mechanics of it hinge on one linchpin formula, which is where the lightning bolt came for me. (I don’t want to spoil the surprise. You’ll have to read the book.) By the time you finish, you might be thinking differently about how you approach projects.
Which is not to say that Ethan’s book is everything you need to know about responsive design. It’s enough to get you off the ground. As soon as you start applying his methodology, you’ll see where you still have work to do. At Mule we have two projects in-house right now that are really good candidates for responsive design. Both are more complex than the sample site that Ethan builds in his book, so learning where, when, and how to apply responsive principles to a complex, site-wide layout has proved an interesting exercise for the whole studio. It requires you to think expansively in both directions of your project flow: all the way back to the IA (“Does this flow change if we have 1200 pixels of width to work with?”) and all the way ahead to implementation and use (“How will this navigation work on a smartphone?”).
So far it’s been a great exercise for us. I bet it will be for you, too.
| 
2 comments so far. Add yours below.
Thomas says:
The book's great, but one of the big unanswered questions it leaves is "how do you actually serve less stuff to smaller screens." Putting all the logic in the CSS around what elements to show or hide means that every device is still served all the media necessary to render the largest screen's content. IOW that super sexy full screen images you don't want your mobile devices to see are still *served* to those devices, at a huge bandwidth cost. In "Responsive design" as it's now understood (media queries in CSS with maybe some Javascript), there's no way to avoid that problem.
July 6, 2011 3:52 PM
David says:
@Thomas, I would argue that the detailed mechanics of how to serve less content are beyond the scope of this book. The last chapter talks through some of things you should consider about sending your entire site to a phone.
One of the projects that I mentioned in my post has very specific requirements around not only mobile usage, but general low-bandwidth usage. We're using the principles in the book to remove stuff from the layout for different resolutions as we build our prototype templates to see whether the client is going to need totally different HTML for the mobile site AND to see if there are ways we can simplify the design at higher resolutions.
July 6, 2011 4:04 PM