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.
+