Chapter 5:

Page design basics


Even though the Web is relatively young, there are already some definite do's and don'ts regarding content creation. If you heed some of the following credos regarding text, page length, graphics, and color, you'll be on your way to presenting an attractive and well-turned Web page, one with content that readers will enjoyably sink their teeth into.

Time spent planning before you start "cooking" up your creation is time well spent. Consider these issues:

Using different browsers

As the Web grows in popularity, more browsers are becoming available. This means you can't assume that folks reading your pages are using the same browser you are. Even those who do use the Navigator might not use it all the time (they might use a different browser at home or at work).

Tip: Visit the Netscape home site for more information about Netscape extensions to HTML.

Don't make your document overly dependent on HTML features that can't be seen by all browsers. If you decide to use Netscape-only HTML tags, consider how your page might look to someone whose browser doesn't support those tags. Some browsers might not accept your graphics, so provide alternative text. Also, Navigator (and many other browsers) lets users choose how they want the pages they view to look. Users can choose fonts and font sizes, override a page's colors and backgrounds, and generally ignore a lot of the formatting options a Web author has specified.

Do assume that a user's screen size, number of available colors, and screen resolution will be different from yours, even those readers using the same browser. This means that a page that looks great on your screen might look completely different on someone else's. This is another strong reason to concentrate on content first, and use design options as enhancements only.

Setting page length

Most current personal computer monitors display 640 x 480 pixels on 13- to 15-inch screens. Designing your pages so that the information is presented in short, clearly segmented chunks will make it easier to keep pages concise.

A good rule of thumb for writing a page meant to be read onscreen is to make it no longer than two to three 640 x 480 screens' worth of information, including local navigational links at either the beginning or the end of the page layout. If you make the page longer than the window, your reader has to remember too much information that's already scrolled off the screen.

A disadvantage of a very long Web page is that the reader must depend on the vertical scroll bar slider to navigate. Small scrolling movements can completely change the screen contents, leaving the reader no familiar landmarks.

Keep closely related information within the confines of a single Web page, particularly when you expect the user to print or save the text. If you want to provide a good online interface for pages and easy printing or saving of the content, divide the page into chunks of two to three printed pages of worth information, including inline graphics or figures. Or provide a link to a separate file that contains the full-length text combined into one page.

Providing good content

While the graphic design of your pages should be pleasing, it is ultimately the content that determines a page's value to others. Use graphics and color and vary the font size to enhance your page, but make sure your page also works when viewed as straight text. And always include a text alternative to graphic elements.

Note: See the section "Doing graphics justice" later in this chapter.

Pare down your text. Usability tests show that people will skip over text that they consider non-essential. They don't like to scroll. Often readers will scan a page reading only the text of the hypertext links before they choose their next destination.

Settle on as few heading styles and subtitles as are necessary to organize your content, then use your chosen styles consistently. Just because Navigator Gold provides six levels of headings doesn't mean that you should use them all in a single page! Use heading levels in order, with one level 1 heading at the top, and if necessary, several level 2 headings. Be aware that different browsers use different spacing and fonts. Use the heading levels to indicate structure, as they were intended.

Avoid overusing boldface, italics, and multiple font styles in your text. One thing you can do to ease the monotony and visual strain of reading lots of text on the computer screen is to use the Block Quote paragraph format and Unnumbered List format (available in the Properties dialog box). Both formats result in indented text blocks that shorten lines of text, keep margins clear, and generally make the page easier to scan. You can also insert horizontal lines to visually separate sections of your document.

Note: See the section "Taking stock of colors and fonts" later in this chapter for more ideas on text presentation.

Doing graphics justice

Graphics add a lot to the visual appeal and information content of a page. But poor use of graphics can frustrate your readers or keep them from understanding the message you're trying to send.

Practically every published Web author will agree--keep images small! You should aim to keep the total file size of images used on a page to less than 30K. Remember that not everyone seeing your page has a 28.8 modem. If you need to use a large image, you might want to consider using a thumbnail of the image and then linking it to the full-size copy. You can reduce file size by using design programs to eliminate unnecessary colors.

Use backgrounds intelligently. Backgrounds that are "loud" make it extremely hard to read the text that's on top of them. Don't let your backgrounds interfere with the message you're sending the reader. For a background to work well, color contrast is not enough. The background either needs to be very light (for dark text) or very dark (for light text). A background that contains an image should have low contrast, so it's not too distracting.

The two types of image formats used by most Web browsers are GIF (CompuServe Graphics Interchange Format, .GIF extension) and JPEG (Joint Photographic Experts Group, .JPG extension). The JPEG format works best for photos and continuous tone images. The GIF format works best for inline images, line art drawings, most logos, and screen dumps. Both formats should use a resolution of 72 dpi (dots per inch) and use RGB (red-green-blue) color mapping.

Note: For more information on GIF and JPEG images, see the "Images" section in Chapter 2.

Since you can't assume your readers are using a graphical browser to view your pages, be sure to enter an alternative description in the Text field of the Image Properties dialog box (choose Insert|Image). This way, readers using text-based browsers will see the alternate text description, and those using graphical browsers will also see something if the image fails to load.

Here are some other techniques that can help minimize download times for images:

Taking stock of colors and fonts

It's tempting to add lots of colors and font styles to a page just because you can. But the result is more likely to frustrate a reader and detract from the message you're trying to get across. After all, it's the content you want your audience to focus on, and that means presenting a page that's easy to read. Even though most graphical browsers (including Navigator) use a proportionally spaced font such as Times Roman as the default for text, many browsers are user-configurable, meaning the user can choose any font for viewing your page.

Consider typography as the tool you use to paint patterns on the page. The first thing your reader sees is not the title or other details of the page, but the overall pattern and contrast of the page. The reader's eye scans the page first as a purely graphic pattern, then begins to track and decode type and page elements.

Good typography depends on the visual contrast between one font and another and the contrast between text blocks and the surrounding empty space. There are a few basic typographic principals that can help make your pages easier on the eye:

Finishing touches

And last, but not least---the proverbial icing on the cake. These elements are considered the hallmarks of the work of a professional Web author:

Headers: A consistent titling design at the top of your Web page allows your readers to immediately know what the main point of the document is, and what (if any) relationship the page might have to other pages in a related group. Unlike a browsing a book, which is linear in design, a Web author can never be sure what other pages the reader has seen before linking to the current page. Graphics placed above the main heading should not be so large that they force the title of the page on a standard office-size monitor (640 x 480 pixels) to go off the screen.

Footers: Ideally, each page should have a footer that contains your name, organization, navigational elements (links or icons), copyright information, and revision/change dates.

Email Address: Like any fine work of art, a good Web page should have a signature or some other form of contact information. You can provide a link to an email form your readers can use to send comments and feedback to you. Select the Link tab in the Properties dialog box. In the Link to field, type the HTML tag mailto: followed by your email address.

At the very least, provide your name, organization, and street address, in case your page is viewed on a browser that doesn't support email forms.

Navigation: Include a target (a return link) to your top level on each page so readers have a quick way of returning to the beginning. It also helps to include links to an index or table of contents, other sections, and previous and next pages. You might want to add these targets to the bottom of the page, so the reader always knows where to find them. If your links only flow downward from the home page, the pages in your document will become dead ends.

Links: Avoid the "click here" syndrome when defining a link; for example, "Get information about whatever is available by clicking here." Readers then have to remember where they're going to once they jump to another page. It's better to link to words or phrases that are a meaningful part of a sentence; for example, "Information about whatever is now available."

If you use links to items on the same page, remember to use relative links, as absolute links (full URLs) can cause a browser to reload the page each time a link is selected.

Time Stamps: Date your revisions and indicate those pages that have been changed or are new additions.

Suggested reading

There's a wealth of online information available on all aspects of good Web publishing: style guides, detailed technical information, and tools that help you create special effects. Choose Help|Web Page Starter to see a list of additional resources on Web page authoring and publishing.

Style guides

Technical information

Tools