As a web designer and developer I use many tools to help me design and build a website. The initial design ideas are worked out on paper and within some kind of WYSIWYG graphics editor like Photoshop, Illustrator, Gimp or Inkscape.
Since reading Khoi Vinh’s Ordering Disorder: Grid Principles for Web Design I’ve been using grids – mostly just columns, really – to bring greater order to my designs. So far this new approach has been fruitful. A helpful tool in this regard is The Gridulator, which makes it easy to determine the dimensions of your grid and also download a graphic representation of the grid that you can use as an overlay in the above mentioned graphics programs while you are working out the details of a site design.
However, even if my idea is pretty nailed down in the sketching and graphic-editor stage, the act of actually building the site with HTML + CSS always presents new problems and solutions. Part of this is due to my clients not providing all of their content (or even knowing what it will be) until I’m at that stage. Another part of it is that laying out website designs in a static graphic state makes it easy to overlook some aspects of the site.
For these reasons and others I find myself doing a lot of actual designing from within the browser, either via Firebug or just a lot of trial and error with different properties in the code. Page structures in HTML + CSS can get complex fast and it can be tricky to stick to your grid if you aren’t always keeping it in mind. It would be helpful to have an easy way to overlay your grid over the web pages as they are built, adjusting the CSS properties until they are absolutely perfect. Or at least pretty damn close!
One recent weekend I had a freelance project that I wanted to avoid and so I determined that I would focus on this grid overlay problem and see if I could build it better and smarter. Figuring out this grid problem was a lot more important than working on a project that I would get paid to work on. I’m sure you can relate to the wacked-out sense of logic that leads to such decisions.
The result of that ridiculous procrastination was the initial version of what I am calling The Heads-Up Grid. It was actually looking good enough to share with others at that point. A friend suggested I post it on Hacker News to see if anybody would find it interesting. I did just that and got one comment from somebody that suggested I use JavaScript to generate the HTML elements, simplifying the necessary setup to get the grid working. They even gave me a bit of code to show how easy it is to do that with jquery. Once I saw that and understood how it worked, I really went to town!
The somewhat-final result is a fairly easy-to-use web page grid overlay. It has some nice features:
- simple settings
- vertical grid with columns and gutters
- horizontal or baseline grid that can be vertically adjusted
- on/off button displayed in top-right corner
- set grid to be on or off on page load
Please give The Heads-Up Grid a try. I hope you find it useful. I would love to hear feedback about it being useful or if you have some ideas about how it could be better.
Really great work. We have been tinkering with something at work to spot baseline issues on older systems but this takes it to another level for sure.
This is a great resource, I’m using it on the redesign of my portfolio site that I’m currently developing. It’s my first time using a baseline grid and I’m really loving it.
I do have a question, though – the baseline grid is sometimes not extending the length of the entire page. It fills the browser window, but when I scroll the page, anything that is ‘below the fold’ is lacking the baseline grid. Any idea what could be causing this?