ITS Training & Student Engagement
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.
Table of Contents
Use accessible page structure
- 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
Provide textual descriptions for media content
- 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
Validate your web pages
- 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
Organize your content
- 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
Provide consistent navigation
- 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
Consider design issues
- 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
- 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.
Things to Avoid
- Unnecessary graphics
- Animated GIFs, except when used for demonstration purposes
- Interlaced or progressive images
- Drop shadows on text
- Blinking text
- Under construction signs
- Splash screens or “zero content” site covers
- Parenthetical links
- Browser endorsements
- Putting important textual information in an image
- Using the text “Click here” for links
- Using sounds without a navigation bar to control them