PAGE DESIGN-2

Consistency

Establish a layout grid and a style for handling your text and graphics, then apply it consistently to build rhythm and unity across the pages of your site. Repetition is not boring; it gives your site a consistent graphic identity that creates and then reinforces a distinct sense of "place" and makes your site memorable. A consistent approach to layout and navigation allows readers to adapt quickly to your design and to confidently predict the location of information and navigation controls across the pages of your site.

If you choose a graphic theme, use it throughout your Web site. The Bridgeman Art Library home page banner, below, sets the graphic theme for the site and introduces distinctive typography and a set of navigation buttons:

www.bridgeman.co.uk

Below is a banner at the top of an interior page in the Bridgeman Art Library site. Note how the typography and the navigation theme are carried over to the interior banners. There is no confusion about whose site you are navigating through:

www.bridgeman.co.uk

Page dimensions

Although Web pages and conventional print documents share many graphic, functional, and editorial similarities, the computer screen, not the printed page, is the primary delivery site for Web-based information, and the computer screen is very different from the printed page. Computer screens are typically smaller than most opened books or magazines. A common mistake in Web design is spreading the width of page graphics beyond the area most viewers can see on their seventeen- or nineteen-inch display screens:

Graphic safe areas

The "safe area" for Web page graphics is determined by two factors: the minimum screen size in common use and the width of paper used to print Web pages.

Most display screens used in academia and business are seventeen to nineteen inches (forty-three to forty-eight centimeters) in size, and most are set to display an 800 x 600-pixel screen. Web page graphics that exceed the width dimension of the most common display screens look amateurish and will inconvenience many readers by forcing them to scroll both horizontally and vertically to see the full page layout. It's bad enough to have to scroll in one (vertical) direction; having to scroll in two directions is intolerable.

www.microsoft.com and www.mapquest.com

Even on small computer screens it is possible to display graphics that are too wide to print well on common letter-size, legal-size, or A4 paper widths. Current browser versions attempt to resolve printing problems by providing the option to scale the page contents to fit the standard paper width. However, many users are unaware of the "fit to page" option. Another problem is that wide pages that are scaled to fit are often illegible because the type has been scaled excessively. In many Web pages, however, printing is a secondary concern. Just be aware that your readers will either lose the right margin of your layout or produce a scaled document if they print wide pages in standard vertical print layout. Pages with lots of text should always be designed to print properly because most readers will print those pages to read them more comfortably. If the page layout is too wide readers will lose several words from each line of text down the right margin or have to contend with small type.

The graphic safe area dimensions for printing layouts and for page layouts designed to use the maximum width of 800 x 600 screens are shown below:

Graphic "safe area" dimensions for layouts designed to print well:
Maximum width = 560 pixels
Maximum height = 410 pixels (visible without scrolling)

Graphic "safe area" dimensions for layouts designed for 800 x 600 screens:
Maximum width = 760 pixels
Maximum height = 410 pixels (visible without scrolling)

Page length

Determining the proper length for any Web page requires balancing four factors:

1. The relation between page and screen size
2. The content of your documents
3. Whether the reader is expected to browse the content online or to print or download the documents for later reading
4. The bandwidth available to your audience

Researchers have noted the disorientation that results from scrolling on computer screens. The reader's loss of context is particularly troublesome when such basic navigational elements as document titles, site identifiers, and links to other site pages disappear off-screen while scrolling. This disorientation effect argues for the creation of navigational Web pages (especially home pages and menus) that contain no more than one or two screens' worth of information and that feature local navigational links at the beginning and end of the page layout. Long Web pages require the user to remember too much information that scrolls off the screen; users easily lose their sense of context when the navigational buttons or major links are not visible:

Scrolling

In long Web pages the user must depend on the vertical scroll bar slider (the sliding box within the scroll bar) to navigate. In some graphic interfaces the scroll bar slider is fixed in size and provides little indication of the document length relative to what's visible on the screen, so the reader gets no visual cue to page length. In very long Web pages small movements of the scroll bar can completely change the visual contents of the screen, leaving the reader no familiar landmarks to orient by. This gives the user no choice but to crawl downward with the scroll bar arrows or risk missing sections of the page.

Long Web pages do have their advantages, however. They are often easier for creators to organize and for users to download. Web site managers don't have to maintain as many links and pages with longer documents, and users don't need to download multiple files to collect information on a topic. Long pages are particularly useful for providing information that you don't expect users to read online (realistically, that means any document longer than two printed pages). You can make long pages friendlier by positioning "jump to top buttons" at regular intervals down the page. That way the user will never have to scroll far to find a navigation button that quickly brings him or her back to the top of the page.

info.med.yale.edu

All Web pages longer than two vertical screens should have a jump button at the foot of the page:

www.ynhh.org

If a Web page is too long, however, or contains too many large graphics, the page can take too long for users with slow connections to download. Very large Web pages with many graphics may also overwhelm the RAM (random access memory) limitations of the user's Web browser, causing the browser to crash or causing the page to display and print improperly.

Content and page length

It makes sense to keep closely related information within the confines of a single Web page, particularly when you expect the user to print or save the text. Keeping the content in one place makes printing or saving easier. But more than four screens' worth of information forces the user to scroll so much that the utility of the online version of the page begins to deteriorate. Long pages often fail to take advantage of the linkages available in the Web medium.

If you wish to provide both a good online interface for a long document and easy printing or saving of its content:

• Divide the document into chunks of no more than one to two printed pages' worth of information, including inlined graphics or figures. Use the power of hypertext links to take advantage of the Web medium.
• Provide a link to a separate file that contains the full-length text combined as one page designed so the reader can print or save all the related information in one step. Don't forget to include the URL of the online version within the text of that page so users can find updates and correctly cite the source.

In general, you should favor shorter Web pages for:

• Home pages and menu or navigation pages elsewhere in your site
• Documents to be browsed and read online
• Pages with very large graphics

In general, longer documents are:

• Easier to maintain (content is in one piece, not in linked chunks)
• More like the structure of their paper counterparts (not chopped up)
• Easier for users to download and print