Design guidelines

Paola Kathuria, updated November 2005

Introduction

This document lists guidelines to consider when designing and developing a web site for browser compatibility, accessibility and easy of use.

If you would like explanations or examples to any of these guidelines, please contact us and they will be added to this resource.

Browser compatibility

Browser compatibility is defined here as an attribute of a site that is equally readable and navigable by any browser type/version, configuration or platform set-up.

Browser type

For example, Netscape, Mozilla, Opera, Internet Explorer (IE), WebTV or Lynx.

Browser version

For example, IE 5.5 or IE 6.

Plug-ins

For example, Flash.

Browser configuration

Such as whether cookies and Java are enabled.

Platform set-up

Includes access speed, screen resolution, colour depth and browser width.

Accessibility

Accessibility considerations reflect differences in a site's visitors and not their browsers.

Graphics

Main site usage (e.g., getting from page to page, knowing which page you're on or reading text) shouldn't depend on the display of images.

Text in graphics

To allow text to be translated (by online translation services), resized (by the visitor within their browser) and indexed (by visiting search engine spiders), don't put any content or functional text (such as button labels) in graphics. Use graphical buttons but implement the labels in HTML

Colour

Don't rely on colour alone to convey information about the site state. Colour is recognised first (over icons and text) and is very useful. Supplement colour-coding with text or formatting such as size and shape.

Styles

Use existing HTML elements whenever possible rather than making a new class (e.g., for headings and lists). For example, implement links using HREF rather than with JavaScript.

Font size

Don't prevent visitors from resizing HTML text in their browser because of the font unit you use (e.g., px).

Hierarchical site structures

In writing these guidelines, it is assumed that the site content is arranged in a hierarchical structure: the home page is referred to as level 1; content sections linked from the home page are referred to as level 2; pages linked from level 2 pages are referred to level 3, and so on.

Navigation

1. Have 2-6 distinct main content sections of the web site.
2. A site contents page should always available; it will lists links, by section, to pages at least up to and including level 4.
3. Every inner (non home page) page should be assigned to a section and have a parent page. These will determine what visual cues need to be included in a page so that the visitor knows where they are in the site (for example, which section link is shown selected).
4. All level 2 pages will be available as (graphical or visually-different) links from every web page in a consistent style (for example, as links across the top of pages).
5. The name of the current section should be visible on all inner pages (e.g. by way of an inherited heading).
6. If present, links to level 3 pages for a specific section are made available as text links below or to the immediate right of the level 2 button.
7. There should at least be "on" and "off" versions of each section link. This is easier to achieve if section links are implemented with a combined button graphic and text label. The "selected" ("on") version of a button is used to show the current page (a level 2 page) or the current section (for level 3+ pages).
8. More button versions can be used to better indicate state:
   1. unselected+clickable (when on a different section or the home page)
   2. unselected+clickable+mouseover
   3. selected+unclickable (when you're on the section entry page)
   4. selected+clickable (when you're further down in the section)
   5. selected+clickable+mouseover
9. Each level 2+ page should include the site branding (for example, the company logo with a page- or section-specific tag text line) at the top of the page which should link to the home page.
10. Pull-down lists should not be used anywhere for navigating to the main sections of the site, nor should a list of plain text links (that is, no differentiating features) be used for the level 2 links.
11. Navigation should not depend on JavaScript, Java, or any other client technologies. The only exception to this is if you completely control the deployment environment, for instance an Intranet for a company, and can ensure that users will have particular client software at all times.
12. Place vertical local navigation on the right-hand side of pages. The left-hand edge of a browser is a reliable constant and is therefore the best place to start content; content is more important than site navigation and content should be the last thing that disappears when the browser width is reduced and, finally, site navigation can be distracting when on the left. It's always recognisable because of its form and so visitors will still be able to recognise it if it's on the right.

Content

1. Logo: every page should start with the site name, usually in the form of a logo, to indicate the purpose of the site. If the logo alone does not convey the site purpose, include a tag line (e.g., "Aroma - the makers of good coffee").
2. Headings: inner pages should include an unambiguous but succinct page heading - given the international audience, the heading should not include any colloquialisms or puns.
3. Titles: each page should have a meaningful TITLE which includes the company name and page heading in some form, so that it works in a search engine listing, as a bookmark and as the page title.
4. Link text: never use "click here" for link text; instead, pick relevant nouns or verb words or phrases for link text. Links are usually very prominent on the page and can be skimmed without reading the surrounding content. Visitors will be able to find useful links if they're named in terms of what they do or where they go to rather than that they are a link, which is obvious by their styling. In addition, some screen-readers list links at the top of pages and so it makes sense to make links distinct through the link text.
5. Skimming: make use of the page heading, short lists, link text, and bold text to summarise a page for visitors who are skimming first.
6. Long pages: long pages (pages with over two screens of copy on a low-resolution monitor), should include a link to the top of the page from the bottom of the page or should repeat the site navigation.
7. Footer: pages should end with a consistent footer, such as a copyright notice so that visitors know that a page has finished downloaded completely.
8. META: all pages should include relevant and appropriate META keywords. Ideally, these will be tailored to each page. META descriptions should only be included if different descriptions can be provided for each page.

Design

1. Visual cues: pick a distinct colour and shape (icon) for each section and apply these to buttons and headings, as well as other page elements such as background cell shading, list bullets, as appropriate - this will help answer "where am I?" and "I want to get back to ...".
2. Buttons: buttons should be accompanied by an HTML text label rather than be incorporated into the graphic. This will allow the text to be translated and resized. Use the button to implement size (to show prominence) as well as colour and shape (icon) according to the section.
3. Buttons: buttons should not be easily confused with banner ads, which now have a distinctive shape and style, notably of a composite photograph or illustration overlaid by type.
4. Pertinent information: the company logo, page heading, and first paragraph of body text should be visible in the first screenful on a 800x600 monitor (the available drawing space is smaller due to the browser controls). If you're designing for a larger screen resolutions, note that visitors with a resolution of 1024x768 or higher will likely be working in a multi-eindow environment: the browser window will be in a portrait dimension around 600 pixels wide. Designing for exactly 800 pixels wide will force visitors with high-resolution monitors to either scroll horizontally or resize their browser, both of which are unacceptable. Don't design web pages to complete fill 800x600 pixels (or higher resolutions).
5. Page background: backgrounds to copy should be a solid colour, so that it does not interfere with the legibility of the text. When testing patterned backgrounds, the priority is that the text is comfortable to read and not whether the background pattern is visible.
6. Link colours: the unvisited text link colour should be more prominent than the visited text link colour. The visited text link colour should be distinguishable from normal non-linked text.
7. Contrast: if you want light text on a dark background, set the background, foreground and any link colours in the same way (e.g., with CSS) so that if CSS is not enabled, the text will still be legible in the default colours.
8. Printing: the design should allow for the printing of pages - that is, no information required to understand the page should be lost when the page is printed on a black and white printer. The default setting of printing (onto white paper) of text as it is coloured on the page also needs to be considered (that is, page text shouldn't be white). Use print style sheets to hide site navigation from print-outs, and to make text dark, in a serif typeface and defined by point sizes.
9. Animation: No graphic should animate continuously. If animation is included, only include in "mouseover" versions of buttons or to loop once for images always visible.
10. Width: the combined width for a horizontal row of buttons should be no more than 550 pixels (to allow for WebTV users) - achieve this by allowing buttons to wrap if the browser is resized.
11. Colour: choose from the "browser-safe" 216 palette for solid colour in graphics, when legibility would be hindered by dithering. Colours set in HTML or CSS don't have to be browser-safe except when setting a background to match an image background which is. Don't apply the 216-palette in its entirety to every image (see our separate resource on colour in web pages).
12. Download: design one set of button graphics for all pages rather than a different set for each section to minimise download times and the amount of stuff you'll have to change later if the sections change.
13. Optimise: optimise GIFs for download by reducing the number of colours in the palette (e.g., 2, 16, 32,64, 128, 256). Optimise JPGs by compressing. In both cases, choose the smallest file size with the most acceptable image quality.
14. Image maps: don't use image maps to implement buttons but instead have one image button per destination.
15. Transparency: buttons to go on coloured (non-white or black) backgrounds should be made transparent because of a known problem with 15- and 16-bit displays.
16. Interlacing: don't mix interlacing and transparency because of an old Netscape bug which affects how the edges are displayed.
17. Interlacing: don't interlace GIFs which include a textual element, because text is rarely readable when displayed interlaced - people will be able to start reading non-interlaced text earlier.
18. Expansion: the design should allow for the addition of 1-2 high and low level 2 buttons within the year (in terms of colours and space on the page).

Development

1. Liquid HTML: if tables are used for page layout, the cell containing the main body text should not be placed in a fixed-width table as this prevents the text wrapping if the browser is resized smaller. Instead put no or percentage widths on tables and pixel or percentage widths on cells.
2. Graphics: include meaningful ALT text for all images (and that doesn't mean "Company logo" for the logo graphic but "Acme Ltd"). Don't include WIDTH and HEIGHT tags for images that have ALT text with more than a couple of words - it'll mean that all of the ALT text will be visible when images are disabled (and not contrained by the image dimensions). The site should be usable when images are turned off. For decorative images with no meaningful description, use an empty "" ALT tag.
3. Browser compatibility: older browsers shouldn't be excluded from the site content or functionality.
4. Flash/Java: if using any non-standard languages or plug-ins, they should not be used for navigation or for the main content. That is, the use of the site should not depend on them.
5. Frames: it is preferred that frames are not used. If using frames, each web page should have its own URL (that is, be bookmarkable), with print versions available and with JavaScript to reframe individual frame pages which are accessed via search engines.
6. HTML: use standard HTML. Don't make any navigation or the ability to read any content dependent on any HTML extension (that is, non-standard HTML) or on CSS. Include a DOCTYPE tag so that the HTML can be validated.