Compatible, accessible and comfortable

See also: Functional graphic design Dynamic context information "Unsafe" colour Compatible, accessible and comfortable

Besides using consistent graphic design to aid site navigation, the following issues have been important to us while designing this site.

Backwards compatibility

The site uses the HTML 4.01 Transitional DTD so that the site looks similar in older browsers - it does not use <font> tags for setting font face or size. It uses CSS for font face and size but does not rely on CSS exclusively for display or colour. Tables are used to achieve the page layout.

Doesn't rely on images

The site remains reasonably usable with images turned off - it is also usable with non-graphical browsers and it includes features only visible in text browsers to allow visitors to skip a group of links.

Avoids screen glare

Pages have an off-white background for ease of reading on the screen; one factor which contributes to screen glare[1] is when a monitor's contrast set too high. In this case, white backgrounds can cause problems after a couple of hours.

Display time

The navigation buttons have been placed horizontally so that they can load first. A study[2] by User Interface Engineering indicated that a visitor's impression of "slow sites" had no relationship to total page size but instead on when something is first displayed.

HTML button labels

Sections links are implemented as HTML text labels with associated section graphics. This is a better alternative to graphical buttons only:

1. no (mouseover) action is needed to see the label
2. the visitor can resize the text in their browser (or by changing site preferences)
3. the link label is still visible if images are turned off or unavailable
4. the labels will be translated with rest of the web page content when using translation services such as Babelfish

Line length

A maximum width is set for textual content; there is consistent advice[3] against very long lines. We rarely set an absolute (pixel) width for tables, but only apply pixel widths to cells. This sets a maximum width whilst allowing text to wrap at narrower browser widths. The maximum width (or whether it stretches to fit the available browser width) can be set in the site preferences.

Progressive display

Although tables are used for layout and to control line length, pages are made up of successive tables so that they load progressively. This means that you can start reading content while the rest of the page is downloading.

End-of-page navigation

The site buttons and side navigation are duplicated at the bottom of long pages in a form similar to the page's top set of links. This reduces the need for "to-top" links;

Printed pages

Pages look reasonable when they are printed. This removes the need for a second version of pages.

A print stylesheet is defined for the site. This replaces any pixel sizes with point sizes and removes navigation links. The print stylesheet is also available as an alternative stylesheet called Print Preview to those browsers which support this feature.

Smallest text

The smallest font size is set to 11px. Font size can be changed using the site preferences.

Off-site links

Off-site links are marked - by default, pages on other sites display in the same window but can be changed to display in one other window or in a different window for each link

References

1. On Web Page Design for Designers, Joe Gillespie writes that a "difference between printed and screen-based text is in the fact that computer displays are luminous. [...] Black type on a white screen is actually very difficult to read because of the contrast and `glare'." and "The `default' - black on light grey is actually quite good in readability terms if somewhat boring and academic-looking."
   http://www.wpdfd.com/editorial/wpd0600.htm#comment
   
   The Guidelines for Office Ergonomics states that "excessive brightness can cause blurred screen characters and eyestrain. Stark-white page backgrounds may not be the best choice for long-term viewing. Try an off-white or parchment-color page background."   [return to text]
   http://www.jlab.org/ehs/manual/EHSbook-265.html
2. User Interface Engineering on The Truth About Download Time: "When we looked at the actual download speeds of the sites we tested, we found that there was no correlation between these and the perceived speeds reported by our users.".
   http://www.uie.com/truth.htm
   
   Read Paola's response on the CHI-WEB mailing list: "I believe that UIE's results are an artifact of people not knowing that a page is making progress and is downloading even though nothing is displayed for some time."   [return to text]
   http://www.acm.org/archives/wa.cgi?A2=ind0103B &L=chi-web&P=R3907
3. Adobe on Spacing: "Generally, a line should have 55 to 60 characters, or 9 to 10 words, for optimal readability."
   http://www.adobe.com/type/topics/info4.html
   
   Will Harris on Setting Type for Readability: "The optimal length of a line of text should be between 40 and 70 letters long. Shorter than that and it's disruptive. Longer than that and people have a hard time finding the next line, so it slows reading."   [return to text]
   http://www.will-harris.com/webtype/setting_type.html