Teach Yourself Web Publishing with HTML 4 in 21 Days

Chapter 22: Writing and Designing Web Pages: Dos and Don'ts




This short chapter discusses more of the publishing aspect of web pages, giving the reader useful guidelines to creating good documents. The objectives important to this chapter are:

  • deciding whether to use extensions to HTML
  • formatting your pages for readability
  • when to use links
  • effective use of images

The first discussion, about using extensions, concerns whether to stay with a standard, such as HTML 2.0, 3.2, 4.0, or to use newer tags found only in recently developed versions of HTML. As versions come and go, the issues are the same: do we write for a standard that most everyone's browser can read, or do we go for the newest bells and whistles that only the browsers on the cutting edge can use? The question is not rhetorical. It is best answered by considering your reader, and what capabilities your reader's browser will have. If you know for a fact that your document is going on an intranet in which the most recent browser is Netscape 2.0, then you had better not use HTML 3.2 extensions, much less 4.0 extensions. Also, this would prevent you from using any Internet Explorer specific extensions. If you are writing for the net in general, hoping to get millions of hits, your decision should be different.

Several guidelines that our author gives for writing for the web are related to the classic work, The Elements of Style, by William Strunk and E. B. White. Although this sounds like a boring reference, it is not, and the student should read it, enjoy it, and learn from it.

One of Professor William Strunk's memorable admonitions is "Omit needless words." Your author and I agree with him, as will your reader. One thing I have learned over the years is that people will ignore text on a computer screen. The more text on a screen (or page) the sooner they are bored and stop reading it. Make your pages short and be generous with white-space.

White-space, by the way is not necessarily white. It is a publishing term for space on the page that does not contain text. A rule of thumb is to make sure at least half of your page is white-space.

Page organization is important to a reader hoping to find some nugget of gold in your site. It is also important to an author trying to edit the thing. Be kind to yourself and your reader: use the tools. Tools that help someone scan for information include:

  • Headings - like an outline, they show subject areas
  • Lists - they call attention to important ideas (why do you think I keep using them?)
  • Link Menus - they organize like lists, and form links to other sites or pages
  • Get to the point - web publishing is not formal, scholarly publishing. It is more like entertainment. Tell your reader your truth right away. As L. Sprague Decamp advised aspiring writers (in another guide), "Shoot the sheriff on the first page." Tell the story, and move on.

Since other people may form links to your pages, it is good, where possible, to make your pages modular, self-explanatory units. In an organized site, all pages serve a purpose and can be viewed on their own.

Emphasis is a good thing, but it can lose its meaning if overused. See the example on page 711 for a page that has too much emphasis. In that many ideas need emphasis, break up the paragraph. Or do as our learned author did, and just calm down. With emphasis, less is more.

Ms. Lemay suggests that you avoid browser specific instructions on pages. You don't know what kind of equipment your user has, or what browser they are running. That is the beauty of the web, after all, that it doesn't matter. So don't put instructions on the page that make no sense in some browsers, without at least taking the trouble to add the "This site best viewed with..." statement to your home page.

It is also important to check your spelling and grammar. As you may have noted in these hastily typed notes, spelling errors are distracting. When I find them, I go back and correct them, however, that does nothing for the experience of the people who already read my mistakes. If you are using MS-Word, or another powerful editor, check the spelling with the software. Then ask a human to read your work, since spelling software usually misses certain spelling errors, and grammar editors can be terrible.

Design concepts are not just artistic, they are communication and sales tools. If you have been in enough staff meetings to notice, you will know that the person who is right is not necessarily the person who gets their way. It is more often the person who make the best sales pitch. Just so with web pages: if you don't get their attention and say it in a pretty way, no one will read it or buy the message (or product).

Use tags the way they are meant to be used. Headings are meant to be heading markers, not emphasis markers. See the example on page 714 for a bad use of a heading and a good use of an image.

Use visual groupings to give clarity to your presentation. The example on page 715 shows breaking the ideas into related topics, using headings appropriately, and using a horizontal rule to further break the page into digestible pieces.

Creating usable link menus can take a little practice. As shown on page 717, too little description on the menu leaves the reader wondering where the menu goes, if the reader is even interested at all. Too much description, and the reader may not bother to plow through the menu itself, much less click on it. A good balance allows the reader to decide if there is a reason to click.

It is possible to make your text link to another page, but the practice is discouraged, since it inhibits the reader's natural reading style by placing unnatural emphasis on the text itself. This problem and the somewhat unattractive "click here" phrase can both be avoided by use of link menus.

Some people use too many links once they realize that they can link their page to any other page on the net. The first purpose of a page is communication. If there is no reason to bring the reader to the page you are thinking about linking to, then what message are you communicating?

Images are a bit harder to quantify. Laura thinks the example on page 724 is a bit cluttered with images, but some people will like it. We have a fast channel to the web in class, and the transmission time of those images will be negligible. This really gets into the area of a personal statement, but her message seems to be that less is more. I agree, in principle.

Regarding transmission time, we should again remember to make images as small as possible. The list on page 725 is worth noting. Remember that your transmission speed for a page will be about 1 Kilobyte per second for each 10 Kbps in line speed. The amount of data transmitted for a page will be the total of the page itself and all inline images (and other inline files). Don't expect your reader to put up with a download of over 30 seconds without adequate warning.

Color is not just pretty, it is also a distraction and a hindrance when it keeps the reader from getting the message. Don't fall into the Bobby Vinton Syndrome ("Blue on blue, heartache on heartache...") by choosing color combinations that can't be read or enjoyed.

Having a link on each page to the home page of your site is a good suggestion. I don't follow it myself because of the design of my site. (Exceptions to the rule.)

Splitting your presentation across several pages is easier for most readers to digest. However, it requires that you plan the site and organize, or the reader may never see some pages you'd like to have seen. See the diagram on page 731.

And for items that the reader will desperately want a copy of, try putting up FTP links to copies of files that the reader can download and print, or view off-line. An example of this is shown on page 733.