Category

Objective

Method

Waiting

Pages should appear quickly even on a dial-up connection.

Graphics are optimised for performance by controlling:

• Size of GIF palettes
• JPEG compression ratios
• Image sizes

The page should be usable within 8.5 seconds on a typical 56K connection, with text appearing first and links being clickable before graphics are complete.

Minimising or eliminating elements that delay initial page display, eg:

• No large JavaScript files loaded in the page head.
• No large image pre-loads.
• No page transition effects.

All graphics have "alt" text. This allows the link to be followed before the image has downloaded.

All graphics have height and width specified in their img tags. This stops the page layout "jumping around" as the images download.

Graphical links are done with one image per link, not image maps. This allows the links to be used before the images have downloaded.

JavaScript is used wherever possible to enhance displayed content, not to display content. This is especially so for JavaScript that runs from the "onload" event which only runs after the page's images have all downloaded.

The user is informed if they may have to wait for a resource.

File size information and/or warnings appear with resources that might take some time to download (generally more than 8.5 seconds on a 56K connection) eg. PDF, ZIP, large graphics.

Progress indicators are used if possible.

Navigation

The site has multiple navigation systems that cater for different browsing styles, while making the entire site easily navigable.

Hierarchical drop-down menus appear on every page giving users one-click access to every page on the site.

Sequential menus are used where sequential text is presented, allowing users to easily navigate through a series of small chunks of text.

A site map is provided with links to every page on the site. (Except for sites with very few pages.)

Contextual links are used to make cross-references from page to page.

Tool tips are used on contextual links where appropriate to better explain what the link goes to before the user clicks it.

A "related pages" section of links is included where appropriate.

Site search is available on larger sites (Google site search if site content doesn't change often, specialist search with synonym support where needed.)

Familiar navigational cues are used to reduce the cognitive load on the user.

Layout follows universal principles with menus across top or on left.

Links look like links (underlined, contrast colour) and they appear differently if already visited (different colour). User default colours are strongly preferred, but this depends on the site colour and design scheme. However, regardless of design issues, links should look like links and appear differently if already visited.

Graphical links either

• Look like links due to button-like appearance or the use of underline, or
• Are accompanied by nearby text links to the same destination, or
• Are obviously part of the menu section of the page.

Pages are easily bookmarked

Frames will not be used.

URL's will be static.

Consistent appearance of pages on the website.

The HilderBuild Website Builder supports the use of view templates for small websites. Only one or a small number of closely related view templates will be used for each site.

Each page will carry a masthead and hierarchical menu, plus standard links to site policies, contact details, and HilderBuild.com.

Readability

Contrast

Black text on a white background is preferred for body text. Variations are acceptable, but contrast must remain excellent: near black on very light pastel hue. Some sites are suited to white text on black, in which case a larger/bolder text is demanded, but the site should not carry pages with lengthy text content except in panels of white. Watermarks should be used with discretion; very faint and always scrolling with the text.

Use a font that is proven to be easy to read and optimised for screen display.

Generally this means either Verdana or Arial for body text. Georgia or Times might be chosen in some situations to give a more formal or literary look, but these are harder to read on screen. Other fonts are generally only acceptable for display text, but in some cases may be used for short sections of body text set in a fairly large size.

White space

Layout will be uncluttered with appropriate use of white space. (There may be reason for a home page to be cluttered if it is important for a lot of options to be presented "above the fold", but this requires very careful design to be successful.)

Comfortable line length

Use of flexible layout (widths specified in em's, not pixels) with column widths generally of 10-12 words per line. In some cases margins, padding, and border widths might be better specified in pixels, and this is acceptable so long as it does not "break" the flexible layout.

Text forms blocks with even word spacing

Left aligned, unjustified text.

User can control font size through browser settings

Font and column sizes set in em's (except set body font size with % which gives better results under IE). Font size can be set with % in some circumstances.

Avoid horizontal scrolling

Use layout that avoids horizontal scrolling completely in a maximised window at medium text size on 800x600 screen.

Minimise vertical scrolling

Break information into small chunks on separate pages, but bearing in mind that material that needs to be read together should be kept together on the same page.

Avoid or manage animated graphics

Avoid animated graphics if possible. If unavoidable, then either:

• Place away from important information, or
• Place under user control (play, stop buttons)

Users expect animated graphics to be advertising.

Browsability

Enable users to easily scan pages for information of interest to them

Consistent use of and emphasis of key words.

Headings that stand out and summarise the text.

Lead paragraphs that summarise longer passages.

Information in bulleted lists where appropriate.

One idea per paragraph.

Findability

Correct search engine presence with good placement in searches

Correct use of title, URL, headings, meta tags, and appropriate use of important keywords in body text.

Accessibility & Cross-browser support

Design that degrades gracefully

Use of CSS to give appropriate downgrade for both older browsers and users dependent on text readers.

Cross browser code

HTML and CSS to validate correctly with w3.org/validator.

CSS widths to use either:

• Upwardly compliant hack, or
• Nested borderless and paddingless div has width setting (preferred), or
• A design that doesn't matter if it varies by a few em's.

CSS and JavaScript must function on all major browsers (unless not necessary for site usability in which case IE and Firefox are the only requirements).

Printability

Pages that might be printed should fit on the page properly.

Either:

• Use a page design that prints well,
• Provide a printer friendly version of the page as HTML or PDF, or
• Use a CSS media style sheet for the page.

Avoid setting important images as background images, because background images are usually not printed (unless the user explicitly asks for them).

Spam avoidance

Email addresses should not be present in the source code in a form that can be harvested by automated "spambots".

Email addresses are encoded so that they are human readable (eg someone-at-example.com), and transformed into the correct email addresses (eg someone@example.com) by JavaScript linked to the "onload" event.