In 1927, Jan Tschichold published his seminal manifesto: Die neue Typographie. As with all manifestos, it’s a work of vision, new ways we should think; a work of unwavering principles on how we should design printed material. Abandonment of serif typefaces aside, one of the guiding principles was pointed out to me by my university lecturer regarding designing the perfect layout:

‘‘Though largely forgotten today, methods and rules upon which it is impossible to improve have been developed for centuries. To produce perfect books these rules have to be brought to life.’

The methods and rules Mr Tschichold is talking about are realised in Canons of Page Construction. Geometric systems that create beautiful text for books. Text that belongs. Text that feel connected to the physical form in a binding manner that should make it invisible. It’s about comfort. Creating a comfortable, invisible reading experience.

Binding content to the book is what all good book designers do. To do this, they use Canons of Page Construction, or other principles to design grid systems that, when populated by content, create that connection. But with all paper-based design, they start with paper. Paper that has edges, ratios that can be repeated. A canvas. And here’s the thing. Creating layouts on the web has to be different because there are no edges. There are no ‘pages’. We’ve made them up.

A richer canvas

If we take that basic desire of creating layout systems: binding content for a comfortable (read: native) experience. On the web, we have to abandon this notion of a page. Let's look at this practically. To design a layout system for a website we now have to consider:
  1. Screen resolution ranging from 2560px wide and above, down to 300px wide and less and, quite literally, everything in between.
  2. Different devices all with potentially different pixel densities.
  3. Context and usage. We have mobile, tablet, laptop, desktop, TV, fridge, car... etc.

To my mind, it’s becoming increasingly unrealistic to impose a best-fit ‘page’ when the variables are so far-reaching and are only getting more so. This isn’t going to get any simpler anytime soon, folks. It’s my belief that in order to embrace designing native layouts for the web – whatever the device – we need to shed the notion that we create layouts from a canvas in. We need to flip it on its head, and create layouts from the content out.

Content out

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.

Think responsively

Ethan's superb article, talks and upcoming book have given us the tools to make this approach a reality. 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.

The time is now

The conditions are right.

With Responsive Design, CSS3 & browsers, we have the tools. Thanks to people like Kristina Halvorson and Relly Annett-Baker and all the other content strategists out there, we’re taking content by the scruff of the neck and we’re able to determine what is knowable much earlier in the design process. Above all, we have the desire and the ability to re-write the rules that have matured over literally centuries of graphic and book design practice.

Embrace the fluidity of the web. Design layouts and systems that can cope to whatever environment they may find themselves in. But the only way we can do any of this is to shed ways of thinking that have been shackles around our necks. They’re holding us back.

Start designing from the content out, rather than the canvas in.

For those who may want a little bit more than this rather high-level blog post, I’ll speaking about this very topic - with plenty of practical application - in my upcoming talk at An Event Apart in Boston in May, and my book which will be out this summer.

Oh, and incidently, the blog post is in response to Chris Shifleft’s call for more blog posts. His Ideas of March post has already prompted many people to blog more than they could ever do through Twitter. I too pledge to blog more in 2011 than I did last year. Promise.