Responsive Web Design Book Review

Every once in a while a book comes along that changes how we think about designing and building websites. Nearly a decade ago that book was “Designing with Web Standards” by Jeffrey Zeldman. It taught us to shun table-based layouts and push ahead with semantic markup, to embrace standards and shun hacks.

Today I think that book is “Responsive Web Design” by Ethan Marcotte.

It’s the fourth book in the A Book Apart “Brief books for people who make websites” series. (We reviewed the first, Jeremy Keith’s “HTML5 for Web Designers” last August.) In this new book, Ethan details how and why to create websites that are “responsive”, or that adapt to the devices on which they’re rendered. He does it in a way that’s informative but also witty and genuinely fun to read.

What is Responsive Web Design?

There’s no denying that the web, and how we view it, is changing. One in three American adults now owns a smartphone while e-readers and tablets continue to grow slowly but steadily (PDF). The web is no longer just your desktop browser, it’s everywhere.

Responsive Web Design means designing and building websites in a way that they will automatically adjust to the size of the browser.  On a desktop, this can mean a fluid layout that expands and contracts for different sized monitors.  On mobile devices and tablets this can mean re-designing (or even removing) content areas so that they fit on a much smaller screen.

The Magic of Media Queries

Most web developers are already familiar with the concept of serving one stylesheet to the browser and a second simpler stylesheet for the printer.  Media queries takes that concept one step further and allows us to specify styles based on the physical characteristics of the browser, such as the screen width.

Take the following example:

body { background: blue; }

@media screen and (max-width: 480px) {
     body { background: green; }
}

The above code will set a default background color of blue. For devices that have a small screen (maximum width of 480px) the background color gets overwritten and becomes green.

Obviously that’s a simplified example, but it shows how easy it is to serve custom CSS for different devices. You could use this technique to define a CSS class that would automatically hide blocks of content on devices with small screens.

@media screen and (max-width: 480px) {
     .hideFromMobile { display: none; }
}

The website that accompanies the book offers many more detailed and real world examples.

Responsive vs. Separate

Some in the industry would argue that separate devices deserve separate sites. Users on smartphones for example, may have different content needs than those accessing the same site from their office computer. Wouldn’t it be better to direct them to a different mobile site that has content specifically targeted to them? The answer is… maybe. Responsive web design is a great solution, but it’s not the only solution. It’s important to remember that content strategy plays an important role in either scenario and that you should always assess your user’s needs before picking your approach.

Conclusion

How we access the web is changing, and Mr. Marcotte’s book teaches how to embrace that change and create projects that offer more value to our clients and to our end users, making it a must read for anyone in this business.

Ethan Marcotte’s personal website as well as the book’s example site both use the techniques described in the book well. For a real-world example from our own portfolio, check out the site we created for our friends at Wild Blue Flight. Re-size your browser window (or view it on your smartphone) to see how the page re-formats for smaller screens.