Uncompromising web grid layouts
In its purer form, the grid layout tells you the size of gutters – based on text size and leading – and the vertical positioning of elements.
Since Mueller-Brockmann's book, design professionals have diluted the grid, to be less rigid; now you can put anything anywhere and draw a line and call the whole thing a grid.
The web is even more difficult to work with a pure grid. But it's possible.
With one extra unit of design work, you can get the pixel layouts right. If users override the pixels, that's really their problem, and they would see a less perfectly positioned website, but it would still work.
The first way web designers cheat is by crowding the columns together. It's up to you, but your website doesn't have to look crowded.
(Gutters should be the width of the vertical distance between the descender of one line, past the next line, to the ascender of the third line. That is, a line, plus the whitespace above and below it.)
The big problem is aligning bits of text and images. In fact, you really have to want perfection before it makes since to add margin-top pixels to the top of each column to get text of different sizes to line up. But you can do it.
The example also shows one way to vertically position images to the grid. It floats a one pixel wide div to the right, and gives it the right height to push the next image down the page to suit the grid.
Also note that the in-column image is sized vertically so that it doesn't disrupt the flow of text.
Here's what I think: making a half-decent website is a lot of work. Over time, you may pour thousands or tens of thousands of 'man'-hours into it. If you put a few extra hours in up front, you don't have to settle for half-decent: you can have decent, or even an excellent website.
If you're using a browser than can deal with .png transparency (Gecko-based, Safari, Opera, etc.):
Grid example for good browsers
Or if you use IE 5.5+:
The png transparency lets the grid overlay the entire content, with the content peaking through the partially transparent grid. For IE, the content covers up the grid background.
Here's a question: are you mad enough to add extra vertical whitespace to the bottom of your content in order to push the footer down to hit the grid? For every web page it would take you an extra two seconds. Most websites couldn't manage this in a million years. Most website suck.
Copyright © 1998-2011 J. R. Boynton