Notice: This post refers to an older design of this site, so the specifics are no longer relevant. Funnily enough, I’ve extended the old grid overlay idea to work anywhere on the site. Thanks to the hashgrid plugin, all you have to do is press the ‘G’ key to see the grid I work with. The technique was incredibly helpful while building the site, but I saw no reason to remove it afterwards.
Although I do not have the fortune of owning an iPad (yet), one feature on Apple’s website got my attention: the 1024 x 768 resolution. I had been debating a thought for a while, but this made me certain: my website was too wide. So I changed my grid. My previous system used columns with gutters that stretched to a width of 1120 pixels total. Now there are no gutters, only 60px columns and it’s all contained in 960 pixels. When I need a gutter, I use the space of an empty column.
Luckily for me, my layout was very flexible. The transformation only took about 10 minutes to implement! What made this transition so simple was the system I used to make columns. Instead of setting widths for every element, I simply give something a class of “four-column”. I like this technique because it means I don’t have to clutter my stylesheet with the same numbers over and over, and changing numbers site-wide is incredibly quick. Of course the change was also made easier by the fact that this site is very new. I have little content and I have yet to implement 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 underneath the article. Khoi Vinh taught me that little trick, and I think it’s genius. So let me know what you think—an improvement?