Responsive Web Design

I liked Responsive Web Design, it's a well-written short book, though I think it could be even shorter. Using a sample site throughout the book to show how a fixed design is transformed to a responsive design was a good decision by the author, I found it instructive. What I didn't like was that almost all URLs mentioned were shortened (with an appendix listing the unshortened URLs).

My notes

Our Responsive Web

Regardless of the medium, choosing a canvas is a powerful, creative act: before the first brush stroke, before striking the chisel, the canvas gives the art a dimension and shape, a width and a height, establishing a boundary for the work yet to come.

Once they're published online, our designs are immediately at the mercy of the people who view them – to their font settings, to the color of their display, to the shape and size of their browser window.

[...] we're designing for more devices, more input types, more resolutions than ever before. The web has moved beyond the desktop, and it's not turning back.

Rather than creating disconnected designs, each tailored to a particular device or browser, we should instead treat them as facets of the same experience. In other words, we can craft sites that are not only more flexible, but that can adapt to the media that renders them. In short, we need to practice responsive web design.

The Flexible Grid

We'll simply take the target font size, and divide it by the font size of its containing element – in other words, its context. The result is our desired font-size expressed in relative, oh-so-flexible ems. In other words, relative type sizes can be calculated with this simple formula: target : context = result.

We can apply the same sort of proportional thinking to layout that we apply to relative font sizes. In other words, every aspect of our grid – the rows and columns, and the modules draped over them – can be expressed as proportions of their containing element, rather than in unchanging, inflexible pixels. And we can do so by recycling our trusty target : context = result formula.

When setting flexible margins on an element, your context is the width of the element's container. However, when setting flexible padding on an element, your context is the width of the element itself.

Ultimately, we need to break our habit of translating pixels from Photoshop directly into our CSS, and focus our attention on the proportions behind our designs. It's about becoming context-aware: better understanding the ratio-based relationships between element and container.

Flexible Images

If an img element happens to be wider than its container, then the max-width: 100% directive forces the image's width to match the width of its container. What's more, modern browsers have evolved to the point where they resize the images proportionally: as our flexible container resizes itself, shrinking or enlarging our image, the image's aspect ratio remains intact.

Media Queries

Since we're working with a flexible layout, we can simply resize the browser window to a few different widths. Now, this is no substitute for actually testing our work on separate devices. But it allows us to quickly assess how our design handles several different resolution ranges, and simulate how users on capable phones, tables, or other devices might experience our design.

Media queries are an incredibly robust mechanism for identifying not only types of media, but for actually inspecting the physical characteristics of the devices and browsers that render our content. Example:

@media screen and (min-width: 1024px) {
  body {
    font-size: 100%;
  }
}

Every media query has two components: it begins with a media type, followed by the query itself, wrapped in parentheses. And our query can, in turn, be split into two components: the name of a feature and a corresponding value.

We can chain multiple queries together with the and keyword.

We can use media queries to optimize the display of our content to best meet the needs of the device, creating alternate layouts tailored to different resolution ranges. By conditionally loading style rules that target these ranges, media queries allow us to create pages that are more sensitive to the needs of the devices that render them. In other words, by combining flexible layouts and media queries, we'll finally be able to make our sites responsive.

Responsive web design isn't just about making designs accessible to smaller screens.

Becoming Responsive

At its most basic level, responsive design is about serving one HTML document to countless browsers and devices, using flexible layouts and media queries to ensure that design is as portable and accessible as possible.

Relying upon all-too-convenient terms like "mobile" and "desktop" is no substitute for conducting the proper research into how your audience accesses your site: not only the devices and browsers they use, but how, where, and why they use them.

Designing for mobile devices first can enrich the experience for all users, by providing the element often missing from modern web design: focus.

Speaking broadly, responsive design is about starting from a reference resolution, and using media queries to adapt it to other contexts. A more responsible approach to responsive design would mean building our stylesheet with "mobile first" in mind, rather than defaulting to a desktop layout. So we'd begin by defining a layout appropriate to smaller screens, and then use media queries to progressively enhance our design as the resolution increases.