The online learning series

Basics of Website design and accessibility

Standards in designing Web pages
can accommodate a wide range of devices, whether handheld or desktop:

• Portable and mobile technologies
  are more text-based and include Personal Digital Assistants (PDA), smart and cell phones, Blackberries, etc.
• Some visitors to Web sites turn off images
  to speed downloading pages, so text alternatives for images are necessary
• Visually-impaired visitors rely on text-alternatives
  when accessing Web sites, and rely on clear, succinct text
• Voice reading devices for the visually-impaired
  also read these text alternatives, as do text-based library terminals

Answer these questions in developing your Website:

Audience: who will visit my Website and why?
Specifically write for them. Define and use appropriate vocabulary.
Use concepts readily understood by your audience
Outline or map your content to keep a clear focus on the important content and its navigation

Format (design) a standard page template:
Don't assume that what you see is what other users will see.
There is little consistency between platforms, browsers, monitor sizes, designated/default fonts and colors,
and even individuals' tastes as regards viewing the Internet.

• Consider a screen's real estate:
  Locate more important information left and top
  Do not assume screen resolution or monitor size
• Facilitate scanning:
  Most viewers (about 75%) first scan text and menus for information (and ignore visuals!)
  Increase detail and complexity with linked pages (fewer than 20% read word-by-word)
• Standardize presentation and navigation
  Locate logos, menus and features consistently and predictably
  Link longer pages "back to the top"
  Intuitively label links for content and page URL
  Reduce white space on main/menu pages that detail content indexes and facilitate searching
• Build content complexity through linked pages
  Webpages should be linked three or less deep within the site
  Visitors should always know where they are in your site and be able to easily retrace or return
• Make text easier to read (see Guide on "Writing for the Web")
  Make liberal but consistent use of bullets, headings, sub-headings, and font size
  Separate blocks of text with white space
  Do not fill the screen with text: indent, center blocks of text with margins left and right into columns

  Fonts: Use standardized or common fonts if not using "default"
  Font size display is affected by monitor size, screen resolution, as well as the browser's settings.
  Georgia (serif), Trebuchet and Verdana (sans serif) have been specifically designed for Web display;
  Times Roman (serif) and Helvetica and Ariel (sans serif) are also common.

• For maximum accessibility, font sizes should be coded in relative sizes
  rather than fixed or absolute sizes. If fixed:

  Minimum font size should be 10 (PC) or 12 (Macintosh) or medium or "3"
  Use a larger font size for sites attracting small children and seniors
  (Based on the Web Content Accessibility Guidelines (WCAG) published by the Web Accessibility Initiative (WAI) which is part of the World Wide Web Consortium (W3C).

• Research shows little difference in reading speed or user preference
  between 10-point Times Roman, Georgia, Helvetica, or Verdana fonts
• Use one font for identification, directions and navigation; use another for content
  Do not use more than two per Web site
• Avoid formatting fonts (color, blinking, scrolling, FACE, etc.)
  More often than not these do not display appropriately or are found annoying

Use color judiciously

• Either specify all colors (BGCOLOR, TEXT, LINK, VLINK, and ALINK) or none
  "None" will default to the settings on your visitor's computer
  Specifying only some colors will let others default; your designated colors may be an ugly combination with these defaults
• Use high contrasting background and text color,
  preferably light background with dark text
• Avoid backgrounds that obscure text
• Use a browser safe palette of 216 colors
  These colors are standardized for all browsers (IE, Netscape, Opera, Lynx) and platforms (PC and Macintosh). These are defined as "#RRGGBB" (Red, Green, Blue) paired values (00, 33, 66, 99, CC, and FF)

Images:

• Images should be no more than 75 pixels per inch
  This is the conveyable limit on the Internet; any more results in slow downloads with no increase in resolution or visibility
• Use .jpg files for images as photographs with shaded coloration;
  use .gif files for images as graphics with broad fixed color fields
• Code alternative, descriptive text to replace, and describe the content or function of all images:
  for the visually impaired, for those who turn off images in their browser,
  for libraries' Lynx browsers; for digitally-based devises; for 30% of all browsers

  In HTML code, <alt> designates the alternative text for an image.
  <img src="logo.gif" alt="Our company's logo"> Our company's logo replaces the image
  <img src="space.gif" alt="*"> or <img src="space.gif" alt="">A blank replaces this graphic place holder or decorative graphic

• Avoid designating images as links
  If necessary, alternative text should describe the linked page's content
• Avoid designating images as text, decorative or otherwise
  There can be little visual value given relative text sizes described above
• Avoid using transparent or colored single-pixel GIF images without good reason.
  Some people use these devices as shims to force page layout. They result in unusable pages for visitors who are browsing with image loading turned off

Use tables conservatively to format presentation and design

• Generally specify the widths of tables and table cells in percentages, not absolute pixels.
  Generally rows should "shrink" or "expand" to fit a screen size.
  Fixed width rows and increased font sizes are often not compatible
  Fixed width rows may dictate horizontal scrolling on small screens
• Avoid placing tables with <p> paragraphs or floating them with text
• Avoid multiple lines of text in cells across a row
  Text-based Lynx will read the top line across a row before going to a second line below it
• See also Specify the widths of tables and table cells in percentages, not absolute pixels.

Links:

• Be as descriptive as possible
  in describing a link's content
• Use a space | vertical bar | space
  to separate links which occur consecutively
• Do not use phrases such as "click here" "enter"
• Avoid roll-overs for drop-down menus
  It is visually difficult to tell they contain links
  It is difficult to adequately describe content of the links

Avoid

• Frames or use a non-frame alternative
• Java where possible
• Graphics that say nothing and distract from your content
• Graphics that bounce, spin, twist, or just move without being vital to or illustrative of your content
• Scrolling text

View your pages:

• Using Black and White settings to check for color blindness accessibility
• Deleting images to check for accessibility for the visually impaired and imageless technology
• Across platforms (PC, Macintosh, Linux, etc.)
• With optional browsers (Internet Explorer, Netscape, Opera, Linus
• With optional text and window sizes

Web sites can be evaluated for accessibility.

One service is located at the W3C HTML Validation Service checks documents like HTML and XHTML for conformance to W3C Recommendations and other standards

Online learning/communicating:

Online learning: questions | Distance learning | Mobile learning (M-learning) | Taking online tests |
Netiquette | Basics: Website development | Basics: Website design | Making your website popular