In This Chapter
Lay out the grid
Grid tools and techniques
hose who are new to website design often start with a blank
canvas — that proverbial white page. Just as it is for writers,
that emptiness can be daunting to web designers. You may
have things to put on that page, but where do you put them?
For new designers especially, the best tool that I know of is the
grid. A grid provides much-needed balance and alignment to your
web page designs. The use of grids actually predates the web;
designers have been using them for as long as there have been
publications. But nowhere is this more evident than in a newspa-
per. Figure 11.1 shows the front page of the Los Angeles Times.
At the heart of the grid is the column. On this newspaper web
page, the layout is divided into six columns. With the Los Angeles
Times, the designers take no chances, placing vertical lines
between those columns to make the distinction even clearer. In
grid-based designs, you often notice the use of vertical and hori-
zontal lines to separate elements.
The columns of the grid serve as a guide as well as a way to cleanly
present content in an organized fashion. Text is most easily read in
short line lengths, so the newspaper’s narrow columns make the
reading experience easier. Along the way, those columns form the
backbone of the entire publication’s design. Using the principles of
the grid, newspaper designers are able to quickly lay out an attrac-
tive, easy-to-navigate page while still meeting their daily deadlines.
The same is true for web-based layouts. Once you create your grid,
you dramatically cut down on the time that you need to spend
when you implement new visual elements.
While the grid originated in the print world, it’s actually easier to
apply to the web. After all, unlike in print, the only dimension you
control on the web is the horizontal one. That is, you know how
wide your site will be, but you have no control over how tall it will
be. Even on a static website, where you’re coding the content man-
ually, your text can be rendered very differently on different plat-
forms, in different browsers, and by different users — depending
on the available installed fonts — thereby eliminating any control
you might have over the height of the page.
Let’s take a look at a grid that’s applied to a web page. MODx is a
content management system for the web; its site, shown in Figure
11.2, is a good example of the application of the grid.
17_533994-ch11.indd 25917_533994-ch11.indd 259 2/12/10 7:18 PM2/12/10 7:18 PM