HTML 4.0 Sourcebook
(Publisher: John Wiley & Sons, Inc.)
Author(s): Ian S. Graham
ISBN: 0471257249
Publication Date: 04/01/98

Images: Navigation Icons

Look back to the bottom of the HTML document listed in Figure 1.17 and displayed in Figures 1.18 and 1.19. The feature to look at is the collection of small icons. These icons are attached by hypertext anchors to a collection of important reference documents of the collection; the paragraph preceding these icons explains what the icons mean. The intent is to place these icons on every HTML document to provide a universal cue for navigating through the local document collection. For example, the home icon always links back to this main home page, while the up icon links up to the top of whatever set of documents you are looking at. Thus, if you had chosen to visit the High Performance Computing section, then the up icon would bring you back to the High Performance Computing home page. In turn, the Info icon refers to a page giving a brief description of IRC and its mandate, while the Help icon connects to a page that briefly describes the meanings of all the icons. Finally, the Mail icon links to a gateway program on the HTTP server that allows the user to send mail to the server administrator, while the Search icon links to a different gateway program that allows the user to do keyword searches on the collection of HTML documents. Note that all these icons are equipped with an ALT attribute text alternative. If you are going to navigate with icons, be sure that people using a text-only browser know what the icons mean! Figure 1.18 also illustrates how the ALT attribute “tool tip” feature works with newer browsers—upon letting the mouse hover over the right-hand icon (the confusing one!), the browser displays the “pop-up” text, which explains the purpose of the link.

Having navigation icons is extremely important, particularly when there are a number of related documents. It is very easy to get lost when browsing through large collections. Hypertext is not like a linear book, where readers can always tell where they are by the page number or the thickness of the remaining pages. Navigation icons replace these tactile methods of navigation with symbols that link the user to reference points within the collection. In addition, icons can direct users to general services that may be useful wherever they are in a collection, such as a search tool for searching a database or a mail tool for sending an electronic message to the site administrator.

Navigation is a particularly thorny issue for hypertext design, and much has been written on the ways to design hypertext for easy navigability and searching. Indeed, Chapter 4 looks into these issues and provides some useful references for further reading on this topic.

Text-based Icons

The very top of this home page shows a text-only variant of the navigation icons (see Figures 1.17 to 1.19). This was added to contrast with the iconic approach. Text and icons both provide the same functionality, and choosing one or the other is largely a matter of taste. Text-based navigation aids can take up less space on a page and do not require image loading. If you use image icons, the latter problem is mitigated by using the same icons in all your pages. All Web browsers cache (retain local) copies of images once they have been accessed and don’t bother to retrieve them from the server when they are required on subsequent occasions.

Image downloading problems can be mitigated by using small icons and a reduced number of colors per image. Most of the GIF-format icons included in the document shown in Figure 1.17 and displayed in Figure 1.18 are only 36 pixels square and contain only 16 colors each (4 bits/pixel) and, as a result, they take up only 280 bytes each. Consequently, these icons download quickly, even over a dial-up connection.

Lessons from Example 3

1.  A home page should be small and should not contain many large images. It should also be designed to be usable if accessed by a browser that has image loading disabled.

2.  Home pages should clearly and concisely describe the contents of a Web site and should contain hypertext links to these resources.

3.  All included images should contain appropriate ALT text descriptions and should use the HEIGHT and WIDTH attributes to specify the image size.

4.  A home page should explain and introduce navigation icons if they are used and if their function is not obvious to the user.

5.  Home pages should contain contact information for the administrator of the documents managed at the site.

Exercises for Example 3

Figure 1.17 was very simple, designed only to illustrate the basic design features of a home page. As an exercise, try visiting several Web sites, examining how they follow (or not!) these design principles. To test a page properly, first access it with you browser’s image loading disabled (to check how well it works without images). Then load in the images and see how long it takes—and how good it looks or not! Here are some sample Web sites (from amongst millions):

home.netscape.com

www.microsoft.com

www.shift.com

www.cnet.com

www.nando.net

References

There is a great deal of HTML documentation available via the Web. The best place to start is the World Wide Web FAQ. Thanks to Thomas Boutell, the Web Frequently Asked Questions (FAQ) list is one of the most useful collections anywhere of up-to-date, Web-related information. Sections of this list are posted regularly on the various Web newsgroups, while the entire FAQ is available in hypertext form at the URL

www.boutell.com/faq/

and at many mirror sites. USENET newsgroups, devoted to World Wide Web and HTML issues, are also a good place to see announcements of new products or services, to ask questions, or to hear of the latest WWW happenings. There are also several Web sites offering introductions to the Web and HTML and lists of links to other useful resources.