Sharp Blue: What makes a good webpage?

In a recent entry in her Livejournal, Lyndsey Pickup said:

While I’m busy trying to tap LJ’s question-answering capability, what makes a good webpage? In particular, I’m thinking of the kind of page that has unique information that people will come for anyway, but I want it to be presented well, and be easily navigable. I’ve been trying to write a guide for fellow research group members to add pages to the VGG site, and while insisting that everything validates on http://validator.w3.org/ is easy, I’m having a hard time explaining why some things look good to me and some don’t.

As long-term readers will know, I’ve been trying to master shih and part of this is striving to improve my web pages. Here are some of my rules of thumb I’ve settled on:

Layout

• Clean designs are good. Decide on the key element (in a weblog, the text and figures of the articles), design outwards from this element and include as little that is extraneous as possible.
• Have a few strong invisible lines of alignment. Justify text fully.
• Use as few different fonts as you can. The number of possible relationships between fonts and layout roles grows factorially in the number of fonts. One for titles and one for text is more than enough.
• Design whitespace carefully. The human visual system uses spacing to group items of information. Make it easy for the reader’s chunking to be right.
• Pick colours that don’t clash or compete for attention.
• Don’t put background images behind large blocks of text because this makes the text much harder to read.
• Don’t let mechanisms protrude into the foreground. For example, have links that say “My homepage is Adrift on the Ocean of Truth” not “for my homepage, click here.” The layout should make sense even if it weren’t a webpage.
• Don’t waste readers’ expensive screen space. If you use multiple column layouts, make sure that if the reader scrolls down to the bottom it doesn’t leave huge swathes of the window empty because some of the columns have run out of content.

Information Architecture

• Make the structure of the site clear. Users should never get lost.
• Hyperlink profusely from text. The value of your site resides almost as much in the value of its links to context as in its text.
• Make sure people aren’t surprised by the destination of links by choosing the descriptive text carefully.
• Think about URL design.
• Choose page titles carefully too - pages will often be indexed on them.
• Clearly indicate the author and dates of writing and modification. Knowing the age of the information is often important when judging the content.
• Make rights and licenses clear. Use the Creative Commons licenses if appropriate.
• Embed or link to metadata, perhaps using the Dublin Core schema encoded as RDF.
• Put plenty of anchors in long documents to make it easy for people to link to a specific part.

Mechanisms

• Respect the semantics of tags (as I am not doing in this definition list…), not just what they appear to do to the layout.
• Unless images are central to the meaning of the page, they belong as backgrounds defined in the stylesheet.
• If possible, use text and filters instead of images. Putting text in images makes it hard for machines to get at its meaning.
• Have a stylesheet for print too, if the screen one prints badly.
• Don’t hide content away inside technologies like Flash so that it’s inaccessible to incoming links and search engines. You certainly shouldn’t use PDFs unless you have a very good reason like distributing scientific papers.

Many of my pages don’t follow these guidelines - older ones out of ignorance, newer ones sometimes for specific effects or out of laziness (the layout of the comments sections of Sharp Blue are a disgrace) - but they’ve been generally useful.

Note: I am going to break one of my rules and keep this article up to date with new ideas as I think them up.