HTML & CSS: The Good Parts

Layout Types and Canvas Grids

You must address two concerns when you create a page layout: the width of the layout in relation to the browser canvas, and the grid that will be applied within the layout. There are three popular approaches to linking layout width and canvas width, and two levels at which layout grids are applied.

Note

You’ll find warnings about the dangers of mixing fixed units with percentages. The most frequently encountered involve borders and rounded corners, both of which tend to work far better when resolved to static units, notwithstanding the desirability of applying them to elements of proportional width.

Fixed, Proportional, and Flexible Layouts

Even in the ever-changing web browser environment, a site’s designer must ask three questions before starting work on a wireframe or (perhaps) a composite:

• How much space do I need to communicate the site’s message?

• How much space can fit within the browser canvas of the site’s typical visitors?

• Will it serve visitors’ needs to use the entire canvas?

To some extent, these questions should also be answered with respect to separate components of a site’s design: “How much space do I need in x, and for what reasons?”

Because the answers to these questions vary from one project to the next and from one designer to the next, there are no universally correct answers. However, there are a number of design concepts that affect the horizontal composition of a layout:

Type sizes

Since there is an ideal number of words ...