181

Designing for the Web ~ Layout

On a web page, we can’t be sure how long a page will be. Therefore, we can’t apply the Rule of Thirds to the vertical space, but, we can attempt to put some loose guidelines in place. We start by dividing the 960px wide ‘page’ into thirds, giving us three, equal columns of 320px wide. We also use the same measurements vertically. This will give us nine equal squares of 320px by 320px. What I’m really interested in here, is seeing how we can use this simple sub—division to create guidelines for nearer the top of the page — this is where a designer will have the most control of vertical space.

182

Now, I sub—divide each square into nine equal squares. I’m slightly jumping ahead of myself here, as this is now starting to look like a grid, and I’m going to come onto talking about that in a couple of chapters time.

107 px

107 px

106 px 107 px

107 px

106 px

320px

320px

The only problem with this is that we start getting odd numbers cropping up. 320px divided by 3 is 106.66666. We can simplify this by rounding up to 107, but having the last division as 106. Remember, this is only for approximate guidelines for layout. Now, we have some horizontal lines that we can use as a basis for laying out elements on the vertical plane. The same process can be done with percentages for fluid width designs. The beauty of this process is that vertical space is now not based on any arbitrary values. There is a direct relationship between anything aligned to these lines, to the overall width of the design, to the width of the columns, to the width of the sub—divisions and so on. Any composition based on this grid will hang off this connected ‘skeleton’.