Before I start, let’s get some stuff out of the way: I’m no Khoi Vinh. Neither am I an Ethan Marcotte or a Jeremy Keith. I’m not a published writer on the subject of grid theory, or a speaker on the conference circuit. However, this is the Internet, where everybody has an opinion – and this is mine. This post was inspired by Mark Boulton’s post on designing from the content out, which I subsequently failed to discuss with him in 140 characters.

Responsive Web Design

Responsive Web Design (originally popularized by Ethan Marcotte) is rapidly becoming the cause célèbre of modern web design, with designers from Jeremy Keith to Jeffrey Zeldman singing its praises. The theory runs that on the modern Web, with screen sizes anywhere from 2,560 x 1600 on the desktop down to 200 x 300 on mobile devices, enforcing an arbitrary best-fit page size based on the average desktop resolution just won’t cut it anymore.

Designing from the Content Out

Mark Boulton’s article makes the point that we should start designing from the content out, taking our grid from some element of the content and working from there.

“Grid system design should begin with a constraint. Something that is knowable and unchangeable. This constraint is used to build the modules of your grid. In book design, that constraint is defined by the page through subdivision. Book designers take the page, divide it up into a modular grid of spaces. These spaces (called modules) are then combined to create rows and columns. These are then filled with content (images and text). The text feels like it belongs because the columns are related to the physical object: the page.

How should we do it on the web? Remember the goal is connectedness and this feeling of belonging. We do that by defining the constraint from your content. The constraint could be derived from an advertising unit, or from a thumbnail image from tons of legacy content. Whatever it is, start there. Don’t start from an imaginary page.”

I’m all in favour of responsive design. It makes sense, for all that it’s turning into something of a must-have buzzword among the design cognoscenti – in fact, I’m planning to realign this site from its fixed 978px grid to something more flexible. Of course, if you’re reading this on a 1,024px-1,680px screen, you won’t notice any difference. That’s the beauty of it.

Boulton goes on to say:

“We can now design effective adaptive layouts that respond to their environment. If these layouts are based on a system that defines its ratios from the content, then there is connectedness on two levels: connectedness to the device, and connectedness to the content. The layout isn’t just 12 columns because that’s what my CSS framework gave me to use.”

This is the bit I’m having the problem with. By all means we can take our dimensions from an item of content, but let’s not throw out the baby with the bathwater. There’s nothing wrong with the number 12. In fact, I’d go so far as to say that 12 is perfect as an arbitrary subdivision of the page – whatever the page size may be. I’m not saying we should hold onto 12 60px columns with 20px gutters; that’s quite clearly the bathwater – but we must, as Boulton says, create some sort of constraint from the content. 12 is evenly divisible by 2, 3, 4 and 6. Once we throw out the fixed units and accept that our grid is fluid and our columns will adapt, 12 is as good a number as any. Designers of print pages had two fixed dimensions to work in: the width and height of the page. We on the Web have had one, allowing for the fact that we have no page break and the content we’re designing for may be of wildly variable length. That one dimension is now more fluid than it used to be

Responsive vs Fluid Design

A lot of the advantages of responsive design are the same as those presented by the old fixed-vs-fluid-design debate: the ability to use more screen real estate on larger devices. Where fluid design fell down was the rise of widescreen devices and the unreadably-long measure it generated. So let’s break down our content to the one thing we can reliably determine – a character of text.

Whether at 1:1 or scaled, we must set our text to a legible scale. Having determined the initial size of our body copy, we must then set our leading and measure so that the text presents a readable experience without straining the eye. With a leading of 1.5em a measure of anywhere between 60-100 characters per line gives us a very readable line length for main content, and it’s this that should be informing our layouts. Any more than this at a comfortable 14px would make an uncomfortable stretch – consider the impact of the W3C Blog when viewed at over 1,680px of horizontal resolution.

While it’s true that there’s quite a wide range of devices and resolutions that might be accessing our content, it’s also true that beyond a certain horizontal resolution the user will find it uncomfortable to read an unbroken line of text – we must therefore utilise the extra horizontal resolution in some other fashion; breaking a long sidebar into two, for example.

However we decide to break up our content, it must be subservient to the needs of both the content and the reader because that is what design is all about.

Bringing Back Baby

If we accept that our total content width and therefore our grid can stretch from 200px all the way up to 2,560px we’re left with a staggering array of possibilities, and that’s where the traditional grid structure comes back into play – in order to design, we must have constraints, and those we’ve arived at thus far are simply insufficient to inform our layout. So what do we have? We have a comfortable measure, a leading – 1.5em of 14px gives us a reasonable minimum gutter size of 21px too, as a gutter size of less than the leading would reduce the perceived structure of the text and impact legibility. Conversely, at larger layout sizes our gutter may be too cramped.

From our lack of any constants at all, we’ve arrived at a small number of constraints on which we can rely for any of a small number of ranges of resolution. So what’s wrong with what my CSS framework gave me to use? The answer, I think, lies not in the number of columns but in the units. A CSS framework gives us a reliable, cross-browser way of splitting content by half, by thirds or quarters or any combination of divisions. Yes, 12 columns is an arbitrary number but in opening ourselves up to responsive layouts we need to impose artificial and arbitrary constraints within which to work, because we can no longer rely on an “ideal” content width of 960px to do that for us.

The fact that we’re now dealing with ranges rather than fixed figures has no bearing on the usefulness of the 12 column grid, but we need to see those 12 columns from the inside out rather than the outside in – to relate them to the content which we want to halve or quarter rather than the fixed layout we want to divide. There’s still a place for the CSS framework but it must adapt – literally to the size of the viewport as much to the trends of design – or die.

Is this the way to Damascus?

This post started out as an attempt to rebut what I perceived as Mark Boulton’s knee-jerk reaction to 12 column grids and CSS frameworks but over the course of writing it I’ve come to agree with him rather more than I thought I did at the beginning, so for that I owe him a debt of thanks. Any misapprehensions are of course my own and comments, as always, are invited.