Building & Managing Web Sites with Microsoft Technologies
Web Page Design Best Practices

  
    Home   Lectures   Labs   Resources   Discussion    

Links

  • Avoid directional links like "UP" or "BACK". Give contextual links instead.
  • Use "TITLE" attribute to provide additional details about links.
  • NEVER say "click here" on a link!
  • In-line links should be used judiciously.

Content

  • In general, web pages should be short and concise.
  • Structure text for rapid reading/scanning, especially on home and navigation pages. Many print documents are too wordy for direct conversion to the web.
  • Select a style guide to follow for grammar, punctuation, etc. (e.g., Chicago Manual of Style).
  • Spell and grammar check your content!

Graphics

  • Avoid using graphics when text will suffice.
  • Keep image files as small as possible.
  • Understand what types of files are best formatted as JPEG (photographs), and which are best as GIF (line-art).
  • For GIFs, in most cases utilize safety palette colors to reduce dithering on 256-color displays.
  • Use animated GIFS sparingly, and make sure they have a limited number of repeats to avoid distracting the user from your message.
  • Always use the safety palette colors for table cell backgrounds to avoid dithering.

Files

  • Strive to have shallow directory structures.
  • Keep file and directory names short (8-12 character maximum) with no spaces or punctuation.
  • Avoid directory or file names that are non-human friendly so users can parse URLs to infer site structure).
  • To help NT find files faster, differentiate file names early (AAxxxxx.htm vs. xxxxxAA.htm).
  • In most cases, have a default entry page for most directories.
  • Avoid "orphan" files that are not linked to any page in your web site (but don’t delete setup and configuration files, e.g., directories starting with "_" for FrontPage).

Page Design and Layout

  • Design for monitors with 640x480 pixel resolution at 256 colors.
  • ALL pages should include the name of site author/organization.
  • Navigational features should have a consistent size, shape, location, and color scheme throughout a site/sub-site.
  • Avoid fancy backgrounds on pages. In most cases, use a solid or nearly solid background. The easiest pages to read are dark text on light backgrounds. White backgrounds are best.
  • Set the page background color. Some browser display it white, while other display it gray.
  • Be wary of long scrolling pages. Critical content should be visible in the first screenfull, especially on the home and navigation pages (many users are not likely to scroll).
  • Use Frames/Framesets rarely and with caution as they tend to confuse users.
    • Never use more than two or three frames per page.
    • Slows down loading and displaying of a Web page.
    • More difficult for the user to "bookmark" a specific view and be able to easily return to it.
    • Easy to forget to code links properly with target attribute.
    • Frames can be emulated using tables and server-side includes.
  • Minimize use of horizontal rules -- they are barriers to the flow of pages. If you are using a horizontal rule to break up major sections of a page, consider breaking up into separate pages.
  • Avoid background sounds except for music or playful web sites -- they typically aggravates users. If you use them, make sure the sound enforces the page focus, and that it does not loop endlessly. The sound element should be at the end of the page so all visual elements load first.
  • Consider avoiding separating paragraphs with blank lines. Use line breaks and/or indents when possible. Extra space hard to read and wastes valuable vertical real-estate.
  • Keep pages light for fast loading. Should strive for under 40KB, especially on entry pages. Longer pages are acceptable if user knows/has selected what they are getting into.
  • Reuse graphics from other pages to gain caching benefits.
  • Provide good navigation support. Links back to the site and/or subsite home page. Many users do not enter from your home page.
  • Use the safety palette colors to avoid dithering.
  • Provide brief but descriptive titles for all pages that adequately describe the page contents and distinguish the page from others in the site.
  • On long documents, provide a table of contents at the top of the page with anchor links to the major portions of the page.
  • Tables are not rendered until the table is completely loaded into browser, so break long/content-heavy tables up into multiple tables to have user see content sooner.

Formatting Text

  • Don’t use underlined text. Underlines are for links.
  • Minimize dependence on special fonts, as users may not have the font. If you do define a specific font, always add sans-serif or serif to <FONT> or CSS styles.
  • Minimize using the <CENTER> on text as it makes it difficult for the reader's eyes to properly register and track the information.
  • Avoid altering unvisited/visited link color schemes.

Supporting Search Engines

  • Have brief, descriptive and page specific page titles.
  • Use longer description and keyword META tags, especially on home pages, sub-site home pages, and navigation pages.
  • On databases, create followable links for webcrawlers to follow.

Testing

  • DO IT!
  • Test your pages with as many browsers as you can.
  • If you are using style sheets, it is CRITICAL to test your pages!

Miscellaneous Considerations

  • If you think your users are likely to print a page, test print to make sure it will print correctly (some backgrounds and graphics may print poorly or obscure the page text).
  • Avoid using "Under construction" messages or graphics – the web is always under construction!
  • Avoid using "Coming Soon" – it frustrates users.
[csc96b/_private/footer.htm]