In This Chapter
The Grid
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
Web Design
Figure 11.1
The front page of the Los Angeles Times newspaper
17_533994-ch11.indd 26017_533994-ch11.indd 260 2/12/10 7:18 PM2/12/10 7:18 PM
Chapter 11: The Grid
Figure 11.2
The MODx website
Note the visual alignment of the elements on this site. There’s a degree of harmony on this
page, which comes from the site’s adherence to a grid. Figure 11.3 shows the site again, with
the columns highlighted.
The MODx site employs a 12-column grid. Each column has a 10-pixel gutter — the space
between columns. Twelve is a great number because it’s evenly divisible by six, four, three, and
two. You can put together three groups of four columns, four groups of three, or six groups of
two. You can also mix and match the columns by using uneven groupings to create visual ten-
sion in the composition.
A well-designed grid is the backbone of a solid website. The following section shows you how
to build a grid.
17_533994-ch11.indd 26117_533994-ch11.indd 261 2/12/10 7:18 PM2/12/10 7:18 PM
Web Design
Figure 11.3
The MODx website, with the grid highlighted
Lay Out the Grid
The first step in building a grid for your site is choosing the width. While the limitations of
designing for the web reduce the choices available to you, this is a decision that depends not
only on the realities of screen size but also on the content that will be driving your site.
In most cases, however, your decisions are based on screen size. In 2009, most of my work still
revolved around the theory that you should design for screens with a resolution of 1024 × 768
pixels. This is the standard resolution found in older computers. Nonetheless, there are enough
of these computers around that you have to support them.
17_533994-ch11.indd 26217_533994-ch11.indd 262 2/12/10 7:18 PM2/12/10 7:18 PM

Get Web Development with the Mac® now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.