Tip Sheets
Creating User-Friendly Web Pages
Introduction
These Quick Tips provide some general design
tips for creating user-friendly web pages, including:
- ensuring access to your content and achieving rapid download
times for users
- general recommendations to improve accessibility for users.
For additional information about ensuring accessibility by people
who may not be able to see, hear, move, or process some types of
information, please see the Accessibility Guidelines prepared by
the World
Wide Web Consortium (W3C).
1.1.1 General Functionality Recommendations
Products must be viewable and fully functional in the current version
of common browsers, i.e.:
- Netscape 4.7 or higher
- Internet Explorer (IE)5 or higher.
Recent browser surveys done for the CHIN site and the Virtual Museum
of Canada showed that 60% of users were using Internet Explorer,
while 25% of users were using Netscape. It is advisable to test
your Web site using both browsers to ensure functionality in the
majority of viewers' environments. You may also wish to test other
available browsers.
When creating your directories, where applicable, use relative
links, e.g. ../../english/index.html. This will speed download times
for users, as users can quickly reload cached pages.
Always ensure that you close HTML tags:
</P>, </UL>, </TABLE> ,</B>
This will allow user agents (assistive technologies such as screen
readers, screen magnifiers, and voice recognition software) to interpret
your data.
1.1.2 Fonts
Be sure to use standard TrueType Fonts (TTF) to ensure that your
product will display properly on a variety of platforms. Verdana,
Arial, and Garamond are examples.
Note:
On a Macintosh system:
- font sizes below 9 will not display well
- bold formatting of font sizes below 11 will not be displayed.
1.1.3 Colours
Some older systems have a limited palette available, and their
set-ups may vary. To ensure that your material will be viewable
in a standard fashion, use Hexadecimal code for 216 "Web-safe
colours", e.g. H1 {COLOR: #FF0000}.
A Web-safe colour chart can be found at:
http://www.webmonkey.com/reference/color_codes/
Design any background graphic at the lowest colour depth (limit
the number of colours) and resolution possible. This will ensure
that it looks the same on various platforms.
1.1.4 Layout
Specifying all margins, background images and/or colour and text
tags within the <BODY> allows you to use the full space of
the window when displaying your HTML page and ensures that the page
is displayed properly. Be sure to check to see how your page displays
in different resolutions, with particular attention to 640 x 480
or 800 x 600. Recent statistics from statmarket.com show that 7%
of viewers are viewing sites with a resolution of 640 x 480, 53%
with 800 x 600, and 31% with 1024 x 768.
http://www.websidestory.com/company/news-events/
press-releases/view-release.html?id=30
See a coding example for setting
the display specifications.
1.1.5 Mouse-overs
Mouse-overs allow you to maximize the information you display in
one page.
Using the onLoad="" in the <BODY> tag helps to download
all mouse-over images as soon as the page is downloaded, so that
when you mouse-over an image, it is already preloaded in the cache.
To see a coding example that
demonstrates the use of onLoad.
1.1.6 Windows
Minimize the number of windows that can be opened at one time.
Developers should review window navigation policies for each on-line
resource.
- If a resource requires another window to open to supplement
the content, it should be obvious to the user that another window/browser
has been opened (e.g., super-imposing a smaller window on the
previous one).
- Try to manage the windows and not continuously open new windows
by creating navigation scenarios that re-use windows that are
already open.
- Try to ensure that a resource will not cause numerous windows
to be open at the same time.
1.1.7 Updating information
If you frequently update the content of a Web page and would like
to avoid viewers seeing an older, cached copy, add the command shown
below to your page. The HTTP-EQUIV="EXPIRES" attribute
works with most browsers.
<META HTTP-EQUIV="expires" CONTENT="31 Dec 99">
1.1.8 Tables
1. Splitting a single large table into many small tables will result
in faster down load time. These multiple tables will appear to the
user as one large table, as is illustrated in the following example:
| TABLE NUMBER |
ROW NUMBER |
| Table One |
Row One |
| Table One |
RowTwo |
| Table Two |
Row One |
| Table Two |
Row Two |
| Table Two |
Row Three |
| Table Two |
Row Four |
| Table Three |
Row One |
| Table Three |
Row Two |
| Table Three |
Row Three |
<table width="100%" border="0">
<tr><td>TABLE NUMBER</td><td>ROW NUMBER</td></tr>
<tr><td>Table One</td><td>Row One</td></tr>
<tr><td>Table One</td><td>RowTwo</td></tr>
</table>
<table width="100%" border="0">
<tr><td>Table Two</td><td>Row One</td></tr>
<tr><td>Table Two</td><td>Row Two</td></tr>
<tr><td>Table Two</td><td>Row Three</td></tr>
<tr><td>Table Two</td><td>Row Four</td></tr>
</table>
<table width="100%" border="0">
<tr><td>Table Three</td><td>Row One</td></tr>
<tr><td>Table Three</td><td>Row Two</td></tr>
<tr><td>Table Three</td><td>Row Three</td></tr>
</table>
More examples to reduce download
time for tables.
1.1.9 Rules for Language Coding
The typographic presentation rules of individual languages must
be taken into account in HTML coding. For example, a "no-break
space" character ( ) must be added before the following
punctuation in French text: exclamation mark, question mark, colon
and semi-colon.
Identifying the language of the document using the Language attribute
allows user agents to interpret text. In order to assist user agents,
you must also identify changes in the language in the body of a
document.
English <HTML LANG="en">
French <HTML LANG="fr">
Spanish <HTML LANG="es">
German <HTML LANG="de">
Because the spelling of certain words changes depending on the
country (eg. color/ colour), you should also identify the country
subcode. This will help user agents determine punctuation and hyphenation
rules. The code for Canadian
English is en-ca; the code for Canadian French is fr-ca.
e.g. <HTML LANG="en-ca">
<HTML LANG="fr-ca">
HTML standard should be used for
all special and accented characters.
The use of character entity references for characters within <ALT>
attributes or <TITLE> tags may result in the display of these
entity references, rather than the intended characters. The solution
is to use the intended character itself. For example, instead of
coding "é", simply insert "é"
after <ALT>= and within <TITLE> tags.
1.2 Images
It is recommended that all HTML pages including their components,
such as images, not take more than 10 seconds to download using
a 56 K modem (approximately 60 K). Large images that take too much
time to display may cause users to turn off their graphic display,
or leave your site. In general, images are the largest elements
on a page.
The following table contains approximate download time for an HTML
page based on the size of the page and the speed of the download.
| Modem |
10 kB |
30kB |
50kB |
100 kB |
500 kB |
00 kB |
| 14.4 |
6.4 sec |
19.2 sec |
32 sec |
64 sec |
320 sec |
640 sec |
| 28.8 |
3.2 sec |
9.6 sec |
16 sec |
32 sec |
160 sec |
320 sec |
| 56 K |
1.6 sec |
4.9 sec |
8.2 sec |
16.5 sec |
82.3 sec |
164.6 sec |
| T1 |
.1 sec |
.2 sec |
.3 sec |
.6 sec |
3.2 sec |
6.4 sec |
| Cable |
.1 sec |
.2 sec |
.3 sec |
.5 sec |
2.6 sec |
5.2 sec |
Table adapted from: http://www.bri-mar-dit.com/FYI/DOWNLOAD.HTM
The following guidelines will assist in reducing download time
for images.
- Reduce image file sizes. A number of image applications have
special features for optimizing graphics for the Web.
- Use the GIF file format, which supports up to 256 colours, for
Web graphics such as thumbnails, banners, navigation icons, etc.
Reducing the number of colours in your GIF files will reduce the
image file size.
- The JPEG file format, which supports over 16 million colours,
is used extensively for photographs and other continuous-tone
images on the Web that require full colour display.
- Note that both of these image formats have built-in compression
algorithms that reduce the image file size.
Further information on Optimizing Web Graphics can be found at:
URL: http://www.webreference.com/dev/graphics/index.html
- If an image file is still large after optimization, it should
be organized into slices. Software such as Adobe ImageLab or Macromedia
Fireworks can be used for image optimization.
- Use WIDTH and HEIGHT in the <IMG> tag to specify the image
size. By setting these attributes, you are 'reserving' space for
that image to load, and the browser doesn't have to re-render
the screen once the images are loaded. (no text or information
will load in that area even if the image never loads.) Do not
use WIDTH and HEIGHT to resize an image, only to specify its actual
size.
Example:
<IMG ALT="example" src="example.gif" WIDTH="8"
HEIGHT="160" border="0">
Additional tips for speeding up download time:
Avoid unnecessary use of icons, graphics and photographs. Avoid
using images to display words in special fonts; it is better to
code font changes into your HTML, using <FONT>, <B>,
<I>, etc., rather than create images of the words.
Instead of using large full-size graphics images on your page,
insert a thumbnail in the page and link from the thumbnail version
to the larger image. Indicate the full image size (in kilobytes)
and the file format, so the user knows the file size and type before
loading the full-size image.
Re-use images where possible. Once an image has been loaded, it
can be loaded quickly each time it is called in the HTML document.
Each HTTP request requires additional time for the browser and server
to deliver the image, unless the same cached image is reused on
the Web page.
Further information on reducing download time can be found at:
http://www.submitcorner.com/Guide/Bandwidth/
1.3 HTML Validation and Quality Assurance
Perform a quality assurance check on your product. This includes
checking all your internal and external links and validating your
HTML. When validating your documents, be sure to check that your
DTD (document type definition) is set to the appropriate version
of HTML. Test all HTML pages in both IE5 and Netscape 4 environments,
and on different system set-ups such as different monitor resolutions,
PC, Macs, etc.
To assist in quality assurance, you can use products such as Bobby
to test for W3C accessibility, and other validators to perform download
time analysis and HTML validation.
Validators can be found at the following URLs:
1.4 File Formats
If you link to a large multimedia file, indicate the format and
file size in megabytes. If your site requires plug-ins, it is advisable
to advise the users of the requirement on the home page.
Additional Resources:
Webmonkey: The Web Developers Resource
www.webmonkey.com
Useit.com: Jakob Nielsen's Website
http://www.useit.com/
Web Site Design Guide
http://www.geocities.com/Athens/4204/index.html
Webreference.com: The Webmaster's Reference Library
www.webreference.com
HTML Help by the Web Design Group
http://www.htmlhelp.com/