Although I do not have the for­tune of owning an iPad (yet), one fea­ture on Apple’s web­site got my atten­tion: the 1024 x 768 res­o­lu­tion. I had been debating a thought for a while, but this made me cer­tain: my web­site was too wide. So I changed my grid. My pre­vious system used columns with gut­ters that stretched to a width of 1120 pixels total. Now there are no gut­ters, only 60px columns and it’s all con­tained in 960 pixels. When I need a gutter, I use the space of an empty column.

Luckily for me, my layout was very flex­ible. The trans­for­ma­tion only took about 10 min­utes to imple­ment! What made this tran­si­tion so simple was the system I used to make columns. Instead of set­ting widths for every ele­ment, I simply give some­thing a class of “four-column”. I like this tech­nique because it means I don’t have to clutter my stylesheet with the same num­bers over and over, and changing num­bers site-wide is incred­ibly quick. Of course the change was also made easier by the fact that this site is very new. I have little con­tent and I have yet to imple­ment any art-directed articles—but that will change soon (hint hint).

If your viewing this on the article page itself (and not in a feed reader or on the blog page) you should see the new grid under­neath the article. Khoi Vinh taught me that little trick, and I think it’s genius. So let me know what you think—an improvement?