Writing Well for the World Wide Web

Sr. Kathleen M. Burns, IHM

|| Rationale || Issues of Access || Issues of Orientation || Issues of Organization || Issues about Graphics || Details, Details, Details || Content, Content, Content || Conclusion || References ||

And it came to pass in the city of Geneva, Switzerland, in the year of 1989, that Tim Berner-Lee of CERN (a particle physics laboratory) initiated an effort to aid in the sharing of information among members of the high-energy physics community. Yeah, and verily, by 1991, his endeavor came to fruition. Evening came and morning followed... the World Wide Web was born.

But, lo, the Web server worked only under an operating system to which few had access and was not pleasing to the eye, so it gained little in popularity. It was the day of the Gopher (server). But there came a time (in 1993) when others (Bob McCool and Marc Andreessen of the National Center for Supercomputing Applications (NCSA)) wrote applications that could be used by the multitudes (UNIX). Wonder of wonder, their Mosaic client application employed graphics as well as many other network operations. Yeah, with that and the creation of Lynx (a terminal-based, text-based client) the Web came to flourish (Adapted from Morgan, 1994).

The growth in popularity of the World Wide Web has been astounding. This is most certainly due to the ease it provides for people to access and provide Internet information (Graham, 1995). There are currently twenty million people using the Web, a figure that doubles every 52 days (Walsh, 1996). Educational institutions such as Columbia University enable and encourage faculty and students to create and publish Web pages (Academic Information Systems, n.d.). National computer networks such as America Online and CompuServe now provide their membership the ability and the space to create personal Web pages. As the amount of information provided on the World Wide Web explodes, it becomes easy for the would-be reader to become overwhelmed and lost in the virtual sea of information. It is imperative that those seeking to provide this information take proper care to ensure that what they present is depicted in a clear and understandable manner while taking full advantage of the special capabilities inherent in the Web environment.

This paper paper is an attempt to shed light on the issue of what makes for good writing on the World Wide Web. It will include a synthesis of expert opinion about how Web pages should be constructed with explanation of why these principles should be followed. This advice will be illustrated with examples of actual Web pages which have been gathered from my personal experience with the Web and by requesting random URLs (Universal Resource Locators) from the Yahoo (http://www.yahoo.com) and WebCrawler (http://www.webcrawler.com) search engines.

Rationale

While Web documents have many properties that are similar to print, writing for the Web and for print are not the same. Web writing involves dealing with a paradox that, on one hand, provides unprecedented possibilities for expression; yet, on the other hand provides only limited control of how pages are formatted. The World Wide Web is a multimedia, hyperlinked environment in which one can blend text, graphic, audio and video elements into a single document. However, it is also an environment which is accessed by vastly different configurations of hardware and software which provide varying capabilities and, therefore, render the appearance of the Web pages in many different ways (Stein, 1995). Failure to take this into account can cause very unsatisfactory results for some of your readers (Berner-Lee, 1995).

Issues of Access

The issues related the different ways that people access the Web are extremely important. An often cited advantage of Web documents are their device-independence. This means that the same document can be viewed by different kinds of computers using different application programs (Price-Wilken, 1994). This advantage, however, has a down side. There are problems related to the equipment and browsers people use when they access the Web which ought to be taken into consideration in Web page design.

Modems used for Internet access can vary greatly in speed . Columbia University's system provided support for modem speeds ranging from 2,400 - 28,000 kbps (Academic Information Systems, 1995). Even greater speeds are possible via ethernet adapters which "hardwire" one into the system. The problem that modem speed presents is for lower-end users. The graphic, audio and video files that provide such exciting possibilities for expression tend to require relatively large files sizes and with slower modems require a great deal of download time. Sites which take too long to download risk trying their readers' patience. Those Web creators with high-speed connections must be careful to remember this and not assume that everyone else is similarly blessed. Pages should be tested on dial-in hookups at 9,600 - 14,400 kbps (these speeds are considered to be practical limits) and should have a download time of not longer than 10 - 20 seconds (Lynch, 1995; Snyder, 1996; Stein, 1995).

For example, The Claretian Missionalry Communications Worldwide Home Page has a fairly clear and straightforward layout. However, it takes 1 minute and 45 seconds to load at 14,400 kbps. Many readers will find such a long wait time to be unacceptable.

Web page creators use the tags of HyperTalk Mark-up Language (HTML) to describe the structure of the Web page and the elements that it contains. These tags might indicate that a particular block of text is a paragraph, a section header, or a special kind of list. This is somewhat different from designing the specific output in the way people are used to doing with desk-top publishing applications (Lynch, 1995; Stein, 1995).

People use application programs called browsers to access the Web. These browsers vary greatly in their features and capabilities. Different browsers interpret the underlying HTML tags of Web pages in diverse manners. They use different schemes for spacing and font choice and may or may not support different tags. In some cases they may interpret certain tags in unique ways. Often Web readers can customize their displays. It is the browsers that control the actual way that pages are rendered rather than the pages' creator (Berner-Lee, 1995).

Web page creators, used to the control of output experienced in desk-top publishing, may be tempted to force the look they desire by using tags in ways other than those for which they were intended. The result, while satisfactory when viewed with the author's browser, may look very strange or be unreadable when viewed with alternate ones. Therefore, web authors need to accept the limitations inherent in HTML and avoid writing for a single browser. New and updated pages should be tested by viewing them on as many different browsers as possible (Berner-Lee, 1995; Lynch, 1995; Stein 1995; van Leeuwen, 1995).

Readers with graphical browsers may compare the graphic rendition of theIHM Web: Where We Are presentation with a screen shot of its Lynx rendering. In the Lynx version, graphics have been suppressed, as in the case of the maps, or replaced with alternate text, as in the case of the up arrow.

Browser differences can have far reaching effects. This issue will be brought up again in this paper as it relates to other specific topics under consideration.

Issues of Orientation

One of the great strengths of Web pages, the ability to link with equal ease to botlocal and remote documents, can cause a problem with reader orientation (Lynch, 1995). The links on a Web page tempt the reader to interrupt their reading and wander off on tangents. With browsers determining paragraph parsing, spacing, fonts, etc., many pages take on a uniform look which can make if difficult to distinguish among them. Without orientational cues from the page's author, it can be difficult for readers to know where they are in the context of a particular Web site and even if they are still at the same site from which they started (Stein, 1995).

Compounding this problem is the fact that a Web author cannot count on all readers entering the site at the planned beginning (usually called the homepage). Anyone can make a link to any page on the Web regardless of an author's planned sequence. Full-text search engines link to individual pages rather than to the homepage. Readers can arrive deep in the middle of a site without context or preamble. This makes it imperative that Web authors provide cues to help such readers understand where they are in a site and how to make sense of the information they find (Berner-Lee, 1995; Lynch, 1995; Snyder, 1996; Stein, 1995).

Problems related to orientation can largely be solved by giving readers cues to the structure and organization of the site. Careful use of graphics and user interface elements can help to identify the site and help readers to orient themselves within the site (Lynch, 1995). A standard title or graphic logo, the name of the person or organization responsible for the site and a link to the site's homepage on each of the site's component pages might be considered to be the minimum measures for helping readers to situate themselves within a site (Berner-Lee, 1995; Stein, 1995).

A page about a Hawaiian basketball team from ESPNET provides an example of a Web page which is not intended to be the entry point of the site, but was reached by requesting a random URL from Yahoo. The identifying graphic at the top of the page and the text menu bars at the top and bottom signal this situation to readers giving them a fairly clear idea of where they are in the presentation.

The homepage of each site should give readers an overview of the information that is available there and should provide links that clearly convey how to access that information (Snyder, 1996). Some sort of navigational system ought to be in place to assist readers as they move from document to document within the site. There are a number of schemes which can be employed for this purpose. Image maps (graphic images with "hot spots" that act as links), in-line graphic buttons, text or graphic menu bars (as in the ESPNET example), and simple text menus can all be effective ways to provide for navigation (Stein, 1995). Keeping the scheme consistent throughout the site helps to signal the relatedness of the various documents and keeps readers orientated (Lynch, 1995).

Issues of Organization

Closely related to providing for the orientation of readers is organizing the information in such a way that visitors to the site can find the information they want quickly and efficiently (Snyder, 1996). The purpose of the site should be well-defined and the content organized into a hierarchy of topics and subtopics which are reflected in menus, links and/or other navigational aids (Berner-Lee, 1995; Lemay, 1995).

Organizational Schemes

The structure should have a natural feel and not interfere with readers' use of the site. Menu structures of developing sites need to be evaluated periodically because what may have been a reasonable scheme when the site was simpler may no longer serve adequately as it becomes more complicated. Complex sites can be made more comprehensible through the use of deep menu hierarchies that display the structure of the site. However, users should not have to go through menu after menu to find the information they need (Lynch, 1995). Users should be able to locate key information within a site by following no more than three links (Stein, 1995).

Lemay (1995) describes a number of schemes that can be used for organizing a Web site:

Hierarchical structures (often called trees): organize information into topics and subtopics. It is one of the most commonly used organizational structures on the Web and is easily codified into menus and submenus or in an outline format. Readers usually find it easy to orient themselves within this structure.
Linear structures: can be very rigid and limiting, but may be appropriate for presenting short stories, step-by-step instructions or computer-based training. A linear structure might be altered to allow for limited branching such as when the steps of a procedure have a point at which there might be some deviation (e.g., software installation on different platforms).
A combination of linear and hierarchical structures: might be used with material that is basically linear such as FAQs (Frequently Asked Question documents) or annotated literature.
A web structure: free-flowing, enabling the reader to move from one document in the site to another without any real overall scheme. It is appropriate for use with unrelated information or for encouraging browsing. However, readers too easily get lost in this "structureless" structure and may find their inability to access a specific piece of information frustrating. When using a web structure, it is a good idea to also provide an alternative scheme for accessing the information such as a table of contents or a map of the site.

Emphasizing Structure

Regardless of the site's organizational scheme, there are a number of techniques that can be used to emphasize and enhance the structural cues. The most important items should be near the top of the page where they can be seen without scrolling. Careful use of headers, icons and colored graphics can be used to draw readers' attention to important items on the page; though it is important that these be used properly, as will be explained in the sections that follow (Stein, 1995). Consistently using the same basic page design across the site will also aid readers in locating the information they wish to find (Lynch, 1995).

A hierarchical, or tree, structure is demonstrated by the All Internet Shopping Directory. Selecting any one of the menu choices in the directory will take readers to a submenu from which more specific choices can be made.

Web Page Length

A very important organizational issue is consideration of how long a single Web page should be. The term "page" has a different meaning on the Web than it does in print -- a Web page can be, in actuality, any length. However if pages are too long, scrolling can be a problem. It is inconvenient to do on text-based browsers and it can cause readers to lose their sense of orientation. If, on the other hand, pages are too short, reading becomes choppy and the wait between pages may cause readers to lose their trains of thought.

Engines for Education is an example taken from a Web site which offers a book-length presentation which has been chopped up into short segments, few of which are longer than one screen in length. This causes difficulty for readers who might prefer to print out the text or to save it and read it off line.

Generally speaking, Web pages should be at between one and ten screen long. If the editorial content of the page is such that it requires greater length, internal anchors within the page can be used to make them more manageable (Stein, 1995). Internal anchors are links from one part of a page to another part of the same page. They can be used, for example to set up a short menu at the top of a page with links to specific sections farther down. At the end of each section another internal link can link back up to the menu at the top (NCSA, n.d.). Using such a technique makes extra-long pages much easier to handle.

An example of using internal links in this manner can be seen in the previously mentioned IHM Web: Where We Are presentation. It lists almost 150 ministry sites -- a presentation which spans approximately 50 screens, but does not lend itself well to being broken down into smaller documents. The menu bar at the top of the page allows readers to select the desired country. A similar menu is provided farther down the page for selecting a particular state. An up-arrow/go-up link is provided at the end of each country's or state's listing to allow the reader to return to the menu. This scheme allows the user to navigate with relative ease through a very long document.

Another consideration that might be taken into account in determining Web page length is the need that some readers may have to download or print out the document. People may find it very inconvenient to do those things if a document has been divided into a number of individual pages. One solution, when such a division is deemed preferable for on-line readers, is to provide link to a separate file containing the full-length text (Lynch, 1995).

Issues about Graphics

The ease with which graphic elements can be included in Web pages is one of the things that has contributed greatly to the popularity of the World Wide Web. It is also potentially one of the greatest areas of abuse in Web page design. Poorly used graphics hinder readers' ability to use the site. Good graphics have a purpose that is clear and they enhance an add meaning to the page (Snyder, 1995).

Problem Areas

As has already been mentioned, graphic images require a large amount of memory and, when they are too large or too many, can significantly slow down the downloading of the page. Furthermore, many readers have text-based browsers which are not capable of viewing graphics. Other readers who do have graphical browsers turn off the graphic loading feature to save download time. If graphics are used, especially for navigation, provision must be made for those who cannot view them (Stein, 1995).

The ICAI Server demonstrates the problem. The words that create the menu as seen in the graphical version are individual graphics. However, no alternate text is given, so the page is virtually unreadable by the text-based browser.

Image maps are gaining popularity as navigational aids. A number of things must be considered for their use to be effective. They tend to be large files and, as is true of all graphical images, they do slow the downloading of the page. They are unreadable and unusable for readers with text-only browsers or for those who have turned off the graphics (Stein, 1995). It is not possible to create alternative text to replace the image map effectively from within the image placement tag as was describer earlier (Lemay, 1995). Furthermore, they tend to offer less information than text-based menus simply because of space and because offering more than six to eight choices becomes visually overwhelming for the reader. Multiple nesting of image map menus requires extreme amounts of download time which will be unacceptable to most readers (Lynch, 1995).

Using Graphics Effectively

Graphic elements, such as icons used to highlight points and colorful lines used to separate sections, work best when they are used sparingly. They can help to establish a sense of common identity among the pages in a site and to add some emphasis in the right places. It is best to select a few and then use them consistently. A Web page designer should give careful consideration before using more than three such items, or before using the same item more than ten times on the same page (Stein, 1995).

For those who cannot or choose not to view graphics, it is a simple matter to provide for alternative text to be displayed in place of the graphic by adding an attribute to the HTML tag which places it on the page. Image maps can be supplemented by text menus either placed under the map or on a separate page (Lemay, 1995; van Leeuwen, 1995).

The Westpac Bank Web Page shows one way that this can be done. The graphic at the top of the page presents a menu embedded in an image map. A text menu bar at the bottom of the page offers the same selections (described in more detail) and more. Other suggestions for making more effective, efficient use of graphics include: Keep banner graphics small enough to fit on the default screen size which is normally about 500 pixels (Lynch, 1995; Stein, 1995). Reduce the number of colors in a graphic from the millions available to scanners and 32-bit machines to the 256 available to most readers who have 8-bit machines (Snyder, 1996; Stein, 1995). Create thumbnail graphics which link to larger graphic and animation files and label the links with the approximate size so that the user can decide whether or not to download it (Lemay, 1995; Stein, 1995; van Leeuwen, 1995). Use interlaced GIF images as they require less time to download than conventional ones. Use Netscape extensions such as width and height attributes in the image placement tag. These speed up downloading for users of Netscape and are ignored by browsers that do not support them (Lynch, 1995).

Details, Details, Details

Successful Web page authoring requires attention to a myriad of details. Among some of the more important ones are identifying the authorship and sponsorship of the page, giving the reader a sense of the status of the page, making links appropriately and using HTML tags properly.

Ownership

Web pages should not be anonymous. The name and contact information of its creator should be included in the footer of every page. Contact information should include, at a minimum, the author's e-mail address; but may include other information such as telephone and fax numbers, as well as a regular mailing address. The e-mail address can be tagged with a mailto link which will allow readers to sent messages directly to the author while viewing the Web page. If the site is sponsored by an organization, that information should be noted also. An alternative to placing this information on every single page is to create a separate author's page and linking to it at least from the home page (assuming that every page links back to it). This can also be a place for disclaimers, copyright notices and such (Berner-Lee, 1995; Lynch, 1995; Stein, 1995; van Leeuwen, 1995). Placing the page's URL in each page's footer helps readers who print out the page to maintain a reference to it (Lynch, 1995).

Home of R2JP is an example of a virtually anonymous Web page. The author has provided no clues as to his/her identity. The link at the bottom of the page might suggest that this page is related to the Trinity Home Page, but it really is not connected in any way. The title of the page gives no clue as to the purpose of the page. Another problem with this page is the oversized banner graphic -- it does to fit the default window size of the browser.

Document Status

It is important to give the reader a sense of how current the information and links contained in a Web page are. The date of the page's creation and/or its last modification should be noted in the page footer. It is, however, important to avoid ambiguous date formats. The date written as "2/3/96" is interpreted differently in the United States (February 3) and Europe (March 2). It is recommended that the month be written out as "February 3, 1996" or "3 February, 1996" (Lynch, 1995; Stein, 1995; van Leeuwen, 1995).

In the case of a site that is growing or that changes frequently, it is helpful to let readers know about recent changes. This can be done by adding a "What's New" page to the site which links to and describes those changes or additions. Another method is to mark new or updated menu items with small "New" or "Updated" icons which are available from many online icon collections. A further aid is to list the date of the change beside those icons, or on the "What's New" page, to give readers an idea of how new the information is. Naturally, these notices should be removed after an appropriate period of time so that their meaning does not become stale. The length of that period will vary according to the amount of change that occurs at the site (Lynch, 1995).

Making Links

One method of link-making that is frequently criticized is what Berner-Lee (1995) labels the "here syndrome. " This occurs when a Web author tells readers to find some information "by clicking here," making the work "here" into the hyperlink. The problem with this is that it separates the link from the words that describe it. The word "here" is rendered in bold or colored print so that it stands out rather than the descriptive words that should be highlighted. A similar problem occurs when the word "link" becomes the focus of the hyperlink, as in "Follow this link to see ..." (Stein, 1995).

Links should be contextual and self-descriptive. Rather than making reference to the underlying mechanisms and protocols, the text should keep to the topic of the page. Descriptive words or phrases should be selected from within the text and made into the links. This makes the underlying actions more transparent and lets the text concentrate on the intended topic (Berner-Lee, 1995).

A comparison of two sites demonstrates the problem and its solution. The Media Vision site suffers from the "click here" syndrome (it also does not present its goal clearly and overuses bold type). The Groove is in the Heart site is a wonderful example of using contextual links (though the site does use a busy background that makes the text hard to read).

Of course, it is absolutely imperative that the links in a document be tested to make sure that they work. Readers will become quite frustrated if they try to follow a promising link, only to find they are unable to do so. External links (links to documents outside of your own site) should be tested when the document is set up and periodically afterwards. The Web is a shifting environment: new site appear and old ones disappear every day (Graham, 1995; van Leeuwen, 1995).

Text Formatting

HTML provides six levels of header tags. These are intended to be used as page and section headings within text documents. They result in bold-faced text in various sizes (NCSA, n.d.). Web authors are often tempted (and often succumb) to use header tags in an attempt to control text size in the document even when the text involved is not, strictly speaking, a section header. This practice is frowned upon by most Web experts who state that header tags should be used for the purpose for which they were intended and nothing else. Header tags should be used in numerical order (without skipping levels) to reflect the structure of the document. The reason for adhering to these strictures is that future browsers will use this structure to collapse text and offer an outline view. There are tools that do this now to generate tables of contents and hyperlinked outlines (Berner-Lee, 1995; Stein, 1995).

The Friends of the Jefferson-Madison Regional Library Page shows a misuse of header tags. The tags have been used for emphasis rather than as section headings. Furthermore, they have been used out of numerical order: The title is a level one header and is the only one used correctly. The lines which begin "The principle purpose..." and "The 1996 Book Sale..." are level three headers. All other headers are level two. The change in size gives the page a somewhat awkward look.

There are tags for adding various degrees of emphasis to text and these should be used rather than headers for that purpose. <FONT> tags allow for some control of text size, though the tags are ignored by browsers that do not support them (Stein, 1995).

Another formatting problem occurs when Web page creators attempt to add white space to the document by using extra paragraph or line break tags. This technique is interpreted differently by different browsers. Some provide the extra space, some ignore the extra tags. In general, trying to fight the limitations of HTML produces unpredictable results, so it is best to accept them (Stein, 1995).

Content, Content, Content

Of course the only reason for creating a Web page is to present some kind of information. That is after all the reason the World Wide Web was created (Morgan, 1994). It is very important that attention be focused on the site's content. Goals should be clear. The site's organization should be in service of the content (Lemay, 1995). Good design will find the proper balance between the visual elements on the page and the information it presents. Lynch (1995) expresses it best: "Dense text documents without the contrast and visual relief offered by graphics and careful page layout and typography are ... more difficult to read.... However, without the depth and complexity of associated text, highly graphic pages risk disappointing the user by offering a poor balance between visual sensation, text information, and interactive hypermedia links."

Two examples demonstrate Web pages with a questionable amount of content. While personal taste is a consideration, some readers will not find Kan's home page worth the download wait. Kan's owner's homepage seems to offer even less. These pages also demonstrate the misuse of header tags to emphasize text and the "click here" syndrome.

Conclusion

The phenomenal growth in popularity of the World Wide Web has brought about an explosion of Web site creation. As more and more people create their own sites, it is important that they be careful to craft those sites so that their readers can find and use the information that they offer.

Because of the differences in equipment and software used to access the Web, Web creators must be aware of the possible effect the elements included on their pages may have with various computer platforms with browsers having different capabilities. They should take into account the relatively slow speeds of dial-up connections and plan their pages so that they download in a reasonable amount of time. Since Web browsers may support different features or may interpret tags in various manners, authors should not try to use HTML tags in ways for which they were not intended.

Movement on the Web is very fluid. Going from document to document and from site to site, people can easily lose track of where they are. They can enter a particular site by way of any individual document in it as easily as they might enter it through its planned homepage. Therefore it is necessary to provide orientational cues to help people determine where they are within your site and how to get from there to the information they want. Web sites should be planned with an organizational scheme designed to help readers move through and make efficient use of the site.

Graphics should be used with care to enhance and add meaning to the page. Provision must be made for those who cannot or choose not to view graphics by providing text alternatives.

Good Web page design requires attention to many details. The authorship and sponsorship of Web pages should be clearly identified. Readers should be given a clear idea of the age of the information and links that are provided. Links should be clearly made and thoroughly tested. All HTML tags should be used properly.

Finally, and most importantly, it must be remembered that all the planning, organizing and designing is in service of the content of the site. The purpose of a Web page is to present information. Without that focus, the rest has no meaning.

References

Academic Information Systems, Columbia University (n.d.). How to create web pages at Columbia, [On-line]. Available: http://www.columbia.edu/cu/help/ create.html

Academic Information Systems, Columbia University (1995). The dial-up modem pool, [On-line]. Available: http://www.columbia.edu/acis/networks/ modems.html

Berner-Lee, T. (1995). Style guide for online hypertext, [On-line]. Available: http://www.w3.org/hypertext/WWW/DesignIssues/Overview.html

Graham, I.S. (1995). The HTML Sourcebook. New York: John Wiley & Sons, Inc.

Lemay, L. (1995). Teach Yourself Web Publishing with HTML in a Week. Indianapolis, IN: Sams Publishing.

Lynch, P. (1995). Yale C/AIM WWW Style Manual, [On-line]. Available: http://info.med.yale.edu/caim/StyleManual_Top.HTML

Morgan, E.L. (1994). The World Wide Web and Mosaic: An overview for librarians. The Public-Access Computer Systems Review 5(6), pp. 5-26, [On-line]. Available: gopher://info.lib.uh.edu:70/00/articles/e-journals/uhlibrary/ pacsreview/v5/n6/morgan.5n6

National Center for Supercomputing Applications (NCSA) (n.d.). A Beginner's Guide to HTML, [On-line]. Available: http://www.ncsa.uiuc.edu/ demoweb/html-primer.html

Price-Wilken, J. (1994). Using the World Wide Web to deliver complex electronic documents: Implications for libraries. Public-Access Computer Systems Review, 5(3), 5 - 21, [On-line]. Available: send e-mail to: listserv@uhupvm1.uh.edu with message: get pricewil prv5n3 f=mail.

Snyder, J. (1996). Good, Bad, and Ugly Pages. Internet World (7)4, pp. 26-27.

Stein, L.D. (1995). How to Set Up and Maintain a World Wide Web Site: The Guide for Information Providers. Reading, MA: Addison-Wesley Publishing Co.

van Leeuwen, S. (1995). Columbia Web style guidelines, [On-line]. Available: http://www.columbia.edu/cu/help/style.html

Walsh, P., IHM (1996). Technology and the Vow of Poverty. Unpublished manuscript.

Comments to Sr. Kathleen Burns, IHM / webber@marywood.edu