Web Design - Web Development and Design Foundations with XHTML - page 200

Table 5.1 Web Design Best Practices Checklist

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

❏

Displays without horizontal scrolling at 1024 × 768 and higher resolutions

7.

❏ 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 browser window at 1024 × 768 resolution

❏

11. Home page has compelling, interesting information above the fold (before scrolling down) at 1024 × 768

resolution

❏ 12. Home page downloads within 10 seconds on dial-up connection

Browser Compatibility
❏

1. Displays on current versions of Internet Explorer (7+)

❏

2. Displays on current versions of Firefox (3+)

❏

3. Displays on current versions of Opera (9+)

❏

4. Displays on current versions of Safari (both Mac and Windows)

❏

5. Displays on current versions of Google Chrome

Navigation
❏

1. Main navigation links are clearly and consistently labeled

❏

2. Navigation is easy to use for target audience

❏

3. If image, Flash, or DHTML is the main navigation, clear text links are in the footer section of the page

(accessibility)

❏

4. Navigational aids, such as site map, skip to content link, or breadcrumbs, are used

❏

5. All navigation hyperlinks work

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 slow download significantly

❏

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