Some Tips about Writing for the Web

This is apropos of nothing at all and represents my personal views about all sorts of random topics, mostly loosely related to web publishing and HTML. Most of these tips are good design principles for any sort of publishing.

  1. Don't use blink. You might think that it will give some part of your document added emphasis, but some browsers now will allow users to avoid seeing the blinking stuff, so it'll not work. It's sufficiently annoying that it'll usually have the opposite effect anyway.

  2. If you use a background, don't make it too strong. Pick colors that are not full-white, not full-black, and, if your audience is expected to read something, some gray. The reason for the latter can be seen by staring at a pink screen for five minutes, then looking at something else. Your color perception will be screwed up. A complicated background makes text quite hard to read. You are probably not a good judge of this; you already know what the page says. If you are not sure, make it dimmer. All in all, the default Netscape background (75% gray) is one of the easiest over which to read text.

  3. Don't tinker with colors just for the heck of it. The standard choices make detecting links and such easy for users. You ought to have a reason to break that.

  4. Some users are colorblind. A red background and green letters looks like an empty page to them. A trick to ensure that colorblind people can read your page is to turn the monitor to black and white. If you can still read it, then so can colorblind people.

  5. Don't use totally saturated colors. That means that bright colors, such as full red, look awful, especially in combination with other ones, unless put together very carefully under just the right circumstances. Browns and pastels and tints, tones, and shades look better than highly-saturated colors and don't smack the viewer in the face. Note that this is somewhat culture-dependent; some cultures prefer gaudy color schemes.

  6. Don't change fonts too often. This includes changing varieties and sizes within fonts.

  7. Simple text fonts have been developed for the purpose of making text easy to read. It's painful to read more than a few lines in boldface, so don't use bold unless you have a good reason. This applies to header fonts as well.

  8. Changing the color of your text ought to serve some valuable purpose. Text of all different colors looks awful.

  9. Don't verb nouns. That sounds silly, but we see ``authoring'' and other such horrors all the time. Use words that already exist unless absolutely necessary.

  10. Be sure to leave a way to contact you on most of your pages. After all, if someone really likes your stuff, don't you want them to be able to tell you? You might well include a link to your home page, too. If someone llkes something they found via a link, they might want to see more.

  11. Generally include titles. Web searchers will return titles of documents, and ``No Title'' is not very illuminating.

  12. Use physical styles. I have no idea why the Netscape folks think that logical styles are better. What is the difference? Logical styles allow someone else to change the appearance of your document without your knowing it. How can they possibly do a better job than you can? If something new becomes available, you can adapt your documents to use the new capability.

  13. Jargon is acceptable only in some contexts. Realize that many of your audience will not have the specialized knowledge to understand it, so material for general consumption ought to avoid jargon. That ultra-rad skateboard jump's technical description, however, ought to be in jargon, because no one who won't understand the jargon will understand (or care) what you are talking about anyway.

  14. Date items. If I like your page, I can go right to the bottom (or better, top) and see if you've added anything since the last time I checked it.

  15. Note that not all browsers support the same command set as does Netscape 2.0.3.73.472.beta.42. If something is very important, be careful to supply a version without all the features, or avoid them if you don't really need them. If you are not worried about ensuring that some users will lose out, follow the Netscape version of HTML, preferably an older one, because most Web users use Netscape. Eventually, all non-text-only browsers are supposed to become HTML 3.2 compliant, but by then, 3.2 will probably be obsolete.

  16. Test your pages. Be particularly careful about the quotes in references; browsers are not as forgiving as they used to be about this error.

  17. When using the `a' tag, don't place a space between the last part of the material and the closing tag. The space will be underlined as part of the link. Contrast: Newlines are treated as spaces in this respect.

  18. Remember that you are creating a public document. If you say something incendiary about someone else, assume that it will get back to them. Better still, edit out such material. Something nice, on the other hand...

  19. Avoid constructions like ``click here.'' Attach the link to the noun which says what the link is.

  20. Try to make your HTML readable. I find this particularly difficult because I usually use programs to generate HTML rather than type it in directly. Someday, perhaps, there'll be a reasonable ``table'' mechanism; then that might even be possible.

  21. Many people print out web pages for reading later. When designing your pages, consider how it will look printed on white paper. Consider testing printed versions.

  22. I think header size 1 is too large for nearly any use.

  23. About home pages: believe it or not, most people don't really care about you; they don't care if you are interested in ladies' sumo wrestling (sorry, when I wrote this, there was no such thing!), Sumerian lithography, and Pictish hieroglyphs. If you have something to contribute, to say or show, however, on one of those topics, then an interested reader will be happy to find your page. Try to contribute, not just to be there.

  24. Include actual pixel dimensions for images; that makes page loading quicker for many users, and allows the browser to complete the page even if there is a delay in or failure in loading the image.

  25. Don't let browsers resize images. They do not do an adequate job at it. As a result, don't use <img width=100%...> because that will force a resize.

  26. I cannot see why anyone would care how many folks have visited your page. Counters are great for you, the content provider, since that information might help you produce more material that is interesting to more readers, but the readers really don't care...unless you are looking to find advertisers.

  27. Use the newest coolest Web trick if you have a reason, but don't otherwise. The medium is not the message. Believe it or not, by the time the vast majority of readers get around to your page, they'll've seen it already somewhere else. ...probably hundreds of times already.

  28. If an image is used as a hyperlink, a common way for browsers to indicate that is by outlining the image in a (usually blue) box. If you are using images embedded in text, as bullets, or as other ancillary devices, generally this outlining looks awful. To turn that off, specify <img border = 0 ...>.

  29. Whether or not you want it, some of your readers will be children or from countries with differing moral standards that yours. Try hard to avoid sexual reference, profanity, or other devices inappropriate for such readers. If you must use them, please indicate that such will follow.

  30. People like interaction.

  31. Some browsers (particularly some versions of Netscape) mistypeset italic headers. Avoid them.

  32. Some constructions look awful if broken across lines. Since you cannot tell how wide someone's browser screen will be, Netscape's extension <nobr> is a good idea for such items.

  33. To typeset the "less than" character, '<', use '&lt;'.

  34. My version of Netscape has a funny bug. It won't vertically align images at the beginning of a line of text correctly. I work around this by putting a space (&nbsp;) before the image. Then "align = absbottom" for example, will work right.

  35. Use speech affectations only when you expressly intend to. Saying "would be" instead of "is" or "at that time" instead of "then" looks very goofy in print. More importantly, these constructions can confuse the reader.

  36. Omit anything needless. (With apologies to Strunk and White.)

  37. Don't use the applet that puts stuff in the lower left hand corner of Netscape's window. It replaces information that is useful to users.

  38. Incorporating images into your pages can make the pages enormously more attractive and can add a great deal of information to them. Don't, however, do it gratuitously. Not everyone has a direct T3 link, so loading images takes time. If an image really isn't all that helpful, skip it.

Jeff Goldsmith, jeff@tintin.jpl.nasa.gov, June 26, 1997