WEB STANDARDS CREATIVITY

134
Ratios and the canvas
Ratios are at the core of any well-designed grid system. Sometimes those ratios are rational, such as 1:2 or 2:3, and sometimes
they are irrational, such as 1:1.618 (the ratio of the Golden Section). The challenge in designing grid systems is using
those ratios to create harmonious compositions.
Ratios are applied to a grid system using the measurement of our choice. One thing we cannot control on the Web, however,
is the canvas on which the grid sits—the browser window.
The canvas size for print design is determined by the media size, whether it’s paper, signage, envelope, or whatever. The canvas
size for grid design on the Web is normally determined by the browser window size, which can, in turn, be determined
by the user’s screen resolution. These are not fixed. To take into account this flexibility, a designer should design to the minimum
requirement, which is normally the average screen resolution for the majority of users.
I’m not going to quote figures here, because I’ll probably be wrong, but for quite a few years now, the screen resolution to
design has been 800 ✕ 600 pixels.
With the relaunch of sites like A List Apart (see Figure 6-3) and Stylegala, there has been a renewed discussion about fixedwidth
grids for 1024 pixels. In terms of the actual grid design, it really doesn’t matter what size the canvas is. What should be
determining the decision to go with 1024 pixels is research into users’ screen resolutions. If the user base of a certain site is
shown to be using resolutions of that size and above, then a decision to use that size to design to is a valid one.
Figure 6-3. A List Apart, designed by Jason Santa Maria, uses a wider than standard width. This allows more flexibility with the layouts you
can produce with a grid.