Mark Porter

Editorial design

Long live the 12-column grid

September 9th, 2008


When I first crossed the great divide from print to web, one of the earliest things I tried to do was introduce a flexible multi-column grid (you know, like a magazine). We tried various options, but in the end the most successful was the classic 12-column which has graced so many great magazines from Twen (above) to, well, Guardian Weekend.

The magic of this grid lies in its flexibility. The single column is too narrow to be used practically for much other than space but 2, 3, 4, 5 and 6 columns are all useful measures, and mixing them up can add a lot of rhythm to a page.

I was wary of suggesting it because I didn’t want to enforce a print-based approach in a digital environment. But as soon as I realised that we could make an MPU ad (300px x 250px) occupy 4 out of 12 columns there was no looking back. We first used the grid on the launch design of comment is free, and then rolled it out across the whole network.

So imagine my delight at seeing that telegraph.co.uk (one of our main UK competitors) has paid us the compliment of adopting not only the same grid, but an identical article structure too.


guardian.co.uk


telegraph.co.uk

Which makes me wonder if there’s any other medium this grid can conquer. I think I feel a 12-column Berliner newspaper coming on….

12 Comments »

  1. Comment by Guillermo Nagore — September 9, 2008 @ 11:12 am

    I learned about the 12-column grid 15 yeears ago from Will Hopkins, who introduced it in the US (Look magazine) after working under Fleckhaus at Twen. I have used it since in almost all of my projects and I should say it is the best grid… ever.

  2. Comment by Michael [Boicozine] — September 9, 2008 @ 1:23 pm

    Multi Column based web designs are the way forward. Khoi Vinh at The New York Times has been an advocate for a number of years now, as are ‘newspaper as wiki’ propagators, Information Architects.

    http://www.subtraction.com/archives/2004/1231_grid_computi.php
    http://informationarchitects.jp/newsnetz/

  3. Comment by Manuel — September 9, 2008 @ 1:32 pm

    Hi, can you suggest me a blog post which details the design process behind guardian.co.uk?

    Surfing the web I’ve found a lot of articles on the newspaper 2005 redesign but almost nothing on the web site redesign (grid, css, cms, etc.)

    Thanks

  4. Pingback by Times Emit: Apt’s links for September 9th — September 10, 2008 @ 1:33 am

    [...] Mark Porter » Blog Archive » Long live the 12-column grid – Ah, the joy of grids. [...]

  5. Comment by peter — September 24, 2008 @ 9:53 pm

    I am interested to know baseline grids fit in the redesign? Blueprint CSS, a CSS grid framework, seems to address many old school issues. Love your site and work.

  6. Pingback by Mark Porter » Blog Archive » If you like that sort of thing… — December 2, 2008 @ 1:51 pm

    [...] and I generally do, heres a site devoted to all things griddy. Haven’t dug deep down into it but it’s [...]

  7. Pingback by Type the grid « WebOL — December 10, 2008 @ 9:48 am

    [...] 6 décembre 2008 The grid system is the basis of sound typography. Mark Potter saying so and giving his praise for 12-column grid, no doubt should arouse about [...]

  8. Pingback by LS graphic design » Lunga vita alla gabbia // Long live the grid — December 14, 2008 @ 12:30 am

    [...] base 960 pixel e modelli a 12 e 16 colonne. — Sul bel sito di editorial design di Mark Porter un post dedicato alla gabbia a 12 colonne. Molto interessante. — Sul prolifico Typophile un thread dal titolo «A tutorial for good [...]

  9. Pingback by OpenOn website - davidgswain.com — June 6, 2009 @ 12:31 am

    [...] crowd, the IA and the design where worrying points for me. I have based the initial design around a 12 column grid, with liberal use of the golden section. At the moment we are undecided on fixed-width, fluid or [...]

  10. Pingback by OpenOn website — davidgswain.com — September 23, 2009 @ 2:34 am

    [...] crowd, the IA and the design where worrying points for me. I have based the initial design around a 12 column grid, with liberal use of the golden section. At the moment we are undecided on fixed-width, fluid or [...]

  11. Comment by Ian Henderson — June 14, 2010 @ 11:30 pm

    Thank you for highlighting the 12 column grid and it’s usefulness. It’s encouraging to see it being used in web design.

  12. Comment by Frederik — June 20, 2010 @ 4:21 pm

    nice article. thx.

RSS feed for comments on this post. TrackBack URL

Leave a comment