Read about CSS Reference - Cascading Style Sheets
for designing with all styles (i.e. fonts, colour, size, spacing) in a
file that will apply to every page on the site. Consider embedding copyright
information in your pages, photos and artwork.
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.
Style Sheets offer some solution
to style problems that plaque most Web pages. If you create HTML without
styles using CSS (style sheets), users will have control over the appearance
of pages by changing options in their browser.
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
- In general, a page should read well without graphics; a page
should read well after printing.
- 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! 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:firstname.lastname@example.org">
- 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 email@example.com</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/">
- 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
Using and spelling those Net terms
According to Webreference, Chicago Manual of Style (CMS), Strunk and White's
- Email (electronic mail) a noun; email a verb (I emailed it to you.)
- World Wide Web, Web site, and Web
- the Internet, the Net (don't forget "the")
- webmaster, webcam, webzine
- palmtop (rather than PDA, handheld)
- 2 words: home page, end user
- 1 word: upload, download, printout, bookmark
- on-line (or online by CMS and Wired magazine)
- dial-up (again Wired uses dialup)
- log on, log-on, log in, log-in (Wired uses login)
- URL (Uniform Resource Locator) i.e. http://www.patdrummond.org
- FTP (File Transfer Protocol), I FTP'd my files..
- HTML (Hypertext Markup Language)
- GIF (Graphical Interchange Format)
- JPEG (Joint Photographic Experts Group)
- GUI (Graphical User Interface)
- LAN (Local Area Network)
Midcaps, intercaps, mixed case, WikiName for owner identified names (DoN't
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 hit the BACK button 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.
A standard 14.4 Kbps connection can download web pages at 1.4 KB per second. Therefore, in 5 seconds people on the Internet can see your whole web page including one image file if both add up to 4.2 KB (4200 bytes). Since each image has additional loading time, you can speed things up by using one image rather than several.
To calculate how long it will take to see your page under ideal conditions on a typical connection:
4.2 kb page + image @1.4 kb /sec = 3 seconds
Starting up an image in a browser = 2 seconds more
. . . . . . . . . . . . . . . . . . . . . . . . Total = 5 seconds
Style Guides and Links
And how NOT to design Web pages...