Hands-On Exercise for Chapter 3

URL of website: https://communitylibrarysedona.org

Name of website: Community Library Sedona

Target Audience: Locals of Sedona, AZ

Screenshot of the home page

Types of navigation evident: Navigation bar, Site Search bar, Catalog search, Contact/Hours/Locations/Account/Social Media Bar

Design Principles of contrast, repetition, alignment, and proximity:

Check sheet:

1. Consistent site header/logo

□ 2. Consistent navigation area YES

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

□ 4. Page footer area�copyright, last update, contact e-mail address YES; Copyright, contact email address is under contact link at top of page

□ 5. Good use of basic design principles: repetition, contrast, proximity, and alignment YES; Shows recent events, calendar events, and explore more section

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

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

□ 8. The viewport meta tag is used to enhance display on smartphones YES

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

Navigation Criteria

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

□ 2. Navigation is structured within an unordered list YES

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

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

Color and Graphics Criteria

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

□ 2. Color is used consistently YES

□ 3. Background and text colors have good contrast YES

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

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

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

□ 7. Each graphic used serves a clear purpose YES

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

□ 9. Animated images do not distract from the site and do not loop endlessly Don�t distract, but loop endlessly

Multimedia Criteria

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

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

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

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

Content Presentation Criteria

□ 1. Common fonts such as Arial or Times New Roman are used YES, but Aptly font is also used

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

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

□ 4. Content provides meaningful, useful information YES

□ 5. Content is organized in a consistent manner YES

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

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

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

□ 9. Avoids the use of �Click here� when writing text for hyperlinks YES

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

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

Functionality Criteria

□ 1. All internal hyperlinks work YES

□ 2. All external hyperlinks work YES

□ 3. All forms function as expected YES

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

Additional Accessibility Criteria

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

□ 2. The html element�s lang attribute indicates the spoken language of the page YES

Browser Compatibility Criteria

□ 1. Displays on current versions of Edge, Internet Explorer, Firefox, Safari, Chrome, and Opera <script type="speculationrules"> is not supported by firefox and Safari

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

Recommendations:

An option to change the white background to black and make black text white.