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

General Home Page Design Issues

There are several things to consider when designing home pages for the Web. Typically:

Web pages should be small. In particular, a home page should be a small document with a minimum of extraneous graphics or text. Large images (meaning large image files) and the detailed resources of your site should be elsewhere. Many people have slow Internet connections and will not wait for thousands of kilobytes of gratuitous imagery. Icons or images on a home page should therefore be small image files, totaling less than 20 kilobytes (this will take approximately ten seconds to download for someone using a 28.8 Kbaud modem).

A home page should be concise. A home page is like an introductory map to a site or to a collection of documents, explaining what the site is and where to find the local resources. Thus, it should briefly outline the content of your site and provide hypertext links to those specific content resources. It should also (when necessary) provide a link to a “help” page that explains, in more detail, the organizational of the site, such as the meanings of icons or menus or the function of special tools, so that visitors will know how to navigate their way around. Avoid abbreviations, acronyms, or other wording that visitors are unlikely to understand. And, if your site is multilingual, the home page should display obvious, prominent links to the different language versions.

A home page should not be dependent on graphics. Make sure that a user can navigate from your home page without a graphical browser. Many users disable image loading while “surfing,” and will quickly leave a site that does not make sense.Thus, if you use icons for navigation buttons, use the IMG element ALT attribute to provide a text description of the button. In general, if you decorate a home page with graphics, make sure that the content of the page is easily understood when image loading is disabled.

A home page should include contact information. At some point, someone will want to contact you or your Web server administrator, perhaps to point out a problem, or most likely to compliment you on your work. The home page should therefore include contact information for the administrator(s) of the resources. A common, generic e-mail address for the site administrator is webmaster@www.domain.name, where www.domain.name is the domain name of your server. Such information should be included on the home page, most commonly at the page bottom.

Clarity of Content

To make a home page small and compact, the content must be clear and concise. The text in the example home page document (Figure 1.17) fulfills these criteria, providing a clear, concise description of the site and the material it contains, with a minimum of extraneous detail. The content can be written in any style: polite and well mannered, or eclectic and off-the-wall. In the example in Figure 1.17, the first paragraph explains the reason for the site and provides links to the major areas of interest. Each of these areas may, in turn, have its own home page specific to the subject at hand. This hierarchical structure lets people quickly find what they are looking for, and also makes it easy for the site developer to organize his or her documents. For example, you can have independent subdirectories for each distinct area, with your main home page having hypertext links to introductory home pages located in each of these subdirectories. Other hypertext links can then provide alternative relationships between documents, within this overall hierarchical arrangement.

The home page in Figure 1.17 also contains a second, less detailed, list that provides a brief selection of alternative services. These items link to documents or services that are perhaps peripheral to the main purpose of the site, but that may be useful in directing the visitor to his or her destination. This figure also contains a collection of hypertext pointers to other resources that our group commonly uses. Such links are also often moved to a second page, to keep the home page as uncluttered as possible.

Referring to Figures 1.18 and 1.19, you can see how clean the organization looks. Since the document is written in correct HTML, both browsers display it clearly, subject to their own limitations. A comparison of Figure 1.19 with the less-well-thought-out version in Figure 1.16 illustrates the importance of good organizational design. A little thought about how the hypertext links should be organized makes an enormous difference in the clarity of the final presentation.

Image-Intensive Home Pages

Alternatively, you might consider an all-graphical home page. Some sites use as a home page a large image map, or a collection of images that appear elsewhere in the site, and that provide a graphical key to the site’s pages. Usually, these images are placed inside hypertext links and are linked to the various resources on the Web site, much like the text buttons in Figure 1.18. However, if a site uses image maps, or image buttons, it is wise to provide a link to an alternative text-only version of the home page, to make the site accessible to as wide an audience as possible. An example of this approach is seen in Figure 4.13. (The link to the Screen Reader Friendly version of the site is to a text-only home page.)

Images: The “Right” Size

Although not included in Example 3, decorative images, such as a company or organizational logo, are often included within a home page. This can be very attractive, adding an appealing graphical impact to your site. Be careful, however, to ensure that such images are not too large, as long download times for the page will frustrate visitors. As mentioned previously, the sizes of all the images on a page should ideally sum to less than 20 KB. Even if the page is attractive, the impact of this elegance is lost on a user who has had to wait minutes for the images to arrive.

As mentioned in Example 2, use the IMG element HEIGHT and WIDTH attributes to specify the size of the images. This information lets the browser format the text, while setting aside space for the images that have not yet arrived. If you don’t specify WIDTH and HEIGHT, most browsers will wait to load the images (and thereby determine the image sizes) before drawing the page. This can be very slow if there are lots of images, during which the user sees nothing at all, and curses you for having created such an irritating, slow-to-access page!

Images: Acceptable Color Depths

Always process home page images so that they do not contain too many distinct colors and that they contain the “right” set of colors! Many computer graphics displays can only display 256 colors (8-bit color), while some Web browsers limit each image in the browser window to fewer colors than this—the reasons why are discussed in Chapter 3. Most graphics editing programs let graphics developers process images to reduce the number of colors they contain, often with little loss of image quality (at least as displayed by the browser). This has the added bonus of making the image files smaller and faster to download.