Evaluating websites

To design and create good websites, you must understand what makes a website good or not so good or downright bad. Our entire course is about the criteria for website design, but here are a handful of specific resources that should get you started.

Content & editorial style

Originally published in 1997, but regularly updated, Susan Beck's simple webpage offers some excellent advice about evaluating website content:
Beck, Susan. "Evaluation Criteria from 'The Good, the Bad & the Ugly.'" The Institute for Technology-Assisted Learning at the New Mexico State University. http://lib.nmsu.edu/instruction/evalcrit.html (accessed 1/25, 2008).
"Editorial Style" from Horton, Sarah. "Access by Design Online." http://www.universalusability.com/access_by_design/index.html (accessed 1/26, 2008).

Accessibility & usability

A few of the many applicable sections from Access by Design Online:
- "Favor HTML..." (note: this means HTML/XHTML)
- "Use CSS..."
- "Allow user settings..."
- "Provide alt-text..."
- "Provide a full text description..."
- "Provide blank alt-text"
- "Provide navigation tools"
My favorite brief summary of basic accessibility tips:
W3C Web Accessibility Initiative. "Quick Tips to Make Accessible Web Sites." http://www.w3.org/WAI/quicktips/Overview.php (accessed 1/25, 2008).
Many of these more in-depth tips from the W3 should be useful (although some may require advanced expertise beyond the scope of this course):
W3C Web Accessibility Initiative. "Preliminary Review of Web Sites for Accessibility." http://www.w3.org/WAI/eval/preliminary.html (accessed 1/25, 2008).
Tips for checking for alt-text on images, using the Firefox browser:
- Install Web Developer toolbar. Download the Firefox add-on "Web Developer" which gives you many useful tools for designing and evaluting webpages. After installing this new FF toolbar, from the Images menu, choose "Display Alt Attributes."
- View Source. From the FF View menu, select "Page Source" to see the HTML markup for the page; search for "img" and check that each image tag includes the 'alt' attribute.
- Choose not to display images. From the FF Tools menu, select Options, then click the Content tab. Uncheck the "load images automatically" box and you will see the image-free version of the page (you may need to refresh). More accessible pages will display <alt> text where the images were, or will display nothing (because of any empty, not missing, alt tag, indicating that the missing image isn't important). Less accessible pages will display "broken image" icons, meaning that the <img> tags do not include alt attributes at all.
- View image properties. In FF, right-click any image and choose Properties from the quick menu. If the "alternative text" field display content or "blank," then that image has the alt attribute defined. If the alt-text is "missing," the web designer has not bothered to define any alt-text.

Visual design

Color Contrast Analyzer tool from:
Johansson, David. "Colors on the Web." http://www.colorsontheweb.com/colorcontrast.asp (accessed 1/25, 2008).
"3 Ways to See What Your Colors Look Like to the Color-Blind" tool from:
Newman Services Corp. "Considering the Color Blind: Design Evaluation." http://newmanservices.com/colorblind/default.asp (accessed 1/25, 2008).
A refresher tutorial on the basic principals of graphic design (proximity, alignment, repetition, and contrast):
University at Albany Libraries. "Basic Web Page Layout & Design. http://library.albany.edu/imc/webdesign/page2.html (accessed 1/25, 2008).