Writing Good HTML Code and Optimizing for Slow Links

The Web author who writes HyperText Markup Language (HTML) pages must realize that his or her work has the potential to be read by thousands (or tens or hundreds of thousands) of people. Many of these individuals are browsing for sheer enjoyment; others are browsing to find specific information. In either case, this rather large audience expects things to be visually appealing and for the information to be easily digested. Here are some hints on writing your pages to let your audience get the most out of it.

General Hints

To make things easier for yourself, consider some of these things:

If you'll be writing a lot of text from scratch, do it off-line in a word processor first and check it thoroughly. After you're satisfied with it, then start adding the HTML codes. An RTF to HTML converter or an HTML editor can help here.
Spell check the document. People will ultimately feel that if a document contains a lot of spelling errors it must mean that it was done carelessly or in haste. It only takes a minute to run it through a spell checker.
Look and content are both important. A document's overall look grabs the reader's attention; its content keeps them interested. Basic lessons or a good book in page layout and design can help achieve a "look" for your pages. Also, browsing other Web sites and noting features that you like in them can help as well.
Make the raw files as easy to read for yourself as possible. Since the browsers ignore blank lines and extra spaces, you can use this feature to your advantage to make everything easier to see and edit.

Tips for Writing Good Code

To write good HTML code means to write in consideration of your audience. They expect what they read to meet some minimum standard. They certainly aren't expecting a work of literary art from you, but they are expecting a certain amount of effort put into the writing. Here are a few tips:

A document that is too linear doesn't fully utilize the potential of hypermedia. On the other hand, having HyperText links in a document that has absolutely no structure will easily get people hopelessly lost and they will quickly become disinterested. The ideal is something in between. Write your pages in the same manner as you would write a report or paper. That is, start with an outline and work from there.
Keep individual pages of your document on the shorter side; it has been found that people don't like to scroll down past the first or second screenful of text. Unless you're explaining something or the page's contents is really fascinating, you may lose your reader if it's length is too long.
For that same reason above, if documents are more than a screenful or two, don't put the important stuff at the bottom.
Avoid linking to the word "here," as in "Click here to view more information." Instead, make the clickable words more descriptive, such as, "Read the policies and procedures for more information."
Limit the amount of graphics on each page. Most users don't have fast connections (yet).
If you put in a graphic that looks like a button that should be pressed, make sure it's clickable. Users get irked when they click on something that looks like a button but doesn't do anything.
Use the "BLINK" tag judiciously. Although it can effectively catch the reader's eye to point out important information, overuse of this only creates eyestrain and headaches.
If you don't have a page ready, don't put a link to it. People get frustrated when a link doesn't go anywhere or if it just says, "Sorry, nothing here yet," or "Under Construction."
Don't put in links to everything imaginable. There is such a thing as overdoing it.
Use the ALT tag. For those who don't have a graphical browser, the ALT tag can help the user to determine what image you intended to put in the document. If left out, the user would see [IMAGE] where the actual image should be but he/she isn't able to determine whether it is worth downloading to see it. Putting something descriptive there, like ALT="Picture of Diamond Head" helps the user decide. By including ALT="", nothing would appear; this is good for images that are there only for aesthetics.
Example:
<img src="diamond.head.gif" alt="Picture of Diamond Head"> or
<img src="nothing.important.gif" alt="">

Optimizing for Slow Links

Not everyone in this world has a high-speed data connection in their home or office. The majority are dialing in with their old 14.4K or 9600 bps (or slower!) modems. Although owners of modems of these speeds usually find it suitable for sending many pages of text over the phone line, the large graphical images and the associated time spent downloading them often tax the user's patience. Here's how you can do your part to help:

Use the HEIGHT and WIDTH attributes when using inline images. In doing so, Netscape will display a page faster by loading all the text and putting placeholders for the images first then going back and loading the images. The reader will then be able to begin reading the text while the images continue to load. Example:
<img src="myimage.gif" alt="" height=75 width=150>
Use interlaced GIF images. This technique lets a user see a quick low-resolution display which eventually gets sharper until it reaches the final image. The advantage to this is a user can stop a download in progress as he/she sees enough of the image to make out what it is, saving time in having to load the entire image.
A smaller on-screen picture will take up less network bandwidth. Also, if you have a graphics package that can save the images with less colors, that can help to make the file size smaller.

Other Sources of Information

Here are some URLs for you to check out:

Composing Good HTMLhttp://www.ology.org/tilt/cgh/

Developing Good WWW Presentations (Especially for Low-Speed Connections)http://satftp.soest.hawaii.edu/space/hawaii/low.speed.notes.html