It's important to consider how people will see your page using different equipment and software. You should also consider people with visual or hearing impairment. Blind people use text synthesizers to convert visual text on the screen into spoken words. People with poor eyesight have difficulty with fixed font sizes, contrast, light text on dark backgrounds, etc. Although most web browsers allow users to use their own style sheet to change the appearance of pages, you should still design with all users in mind.
HTML provides the structure for the document (headings, paragraphs, tables, code). CSS provides the style (colour, fonts, positioning, layout). Be sure to design your page without CSS initially. CSS style sheets solve most style problems that plaque Web pages. If you link to the style sheet in every page, then changing the style sheet changes the appearance of the entire website.
Good design and accessiblity are hard to separate, although "good" is a raging debate. The following isn't the "last word", but only a starting point.
- In general, a page should read well without graphics; a page
should be readable when printed.
- Use consistent design techniques for all your related documents to
make it easier for users to navigate through your pages. This includes:
- common background color or graphic
- common header and footer format in each page.
- common navigation techniques (toolbars, index links)
- pages of similar size (1 to 5 screens)
- Sign your work in a personal site! You can link to a page about you at the bottom.
You should always include a line like this in the HEAD SECTION (substitute
your address for webmaster..):
<LINK REV=MADE HREF="mailto:email@example.com">
- A business site should provide the name, address and contact information
(or link) on every page's footer.
- Provide a link to the page maintainer's email address (who will get
wonderful compliments!). Notice that the address is visible for people
who cannot use the link to send email.
Feedback to firstname.lastname@example.org</A>
- Date your work with a comment line in the HEAD section:
<!-- Last Changed: 5 September 1999 -->
- Put a link back to the home page somewhere in each of your pages.
This should be the full URL in case the person has "saved" the file.
Back to Home page</A>
- Follow heading sizes in order: H1, then H2 (don't skip to H3). Don't
use a font, BR or P to format a heading.
The browser will format it for you.
- If you have a translation of a page in another language, put icons
or links to it right under the header.
- Try not to change the standard colors in the BODY
tag for text (black), link text (blue), and visited links (purple).
People are used to seeing these link colors when they navigate all web
- Many people find light text on a dark background very difficult to
read. Use external style sheets for styles so the user can use their
- Your sentences, paragraphs, headers, titles, list items should use
- Don't use blinking text! Reconsider animated GIFs - many people find
moving images annoying.
- If you MUST use the PRE tag, create short lines so
that browsers will be able to read the text without scrolling sideways
even on VGA screens. If possible, convert the file to HTML.
- Do not instruct the reader how to use a web browser! Do NOT mention
"browsers" or "Best viewed..". Use links, don't talk about them. For
Bad: <A HREF= "http://web.ncf.ca/pat/pdqlib/">
Click here</A> for the PDQ Library.
Better: Learn more about Web site design in the
<A HREF="http://web.ncf.ca/pat/pdqlib/"> PDQ Library</A>.
- Do not put spaces around a link's anchor text:
Bad: <A HREF="a.html"> Style Guide </A>
Good: A <A HREF="a.html"> Style Guide</A>
- Let the browser do it's job to display the page in the best way by
using "logical" styles rather than "physical" styles. Use EM, DFN, CITE,
VAR rather than I; use STRONG rather than B; use CODE and KBD rather
- Use relative URLs to your other pages to make a web site easier to
maintain. It also makes it easy to move the site without editing (full
URLs are not portable). Relative addresses are also served faster.
Relative URL: events.html
Full URL: http://www.company.ca/events.html
File size and speed
A brilliant young fellow named Mel
Wrote incomparable HTML.
But his gigantic GIFs
Were such slow-loading stiffs
That he created the Web site from Hell.
. . . . [Les Share]
Test your page from another system to see if it takes longer than five seconds to load -- this is a general rule of thumb used by some designers. Many people will leave your site on long waits. If your page takes longer than 10 seconds, it is usually because of inline images. It's easy to make your graphics files smaller.
Just remember to clear your "browser cache" before you test any page for loading speed. (A cached page will load much faster.)
Style Guides and Links
And how NOT to design Web pages...