Review: Responsive Web Design

Author: Ethan Marcotte
Publisher: A Book Apart
Published: 2011
Pages: 157

Introduction

I first read about responsive web design in Ethan’s article on A List Apart over a year ago. Since then it’s sort of stuck in the back of my mind, but I didn’t do anything with it. More recently, RWD has been a subject of growing interest among web developers, and Ethan wrote this book, Responsive Web Design, on the subject. While the article on A List Apart introduces the subject, this book covers it in depth. It turns out to be a very illuminating read. Find out why!

Chapter 1: Our Responsive Web

To start out, Ethan ruminates on the change in publishing trends, from all print, to mostly print and some digital, to more digital. The common distribution method for digital content is, of course, the world wide web. Despite the differences in medium, principles remain the same: layout, colours, typography, and so on. Enter the challenge.

The web, being that it is accessible from so many electronic devices, does not appear or behave the same across this spectrum. The web is still young, and is maturing, and some web technologies are helping us along with adapting the web to our devices.

The overall solution for resolving, or at least mitigating, these cross-device issues is called responsive web design. It is the focus of this book, and is broken down and examined in detail in the following chapters.

To briefly preview the coming details, RWD is made up of the following:

  • flexible grids
  • flexible images/media
  • media queries

To provide a running example for this book, Ethan prepared a website, Robot or Not, to demonstrate the above techniques in action.

Chapter 2: The Flexible Grid

Ethan starts the chapter with a bit of history behind grid systems, followed by a seeming digression into responsive type. This digression is useful, however, as it introduces one of the techniques of responsive design: controlling type size. This deceptively simple, yet surprisingly useful formula is introduced:

target / context = result

This formula is a tool to help reduce the use of pixels in setting sizes of e.g. type, block elements, etc, part of the process of RWD. The em is used instead of the pixel, and is relative to the size of the containing element. Ethan points out the need to be mindful of nesting elements with different text sizes, as the context changes and requires performing the calculation with numbers appropriate to the context.

Getting into the meat of the chapter, Ethan shows the creation of a typical blog layout, a main content block and a sidebar. He starts with the normal practice of setting widths in pixels, which is inflexible with smaller screens, and progresses into a responsive version, which has a flexible page container as well as flexible columns. The importance of thinking responsively, as in the text digression, is highlighted here, and the magic formula gets much use. Especially considering which context is involved, which has a big impact on the result of calculations.

Ethan discusses not just widths, but also margins and padding, which further complicates the issue. How these are each determined differ slightly from width measurements, though again the same formula is used, but with different contexts.

Responsive grids seem like a fair bit of work to set up for anything beyond the simplest layouts. The running example starts getting complex, though the details are nicely presented. I suspect the process of doing this would be aided by pencil and paper to keep track of measurements for widths, padding, and margins for major elements.

Chapter 3: Flexible Images

With the flexible grid in place, the next issue at hand is that of images. In past years, it has been the tendency to display images with fixed dimensions, which don’t scale down for smaller screens or up for larger ones. As a fixed layout could be made responsive, so too can images.

The magic is largely done with a single CSS rule:

img { max-width: 100%; }

This forces the image to scale to fit the size of the element containing the image, such as a figure. Current browsers also maintain the proportions of the actual image in the scaled version.

This technique can also be applied to other normally fixed-size media items, such as videos. Ethan lists a number of elements this technique can be applied to:

  • img
  • embed
  • object
  • video

There are some cavets to this technique, which are reviewed in some detail. But overall, it looks like a very useful tool for scalable images on the web.

Chapter 4: Media Queries

The flexible grid and responsive images make the foundation for a complete responsive design. The final component is the media query, which can be used to adjust styles on the basis of screen size. Such adjustment can be essentially anything that can be done in CSS, but the main use is to adjust page layout on different screen sizes.

A long-standing issue with flexible or fluid layouts is that while they can scale up and down, they tend to appear too crowded on small screens and too wide on larger screens (line lengths would become too long to easily read). Media queries provide an avenue to, say, drop a sidebar below the content on a narrow screen, or turn a top menu into a side menu on a wider screen.

There is a lot that can be done with media queries, and the above examples only scratch the surface. Ethan goes much deeper here, covering logo sizing and placement, page margins, and text size, among other things.

Chapter 5: Becoming Responsive

In the final chapter, Ethan brings up some issues around responsive design. One is the opinion that mobile devices would be better served by mobile-specific websites, rather than responsive sites. There are some merits to that idea, which I think are outweighed by the content fracturing it would cause (a mobile version and a desktop version, each with the same content).

Another matter raised here is the thought of designing for mobile first, as suggested by Luke Wroblewski. This technique would ensure that smaller devices would get all the basic functionality and content, and enhancements could be added for larger and/or more capable devices. This is a form of progressive enhancement, and Ethan covers it in some detail, adjusting some of the previously-written media queries to follow this approach.

Conclusion

There’s long been the debate over the merits of fixed-width layouts versus fluid layouts. Both sides have their pros and cons. Responsive web design, as outlined in this book, is a solution to this debate.

Ethan covers in detail the main components of RWD, and also devotes space to various issues and possible solutions. He doesn’t just say what is being done, he also takes the time to explain why RWD is needed.

I’m having thoughts about retrofitting my site to make it more responsive; as it is, it’s a fixed-width design, which worked at the time I developed it and was before I read about RWD. This book would quite likely be my go-to manual for the process.

Given the growing relevance of the web and web-connected devices, I suspect this book is going to be a heavily-used reference and guide for web developers and designers in making web content responsive and accessible. It’s deceptively compact, but packed with information.

The bottom line: This book lays out the details of designing and building websites that will appear consistently on any device, regardless of screen size, web browser, or operating system. For today’s web usage patterns, this is essential. I highly recommend this book for web designers and developers.