Web Design Best Practices Checklist

It is our goal to help make your choice in web design companies as easy as possible. Because of this, we have created a few pages with important information in printable form. They can also be sent to your e-mail or to someone else's with the form at the bottom of the page. Print or send all three so you can refer back to them at your leisure.

Page Layout
1. Appealing to target audience
2. Consistent site header/logo
3. Consistent navigation area
4. Informative page title that includes the company/organization/site name
5. Page footer area — copyright, last update, contact e-mail address
6. Good use of basic design principles: repetition, contrast, proximity, and alignment
7. Displays without horizontal scrolling at 800x600 and higher resolutions
8. Balance of text/graphics/white space on page
9. Good contrast between text and background
10. 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 800x600 resolution
11. Home page has compelling, interesting information above the fold (before scrolling down) at 800x600
12. Home page downloads within 10 seconds on dial-up connection

Browser Compatibility
1. Displays on current versions of Internet Explorer (6+)
2. Displays on current versions of Firefox (2+)
3. Displays on current versions of Opera (9+)
4. Display on current versions of Safari (both Mac and Windows)

Navigation
1. Main navigation links are clearly and consistently labeled
2. Navigation is easy to use for target audience
3. If images, Flash, or DHTML is the main navigation, clear text links are in the footer section of the page (accessibility)
4. Navigation is structured in an unordered list (accessibility)
5. Navigation aids, such as site map, skip navigation link, or breadcrumbs are used (accessibility)
6. All navigation hyperlinks "work" — are not broken

Color and Graphics
1. Use of different colors in page backgrounds/text is limited to a maximum of three or four
2. Color is used consistently
3. Color has good contrast with associated text
4. Color is not used alone to convey meaning (accessibility)
5. Use of color and graphics enhances rather than distracts from the site
6. Graphics are optimized and do not significantly slow download
7. Each graphic used serves a clear purpose
8. Image tags use the alt attribute to configure alternate text to display if the browser or user agent does not support images (accessibility)
9. Animated images do not distract from the site and either do not repeat or only repeat a few times

Multimedia
1. Each audio/video/Flash file used serves a clear purpose
2. The audio/video/Flash files used enhance rather than distract from the site
3. Captions are provided for each audio or video file used (accessibility)
4. Download times for audio or video files are indicated
5. Links to downloads for media plug-ins are provided

Content Presentation
1. Common fonts such as Arial or Times New Roman are used
2. Techniques of writing for the Web are used: headings, bullet points, short sentences in short paragraphs, use of white space, etc.
3. Fonts, font sizes, and font colors are consistently used
4. Content provides meaningful, useful information
5. Content is organized in a consistent manner
6. Information is easy to find (minimal clicks)
7. Timeliness: The date of the last revision and/or copyright date is accurate
8. Content does not include outdated material
9. Content is free of typographical and grammatical errors
10. Content provides links to other useful sites
11. Avoids the use of "Click here" when writing text for hyperlinks
12. If standard link colors are not used, hyperlinks use a consistent set of colors to indicate visited/nonvisited status
13. If graphics and/or media is used to convey meaning, the alternate text equivalent of the content is provided (accessibility)

Functionality
1. All internal hyperlinks work
2. All external hyperlinks work
3. All forms function as expected
4. No JavaScript errors are generated

Accessibility
1. If images, Flash, or DHTML is the main navigation, clear text links are in the footer section of the page
2. Navigation is structured in an unordered list
3. Navigation aids, such as site map, skip navigation link, or breadcrumbs are used
4. Color is not used alone to convey meaning
5. Image tags use the alt attribute to configure alternate text to display if the browser or user agent does not support images
6. If graphics and/or media is used to convey meaning, the alternate text equivalent of the content is provided
7. Captions are provided for each audio or video file used
8. Use attributes designed to improve accessibility such as title and summary when appropriate
9. Use the id and headers attributes to improve the accessibility of table data
10. If the site uses frames, use frame titles and place meaningful content in the noframes area
11. To assist screen readers configure the html element's lang and xml:lang attribute to indicate the spoken language of the page.

Article Source: http://myarticlezine.com

Get Website Designing and SEO Consultancy from Komail Noori, a Web Site Design - SEO Expert

Please Rate this Article

5 out of 54 out of 53 out of 52 out of 51 out of 5 

Not yet Rated