Hands-On Exercise for Chapter 3

URL of website: www.sedonalibrary.org

Name of website: Community Library Sedona

Target Audience - gather the community for friendships, ideas and experiences

Screenshot of the home page

Types of navigation evident - navigation bar at the top, event calendar on the left side, featured events on the right, explore more events at the bottom

Design Principles of contrast, repetition alignment and proximity - latest events, some navigation items are grouped

Check sheet:

1. Consistent site header/logo

□ x 2. Consistent navigation area

□ x 3. Informative page title that includes the company/organization/site name

□  4. Page footer area—copyright, last update, contact e-mail address

□ x 5. Good use of basic design principles: repetition, contrast, proximity, and alignment

□ x 6. Balance of text/graphics/white space on page

□ x 7. Home page downloads within 10 seconds on a mobile device

□ x 8. Viewport meta tag is used to enhance display on smartphone

□ x 9. Responsive page layout is configured for smartphone and tablet display

Navigation Criteria

□ x 1. Main navigation links are clearly and consistently labeled

□ x 2. Navigation is structured within an unordered list

□ x 3. When the main navigation consists of images and/or multimedia, the page footer area contains plain text hyperlinks (accessibility)

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

Color and Graphics Criteria

□ x 1. Use of different colors is limited to a maximum of three or four plus neutrals

□ x 2. Color is used consistently

□ x 3. Background and text colors have good contrast

□ x 4. Color is not used alone to convey meaning (accessibility)

□ x 5. Use of color and graphics enhances rather than distracts from the site

□ x 6. Graphics are optimized and do not slow download significantly

□ x 7. Each graphic used serves a clear purpose

□ x 8. Image elements use the alt attribute to configure alternate text (accessibility)

□ x 9. Animated images do not distract from the site and do not loop endlessly

Multimedia Criteria

□ x 1. Each audio or video file used serves a clear purpose

□ x 2. The audio or video files used enhance rather than distract from the site

□  3. Captions or transcripts are provided for each audio or video file used (accessibility)

□  4. The file size is indicated for audio and video downloads

Content Presentation Criteria

□ x 1. Common fonts such as Arial or Times New Roman are used

□ x 2. Techniques of writing for the Web are applied: headings, subheadings, bulleted lists, short sentences in brief paragraphs, use of empty space

□ x 3. Fonts, font sizes, and font colors are consistently used

□ x 4. Content provides meaningful, useful information

□ x 5. Content is organized in a consistent manner

□ x 6. Information is easy to find (minimal clicks)

□  7. Timeliness: The date of the last revision and/or copyright date is accurate

□ x 8. Content is free of typographical and grammatical errors

□ x 9. Avoids the use of “Click here” when writing text for hyperlinks

□ x  10. Hyperlinks use a consistent set of colors to indicate visited/nonvisited status

□ x  11. Alternate text equivalent of content is provided for graphics and media (accessibility)

Functionality Criteria

□ x 1. All internal hyperlinks work

□ x 2. All external hyperlinks work

□ x 3. All forms function as expected

□ x 4. No error messages are generated by the pages

Additional Accessibility Criteria

□ x 1. Use attributes designed to improve accessibility such as alt and title where appropriate

□ x 2. The html element’s lang attribute indicates the spoken language of the page

Browser Compatibility Criteria

□ x 1. Displays on current versions of Edge, Internet Explorer, Firefox, Safari, Chrome, and Opera

□ x 2. Displays on popular mobile devices (including tablets and smartphones)

Recommendations:

Come up with more descriptive phrases instead of putting read here or click here. Add when things were last updated.