 |
 |
 |
 |
 |
 |
 | |||
 |
 |
 |
 |
 |
|
|
|||
Contents
Guide to good practices for WWW authors
Web authors are likely to be dealing with a body of information, in which the basic unit of information is the Web document (or Web page). The physical organisation of the information (into documents) will reflect the conceptual structure. Each document should express a well-defined concept, and may establish that concept in a wider and richer conceptual context through the use of links. While each document should be written so that it makes sense on its own, it is the overlaying of links on the basic discrete unit which defines its role in the structure of the local body of information, and expresses its relationships with the wider world of information.
When looking at the Web page, there are four important topics to consider:
HTML documents have a standard internal structure. As illustrated in the sample template, the whole document is normally enclosed by the HTML element tags, and within them come the HEAD and BODY elements.
The HEAD contains the title and other optional elements which give information about the document, typically used in automated retrieval by robots, maintenance programs and the like. The HEAD should always include the TITLE, which is displayed by the browser at the top of its window or screen and is also used by Web indexing tools and in browser Bookmark lists. The TITLE should be meaningful, even if taken out of context, but also, because it needs to fit into a limited space, not too large.
Always give a concise, meaningful title in the HEAD part of the document.
The HEAD may also include elements such as BASE which gives the original URL of the document and is used for interpreting relative URLs, ISINDEX which indicates that the document is searchable, LINK which indicates a relationship of the document with some other object, such as for instance, an associated style sheet or a related index. The LINK tag can also be used to indicate authorship.
META is another multi-purpose element which may be included in the HEAD. It can include information such as:
<META HTTP-EQUIV="Reply-to" CONTENT="lbj@site.ac.uk">
<META HTTP-EQUIV="Expires" CONTENT="Wed, 10 Jul 1996 09:12:02 GMT">
<META HTTP-EQUIV="Keywords" CONTENT="coffee tea cocoa hot drinks">
The content of Keywords and Title are used by indexing or harvesting programs in their searchable databases. It is bad practice to include here terms which are not integral and important to the document's content.
Web authors who value their reputation will abhor practices which come under the general heading of index-spamming. These usually involve stacking of subject terms in either the Head or the Body of the document in order to optimise the chances of being found and ranked highly by auotmated search services (see the source HTML of this A HREF="http://www.hillandknowlton.com/ixex/topic/top90.htm">example).
The BODY contains the text which is displayed by the Web browser. Many different elements are possible in the BODY, such as the various types of lists, images, links, etc. (For a list of elements allowed under valid HTML 2.0, see the Appendix.)
Back to Web page topics
Large unstructured documents which require continuous scrolling are generally not satisfactory, not only because of the time they take to load, but also because the reader may feel rudderless in a sea of words. The user needs to deal with information in manageable chunks. If the basic conceptual unit is large, then it should be broken down into sections.
Limit pages to a manageable size.
The size of the home page or introductory page is perhaps more critical than most. This page is the window to the rest of your information. It enables you to present not just the overview of what is on offer, but also a view of its structure. Keeping this page well organised and presented will encourage the user to venture further into your information. A HREF="http://www.ed.ac.uk/">Edinburgh University's server gives a succinct view of its information:
Back to Web page topics
Hyperlinks leading to further information greatly enrich Web documents and facilitate information exploration. They are after all one of the reasons for the popularity of the Web.
Use links to enrich your document, but let it speak for itself too.
There is little value in content-free documents which simply point elsewhere. Each Web document should have something of its own to say, with or without the enhancement of links to related information. It is good practice to compose your documents so that they read well either way and naturally to reject the use of inelegant and unportable expressions such as Click here! Contrast, for instance:
All entrances to the building will be one and a half times the standard size. To see an outline of the building plan, click here!
with:
The building plan shows how all entrances will be one and a half times the standard size.
Don't use Click here for links.
Users will want to be able to judge whether it is worth their while to follow a hyperlink. Give enough in-context information to enable them to judge, and especially indicate if the link leads to a large file, as in the example of the A HREF="http://www.bodley.ox.ac.uk/guides/maps/mapcase.htm">Bodleian Library Map Room Gallery of Map and Map-Related Images.
Supply contextual information about links.
Links give your documents a dynamic quality, but this can have its down-side. Linked resources at other sites can change location or be removed. It's essential to regularly check links in your documents to make sure they still work and possibly also that they are still appropriate. Tools such as MOMspider can be used for automated checking of the functioning of links.
Make regular checks of the links in your documents.
Back to Web page topics
If a graphically capable browser is being used, graphics in GIF (Graphical Interchange Format) or XBMP (X Bitmap) format can be rendered as inline images, that is, integral to the Web page. Graphics in other formats can also be viewed in a separate window by launching an appropriate viewer program. With most browsers JPEG files too can be viewed as inline images.
Graphics can greatly enhance the appearance of a page. But appearance shouldn't be the main consideration. The function of graphics should be to help convey your information, to enhance content rather than simply make it look pretty. Look carefully at the graphics in your Web page. Do they reinforce and develop what you are trying to convey, or do they distract attention from it?
Use graphics effectively to enhance your information.
Having made the decision to use graphics, give some consideration to the A NAME="implications">implications for users:
Performance issues are an important aspect of the user interface to Web pages. The most common complaints about Web pages relate to the ill-judged use of graphics. Good practice in the use of graphics helps to make Web pages more accessible.
Large, slow-loading images are likely to irritate users, particularly if they are inline images which can delay the loading of the whole page. Keeping down file size to no more than is necessary speeds up loading of pages, comforting both user and network manager.
Minimise the size of graphics files and don't include large graphics files as inline images.
One way to keep down the file size is to store an image with only as many colours as it requires.
However where high quality and many colours are required to convey the message, file size may need to be large. In this case it is good practice to:
Let the user choose whether or not to view large graphics files.
There are a few other points which can help in the management of graphics:
It's a good idea to look at your graphics using different monitors, e.g. colour and grayscale, high and low resolution (VGA/SVGA), and different size monitors. Low fidelity monitors can make viewing of images difficult.
Test graphics on different monitors.
Back to implications for users
Providing alternatives to images provides portability and flexibility. It means that users with text-only browsers can be given meaningful information in place of the graphic, e g.
<IMG SRC="sthside_logo.gif" ALT="Southside College">
The text Southside College will give the user much more information than the default which appears when no alternative is given, i.e. [IMAGE].
The routine use of the ALT= attribute in combination with the IMG tag is good practice
Always provide an alternative to images.
If there is no genuinely informative text alternative to an image, having a blank space may be the less tantalising option, e.g.
<IMG SRC="logo.gif" ALT=" ">
rather than:
<IMG SRC="logo.gif" ALT="If you were using a decent browser, you'd see our logo here. ">
Back to implications for users
Graphics-based links are commonly used and provide effective navigational pointers, for instance the use of icons pointing to further information at the same site, or the use of imagemaps as keys to location-based information (see example in A HREF="http://www.cs.ucl.ac.uk/misc/uk/intro.html">UK and Ireland active map).
When graphics are used as links, be sure to provide alternative text links. The text alternative to the UK and Ireland active map provides an example.
Having a graphic as the exclusive route of entry to some information effectively bars a proportion of the user population from accessing it. It is good and sensible practice always to provide an alternative text route to hyper-linked information, either via text links on the same page, or an alternative page or set of pages which is entirely text-based.
Provide a text alternative to hyperlinked graphics.
Back to implications for users
Each new image (or the same image from a different location) referenced in your HTML page represents a separate fetch by the user's browser, and this applies for icons just as for other images. Be aware that using many different icons means more network traffic than using the same one or the same few repeatedly. (Why have red, blue, green, and yellow balls when red balls would be just as good?) Once cached by the browser software, an image file needs to be retrieved only from the user's local cache for re-viewing. In future we are likely to see commonly used icons as a standard part of HTML obviating the need to refer to external files to graphically indicate such functions as Next, Back, Tip, Warning, etc..
Re-use images in preference to using new ones.
Graphics Multimedia Virtual Environments Visualisation Contents