ITC Training Services

Web Design Guidelines

The following guidelines are based on the Yale Style Guide, the University of Virginia Web Standards and Guidelines, and feedback from webmasters around the University.

Remember: good design revolves around content, consistency, and consideration for the customer.

For hyperlinks use text that makes sense when read out of context
Use consistent layout and navigation, headings, and lists
Use Cascading Style Sheets to control page and text formatting wherever possible
When using tables make line-by-line reading of the HTML understandable
Use client-side map and text for image maps (as opposed to server-side)
Do not rely solely on color for differentiating content
If you must use frames (we don’t recommend them), be sure to use the NOFRAMES element and meaningful titles for frame pages

Use a descriptive alt attribute with all images
Provide descriptions or summaries of any image or multimedia presentation using the longdesc attribute (explanation and example)
Provide transcripts of audio media

Dreamweaver’s built-in validator
HTML Validator checks Web documents for conformance to W3C Recommendations and other standards.
Vischeck simulates color blindness and corrects images for colorblind viewers

Outline your site contents
Construct a site map to visualize a logical layout for your web site (CMap or eXact Mapper Lite)
Categorize for your consumers - what makes sense to them
Consider link depth (4 levels is the recommended maximum)
Eliminate & consolidate filler pages
Give hyperlinks meaningful names
Customers should not be surprised by what happens when they click the mouse

Put navigation tools on every page
Allow for multiple ways to navigate your site, but always include text navigation
Do not underline text, underlining is only for hyperlinks

Check your web site on alternate platforms and browsers
Check your web site via a modem connection
Make sure the text is large enough to read, preferably with scalable, relative font sizes (small, medium, large)
Limit excessive page length (5 screen lengths)
Include contextual feedback where possible
Use black text on a white background or another high-contrast combination
Be sure to use multi-platform font names if you must specify non-default fonts
Give each page in the site title, description and keywords meta tags (for searchability)
The title meta tag should fully describe each individual page (for bookmarks)
Capture the attention of new customers
Make your site friendly to repeat visitors with frequent updates to content

Name the file of your homepage home.html, index.html, or default.html. The .htm extension is also acceptable, although .html is recommended for UVa sites.
Use web site statistics instead of counters.
Decoration is not design.
Just because you can doesn’t mean you should. (Use applications only as necessary).
More white space makes a page more elegant and less energetic.
Include contact information on each page of your site.
Because Unix servers are case sensitive, use lower case for all file and folder names.
Do not use spaces in file or folder names; they appear as %20 in the URL.
Always consider copyright issues before using an image, and include any necessary copyright information
Instead of using mailto: tags, use javascript to avoid spam (see the UVa Web Standards page and look for the subheading For displaying email addresses but hiding them from Web crawlers (to minimize spam))

Redirect dead pages instead of deleting them.
Register with search engines.
Consider making contact information a library item for easy updating.
Consider using templates to simplify creation of new pages and change of overall appearance.