Design considerations
Websites do not work like books. Most traffic comes via search engines, meaning that users can bypass your home page. That makes site design and navigation crucial. Key concepts to keep in mind when designing your site are simplicity, consistency, appropriateness and usability.
The good, the bad and the ugly
The following two examples illustrate some of the basic principles of good and bad site design and construction. Click on the good and bad links to view the sites. Please note that only one page of the topic can be seen in these examples.
Discussion of some of these variables follows. Additional information is provided on the further information page.
You will need Flash Player 8 or higher (and javascript turned on) to see this interactive. Download the latest version of Flash Player.
Understand the medium
Readers experience web pages in two ways: by reading pages online or by downloading information into text files and perhaps printing it out. Keep documents likely to be read online short. Carefully tune the graphics to the bandwidth available to your audience. Documents likely to be printed and read off-line should appear on one page, which should be narrow enough to print easily on standard-size paper.
Simplicity
Keep design elements to a minimum. Minimise clutter to make the document simple to use. Use only one or two fonts and a minimum of three heading sizes. Avoid piling up special effects (bold, italics, blinking and so on). The Web offers great possibilities for using colour, moving images and sound files, but keep things simple and elegant, and do not overcrowd the screen.
Beware of graphic embellishments
Use horizontal rules, graphic bullets, icons and other visual markers sparingly (if at all). The tools of graphic emphasis are powerful and should be used only in small doses if you want to avoid a garish, confusing clown's pants effect.
Keep the design elements and content appropriate to the situation. Determine the image or mood you want to convey through your website and stick with it. Use appropriate graphics to communicate rather than just decorate.
Consistency/predictability
Repeat major design elements (headings, text blocks, graphics, navigational controls, etc.) to match users' expectations. Create a template or format that provides a consistent pattern for the user. Establish a consistent background that is maintained throughout the different levels of your site.
Flexibility
Unlike a book, where the layout is literally fixed to the page, the Web is dynamic. Users can increase or decrease font sizes and turn images on or off. Users' screen resolutions can range from 600 x 800 to 1600 x 1024. When designing your site, remember that users can experience your site in a number of ways.
Maximise prime real estate
In books the top of the page is the most dominant location. This is even more the case on web pages because the top 100 millimetres of the page is all that is visible on the typical display screen. Use this space efficiently and effectively.
Usability
Provide a transparent means of navigation. Forecast what the user will find on the next page. Display important information prominently. Make your resource usable and informative. Dark or mottled backgrounds, for example, overwhelm text and make pages less printable.
File maintenance
Be organised and create an outline of your website. Create a main folder on your hard disk in which to store all the files related to the website. If your website is large, create sub-folders for each area. Consider creating a graphics folder within each sub-folder. This makes finding and changing files much easier.
Determine a file-naming system. Use all lowercase letters. Use short file names of eight or fewer letters/numbers to minimise errors in typing the address and to make it easier to transfer files.
File optimisation
Images, sound, video and PDF files can exist in a range of formats and resolutions. A two-minute video clip, for example, could be provided to users as an avi file 100Mb in size at one extreme or a 2Mb MPEG file at the other. Both offer similar screen resolution and image clarity.
What is the best screen resolution for video files? High resolution (800 x 600 pixels) is too much and will result in a large file download; 250 x 200 pixels may be perfectly adequate. The same considerations apply to moving images and sound files. There is a wealth of literature on the topic, but here are a few general guides.
Current standard formats for images are GIFs (Graphics Interchange Format) and JPEGs/JPGs (Joint Photographic Experts Group). GIFs offer the smallest file size, can be interlaced (meaning that they load progressively) and can be animated, but they are limited to 256 colours. For this reason they are best for diagrams or graphs but are not so good for photographs. JPEGs are designed for photographs. Though they can be interlaced, they lack many of the other special abilities of GIFs, such as animation and transparency.
When optimising images, remember that the higher the resolution of the image, the larger the file size. Accordingly, irrespective of format used, 72DPI (dots per inch) will be more than adequate for images to be used on the Web.
Back it up!
Finally, if you are building or maintaining a site yourself, remember to back it up frequently and to make a back-up copy before overwriting any file. That way, if things go wrong you can reinstall the original file.
Next page: Further information
