Web Style

Design Spelling Speed Links

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.

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. 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.

• 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 such as Lynx as well as in the graphical browser of your dreams. 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.
• The problem of Style Sheets is a newer one. 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. Browser compatability is a serious problem with CSS.

Good design

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 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:webmaster@xxx.com">
• 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

Using and spelling those Net terms

According to Webreference, Chicago Manual of Style (CMS), Strunk and White's Manual:
• 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)
• user-friendly
• 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 oVERdo inTErCApS!):
• JavaScript, RealAudio, QuickTime, and WebTV

File size and speed

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:

Style Guides and Links

• W3C Style Guide for web pages
• Composing Good HTML
• Best of the Web - Awards
• CSS Examples and Tutorial
• WDG Linking CSS to HTML
• Delorie's browser testing
• Typesetting - font units, sizes

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