Page Layout
Design flexible page layouts

Web pages are inherently accommodating. Left to their own devices, page layouts adapt to fit the browser window. The flexibility of Web layouts worked relatively well in the early days of the Web, when pages were mostly single-column text documents that could hold their design at different widths. Once graphics made their way onto Web pages, size began to matter. A 600-pixel-wide image needs 600 pixels of width to render, whereas a line of text can reflow to adapt the window width. Layout tables were then "invented," making true page layout possible, and fixed designs of a certain optimal width became the norm. A fixed-width design approach works well for complex, multicolumn layouts because it offers control over column widths and line wrapping. A complex layout is difficult to design with moving elements—for example, a button bar that wraps at a narrow window width. Fixed design forces a minimum width to preserve the integrity of the design.

A flexible, or "liquid," approach to page layout attempts to accommodate the diversity of display environments. Rather than serving only the "most common" display dimensions and the "typical" user, a flexible layout adapts to different viewing conditions and different user requirements. Flexible layouts are far more difficult to design than fixed layouts because elements need to be able to change shape and position without jeopardizing the integrity of the overall page design.

Design is often about compromise. In the case of fixed layout, the main compromise is that users cannot "unfix" a fixed layout—users cannot somehow extract page content and place it into a flexible wrapper that allows them to scale the text or to change the window width to better accommodate their needs or viewing conditions. With a fixed-width, multicolumn layout, users who enlarge text may have to contend with columns containing three or four words per line. Users viewing a fixed-width layout on a small display may have to use the horizontal scroll to access a full line of text (Figure 15.10). Both of these circumstances present significant usability challenges that cannot be resolved by the user.

Figure 15.10: CNET screenshots—standard and narrow window width

Figure 15.10: CNET uses a fixed-width design intended for 1024-pixel-wide displays. Users with smaller monitors will be forced to scroll horizontally to see the full extent on the page.

In the case of flexible design, the main compromise is that users are sometimes presented with long lines of text that are difficult to read. Typographic conventions suggest that a column width that produces approximately 66 characters per line is a comfortable line length, or measure. Long lines affect readability—the greater the distance from right margin to left, the more difficult it is to locate the next line when reading. When text is displayed in a flexible layout, line length is determined by the width of the browser window. A large display with a maximized browser window will likely result in long lines (unless the user has enlarged text), in which case, the user must either deal with long lines or narrow the browser window to a more comfortable measure.

The fundamental difference between the compromises that accompany these two layout methods is user control. With fixed design, users who need a different page width have no recourse, whereas with flexible design, users set page width by adjusting the width of the browser window. Moreover, it is important to note that conventions such as line length are meaningful in a fixed medium such as book design, where type size and line length cannot be altered. However, these conventions do not hold up in the Web environment, where users control type size, typeface, and column width, and are using a growing multitude of devices to access the Web, each with different screen dimensions and resolutions. On the Web, design is a moving target. A 66-character line on one display, resolution, and text size may be a 20-character line on another. A designer can only "suggest" attributes such as type size and line length. Besides, enforcing conventions using fixed design methods prevents access for users who may not fit the "average" profile.

Flexible layouts are the best page design approach for universal usability. Flexible pages adapt to different viewing conditions and respond to user control. To create a flexible layout, use relative measurements, such as percentages, to define the attributes of page elements—for example, set the banner width to 100%, the navigation column width to 20%, the main content column to 80%, and the footer width to 100%. Watch out for page elements that require a width window to display properly, such as a banner graphic or navigation tabs. Favor small images that do not require a wide page to display properly.