If, despite all of this, you do decide to use frames, be very careful that any links to pages outside of your own are constructed to appear in a full window, frame-free. If not, there is real risk that you will get into an endless recursion of frames-within-frames-within-frames... (the Versailles hall-of-mirrors effect).
This is accomplished by including within the anchor tag, the appropriate TARGET attribute:
<A HREF="whateverURL" TARGET="_top">
Avoid using HTML Tables. The table 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.
Because they ignore the various Table tags, non-table-aware browsers are only likely to do something readable with a single-row table, especially if the first item within each cell is tagged as a header. For partially table-aware browsers, such as the latest version of Lynx, you should experiment and see how it works.
A tabular presentation can also be achieved by using pre-formatted text. Remember to keep each line to at most 80 displayed characters (not including any embedded tags), so that it will be displayable in Lynx.
Beware using STRONG format or HEADERS within pre-formatted text: most browsers display strong formatted text and headers by using bold-face, but each bold-face character is wider than the corresponding plain character, destroying the intended column alignment.
Beware setting background colors for individual table cells. Version 2 of Netscape ignores table cell background colors, but does obey BODY attributes for text and link colors, as well as FONT color tags, including those within cells. It is therefore quite easy to create a table that looks very nice in later versions of Netscape, but in which the text is impossible to read using Netscape Version 2, because the text and background are identical colors.
Beware using table structures to attempt to control the placement of items on the screen. Such pages are always fragile; they will be broken by having the window set to different dimensions than anticipated.
Avoid providing free advertising to commercial enterprises. It is OK to provide a link to on-line information, including places where people can download new versions of software that would help in viewing your page, if you have something special on it (RealAudio, Adobe Acrobat, etc.). It is not appropriate for a public university Web page to sport graphic images that are part of the corporate identity of commercial enterprises. If your page is truly "best viewed with browser X," then you need to fix your fragile Web page, and you should certainly not be boasting about its fragility.
Avoid using gratuitous animated images. Animated images are a continuous distraction to your reader, and a continuous drain on system resources (primarily CPU time) on the browsing machine. Furthermore, a significant fraction of the people who will look at your page are using Macintosh Netscape V2, or other browsers that suffer from a "feature" that continually re-writes the animated graphic loading messages in the bottom margin of the window - this both distracts your reader and prevents your reader from being able to use that bottom margin for discovering where the link the mouse is pointing to will go.
There are situations where animated images are the most appropriate method to convey information (for example, to show the flow of materials in a chemical engineering process). Animated images, where they will work, are less burdensome than a QuickTime movie clip.
It detracts from a Web page, however, to use an animated image where no animation is necessary.
Be aware, also, that faster machines are likely to display the animation sequence so suddenly that it is just a blur anyway, and loses all postive impact.
When your reader prints a page containing an animated image, only one of the sequence of images will be printed, essentially at random, so your page is likely to look lame when printed.
Avoid aligning images to the left or right, to cause text to flow around the image. Such pages are always fragile, either breaking or at least not producing the intended effect when the browser's window width is outside the range of widths the author designed for. In particular, text may be hidden completely or partially by the image if the window is too narrow.
Avoid 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 can be modified with a variety of attributes to be less mundane, for example:
Horizontal rules aren't pretty, but they are robust, and robust is better than fragile.
Avoid making page design choices based on looking at the on-screen presentation with one browser. Again, this does not guarantee fragile pages, but it does make it much more likely. Ideally, every page should be critically reviewed from Netscape (versions 2 and 3), Mosaic, Microsoft Internet Explorer (versions 2 and 3), and Lynx, and any other web browser you can readily use. In practice, you will soon learn what constructs to avoid, and therefore you will be able to limit your checking with other browsers. Web page authors should examine their own pages regularly with Lynx and at least one alternate graphical browser. Be especially careful when first using any particular feature of HTML. Many Netscape-specific HTML features look dreadful in other graphical browsers, as well as looking bad in Lynx.
Lynx is important for several reasons, including:
- Many people have convenient web access only through Lynx, including students living off-campus at many institutions and people using many freenets.
- Lynx provides the best browser for use by visually impaired people, since it permits them to take advantage of hardware and software to vocalize the characters on their screen.
For graphical browsers, this viewing should include consideration of at least the following:
- Platform: there are consistent differences between Macintosh and Windows machines that can result in pages being proofed on either platform, even with multiple browsers, still not working well with any browser on the other platform.
- Text will be larger on Windows machines and smaller on Macintosh systems.
- Graphics will be smaller on Windows machines and larger on Macintosh systems.
- Italics will be much harder to read on Macintosh than on Windows, partly because of the smaller text size.
- For machines built in the last few years, color rendition on Gateway screens is typically much darker than on Macintosh screens.
- Window width
- Don't count on your readers seeing the full width of any graphic that is more than 460 pixels wide.
- Printed output, especially on a Macintosh, is likely to clip the right-hand portion off of any graphic that is wider than 520 pixels, regardless of the window width the browser is set for. It is likely also to clip the text content at the same point if table or frame constructs force the width to exceed 520 pixels.
- Don't count on the display wrapping at any particular width - some browsers will be running on very wide displays (up to 1280 pixels wide), and some will be adjusted to a very narrow window (512 pixels is common, smaller than that is unusual).
- Using background graphics that are designed with a contrasting region along the left portion of the screen can be problematical. Another copy will be tiled onto the right side of the screen if the browser's window is wider than the graphic. This can easily be distracting, and sometimes makes the page unreadable, because the text on the right portion is specified with a font color that blends with the background that was intended to be displayed only for the left side.
- The variations in appearance of graphics when the display is set to 256 colors (8-bit), to 16 colors (4-bit), or to monochrome (1-bit).
Avoid trying to control the appearance of text by setting the font, changing its size or color, or making it boldface. Except as noted here, please don't exercise these choices, even though they are provided by newer versions of HTML and will work in recent graphical browsers.
On the web, unlike hardcopy publishing, type faces are controlled by the browser. Lynx uses fixed-pitch fonts for all text, because Lynx works with displays of 24 rows of 80 characters each. Netscape usually uses two type faces, a proportional-spaced font (usually Times) and a fixed-pitch font (usually Courier). Browsers that don't know about the font or bold tags will ignore them, and the text "marked" with those tags will simply blend in with the surrounding text, instead of being emphasized.
Background Issues
- Background graphic images that show pale on your monitor may display so darkly on other machines that your text cannot be read. (This has been observed even with both machines running Netscape!)
- If you feel you must do something different from the default, you will probably not encounter any nasty surprises by specifying a background color that is paler than the default gray, especially if you go all the way to white, by specifying a color code of #FFFFFF.
The choice of a white background is especially appropriate for a web page that is to be used as a slide show for a presentation, because it increases contrast, and therefore enhances the readability of the projected display. Beware specifying colors by name (e.g., "darkgreen") instead of by RGB color value (e.g., #006600). Many older graphical browsers are still in use that do not understand the color names.
Windows systems can be expected to produce smooth colors for a very limited set of shades; instead, some colors will be smooth (those included in the current "pallette") and others will be "dithered." The safe colors are those that use any combination of 00, 33, 66, 99, CC, and FF, for each of the Red, Green, and Blue specifications. All other hex values are out of the palette. For example, #FF00CC would be "safe" (very likely to be displayed as a uniform rather than a dithered color), but #FC3690 would be very likely to be displayed by dithering, not smoothly.
- Using a dark background color and white or light-colored text has been observed to result in color inkjet or laser printers producing a completely unreadable rendition of a page that was readable on-screen, or wasting incredible amounts of toner or ink, or both. Many browsers (including, for example, Macintosh Netscape Versions 2 and 3) do not provide any method for ignoring the document's background and text colors just at print time, only as part of the overall configuration.
Other Color Issues
- Individual browsers can be, and often are, configured to ignore the color directions in the HTML files, so you cannot count on your colors being used.
- Please do not specify any of the TEXT or LINK colors: people become subconsciously attuned to the colors that their browser uses by default. Your reader has been building up an intuitive feel for the meaning of various colors, based on the default behaviour of his or her browser. When you try to override that, you are discarding the reader's intuition. This is so far from being "user friendly" that it deserves to be called not merely "user-hostile," but perhaps even "user vindictive."
Emphasis Issues
- Use strong format for emphasis within a paragraph, rather than bold: Lynx and other browsers that don't know about bold tags will ignore them, leaving no emphasis at all!
- Use the typewriter format and pre-formatted text to force graphical browsers to use a fixed-pitch font. Unlike the rest of your HTML page, pre-formatted text also preserves space characters and line breaks - there is no re-wrapping. We routinely use these codes for display of computer output or input text in user documentation, such as this document.
Typewriter format will look just the same as the surrounding text when viewed with Lynx or other text-based browsers, so do not use it for emphasis.
- Use italics very sparingly: 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.
In scholarly work, it is common to format bibliographic citations using italics for certain parts of the text (e.g., the title of a book or journal). It is probably better to conform to that standard style, and be hard to read, than to appear illiterate.
- Be aware that "ADDRESS" and "CITE" format are rendered in italic by many browsers, so use them very sparingly, if at all.
- Use underline format very sparingly, if at all: it may create confusion with links. Netscape Versions through 3 ignore the <U> tag anyway.
- Use the font attribute SIZE=n very sparingly, if at all. If you must use it, be sure to use the "relative size" form, with an explicit "+" or "-" preceding the numerical value, rather than the "absolute size" form with neither positive nor negative sign. The reason to choose relative sizes is to avoid making your page completely unreadable by visually impaired people, who are likely to set the default font size for display to a value corresponding to SIZE=16, or bigger.
For positive values of n, you should instead use either strong format or header tags (see the next item). Negative values of n are a major readability problem, because most people adjust their browser to display text with a default size that is as small as they can comfortably read on screen, in order to provide the maximum amount of interesting information on the screen at any one time. Even going down one step in font size will make it much harder for many people to read.
- Use header tags for section titles. Don't use level 5 or level 6 header tags, because they are likely to be displayed on-screen in a tiny, hard-to-read font, made even harder to read by being in boldface.
Do not use header tags to emphasize a whole paragraph, use strong format if you must, but it is even better to use some other technique to make a whole paragraph special. (This paragraph, for example, is preceded and followed by horizontal rules, and those horizontal rules are included, along with the paragraph, in a blockquote section.) See also the next point.
- DO NOT TRY TO EMPHASIZE LARGE BLOCKS OF TEXT BY PUTTING THEM IN BOLD OR STRONG FORMAT OR ALL IN UPPERCASE. IT MAKES YOUR READER FEEL LIKE YOU ARE SHOUTING, DOESN'T IT?
Sometimes a complete short sentence in the middle of a paragraph will look OK in strong format.
Avoid using too many graphic images on a page. Browsers will only ask for a few files at a time (four, by default, in Netscape and Internet Explorer), and won't ask for another until an earlier file is completely loaded. One large graphic can be loaded much sooner than a multitude of small graphics. Somewhere between a half-dozen and a dozen graphic images is the maximum that you should have on any one page, with the smaller number appropriate for a home page.
