Producing web pages
* HTML CSS DHTML XHTML A to Z of tags        Accessibility          Design

Getting the page design right

Colour, fonts, graphics, animation and sound, can pep up your web pages no end. For example, choosing an appropriate background colour can set the stage, graphics can add emphasis, well-chosen fonts can indicate a change of voice, appropriate white space can help readers understand the information and so on.

On the other hand, these goodies can drive people up the wall so don't stuff the pages with fun stuff for the sake of it. Does what you are doing add a benefit to the page? If not, leave it off.

Some hints gleaned from a variety of sources:

  • Don't use technology for the sake of it. You might think something is funny or clever but it will almost certainly annoy other people. Some people have even more under-powered machines than we do
  • Use animation to draw attention to something (perhaps new information) or enforce a message. Don't include many animations that move all the time; they make it difficult to concentrate on the rest of the page. Moving text is also harder to read than static text. Lots of animations on a page confuse the structure and take forever to download
  • Steady with sound. Not everyone loves Oasis. If you do add sound, it should enforce a point you want to make. Never play sounds in an endless loop
  • The usual advice on fonts. Not too many and try to use what you think the user might have (probably anything Microsoft supplies). Specify several alternatives and make sure your site looks OK which ever one the browser displays
  • Lots of users print out pages and then read them. It may defeat the object of on-line information but "paper good, computer bad". Make sure that your page is readable if someone prints it; this is mainly checking that background and foreground colours don't make the printed version impossible to read

And a word or two about text. It may not be as much fun writing boring old text as playing with graphics but text is still important. So:

  • Make it easy to find the important information. People scan text looking for something interesting. If they don't find it, they skip off to another page
  • Organise text chunks of a paragraph or two and arrange the bits in a logical order. For example, the steps to carry out a task
  • Lay out the text so that it is easy to tell what the information is about. Highlight the most important points
  • Explain the benefits near the top so that the user sees them. Tell users what they will learn, what they can do, where they can go (in the nicest possible way) and who to contact. Remember lots of screens are only 640x480; it is not a lot of space. Don't assume anyone will scroll
  • Keep it short, probably half the length of printed information. Pages at the top should be shorter. As users go further into a topic, they are more prepared for topics to be longer. Figures I've seen: 100 words for a navigation page, 200 for an overview, 400 to 500 for a topic