"Responsive Web Design" Book Review


Ethan Marcotte is excited about Responsive Web Design. I've read his articles, listened to him speak, so I thought I'd read his book and see what else he could possibly have to say on the subject. Quite a bit, as it happens…

Giveaway Winners Announced!

Congratulations to Stephen Eyles and Tommy Saylor, who were picked randomly from the hundreds of entries! We have more book reviews and giveaways in the pipeline, so if you weren't so lucky on this occasion stay tuned and maybe fortune will shine on you next time!

A big thanks goes out to A Book Apart who stumped up a couple of copies to giveaway to Webdesigntuts+ readers.

My Thoughts on the Book

I chose the paperback copy. As much as I love my kindle, I was born before 1990 and will therefore always have a soft spot for well designed print. I'm also a fan of yellow, which made it a no-brainer; I wanted this thing on my non-virtual bookshelf.

That brings me nicely on topic, because it's our relationship with print which has arguably caused this current need for change. We're historically used to designing within the physical boundaries of the printed page, and, as web designers, we've translated that directly to the browser. Issues arise when our fixed-width layouts are viewed in smaller browsers, or devices with smaller resolutions - let's face it, no-one wants to see a horizontal scrollbar on a vertically orientated website.

Ethan Marcotte has a solution (note I didn't say the solution, which he's often misquoted as promoting). By harnessing the power of flexible layouts, in combination with CSS3 media queries, we can selectively tailor our designs to respond to whatever the browser situation might be.

In his book, Ethan walks through his thoughts, gives sound reasons why we should approach things differently and discusses where the web is headed - all the while tempting us further with his cool robotic-themed example website. This is more than a step-by-step guide however, the robot site serves simply to demonstrate each step of the process as he sees it.

responsive web design robot website

We begin by looking at relative measurements and flexible grids. Never quite gotten to grips with ems in web typography? You won't find them more succinctly explained than here.

Once he's converted a static, pixelated .psd into flexible units, he moves onto responsive images. There's a lot to take into account where images are concerned, and there are several approaches in making them responsive to various situations, but Ethan explains things clearly in his approachable style.

The next checkbox comes in the form of media queries. Their origins, purposes and practical uses are covered before we look at applying them to the ever-improving robot website.

We finish off by looking at fallback options (media queries are CSS3 spec when all's said and done) and a couple of things javascript can help us out with when targeting mobile devices.

responsive web design

So that's the meat and veg of the book, but does it do its job of teaching us effectively?

Ethan's good at writing and teaching, and he's a proven designer and coder. Those are all key, though what makes this book so effective is his personality. The factual content of educational literature can be duplicated, but Ethan's sense of humor makes this book uniquely entertaining from start to finish.

What does this mean for you as a student? It means you're going to finish this book without putting it down. Billed as "Brief books for people who make websites" the A Book Apart publications aren't huge. They're to the point, digestible and inspiring. Read Ethan's book and it will change the way you look at your next web design project.

Responsive Web Design is available from A Book Apart
$18 + shipping for Paperback, $19 for eBook, at time of writing.

Related Posts
  • Web Design
    A Quick Q&A With Jason PamentalJason thumb
    Jason Pamental has been working the web for a long time; so long in fact, he's even used something called "Netscape". This experience, coupled with his passion for responsive design and web typography (amongst many other things) have made him a familiar face on the speaking circuit. I caught up with him, shortly before he heads to London for the Future of Web Design, and fired a few questions his way.Read More…
  • Web Design
    HTML & CSS
    A “Readability First” Approach to Media Queries and LayoutReadability first thumb
    In this article I'll be talking about a methodology that is a mixture of many approaches to Responsive Web Design, with a few extras stirred in. It's both "Content First" and "Device Agnostic", and was originally inspired by the typography focused em based "Goldilocks Approach". I like to think of it as a "Readability First" approach.Read More…
  • Web Design
    Design Theory
    Responsive Web DesignDsfd rwd retina
    Unless you’re totally new to the industry, or you’ve been living under a rock in the faraway lands of another planet, you’ll have heard about responsive design. Even if you don’t understand it fully, it’s bound to be something you’ll have come across or interacted with in some way or another.Read More…
  • Web Design
    New to Web Design? Start Here.New to web design
    Welcome to Webdesigntuts+, an online resource dedicated to teaching and encouraging web designers of all skill levels and experience. Whether this is your first time here, you've found yourself dipping into our content in the past, or you're a regular visitor, this post will help you find the best of our content.Read More…
  • Web Design
    The Web Designer's Guide to Google GlassGlass retina
    As I look up into the screen just above my right eye, I think about all of the things Google Glass is: the future, a communication device (and a great one at that), a conversation piece, a camera, information literally right in front of your face, and as of the latest update, a web browser.Read More…
  • Design & Illustration
    Photoshop's Role in a Web Design WorkflowPhotoshop and web design preview retina
    The web has undergone some serious changes in recent years and the way in which the web is designed is changing along with it. Photoshop may still be the "go-to" tool for many web designers, but for some, Photoshop is no longer king. In this article, Ian Yates, Editor of Webdesigntuts+ will explain how Photoshop was used in the past, how it can be used in the future, and why. Read More…