Web Style

Design Speed Links

Accessability

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.

• Test your pages using several different browsers (including Lynx) to ensure maximum usability to your web pages. Change your browser setting for font type and size. What does it look like for people with vision problems using very large fonts? Make a browser comparison test.
• Use an HTML testing service or software to test for errors. This is not necessary if you use good authoring software.
• If you have image maps or images acting as hypertext links, provide alternative text links so everyone will be able to use your page. Add the ALT="..description.." option in IMG tags so people without graphics see something meaningful instead of this: [IMAGE]
• Even if you use the ALT option of the image IMG tag, add a separate text link for browsers that cannot read that tag.
• Organize your Web site with a subdirectory for images called "images". This will help keep files organized.
• If you use a background image, be sure to also specify a background colour that will load in browsers that do not support background images. You page will also look better during loading. Never use a background image that is interlaced (images loads in layers) as the page will not load until the background is fully loaded. Do not make a background image a transparent GIF.
• Screen Colours page shows you how to change your screen to a higher resolution and be able to view thousands of colours. Many people never change the default 256 screen colours set by Windows software and miss out on some really beaufitul Web sites.
• If you use FORM tags in your document, offer alternative methods of sending information.
• Be aware that many browsers cannot translate many of the newest HTML tags, such as Netscape extentions.
• If you use FRAME, supply alternative pages for those who cannot or refuse to view them. Better yet, don't use frames - they are rarely necessary.
• Try to use document formats that are commonly used by your intended audience, such as .txt, .html .htm, .gif, .jpeg .jpg.
• Use audio files can be used to enhance your information -- consider people who cannot hear or who have slow connections. Video clips should have supporting descriptions for those who can only "view" textual information using speech synthesizers. There is often more than one method of designing a tasteful and attractive web page so that everyone can access the information.
• You can include images and multimedia objects , remember that not all web users have graphical clients, and many web users voluntarily turn graphics off to save downloading time! If you don't provide an alternative, you will only annoy people.
• To include images in your page, the code would look something like this:
  <A HREF="/images/xxx.gif">
• You can in fact specify a great deal about the appearance of your document in the latest web browsers. There is no harm in taking advantage of these features, but as a rule of thumb, always make sure your document looks good in a text-based browser, or one with images and scripts disabled. This is more than a simple matter of taste. Keep in mind that not all users can see! The DJ Delorie's Web Stuff will help you check what your pages will look like in other browsers.
• And please resist the latest fashion in design to use gray colored text. It's very hard to read unless you have perfect vision.

Good design

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:webmaster@xxx.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.
  
  <A HREF="mailto:abc@xxx.com">
  Feedback to abc@xxx.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.
  <A HREF="http://www.patdrummond.org">
  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 sites.
• 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 own preferences.
• Your sentences, paragraphs, headers, titles, list items should use punctuation consistently.
• 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 example:
  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 than TT.
• 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

• W3C Style Guide for web pages
• WDG Linking CSS to HTML
• DJ Delorie's Web Stuff - browser testing.
• Composing Good HTML
• Best of the Web - Awards
• CSS Examples and Tutorial

And how NOT to design Web pages...

• Top Ten Mistakes in Web Design
• Worst of the Web - features a really awful site each weekday - see how NOT to design your web pages.
• Web Pages that Suck to learn good web design by studying bad! (suggested by Gord Pearson)

Design | Spelling | Speed | Links