INST > contents > html > web page design guide

Guide to html web page design

These guidelines are explained below

Make things easy to find
Make the important bits quick to show
Help people find their way around your pages
Help people follow their interest easily
How big should one page be?
Make pages easy to update
Can people copy your pages?
Be consistent

Make things easy to find [up to guideline list]
A good part of the web is finding things. So provide a number of pages just to help people find their way about, and make sure that they are easy to use. We will call this kind of page a "navigation page". A web page index or table of contents would be a natural navigation page.
These navigation pages need to give the right amount of information for choosing the next link to follow. Each link should make it clear where it is going. If you don't make it clear, your readers will be puzzled or go a way they didn't mean to. If you put in too much information, your readers will have more difficulty finding the link they want, because it will be swamped.
When a page does present something (not just navigation), make it clear near the beginning of the page what the page has in it. Good titles, and an index or summary at the top for long pages, can be helpful.
Make the important bits quick to show [up to guideline list]
Don't put big graphics in navigation pages, and in pages with information leave big graphics at least until after the bits which say what is in the page. When you do use images, explore ways of saving bytes to make downloading faster. Jacob Nielsen's March 1997 Alertbox "The Need for Speed" takes the argument further and deeper.
Help people find their way around your pages [up to guideline list]
You just don't know which page people will start on and where people will end up in your pages - that's the nature of the web and of search engines. So you should provide a consistent, straightforward means of finding your way around from any page, not just the main index or navigation pages. Many people have followed the example of Jakob Nielsen's Alertbox either directly (look at the navigation bar near the top of any page deep down in Yahoo; or many news sites, or this site) or indirectly (as my FWCC pages). In each case, the pages are organised in a hierarchy, and each page has, at the top, links to each level above it. This both reminds people where they are and lets them get to related pages quickly. Something like this is needed for any large site.
Help people follow their interest easily [up to guideline list]
Sometimes you know that one page will lead on to another. Make the links easy to find and follow. Think also of ways people may want to go which you might not have thought of to begin with. If you can find any good links to link to relevant words anywhere in your pages, put them in! It makes browsing your pages more interesting, and gives the reader more of a sense of choice.
How big should one page be? [up to guideline list]
There is no way of telling exactly how much will fit on someone's screen. So how much you put on a page must depend on the logical arrangement of your information. Try to find out (or guess) how much a reader would like to see together, and don't put more. For navigation pages, try to fit a page on one screen if possible, to save mouse-clicks scrolling down. But it's more important to keep together everything that belongs together.
Frames: don't even consider using frames until you have at least read and understood Jakob Nielsen's article "Why Frames Suck (Most of the Time)"
Make pages easy to update [up to guideline list]
Your readers are likely to spot more mistakes than you. So, put your email address (perhaps as "mailto:" links) at the bottom of the pages you maintain. It's a way of "signing" them and taking responsibility. It also helps readers to see when the page was last revised. Put the date as well.
Can people copy your pages? [up to guideline list]
Copyright on the web is very similar to copyright on paper. You do not have the right to make use of other people's material or content just because they have put it on the Web. However, as copying is extremely easy, policing your own copyright can be practically impossible. There are many honest, public-spirited people on the Internet, and for them at least you can make it clear what you intend, or what you would like to do about copyright. In particular, if you want people to make use of your pages freely, make this clear, otherwise people may assume you retain copyright. Consider whether you need to think about copyright more, and if you do, consult an expert for the latest opinion.
Be consistent [up to guideline list]
Try to do things the same way in all the pages that belong together. If you do things in different ways in different places, your reader may get confused, and will certainly take longer to get somewhere.

Summary: A usable web page is one which gives as soon as possible the information needed to know whether to read on, go "Back" or go onwards to a more relevant linked page.

My own pages try to show the ideas I suggest. Where they fail, please feel free to tell me, and say whether it is the page or the idea at fault.

For a good, comprehensive selection of web design guidelines, see Keith Instone's site (based in the USA).
The one site above others that I would rate "must see" has to be Jakob Nielsen's Alertbox, and in particular, from October 1999, 10 Good Deeds in Web Design.
Another concise guide from 1998 is at which echoes some of the points above.

page maintained by and © Simon Grant, edition 2001-07-20