6.  What are a dozen Web Page features I should use?


Return to fragile issues  Return to Roadmap  On to list of bad characteristics



Section Summary

  1. Use filenames and folder (subdirectory) names that are legal on all platforms.

  2. Choose a good title for your page.

  3. Always specify every image's height, and width, and ALT text.

  4. Use server-side imagemaps.

  5. Link to existing resources, instead of re-inventing the Web.

  6. Use list structures whenever the document's contents are in fact a list, including nested lists.

  7. Each home page should provide shortcuts for the reader to go to all of the primary links without having to scroll down.

  8. Panoramic ("banner") graphics function well on the top part of the first screenful of home pages.

  9. Include full contact information: telephone numbers and postal mailing address.

  10. Use informative text for links, rather than "Go Back" or "Return".

  11. Exercise care when choosing fonts for text within graphic images.

  12. Use "boilerplate" at the end of each Web page to identify the page, its author, and its revision date.



  1. Use filenames and folder (subdirectory) names that are legal on all platforms. You will have to choose filenames that are legal on the personal computer you use to maintain your Web pages and on the server you use to publish them. Being careful to choose names that are legal on other platforms will give you the freedom to migrate to another environment in the future with minimal effort.

    This is especially important for departmental or other organizational Web pages, where you should presume that someone else will eventually be responsible for maintaining the pages.

    Following the rules of thumb for robust filename choices has the added advantage of producing URLs that are compact, and therefore easy to type when your reader is called upon to do that. A more complete discussion is available on-line.


  2. Choose a good title for your page: the page itself won't be fragile without a title, but having a good one will make it easier for people to find your page using search engines. Most browsers display the title at the top of the screen, and use it for the visible label for any bookmark set to that page.

    The title should be reasonably terse, descriptive of the contents, with neither acronyms nor obscure abbreviations, and unique (at least among all the pages controlled by that author). It is often a good idea to include the organization's name for official pages. It is both trite and also redundant with its own existence to use the phrase "home page" in either the title of the Web page, or in the first header in the body of the page.

    Often, but not always, it will be sensible to choose identical text for the TITLE and for the first-level header at the top of the document, or for the displayed text of a banner graphic at the top of the document.


  3. Always specify every image's height, and width, and ALT text.

    The height and width specification will speed up display of your page, because the browser can continue to lay out the text without waiting for the image file to be returned by the server.

    The ALT text should be specified on every image, so that Lynx users (and graphical browser users with image loading turned off) are informed (if there is text) or not distracted by the default "[image]" text (which will be suppressed by having an empty string or space character for the ALT text, as opposed to having no ALT text at all).


  4. Use server-side imagemaps. Many people are still using graphical browsers that know how to do server-side imagemaps, but cannot do client-side imagemaps.

    Server-side imagemap support is, by definition, server-specific. Most servers are configured to use either CERN or NCSA format for the imagemap data file. Consult with the system manager of your server to learn how it should be done.


  5. Link to existing resources, instead of re-inventing the Web.

    If you type in information that others are responsible for knowing as part of their job, then your pages will not start out broken, but they will be out of date sooner, more often, and for longer times. One of the daunting aspects of the world wide web is the responsibility for revising and updating all that information. In cases where there is a department within the University (e.g., Registrar's Office, University Publications) that is responsible for hardcopy publication of information you want to have on-line, please contact that department to make arrangements for on-line publication.

    As each University gets started with the Web, there will be situations where people want information to be on-line that the responsible party is not yet prepared to place on-line. When that happens, it is usually a good idea to contact the people responsible for the University's home page, so that they can coordinate the various projects that are in progress.

    By working with the party responsible for the information that you want to have linked with yours, you can ensure that the proper tags are inserted in the on-line version of their documents, too.

    Unresolved issues (whether of content or timetable) should be brought to the attention of Computer Services' Academic Technology Manager.


  6. Use list structures whenever the document's contents are in fact a list, including nested lists to create an outline-style format.

    Using lists for a set of links, rather than embedding those links in a paragraph, has the advantage that Lynx users will be encouraged to use the down arrow key to get from one item to the next, the correct method. If the items are embedded in a paragraph, a Lynx user might type, for example, the right arrow, which will take them into the current link, rather than moving over to the next link. The list format therefore helps to avoid frustrating your reader!

    Feel free to put break, paragraph, or horizontal rule separators between list items to force extra white space. Unlike with paper publications, it does not cost anything extra! One reasonable rule of thumb is that if one or more items in the list is so long that it will be wrapped to two or more lines for display, then there should be a paragraph break between items.


  7. Each home page should provide shortcuts for the reader to go to all of the primary links without having to scroll down. This avoids forcing your reader to scroll and scroll down through your whole page in order to find the link to the next page he or she wants to examine. One of the things you want to encourage is repeat traffic. Shortcuts are a friendly arrangement for repeat visitors, because they are likely to arrive on your home page knowing where they want to go next, and shortcuts let them get there with a minimum of scrolling or clicking.

    There are two reasonable methods:

    In each of these, the link from the shortcut text or graphic is directly to the location of interest.


  8. Panoramic ("banner") graphics function well on the top part of the first screenful of home pages, either of organizations or of particular topics. By using a width of up to 470 pixels or so, they are narrow enough to be seen in their entirety with any standard graphical browser, even if the user has left the window configured to less than the full screen width. By using a height of 100 to 200 pixels, they permit the shortcuts below them to be visible without need of scrolling.

    A banner graphic should be at most 520 pixels wide and at most 200 pixels high, preferably between 450 and 470 wide and 100 to 125 pixels high. The limitation on width is in order to be able to see the entire graphic on the default window width of Macintosh Netscape, and for the entire graphic to be printed with the page. The limitation on height is to ensure that as many as possible of the shortcut links will be visible on the first screen of the page, even by people using the old standard VGA (640 x 480-pixel) display. Example graphics include:

    This banner graphic and the shortcut button array graphic should be designed together. They do not have to be of the same width, but the aesthetics of the combination should be considered, rather than creating them independently.


  9. In general, either the home page or a page linked directly from it should include full contact information, including telephone numbers and postal mailing address. This is especially an issue for departmental pages, but should be considered also for personal pages.


  10. Use informative text for links, rather than "Go Back" or "Return," because people may get to your page from a search engine, or by following a link on someone else's page.


  11. Exercise care when choosing fonts for text within graphic images:


  12. Use "boilerplate" at the end of each Web page to identify the page, its author, and its revision date. In journalism, "boilerplate" is standard text, pre-set and used where needed. Here, we use the term to describe the routine items appearing at the end of each Web page. You will need to adapt the list to your own circumstances, and will probably vary it according to context. In general, each Web page should include the following items:

    Boilerplate is discussed last, not because it is of lesser importance, but rather because it places the text immediately prior to the boilerplate that I am using for this page, so that it can serve as an example:


Return to fragile issues  Return to Roadmap  On to list of bad characteristics


Dick Piccard revised this file (http://oak.cats.ohiou.edu/~piccard/oacrao98/good.html) on November 4, 1998.

Please E-Mail comments or suggestions to "piccard@ohio.edu".