How to create good WWW sites

Written by Paul Bourke
March 1998


Introduction

The following outlines my personal views on good WWW page principles. Most of the guidelines follow directly from the principle that pages should be designed to work well on whatever hardware/software the user is running. HTML was after all designed specifically so as not to make assumptions of the end users hardware or software, a page designed in HTML should be viewable anywhere!

Frames Far too often frames are used "because they are there" rather than because they are the best presentation solution. There are a number of problems with frames, the two main ones are the additional screen realestate they consume and their weakness when it comes to bookmarking. If you decide frames are the best way to organise your site then make sure you provide a frameless version as supported by the HTML frame tags.
 
Graphic load Don't overload your pages with graphics which cause it to download slowly. "Front pages" in particular which you expect users to view frequently should be as lean as possible. Given that modems are generally the slowest part of the connection and if you use the rule of thumb that 5 seconds is a reasonable load time, this gives you a total of only about 30K (assuming a 56K modem).
Don't fall into the trap of viewing/testing your pages from the hard disk of the machine you are working on. Always test your pages (or have them shown to you) using modems as this is how most of your users will view them.
 
Java Script While some parts of a site might require Java for a functional purpose don't make it manditory if it is only being used for asthetic purposes. As of the time of writing it is still very common for users to turn Java off in their browsers.
 
Window size Far too many sites design their pages for particular screen sizes, a width of 800 pixels is often assumed on the basis that most people will have that size monitor. This is false reasoning, why should people set their browser to occupy the whole screen, the browser is just another application that shares screen realestate with other applications. A WWW page should work well with any browser window width.
 
Banner Advertising Don't! Well, at least don't if you developing a business site. Why should you advertise other peoples WWW sites or products when you're trying to promote your own.
 
Consistency Try to make your whole site consistent, use the same background for related areas, the same colour scheme, table arrangement etc. A particularly nice way to achieve this is with server side includes offered by the better WWW servers.
 
Plugins Requiring plugins is the fastest way to lose viewers. If you do require a plugin to deliver some content then don't use it on the "front page" and try to offer some alternative for those who are unable or unwilling to acquire that particular plugin. Don't listen to advise that suggests that some plugins are "standard". Plugins are very rarely available for all the hardware platforms being used by your potential views, eg: MSWindows, Macintosh, and the myriad of UNIX platforms.
 
Browser Specifics Keep away from those HTML tags that are browser specific unless you plan to automatically detect which browser the user has and redirect to an appropriate page.
Related to this is the testing of your site on as many browsers as possible including previous versions of popular browsers as well as browsers with a minority market share. Making your site as compatable as possible is not only user friendly but often gives you insights on the most compatable layout methods.
 
Text Colours Try to resist the temptation of using coloured text on coloured backgrounds. Not only is this likely to be hard to read unless you have a good grounding in colour theory but the results are generally unpredictable on systems with variable gamma distributions.
Similarly, avoid changing the colour of links, this is a standard recognised by people browsing the web.
 
Site Map Site maps are very valuable tools enabling users to jump to key points of your site without backtracking as well as giving an overall view of where material is located.
 
Image size specification Use the "width' and "height" options with the "img" tag. It helps browsers format the page quickly otherwise the image has to be downloaded before the page can be laid out. This is particularly important for images within table cells and enables pages to format correctly even if the user has images turned off.
 
Font typefaces Don't use font typeface tags, there is no way you should assume users have the same fonts you have on your system. This is one of the greatest crimes HTML graphical user interfaces and converters make. MSWindows users fail to realise for example that most other computer brands don't have the Arial typeface.
 
Correct links It should go without saying the links should always work, surprisingly many don't. Linking to sites outside your control is the normal cause, if the offsite link disappears or changes the bad link reflects badly on you pages. Regarding linking to page within your site you should regularly check the error logs generated by all WWW servers to identify accidental errors or URL spelling mistakes.