Web Design Best Practices Checklist

Background Information

URL: www.rei.com
Audience:Outdoors/adventurous people
Subject:Sporting Equipment
Developer:exact person unknown

Page Layout

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

Browser Compatibility

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

Navigation

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

Color and Graphics

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

Multimedia

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

Content Presentation

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

Functionality

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

Accessibility

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

Section One

The first thing that I noticed about the website was amount of content on the page. There is top navigation as well as a side navigation and a list of links at the bottom of the page for other resources. The site is fixed in size and pretty small so the content and links are too close together. This proximity of the links makes usability hard for users with poor motor skills and some of the font is a little small which is also hard for people with poor vision. Normally you are not suppose to have green links either because red/green color blindness is the most common form of color blindness, but the site makes use of underlineing the links as well. Other headings that are not links are not underlined, and this gives another hint that the text is a link as well.

The site has clearly labled links and lots of them. The ammount of links on the site take you to specific places and are organized in a good manner. Rei.com makes use of some key features such as shopping by brand, newest items, and top rated. If a user was looking for something specific they could search for it in the clearly identifiable area. The search works very well, I was able to find a number of products I was looking for as well as closely related products.

The Home Page is not very scanable because your eyes want to fixate on all the pictures. The amount of pictures is not distracting but the proximity of the pictures makes it hard to scan the text of the homepage.

Section Two

The first item of the list is the copyright information; the site does not have a footer with the copyright info or with a clear small text navigation. I searched on the terms of use page as well as a few other pages and could not find the copyright information. The do have a list of links at the bottom that almost appear to be the text navigation at the bottom but they are links to other pages. The missing bottom navigation and no footer need to be added for more usability. Also there is not a date for the last update and the contact info is not in a footer as well. Instead of having the contact information in a footer there is page which has all the contact information.

The Navigation is not structured in an unordered list, rather it is in a table form. It was done in a table because of the graphics. Fireworks saves graphical navigation bars in table form and it is a good way for organizing the data.

The site uses out of date code, while the site functions properly there are warnings and errors that HTML tidy found that could easily be fixed. These errors might not be causeing a problem now but they could cause major problems in the long run. The site is using tradition HTML and version 1.0 Java, and could use an update.