Still, many web designers have a tendency to ignore most of these
guidelines. Even those guidelines that have gained some level of
acceptance have often done so only after being "rediscovered" in
this new medium. At first, this repetition of effort seems somewhat
silly and wasteful. Yet there are a few good reasons why things
happened this way.
10.3.1. When Philosophies Collide
The original conception of the web was as a platform-independent
method of information exchange. The designers wanted to create a
system that could be navigated by software running on the most basic
text based computers as well as high-end graphical workstations and
personal computers.
(Berners-Lee, 1989)
Moreover, they also wanted the web to be
accessible by people with physical impairments that might make reading
traditional computer displays difficult or impossible. Therefore, the
web was designed so that it would be possible to present information
using synthesized speech or braille displays or other similar
techniques.
These criteria imposed many restrictions on the design of the web. Such restrictions are especially visible in early versions of HTML. In particular, directives to control the visual layout and appearance of elements in a web document are conspicuously absent. Virtually all HTML tags differentiate portions of text not by their visual attributes but by their function. For example, in HTML 2.0 (Connolly, 1995), all but a few tags only indicate the function of the text (header, quote, etc), not how it is to be displayed. There is no way to indicate that a particular block of text should be displayed in a larger-than-normal font size. There is no way to indicate that an inline image should be centered horizontally. There is no way to indicate that text should be arranged in multiple columns.
Naturally, it wasn't long before web page designers found themselves wanting to do these very things. However, the content-based design paradigm that was an inherent part of early HTML standards did everything it could to prevent them from doing so. After all, how can you let a page designer specify a change in font when a user viewing the document on a text-only computer terminal or listening to a synthesized voice read the page would be unable to see or hear the difference?
Even between graphical browsers, designers couldn't rely on consistent appearance of elements. Some browsers displayed headers as larger text. Some centered headers on screen. Some changed the font style. The only thing that designers could safely assume was that headers would appear visually distinct from the surrounding body text.
Of course, as the web's popularity grew and an increasing number of classically trained graphical designers began to become interested in the new technology, this situation rapidly became unacceptable. They wanted this kind of control.
And one way or another, they were going to get it.
10.3.2. Working Within the System
Even though HTML is defined based on content rather than presentation,
certain visual interpretations of the HTML tags have become almost
de facto standards themselves. Motivated by web authors'
desire for at least some level of consistent behavior, and aided by
the early dominance of a single web browser (namely NCSA Mosaic), the
developers of early web browsers consistently chose to apply many of
the original design choices made in Mosaic. When Netscape became the
driving force in the market, others began to imitate its design
choices. Web authors have, therefore, been able to exploit some of
these consistent constructs to control appearance in ways that the
web's original designers never envisioned.
One popular "trick" is to use a <PRE> block to provide more precise control over the positions of text and graphics on the screen. Within a <PRE>...</PRE> block, a monospaced font is used so that all letters are the same width. Moreover, a sequence of spaces, tabs, and newlines is drawn on screen exactly as it appears in the document rather than being collapsed into a single space as is normally done. Therefore, the web author is able to arrange text in multiple columns, simulating a tabular layout even in browsers that don't support the newer <TABLE> extensions. This technique was more popular before <TABLE> support was wide-spread, but it's still seen occasionally today.
Perhaps the most prominent example of reliance on standard renderings is the HTML header construct. Virtually all current graphical browsers display these in a larger point size than normal body text. So many web designers have used headers to increase point size even when the text in question wasn't actually a header. With the arrival of Netscape as the dominant browser, headers became used for even odder things. Why? Because in Netscape, an <H6> header is actually drawn smaller than normal text. Many other browsers, in an attempt to be compatible with Netscape, have imitated this behavior. The result is that many authors use <H6> headers to include "fine print," such as copyright notices, in their designs.
One common mistake is often made by designers when using HTML headers and other contructs such as bolding to grab reader attention. There is common fallacy which says that making everything on the page an <H1> header or making a large passage of text bold makes the entire page stand out. This is usually not the case. These enhancements rely on visual contrast to make their point. If everything is big and bold, then nothing stands out. Therefore, such tags should be used only when they really make sense.
Related to this is one of Tufte's fundamental precepts of graphical design (Tufte, 1992). Basically what this says is that the most important information should be the most visually salient. Too often the important information is overwhelmed by pure decoration or details of lesser importance. Tufte's books show many examples that present a large amount of information but do not appear to be cluttered. This effect is often acheived by using bright, fully saturated colors for the key information, while less important information is drawn with more subdued colors, causing it to fade into the background and not compete as strongly for the reader's attention. Primary information also tends to be larger than secondary information, again drawing the eye.
This idea translates directly into web design. Frequently, web sites feature brightly colored background images. These tend to distract the reader and compete with the text for attention. For an example of this, see (Skjæret). Backgrounds running behind text should not be busy; they should be very subdued. Also, many sites incorporate large and colorful image maps into their designs. This can be useful if the information in the image itself is of importance, like the maps at MapQuest (Geosystems, 1996). However, when the imagery in the picture is simply decorative or is so elaborate that it becomes difficult for a user to determine what is a clickable region and what is not, image maps can do more harm than good. They also increase download time significantly, like at the site for NeXT Software, Inc (NeXT, 1996).
Image maps also have the drawback that they cannot be used properly by people with text-based browsers. Even people who by default turn off the downloading of images, due to the delays involved when surfing over slow modem connections, will be unable to use image maps until they specifically download the image. Many people feel the visual impact of an image map outweighs these shortcomings. Still, these issues should be kept in mind when deciding if an image map is really what is needed. Often a similar effect can be achieved using regular images inside links, arranging the images within a <TABLE> or a <PRE> block. When an image map is used, a set of equivalent plain text links should also be provided, if at all possible, for those who cannot use the image map directly.
At the same time, the visual appeal of a colorful image can be very effective when used to break up large bodies of text. Using images as headers and subheads gives the eye a visual resting point, a place to pause while perusing a large grey mass of text. When using images this way, of course, it is even more important than ever to include an ALT string within the image so that people with non-graphical browsers will still have the very important header text available. Actually, every graphic should have an ALT string. Even a graphic that is pure decoration should have an empty ALT string to indicate that it serves no real purpose.
Of course, there are other ways to break up large bodies of text besides including inline images. One thing that is frequently done by magazines and newspapers is to include a quote in the middle of a long article. Such a quote is generally set off from the text by horizontal rules and is frequently set in a larger type size. This is another good way to give the eye a rest. All sorts of things that break up the monotony of large expanses of text can help make a web page easier to read.
Many of the web magazines and newspapers use these techniques on a
regular basis. A look through C|Net's many web pages
(C|Net, 1996) shows many creative ways
of breaking up large sections of text, including
this use of inline images to create displayed quoted.
10.3.3. If You Can't Beat Them, Create a New Standard
In early 1994, frustrated with, among other things, the slow evolution
of web standards, Marc Andreesen left his position as one of the chief
developers of NCSA Mosaic to create his own company and his own
browser: Netscape Navigator. Almost immediately, Netscape began to
redefine HTML, adding many new extensions thought to be useful to web
designers. Many people took issue with Netscape's strategy, pointing
out that proprietary extensions went against the model of a universal
standard for information exchange. Nevertheless, the market had
spoken. Netscape, with all of its nonstandard extensions, quickly
became the most popular web browsing software available. More
extensions followed in rapid succession.
At the same time, the World Wide Web Consortium (W3C) continued to try and define standards for the web that would allow information to be accessible to as broad a user base as possible. In May of 1996, the W3C announced HTML 3.2, a new official version of the web's defining language (Raggett, Connolly, et al, 1996). This new standard incorporated many of the most popular HTML extensions, thereby giving developers and designers a more up-to-date baseline against which to judge their browsers and their pages. Many of these extensions (such as <FONT>, <CENTER>, and several new <IMG> attributes) are undeniably presentation driven.
Perhaps the most important and useful extension to be included in HTML 3.2 was the <TABLE> tag. Authors can now use these tables instead of preformatted blocks to lay out columns of information. Layout artists have long recognized the importance of organizing a layout around a grid. Horizontal and vertical "eye lines" help guide the reader around a page. These eye lines are seldom actual lines, however. They are formed from the edges of images and columns of text. Thus, aligning the edges of such design elements often increases the effectiveness of the design. HTML tables allow designers to create eye lines. Again, web magazines and newspapers use this technique frequently (USA Today).
Of course, a perfect grid arrangement where everything is exactly lined up can become boring easily. Therefore, designers will often "break" an eye line by placing an element across the line. This can be accomplished in HTML by creating an table cell with a COLSPAN or ROWSPAN value of two or more. Then, an image centered within this cell will straddle the eye line formed by the edges of the other cells in its column or row. Care must be taken, however, because an element which deviates only slightly from an eye line tends to be very distracting. When breaking an eye line, it's best if the element doing the breaking extend about an inch over each side of the line. Therefore, an image used in this manner should be large enough that the intent to break the line is clear. Otherwise, it will simply look like a sloppy line. When done properly, however, this technique of creating an eyeline and then breaking it can be very effective.
Another common use of tables is to simulate the multi-column layouts common in magazines and newspapers. Wide columns with narrow leading (between line space) can be very difficult to read. The eye tends to skip lines or read lines multiple times. By using tables to create narrower columns, a designer can make large bodies of text much easier to read.
The <FONT> extension can also be used to help remedy this situation. Try including a space within a <FONT SIZE=+2>...</FONT> block on each line (or regularly enough that you can be assured that one will appear on each line when the text wraps). The larger space will act as a "hydraulic jack" and will pry the lines apart, thereby increasing their leading and making them easier to read. (Gillespie, 1996)
Other HTML extensions are less commonly implemented and are somewhat more controversial. Even the more common tags such as tables are not implemented in many browsers. If you are not careful with your use of these extensions, you run the risk of making your page unreadable to people not using a Netscape-compatible browser. While some companies consider this to be a fair assumption when designing their corporate web pages, it can reflect badly on them if they are targeting a broad audience.
In another attempt to overcome the limitations of HTML, Adobe defined the PDF document format (Adobe, 1996). This is effectively a merger of HTML style hypertext links with a language similar to Adobe's popular Postscript. As such, it provides much greater flexibility in design. Almost any layout is possible. However, the PDF format has yet to receive popular acceptance. Until more mainstream tools are written to take advantage of PDF, it seems HTML and its various extensions will continue to be the lingua franca of the web.
Copyright © 1996 Joseph W. Reiss, All Rights Reserved
Joe Reiss
<jreiss@vt.edu>
Last modified: Mon Nov 18 23:11:38 1996