Page Grids

Problem

Web sites have a need for consistency amongst common page elements, page width, division of space, ad usage and code base.

Successful web page design often leverages methods rooted in print design by utilizing an underlying grid system.

First, establish a grid, or system of grids, that take into account readability, advertising needs, dynamic elements, etc.

Next, create templates and code to support designers and developers:

For designers, create templates authored in commonly used applications such as Adobe Photoshop and Illustrator. These templates should include details like column and gutter widths.
For developers, create a single CSS code template that accommodates page variations (such as number of columns.) Templates should also reflect details such as the gutter widths defined by designers.
Example: Yahoo! CSS Page Grids

Templates reduce designers' preparation time and let them focus more on the site's content and features.
Consistency across pages and page elements contributes to a cohesive brand and user experience.
A common source code offers a number benefits:
- Reduces the number of subtle or major variations in the page layout.
- Expedites development and global page updates.

Having a clean and consistent page structure assists in ease and predictability of navigation and readability.
When using CSS for structuring page layout, content may be placed in the HTML file in any order. However, it is important to put the most important content first. Assistive technology will read the content based on physical order and structure. For example, a left navigation menu may be placed at the bottom of the HTML with the main content first. The assistive technology will read the content first. The CSS, however, may place the navigation area visually before the content area.

Yahoo! Pattern Library