What makes web pages fragile?
- In a nutshell, Web pages will break if they contain tags that the browser doesn't understand, or if they have been composed with unjustified assumptions about the browser, its configuration, or the hardware it is running on. Some examples include:
- Using <TABLE> tags. These tags are ignored by earlier versions of LYNX and MOSAIC, for example. The usual result is an unreadable re-wrapping of the text contents of the entire table into one paragraph.
This design feature of HTML, that browsers will ignore tags that they don't understand, is in fact a very good thing. It means that it is easy to predict what all older browsers will do in the presence of a new tag, so that it is possible to make correct decisions about whether, and how, to use new tags.
- Having consecutive <IMG> tags with no separators to force the next image onto the following line. The resulting display will be changed radically if the window width is larger or smaller than expected by the author.
- Using short wide graphics, no matter how pretty, to separate sections of the page. If viewed with a narrow window, they will extend beyond the edge of the display. If viewed with a wide window, they will not run from margin to margin. Horizontal rules (<HR>) can be modified with a variety of attributes to be less mundane, for example:
<HR SIZE=8 ALIGN=CENTER WIDTH="60%">
which produces the following effect:
Horizontal rules aren't pretty, but they are robust, and robust is better than fragile.
- Using graphics that include extensive areas in which the color (shade or brightness) changes gradually. Examples include sunsets, the sky in general, and rainbows. The problem is that many browsers, especially on PCs running Windows, have only a very limited palette of colors available at any one time. The consequence is that the various subtle shades of color are all displayed using the small number of distinct colors that are available, producing large areas of uniform color with distinct boundaries - a sort of "striping" effect.
- Saying "Click here to ...", because that doesn't make much sense for LYNX users, who have no mouse, only arrow keys. "Select" is a more universal verb, but I prefer to use a statement like the following:
Other guidelines are also available on-line.
- Using italics. Italics print very nicely on laser printers at 300 dots per inch, but on-screen italic fonts, displayed at perhaps 75 pixels per inch, are almost invariably hard to read, aren't they? This is especially true of regular-size and small italic fonts; the larger fonts aren't quite so bad, but most people browse the Web with their default font size about as small as they can comfortably read.
What are "shortcuts," and why use them?
- Shortcuts are links located at or near the top of a page that take you to each of the places you can get to from that page or on that page.
- Shortcuts may constitute the entire content of a purely navigational page, such as you might use for a home page of a large collection of Web pages.
- Shortcuts may duplicate the links available within the body of the page.
- Shortcuts may function as a Table of Contents for the page.
In each of these functions, shortcuts permit your readers to move on to the next place that they want to reach, with minimal effort. Shortcuts remove the need to scroll and scroll down through a page, looking for a particular link. 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.
Why use panoramic graphics?
- Panoramic graphics function well at the tops 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.
What improves the flow of a Web page?
- Smooth flow is one of the most important thing about web pages, and it is all too often neglected. Especially if you have a lot of information, it is very
important to make the pages and information flow together in a coherent
manner.
Pages with paragraphs of information that
look like this are distracting
to read, and impossible to navigate. Sometimes you
cannot even get one
clean sentence of information read without having a bunch
of links distract
you. It is similar to trying to watch 3 TV
programs at the same time,
each showing you a minute's worth of the show before
switching to the other.
Bleah.
I know it sounds contrary to the overall principle of the web, but try to
use links sparingly. Except for shortcuts, avoid having two links
in a document that point to the same thing, unless it is something like an example to look back on
repeatedly. Name your links clearly, and give a description nearby
if necessary. Give people a chance to read your information and rest
their mouse button finger.
What is "boilerplate," and why use it?
- 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:
- A link to at least one place your reader might have come from, or might want to go on to. Do not create dead-end Web pages.
- The name of the author of the page. This serves to give credit where credit is due and also to encourage somebody to keep the page up to date.
- The URL of the page, in plain text, so that a printed copy will contain the clues needed to find it again on the Web. (Some browsers do not automatically incorporate the entire URL in the printed copy.)
- The revision date.
- An E-mail link for comments, suggestions, or questions. The E-mail address should be part of the visible text, again, for cases where the page is printed.
- On personal pages, you should use your own personal E-mail address. If your institution provides a mechanism for a short-form address (such as, piccard@ohiou.edu), you should use that, because it will change rarely, if ever; if not, then use your full internet address on the mail server you think is least likely to change in the future.
- On departmental pages, you should use a departmental E-mail address (for example, the address of the department account on the Web server machine) and then set the forwarding on that E-mail account to point to your own address. In this way, if you go on vacation, the person who is covering for you will be able to get the messages by simply changing that one forwarding setting, with no need to modify any of the HTML files.
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: