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.

Scripts

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.

#grid

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.

Related posts:

1. CSS NEWS – A quick catchup
2. Your CSS framework needs you!
3. iFrame Buster Script!
4. Important Notice Regarding Your Website
5. Smush.it for WordPress – Optimise your images for a lightening quick website