This report is also available as an Acrobat file.

Contents
Authoring and Design for the WWW

DESIGN INTO PRODUCTION

Some basic principles of information design

Alignment

Even where items are not neighbours, items which align will tend to be read as of similar significance, conceptually grouped. This both implies similarity between the items, and in some cases invites close attention to differences between them which might otherwise be overlooked.

In practice

One of the simplest forms of alignment in text is the indent. Indents allow the design of hierarchical documents, where, for example, definitions of terms are indented in relation to the term defined, or lists are offset from a bullet using a hanging indent.

Appropriate alignment and formatting of indents is achieved through the use of HTML lists. In this example, some fine-tuning has been done by using the size tags to affect the size of the text within the bulleted items.

Web browsers automate the indenting of certain HTML elements. For example, there is an element <DL> the Definition List which contains alternating DT and DD elements (for the Term and the Definition respectively). These are differentially indented to make the structure clear. The author has no control over the amount of indent, nor the exact style of indenting used.

Tabulation

The <TABLE> element can be used to place information at a particular location on the page. Ordinary body text and headings cannot be positioned with as much control, because of browsers' tendency to reflow text to fit the screen window available. Increasingly, Web publishers are tempted to use Tables for purposes other than ordinary tabulation, simply because of this ability to position text and other items in the manner of graphic design for paper.

In some respects, the use of tables as a device to fix screen layouts goes against the spirit of HTML itself. When deciding the dimensions of such a layout, the designer is likely to assume that the design will be seen within a standard Netscape or similar window on a display of 640 by 480 pixels. When this assumption is made, then those with lower resolutions will need to scroll horizontally as well as vertically to see the whole design, and those with higher resolutions will find the design makes poor use of the available screen space we are back to the dispute between preformatting and functional description which is a theme of this handbook. If the increasing use of tables as a layout grid for entire pages is any indication, then there is already considerable resistance to the fluidity and unpredictability of classic HTML, which might suggest again that the visually preformatted approach associated with Adobe Acrobat will eventually dominate.

It is still best to use tables with restraint, where alignment and grouping are absolutely essential and are not possible by other means, rather than to try to use HTML as a rather poor page layout system.

Similarity, difference and emphasis

Items which resemble one another are seen as belonging together, and as having similar meanings, or perhaps levels in a hierarchy.

Items which look different are either given prominence in terms of meaning (such as a word in bold type), or are interpreted as indicating a different function from the surrounding elements (for example as active, hot' text). In most hypertext systems, there is a danger of these two meanings being confused by the user, and Web documents are not immune to these problems.

In practice

The two most common conventions for differentiating text items from the surrounding body are italic and bold. Both are extensively used in this handbook. While HTML provides  and  tags for this purpose, this flies in the face of the HTML philosophy, and instead the functional descriptions should always be used, namely  for emphasis (usually rendered in italic) and  for stronger emphasis (usually rendered in bold). The browser interprets these functional tags as best it can (for example a simple browser on a character-only display may be unable to show italic and may use underline instead).

Texts, especially academic texts, traditionally use these indicators for other purposes as well, such as italic for imported foreign expressions. No HTML functional tag exists for these special uses, so or must be used despite not being quite appropriate. Similarly, as in this handbook, bold may be used for special terms, especially at the moment of their first introduction, as in The HTML DTD defines a number of elements which are ....' Again, no specialised tag exists to represent this function.

Hypertext anchors

For text, hypertext anchors must be indicated to the user in a way which cannot be confused with any other form of emphasis. Following the example of Mosaic, Netscape uses by default a blue text-colour and an underline. The text of anchors which have already been visited is by default red in Netscape, fading to purple over a period of time. The colours both of the unvisited and the visited links can be altered using respectively the LINK and VLINK attributes. Once again there is a tension between the desire of the designer for control (and variety), and the requirement for certain comprehension. Web designers must make up their own minds, but in any case should choose colours wisely. See Colour, below.

Since the aim of the identifying colour is to differentiate anchor text from any other kind, it would be ridiculous to give a text item the appearance of a hypertext link anchor, even though the use of the tag and the (underline) tag make this possible.

Blink

One of the grossest forms of emphasis, allowed by Netscape, is the BLINK tag which causes text to flash repeatedly on the screen. Such flashing text was a feature of many text-only interfaces up to the 1980s, and arguably it still has its place where safety-critical issues arise and it is imperative to attract the user's attention to a particular part of the display. However, such cases are rare, and BLINK should otherwise be avoided: motion perception is such a powerful feature of our perceptual system that a dynamic element undermines concentration on any other part of the screen.

Contents

Graphics Multimedia Virtual Environments Visualisation Contents