Page Layout
- Appealing to target audience
- Consistent site header/logo
- Consistent navigation area
- Informative page title that includes the company/organization/site name
- Page footer area - copyright, last updated info, contact info
- Good use of basic design principles: repetition, contrast, proximity, and alignment
- Displays without horizontal scrolling at 1024x768 and higher resolutions
- Balance of text/graphics/white space on page
- Good contrast between text and background
- Repetitive information (header/logo and navigation) takes up no more than one-quarter to one-third of the top portion of the browser window at 1024x768 resolution
- Home page has compelling, interesting information above the fold (before scrolling down) at 1024x768
- Home page downloads within 10 seconds on dial-up connection
Browser Compatibility:
- Displays on current versions of Internet Explorer (7+)
- Displays on current versions of Firefox (2+)
- Display on current versions of Safari
- Display on current versions of Chrome
Navigation:
- Main navigation links are clearly and consistently labeled
- Navigation is easy to use for target audience
- If images, Flash, or DHTML is the main navigation, clear text links are in the footer section of the page (accessibility)
- Navigation is structured in an unordered list (accessibility)
- Navigation aids, such as site-map, skip navigation link, or breadcrumbs are used (accessibility)
- All navigation hyperlinks "work" - are not broken
Color and Graphics:
- Use of different colors in page backgrounds/text is limited to a maximum of three or four
- Color is used consistently
- Color has good contrast with associated text
- Color is not used alone to convey meaning (accessibility)
- Use of color and graphics enhances rather than distracts from the site
- Graphics are optimized and do not significantly slow download
- Each graphic used serves a clear purpose
- Image tags use the alt attribute to configure alternate text to display if the browser or user agent does not support images (accessibility)
- Animated images do not distract from the site and either do not repeat or only repeat a few times
Multimedia:
- Each audio/video/Flash file used serves a clear purpose
- The audio/video/Flash files used enhance rather than distract from the site
- Captions are provided for each audio or video file used (accessibility)
- Download times/file sizes for audio or video files are indicated
- Links to downloads for media plug-ins are provided
Content Presentation:
- Common fonts such as Arial, Tahoma or Times New Roman are used
- Techniques of writing for the Web are used: headings, bullet points, short sentences in short paragraphs, use of white space, etc.
- Fonts, font sizes, and font colors are consistently used
- Content provides meaningful, useful information
- Content is organized in a consistent manner
- Information is easy to find (minimal clicks)
- Timeliness: The date of the last revision and/or copyright date is accurate
- Content does not include outdated material
- Content is free of typographical and grammatical errors
- Content provides links to other useful sites
- Avoids the use of "Click here" when writing text for hyperlinks
- If standard link colors are not used, hyperlinks use a consistent set of colors to indicate visited/non-visited status
- If graphics and/or media is used to convey meaning, the alternate text equivalent of the content is provided (accessibility)
Functionality:
- All internal hyperlinks work
- All external hyperlinks work
- All forms function as expected
- No JavaScript errors are generated
Accessibility:
- If images, Flash, or DHTML is the main navigation, clear text links are in the footer section of the page
- Navigation is structured in an unordered list
- Navigation aids, such as site map, skip navigation link, or breadcrumbs are used
- Color is not used alone to convey meaning
- Image tags use the alt attribute to configure alternate text to display if the browser or user agent does not support images
- If graphics and/or media is used to convey meaning, the alternate text equivalent of the content is provided
- Captions are provided for each audio or video file used
- Use attributes designed to improve accessibility such as title and summary when appropriate
- Use the id and headers attributes to improve the accessibility of table data
- If the site uses frames, use frame titles and place meaningful content in the no frames area
- To assist screen readers configure the html element's lang and xml:lang attribute to indicate the spoken language of the page
http://terrymorris.net/bestpractices