Version 7.0Fri 31 Dec
2004
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) — for me, this is a big methodological improvement over the arbitrary widths imposed by the old layout.
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.
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.
Remarks 13 total remarks were added before the post was closed.
Naz
Ahhh, it's here. Looks great.
Also - neat trick with this background grid.
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.
Thoams
I think this is great!
Adam Bramwell
I love process expose's, thanks for the tip about using bg-img for a layout grid, nice!
Peter Rasp
You might be interested in Grid systems by Josef Mueller-Brockmann. A classic design book.
John
Very nice (as always), and a great tip to boot.
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.
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.
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?
Paolo Tonon
Very inspiring. I'm plannig to use this schema to make my new website.
gustaf
Nice concept! Keep on rockin...
----------------------------------
www.sunstore-reisen.cc
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!