8th Jan

Grid Overlays to assist your website development

I’m a web designer by day and a web designer by night, I pretty much live and breath the web. I use many tools to assist me in my workflow, tools that both assist me in maintaining quality in my work and also in saving time, time I’d much rather spend catching up on the latest season of The Wire.

One pretty cool tool I use to assist in the development side of web design are grid overlays. Grid overlays are exactly what they sound like, a grid that overlays your website. I use them as a quick visual guide to check to see in all my elements line up as intended and are pixel perfect.

Browser plugins

One option is to use Firefox and an extension called Gridfox. This is useful as I already use Firefox as my main development browser.


Andy Budds Layout Grid Bookmarklet

A more die hard approach would be to use Javascript. Andy budd wrote a nice overlay grid bookmarklet, originally inspired by Khoi Vinh’s post about using a background image of a grid for layout. The script is also demonstrated on the SubtleGradient website.


A personal favourite is this Hashgrid script you can embed on your site. The clever part is you can turn it on and off by typing ALT + G – g33k! The clever scripting gives me the functionality I need, if I have a particular layout to test with a different structure I can simply replace the bg image.

Designing with Grids in mind

Do you or have you considered using a CSS framework when developing sites? Personally I don’t as I feel I can write lightweight CSS which is both flexible and cross browser. Photoshop guides and grids help in the design phase but you lose these when developing, until now of course.

In summary

These tools help bridge the gap between the design phase (Photoshop, guides and grids) and the development phase (using these tools to test and compare). Let us know if there are any other tools out there that do something similar, I’m sure I’ve missed some, oh and let us know what you think of these, if you already use them and what your experiences of working with them are.


Leave a reply below

  • January 9, 2010 at 2:13 am // Reply

    This is sweet! I love your blog design, i’ve never been to your site before and I’m pleasantly surprised to see all of this :) Keep up the great posts man

  • Pingback: for all you grid lovers - DesignersTalk

  • January 12, 2010 at 12:44 pm // Reply

    @Inside the Webb

    Thanks for stopping by. We’ve been online few a couple of years now and we feel the design needs an overhaul, hopefully you’ll like the new design as much as the current one. Shortly we’ll be releasing some exciting WordPress themes for free aimed at bloggers and designers a like so check back soon.

  • January 12, 2010 at 3:37 pm // Reply

    A very useful tool, thanks for sharing this…

Leave a Comment