Platinum Edition Using HTML 4, XML, and Java 1.2
(Publisher: Macmillan Computer Publishing)
Author(s): Eric Ladd
ISBN: 078971759x
Publication Date: 11/01/98

Presenting the Information

After you have selected the information to go on a page, you then need to think about how you want to display it. The rule to keep in mind here is that users rarely read an entire page. Usability studies (such as those by Jakob Nielsen, formerly of Sun Microsystems and author of the Alertbox column at www.useit.com) have demonstrated that most users simply scan a Web page. Knowing this, you have to take steps to make key information stand out prominently so that a person scanning the page can come away with the messages you wanted to convey.

Between standard HTML and extended HTML (browser-specific HTML instructions that are not part of the standard), many ways to place content on a page permit creativity, good organization, and scanability. These include

•  Paragraphs—You probably learned back in grade school that every paragraph should speak to a unique idea. The same holds true for Web page paragraphs; you can use them to convey an important concept. Figure 2.1 shows a page from the Washington Post’s Web site. Notice how paragraphs are kept short and to-the-point.

	When writing your paragraphs (or entire Web documents for that matter), be sure to present your main point first and then fill in the details. This way, users scanning the paragraph will get the gist of your point right away and can read on if they want more details.

•  Lists—HTML includes extensive support for lists. Placing items in a bulleted or ordered list makes for a readable and easy-to-understand presentation of information. Ordered lists are also useful for conveying a sequential relationship among the list items. A definition list provides a means of presenting a term, followed by its definition.Figures 2.2 and 2.3 illustrate some of the layouts possible with HTML lists.

•  Images—Graphics content is one of the forces that has made the Web so popular, and users almost always expect graphics on a Web page. Clever use of images can communicate your message to those who visit your pages (see Figure 2.4). Images can also be used as page backgrounds, hyperlink anchors, and as site navigation aids. Just be careful not to overload your page with images to the point that users won’t wait for it to download.

FIGURE 2.1  Each paragraph should put forward one major point that supports your communications goals.

FIGURE 2.2  Web-site hosting provider DIGEX outlines the advantages of its services in highly readable bulleted lists.

FIGURE 2.3  Numbered lists are useful for labeling clauses in a document or for outlining a procedure.

FIGURE 2.4  USA Today uses a combination of graphics and pictures to add flavor to its Web pages.

•  Font styles—You can make key words and phrases stand out from regular text by using one of HTML’s many font formats. Text can be rendered in bold, in italic, or in a fixed-width font such as Courier (see Figure 2.5). Additionally, you can use other HTML instructions to change the size, color, and typeface of text. Now that they are standard, HTML style sheets provide even greater flexibility for page authors applying style information to their pages.

---

CAUTION:  

Don’t overdo it with multiple typefaces on a page. Too many fonts can be distracting. Try to limit yourself to two—one serif and one sans serif.

---

•  For more information, see “Style Sheets,” p. 261.

FIGURE 2.5  US Airways lists flights in a fixed-width font, and other information on the page is in a proportional, serifed font.

•  Tables—HTML tables enable you to put information into an easy-to-read, tabular form (see Figure 2.6). Tables also permit very precise alignment control inside their component cells; many resourceful HTML authors have made creative use of this feature to produce onscreen layouts that could not be achieved any other way (see Figure 2.7).

	When presenting tabular data, make sure your column heads are clearly labeled. The HTML <TH> tag will automatically make your column heads centered and bold.

•  See “Tables,” p. 183.

FIGURE 2.6  Yahoo!’s job listings are presented in table form for increased readability.

FIGURE 2.7  The complex page layout on CNN’s site would not be possible without HTML tables.

•  Frames—When you split a browser window into two or more regions, the individual regions are called frames. Each frame is capable of displaying its own document, and so you can have multiple pages onscreen simultaneously. Figure 2.8 shows a Web page that makes effective use of frames by keeping search options available in the frame at the bottom of the page while presenting search results in the upper frame.

---

CAUTION:  

Frames tend to take away from the usability of your site. For example, it may become hard to bookmark a specific page in a framed layout. If you do use frames, make sure that you keep the layout as simple as possible and test your layout with users before rolling out the site.

---

•  See “Frames,” p. 211.

FIGURE 2.8  You can target the output from a search to a new frame, enabling search options to continue being displayed.

The page elements noted in the preceding list give you a design palette with which to work. It is up to you to decide which elements best communicate your message in a way that is clear to your audience.

HTML Standards and Browser Compatibility

The current HTML standard is HTML 4, which incorporates most of the page elements discussed in the previous list. Even the frame tags are part of HTML 4 spec, including the concept of “floating frames” as proposed by Microsoft.

---

NOTE:  Floating frames are frames that you can place on a page just as you would an image.

---

Most mainstream browsers are already in compliance with the HTML 4 tags that create paragraphs, lists, and font effects, as well as those that place images, tables, and frames on a page. If you discover that some of your audience will be using a browser that is not HTML 4 compliant, you should research which tags the browser does not support and make sure you don’t use those tags in your page design unless you can provide some kind of alternative way to view the content. Fortunately, a couple of approaches provide alternatives. The next two sections discuss these approaches.

---

NOTE:  Not all browsers are up to speed on some of the HTML tags that support enhanced usability for persons with disabilities. If you’re marking up content with sensitivity to a disabled audience, make sure you test your code to see which browsers support the tags you’re using.

---

Products |  Contact Us |  About Us |  Privacy  |  Ad Info  |  Home Use of this site is subject to certain Terms & Conditions, Copyright © 1996-2000 EarthWeb Inc. All rights reserved. Reproduction whole or in part in any form or medium without express written permission of EarthWeb is prohibited. Read EarthWeb's privacy statement.