Web page content (e.g., tabular data with many columns, image editors, portal applications with multicolumn layouts, etc.) requires considerable horizontal space. If presented using a preset width (FIXED-WIDTH LAYOUT), content would either appear too cramped to users with large monitors or require users with small monitors to scroll horizontally, which is typically not preferred (Nielsen, 2005).

Design web pages using a liquid-width layout such that as users widen or narrow the browser window, page content and data adjust to its width; this approach is also referred to as a fluid or flexible layout (Figure 12.1).

It is very difficult to know or predict users’ screen resolutions and browser window size preferences. Thus, designing for a specific width takes control away from users; instead of the design adapting to user preferences, users are forced to adjust to the design. Furthermore, with fixed-width layouts, much of the available screen space remains unused for users with high-resolution monitors. On the other hand, those using lower-resolution monitors may need to scroll pages horizontally to view the entire page.

Using a liquid-width design allows different page areas to adjust to browser window sizes and minimizes unnecessary horizontal scrolling. It also allows users to open sidebars for browser history and bookmarks without affecting their ability to view page content. In addition, users with vision deficiencies may prefer to use larger text sizes, which can be easily accommodated with liquid-width designs.

Although the study by Bernard and Larsen (2001) found no significant differences in user performance with liquid- or fixed-width layouts for reading and searching tasks, most users preferred a liquid layout. It could be argued that Bernard and Larsen's conclusion is dated because they used a monitor resolution of 1024 × 768, and almost 40 percent of users on the Web today use screen resolutions higher than 1024 × 768 and may have a different preference (see w3schools, www.w3schools.com/browsers/browsers_display.asp). However, using larger-resolution monitors does not necessarily imply that most users maximize their browser window to their maximum screen resolutions, and 60 percent of web users still use screen resolutions of 1024 × 768 or lower.

Designing a liquid-width or fluid-width layout requires page components—at least those occupying the main content area—to have a specific width relative to the browser's window width, which is usually accomplished by designing pages using percentage values. For example, overall content can be set to 100 percent, main content to 62 percent, and sidebar content to 38 percent (Clarke, 2007).

As already mentioned, large screen resolutions are becoming common, and designers have started considering PROGRESSIVE LAYOUTS to ensure that pages' content readability does not suffer when users maximize browser window sizes.

Liquid-width design can create excessive empty spaces between elements for pages with fewer elements. This not only makes pages appear sparse, disorganized, and disconnected but also less readable and visually appealing.

Use a design that has a fixed width to ensure that page components remain together and appear coherent (Figure 12.4). Fixed-width layout means that the width of the page content is set to a certain pixel width irrespective of browser window size. Users cannot change the width by resizing the window or by changing the text size.

For web applications that do not demand excessive horizontal space (i.e., mainly textual content and tables with just a few columns), a fixed-width layout is the most suitable, as information readability and scanability can be maintained even for large browser window sizes. In addition, with fixed-width layouts, designers have complete control over the placement of page elements, which allows them to ensure the layout appears almost identical in all major browsers.

Fixed-width layouts are typically designed by specifying the page width in pixels—an absolute unit of measurement. A downside of such an approach is that it doesn't scale well for users who have set text sizes larger or smaller than those specified by the designer. A common alternative is to use measurement units relative to the text size—that is, in em or ex. This layout is commonly referred to as an elastic layout because such a layout changes its size based on the text size users set. However, designs using elastic layouts are still unaffected by browser window widths and thus are fixed-width designs.

Optimal screen resolution for specifying the width of the layout is an important consideration when designing fixed-width layouts. Design for 800 × 600 resolutions to accommodate the largest number of users without introducing horizontal scrollbars. The width of the layout is then typically set to 750 to 770 pixels (with 30–50 pixels allocated for the browser chrome). In situations where the design is targeted for 1024 × 768 screen resolutions, the fixed-width container is set at 960 to 980 pixels. The goal, of course, is to prevent horizontal scrolling for the vast majority of the web application's users. Baekdal's (2006) research suggests that fixed-width designs for lower (i.e., 800 × 600) resolutions would support about 95 percent of users, whereas those designed for larger (i.e., 1024 × 768) resolutions would support only about 80 to 85 percent of users.

Designers may want to consider a PROGRESSIVE LAYOUT, which offers a trade-off in that although it yields some design control to users by allowing the layout to adjust to the browser window width, it allows designers to put restrictions on minimum and maximum widths and still provide considerable control over the page's visual appearance.

Users with large screen resolutions (e.g., 1920 × 1200) may find pages using liquid layout difficult to read or scan with a maximized browser window. Users may not want to narrow the browser window size because they prefer larger widths for other applications, which may be available as tabs within the same browser window. On the other hand, users with smaller screen resolutions may find fixed-width designs difficult to use because they require them to scroll horizontally.

Use a progressive layout¹ with defined minimum and maximum widths to maintain page readability and aesthetic integrity. Pages designed using a progressive layout work as a liquid-width layout within a range of browser window widths. For browser window sizes below a certain minimum width and above a certain maximum width, the page behaves as a fixed-width layout (Figure 12.7).

Progressive layout offers benefits of both liquid- and fixed-width layouts. It works as a liquid-width layout between a range of browser window widths and as a fixed-width layout above and below those widths. This helps satisfy the needs of users with either lower or higher screen resolutions. In addition, it allows designers reasonable control over a page's visual appearance.

Identify the minimum and the maximum design widths based on the target users’ screen resolutions and design needs. Then design pages so that they remain at a fixed width below and above the minimum and the maximum browser window widths, respectively, and adjust to the browser window size between them.

Implementing such a design is possible by setting min-width and max-width style rules. However, because Internet Explorer versions 6 and 7 do not support min-width and max-width attributes, use of JavaScript is required to ensure that the design works correctly on all browsers (Fulciniti, 2005; Jesse, 2007a, 2007b).

Progressive layouts provide a graceful solution to counter arguments against designs using fixed- or liquid-width layouts. However, depending on the nature of the content presented by the application, either FIXED-WIDTH LAYOUT or LIQUID-WIDTH LAYOUT may be more appropriate and should be considered during design.

Users need to clearly see and understand relationships between different page elements. Not using a systematic approach to lay out the page and its elements may lead to a cluttered design and make it appear unnecessarily complex.

Use a grid-based system for placing and aligning web page elements, giving web pages a visual structure and coherence and making it easy for users to understand the content's organization (Figure 12.8).

A grid offers a consistent approach for designers to position and align various elements on a page and create appropriate visual hierarchies such that the resulting layouts are visually pleasing and easy to use. Laying out and aligning page elements using grids not only makes the pages appear simpler and visually pleasing, but the consistent placement of components within the grid makes the application easier to navigate.

When using a grid, pages are divided into rows and columns, and grid lines are used to position and align web page elements. The grid of rows and columns itself may be established using the rule of thirds or using columnar grids that create units in multiples of threes (Figure 12.9; Baird, 2007; Vinh and Boulton, 2007).

Once the grid is established, the next step is to position elements on the page that will be consistent throughout the application, such as logos, navigation (primary, secondary, and utility), headers, footers, and so forth. However, if content changes from one page to another, which may often be the case for web applications, it may be beneficial to position content within the grid first. The benefit of this approach is that after placing the most important content on the page, it should become pretty clear whether navigation should be placed at the top or on the sides (left or right). For example, if content demands horizontal space, such as reports or search results, positioning navigation at the top can free up horizontal space.

Unlike printed pages, which have a fixed width and height, web pages provide limited control for vertical content, especially with a varying amount of page content occupying different amounts of vertical space. If the layout has to adapt to varying amounts of page content, maintain relative positions of elements within the page. A trivial example is the page footer, which could always appear after the page content no matter how much vertical space is needed by the page content.

One of the important reasons for using the grid STRUCTURE pattern is to ensure that the resulting design leads to a logical and predictable organization, improves comprehension, and makes it easy for users to find desired information (VISUAL HIERARCHY).

Users need to make sense of information presented on web pages so that they can attend to the most important information first before moving to information of less importance.

Design pages such that the visual hierarchy is obvious to users. That is, use visual cues so as to clearly indicate grouping and the order of elements on a web page, and help guide users through the page so that they understand the page's purpose, comprehend its organization, and correctly assign importance to various page elements (Figure 12.12). As Lynch and Horton (1999) stated: “Graphic design is visual information management, using the tools of page layout, typography, and illustration to lead the reader's eye through the page.”

Establishing a visual hierarchy serves several important functions (Wroblewski, 2002):

Creating an appropriate visual hierarchy, therefore, makes users more efficient and effective when interacting with web applications.

Because designers are attempting to correctly convey the importance of page elements through visual hierarchy, the obvious first step is to list page elements on a page in terms of their importance. The next step is to use one or more of the following visual components to order, position, and design those elements that reflect the desired visual hierarchy: contrast, chunking, images, alignment, white space, font sizes, shapes, colors, and others. For example, to elevate a page element to the top of the visual hierarchy—that is, provide the highest emphasis or importance to an element—it could be made larger, bolder, shown in a high-contrast color, separated from other elements using additional white space, wrapped into a bright-colored border, included with an image, and/or placed closer to the top left or top center of the page (Figure 12.13).

Aligning page elements is extremely important for establishing an appropriate visual hierarchy and for guiding users through page elements. GRID STRUCTURE is typically used to ensure proper alignment of page elements and to facilitate content scanning. Knowing visual hierarchy of the page is also important for SEMANTIC MARKUP (see Chapter 11). The order of elements in the page markup should reflect the desired visual hierarchy so that when the page is rendered without style sheets and images, the visual hierarchy of page elements is still maintained.

Certain page elements need to stand out and grab users’ attention, not only to establish their importance (VISUAL HIERARCHY) but also in response to users’ actions (e.g., selecting an element) or to communicate to users a status change for page elements or individual data items.

Highlight selected or changed elements to direct users’ attention to them (Figure 12.18). If necessary, indicate the “value” or the extent of the change.

Highlighting is important to provide a visual feedback about selected elements as well as to direct users’ attention to changes. It is also useful in the following ways (Mahemoff, 2006):

Highlighting is particularly important for pages communicating different states for a wide variety of elements, since it not only directs users’ attention but also invites appropriate action.

There are several ways to highlight a page's elements to make them stand out: change the background color, change the text color, make the text bold or a larger size, change borders, use animation (see the patterns ANIMATIONS/TRANSITIONS and SPOTLIGHT/YELLOW-FADE in Chapter 8), dim some elements, or use icons; ideally, use a combination of these styles (Figure 12.19 and Figure 12.20).

Animations and transitions are also useful ways to call users’ attention to the changed elements (see the ANIMATIONS/TRANSITIONS and SPOTLIGHT/YELLOW-FADE patterns in Chapter 8).

Designers want to make different page objects and actions easily recognizable without requiring excessive space and, at the same time, want to make the interface visually pleasing and inviting to users.

Use icons to represent commonly used objects and actions (Figure 12.23).

Icons may be used in web applications for a variety of reasons:

Most important, use familiar icons (Nolan, 1989)—that is, use concrete (rather than abstract) icons and those that remind users of things already known. Use icons that clearly suggest the objects or actions they represent. Ideally, users should be able to recognize icons without any accompanying text labels.

When used with health badges, icons are often used to highlight status change. Therefore, consider using other highlighting practices to ensure that users have noticed the change (HIGHLIGHT).