Page Layout
Introduction

Web designers have multiple layers to attend to. The visual layer is likely the one that gets the most attention and care, but Web design does not stop at the screen. To produce effective and functional designs that enable visual and nonvisual access, we must consider the visual characteristics of a page along with its underlying structure. The ultimate test of a Web page is how well it performs when read by software. This readability is influenced by the methods used to lay out pages.

Nonvisual access is contingent on the order in which elements appear in the code. Software reads Web pages from beginning to end. For pages to read well, elements must appear in logical sequence in the code. Related elements should be in close proximity and important content should appear at the beginning of the page. Pages that begin with layers of advertising, branding, and navigation links, or with content embedded within layout tables, do not read well.

When laying out a page visually, we use various design and typographic devices to identify and differentiate page elements, thereby revealing information structure. These cues must also be present for nonvisual access. When grouping related elements visually, make sure they are also grouped in the code. Use headings instead of visual text formatting to communicate information structure. Structural markup is the most effective way to communicate page structure to nonvisual users. Navigation links that are coded as a list are differentiated from other page elements by virtue of their enclosed markup.

Design simplicity and consistency are attributes that benefit all users. Too often Web sites are composed of pages that are overladen with navigation links and extraneous elements that get in the way of access. The elements used to establish the purpose and tenor of a Web site (logo, graphics), along with the elements used to operate it (navigation, search), must be balanced with the site content. Once a balanced design approach is established, the design should be applied consistently throughout so users learn the workings of a site once and can apply what they’ve learned to all pages.

Very often Web pages are designed to "optimal" dimensions based on the most common display resolution—800 x 600 or 1024 x 768. As more and more users access Web pages on a growing number of devices, this approach has become obsolete. For universal usability, page layouts must adapt to different viewing conditions. Building flexible pages using techniques that allow pages to adapt to different resolutions, zoom levels, colors, and so on, is the way to provide an optimal solution.

In creating a layout, style sheets offer the best solution for flexibility and device independence. As we have noted elsewhere, separating content and presentation allows users access to page content that is not tied to its presentation. This method holds true for page layout as well as content markup. Layouts that are designed using style sheets can be viewed on different devices using different style sheets.