Web Page Design Best Practices

 
 
 

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 page text 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 to maintain your credibility!

Graphics

  • Avoid using graphics when text will suffice.
  • Keep the height and width of 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.

File Naming

  • Keep file names short (8-12 characters maximum) with no spaces or punctuation.
  • Use human-friendly file names so users can type the URL correctly.
  • Some webserver find files faster if you differentiate file names early (xxxxxAA.htm vs. AAxxxxx.htm).
  • Be aware that some webservers are case sensitive and others are not.

Page Design and Layout

  • Maximize compatibility by desigining your pages for monitors with 640x480 pixel resolution at 256 colors.
  • ALL pages should include the name of site author/organization.
  • 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.
  • Explicity set the page background color. Some browser software uses white as the default background color, while others display it gray.
  • Critical content should be visible in the first screenfull ("above the fold"), especially on the home and navigation pages (many users are not likely to scroll). Be wary of long scrolling pages.
  • 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 aggravate 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 vertical space may be hard to read and wastes precious vertical real-estate.
  • Keep pages light for fast loading--strive for under 40KB, especially on entry pages. Longer pages are acceptable if user knows/has selected what they are getting into, but pages beyond 80-100KB should be avoided in general.
  • 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.
  • 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 centering 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.
  • Most search engines/webcrawlers cannot crawl through a form interface. 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.

CSC 120  http://www.valtara.com/CSC120/   
Copyright 1999, 2001 Valtara Digital Design