Archive for April 30th, 2007

With all the recent talk of grid-based web design, you’d think there would be an easier way to visualize what that actually means. Well now you can! GridFox is a Firefox extension which places a grid on top of any website. If you’ve started your design from a grid-based layout, you can now easily check to make sure everything is lining up the way you had planned.

What’s a grid-based layout?

It’s a way to design a page layout based off of a simple grid. I got the idea for GridFox after reading Khoi Vinh’s post on TimesOnline.co.uk. He showed how The Times of London used a grid-based layout to design their site. In Vinh’s post, he had some graphics which really helped to illustrate the point. Using GridFox, you can now have that same grid view on top of any site without the hassle of using Photoshop to draw them yourself.
To learn more about the advantages of grid-based design, I highly reccommend checking out Vinh’s presentation slides from SXSW.

Install GridFox 1.0

Try it out for yourself

1. Install the extension in your Firefox browser by clicking the link above.
2. Head on over to http://www.timesonline.co.uk
   
3. Once you’re there, click on Tools > GridFox > Options
4. Set the Column Type to ‘Varied Column Width’
5. Set Column widths to ‘200,200,200,370′
6. Click ‘OK’ and watch the magic happen

Special thanks to Brandon Turner for helping me develop this extension.