Grid Computing… and Design

The layout grid I used for Subtraction Six.5 was improvised and inconsistent — I hobbled it together without much consideration or foresight, more interested in getting something finished than building something that would continue to make sense as I got more and more serious about the writing I post here. Over time, by virtue of repeated use, I became increasingly and lamentably invested in its tremendous shortcomings. When you make fairly liberal use of illustrations in your posts, you essentially wed yourself to the particulars of the CSS you’ve established, creating graphics of a certain width or ordering content in a particular method. It works in the short term, but it presents problems when you sit down to redesign.

Boxed In

By late this year, it pained me to know that I had written over three hundred posts that relied, in varying degrees, on that dodgy framework. So when I finally sat down down to think seriously about designing version 7.0 of this Web site, I paid serious attention to establishing a rational and sustainable layout grid that would see me through at least a few more years of doing this. Yes, I hope to keep at it that long.

The new layout uses eight columns and four ‘super columns,’ and it shoehorns everything into that structure, which is a kind of ‘for better or worse’ decision, though I think it’s definitely better. Each column is 95 pixels wide and separated by a 10 pixel gutter, which means I can create graphics of logical widths in increments of roughly 95 pixels each (things get a little more complicated when accounting for in-column padding&#41 — for me, this is a big methodological improvement over the arbitrary widths imposed by the old layout.

Below: Everybody fall in line. The new grid suggests graphics of a logical width, for a change.

The Old Ways Are Dead

I spent a tremendous amount of time fine-tuning the CSS so that it would match up very carefully with the grid, and so it would work across all modern browsers — and Internet Explorer too, though with decidedly less faithfulness. That was difficult but it least it was an intellectual challenge.

The hard part came when I had to sit down to retrofit all the posts I’d made over the past twenty-plus months which used graphics that break the grid — like this one. Rewriting the styles wasn’t that difficult; it was making sure that the special hacks I had used in the last layout to achieve various layout effects didn’t produce absolute gibberish in the redesign. Many of them did, and I had to painstaking search them out and change the flow of captions and images within the body to ensure that they’d look right. That took a long time.

Layout Grid

To always stay on the grid, I used a background-image property on the <body> to reveal the grid throughout development for the new layout — if you’re looking at this through a Web browser (versus a screen reader or a news client) you’ll see the columns running under the content in this very article. While no stroke of genius, coming up with this little trick left me very pleased with myself, as it allowed me to produce easily the most precise layouts of my career. It’s those little moments that are some of the reward for all of this otherwise pointless free work that I do.

+

13 Comments

  2. Shaun Inman

    Oh hurrah! I know I’ve said this before but your mastery of the grid is a treat to behold Khoi. Aside from that rehashed flattery, I’m left speechless…stunning.

  7. Anthony Baker

    Brilliant work.

    There’s so much similarity in a lot of the CSS work going on these days that it’s refreshing to come across your site and find someone completely breaking the mold. A definite inspiration.

  8. W3bbo

    Personally, I’m not convinced.

    Since you used the “px” unit to define font sizes, IE fails to resize fonts

    And the high contrast in the background stripe makes reading text that crosses the boundary hard to read.

    Other than that… it seems a useful concept.

  9. Marten Veldthuis

    The high-contrast is ofcourse nonesense, that’s only on this demo page, to show what he used during development.

    Actually, with this background I can see that the comment body is a little further to the right than the entry body, is that on purpose?

  12. Alexis Bellido

    Great idea Khoi, I’m currently using it for my site redesign. I “rediscovered” this post thanks to your funniest grid and Mark Boulton’s grid articles.

    Are you using Photoshop for your comps? I am doing so and using a grid layer, however I have some doubts with no precise pixels dimensions, for example I have a column of 258px to divide in two, with a 3px gutter (the same width used for all other gutters in the grid, or could I use a different gutter size for this column?), that would give me two 127.5px columns, I’m not sure how to handle these “fractional” columns. Ideas?

    Best regards!

Thank you! Your remarks have been sent to Khoi.