Responsive Web Design

There are, broadly speaking, two types of technical book: those which attempt to bring large amounts of knowledge comprehensively covering a subject area under a single cover; and those which concentrate on really communicating the core concepts of a topic. This delightful little book is definitely in the latter camp, and is exactly how I like to start understanding a subject. As more information is pulled on demand from the web there is arguably less and less call for the first class of book, but there will always be a need for the quick, clear overview, and Ethan Marcotte has hit the nail right on the head.

In the first chapter, he explains how little we can now assume about how people will consume content, and the challenges of making sure that your web site will work across the range of different devices and connectivity environments. He also dismisses the concept of a “mobile ghetto” – one or more separate sites dedicated to a particular class of device – and establishes the concept of a fully responsive site. The following chapters explain how to achieve it.

Chapters 2-4 are the book’s core. In chapter 2 the author steps through the process of creating a web page as a flexible or “fluid” grid, avoiding any fixed sizing or relationship between the separate elements. This delivers a framework which is resilient to browser size changes, and should also be fairly browser independent. Chapter 3 focuses on ensuring that images and similar elements within that layout are also flexible, so they will resize with the others.

Chapter 4 takes this design and adds CSS media queries, enabling the browser to resize and move the page’s elements to better suit the needs of different shapes and sizes of device, the result being a fully “responsive” design, using just standard HTML and CSS. This is a longer chapter than the others, and goes on to explore some of the specific challenges of the approach, and some elegant examples of how to apply the principles presented.

The final chapter takes a slightly different stance, first exploring how the sample design will degrade in less complete browsers, and also considering the specific needs of mobile users. This leads into a discussion of the “mobile first” concept, in which website designs should focus on the essential content and progressively add features rather than subtracting them from the desktop design. Whether this approach will work for you depends a lot on context, but there are important concepts relating to focusing on the core content which apply to all designers.

And that’s it. I read the book in a couple of sessions, and then got stuck into updating my web site with all the key concepts well established. Ethan’s book is clear, well written and commendably short, and I’m happy to recommend it.

The book is not available from Amazon (except in French!!), but can be purchased and downloaded in multiple formats (including .mobi for the Kindle) from A Book Apart.