Validation

• Web pages validate using W3C Markup and CSS Validation Tools

DOC type

• Include a DOC type definition. See Fix Your Site With the Right DOCTYPE!

Broken Links.

• Check for broken links often using a link checker. See: W3C Link Checker

Underlines

• Never use underlines within your text. They will be confused with hyperlinked text.

Clickable Email Addresses

• Make all email addresses visible. When adding a hyperlink to an email address, the email address should be visible. Examples:
  
  
  Correct Email the webmaster: tracey@uainfo.arizona.edu
  Incorrect: Email the Webmaster

Click Here

• The hyperlinked portion of text should be the title of the page you are linking to or a similar descriptive title that conveys where the link will take you. Examples:
  
  Correct: For more information see: Network Services
  Incorrect: More Information on Network Services
  Incorrect: Click Here for Network Services

Changing the Color of Link States

• It is better to use the default text link colors (blue for unvisited link and purple for a visited link). Changing the default link colors can cause confusion for your users.

Match Link Titles with Their Destination Page

• Make the link text consistent with the title or headings on the destination page. Closely matched links and destination targets help provide the necessary feedback to users that they have reached the intended page.

Use Semantically Correct Markup

• Semantically correct markup uses html elements in the way they were intended to be used. Do not use CSS to make an HTML element look like another HTML element, for instance by using a <span> element instead of an <h1> element to mark up a heading. By using semantic HTML, you will make the content’s structure meaningful to any browser or device that displays your web page.

• For headings, use heading elements starting with H1 for the highest level, H2 for the next highest, etc.
• Use the <p> element to mark up paragraphs. Do not use the <br/> element to create space between paragraphs. Margins between paragraphs are handled by CSS, and requires paragraphs to be marked up correctly.
• For list of things, use unordered or ordered list elements
• Use Tables for tabular data. For page layout, use CSS.

Purpose Statement:

• A homepage should clearly communicate the site's purpose. Don’t display an entire mission statement but very concisely state the resources and services provided on the site.

Eliminate All Happy Talk

• All text on a webpage should be as concise as possible with all non essential information removed. Happy talk is the self-congratulatory promotional type text seen on many webpages. Phrases like “Welcome to our website!”, “we provide the best ever…” , “Thank you for visiting our website!” should be eliminated.

Use Familiar Words

• Use words that are familiar to your users and avoid the use of jargon. If acronyms and abbreviations are used, they should be defined on the page. Reviewing your site’s search engine statistics can give you a clue what words your users are looking for.

Homepage Link

• Create an easy and obvious way for users to quickly return to the homepage of the website from every page within your website.

Use Text for Links

• Use text links rather than graphics for hyperlinks. In general, text links are more easily recognized as clickable, they download faster, and it is usually easier to convey a link’s destination in text, rather than with the use of an image.

Readability

• Centered text is harder to read than left-aligned text; Text in all caps takes up extra space and slows down reading; Serif and sans-serif type both seem to work about the same; Use high contrast between background color and type. Best contrast is black type on white background. If you want a colored background, keep it light. If you use a background image, keep it very simple if text is displayed on top of the image.

Fluid layout

• Use a fluid layout that automatically adjusts the page size to monitor resolution.

Font Sizes

• Allow the user to over ride the font size easily by using non-fixed font sizing.

• As a base font size for a document, 1em (or 100%) is equivalent to setting the font size to the user's preference. Use this as a basis for your font sizes, and avoid setting a smaller base font size
• Avoid sizes in em smaller than 1em for text body, except maybe for copyright statements or other kinds of "fine print."

Avoid Gratuitous use of Flash and Animated Images

• Animated graphics and flash images should not be used unless they illustrate an important concept within your website. Usability test have shown that animations distract users from the content on a page. If their only purpose is decoration, they should not be avoided.

Don’t break the Back Button

• Use standard redirects instead of a “refresh” to redirect a website. With Refresh, every time the user clicks Back, the browser returns to a page that bounces the user forward again. Use HTTP redirects instead.

Don’t let your images be picked up by crawlers

• It can be a waste of bandwidth and you probably don't want your images out there like that. If you don't want your images indexed and available through a search, consider creating a robots.txt file in your root directory with something like:

User-Agent: *

Disallow: /images/

or:

User-Agent: *

Disallow: *.jpg

Disallow: *.jpeg

Disallow: *.gif