universal web design

Jump to 	Content  Jump to Navigation  Jump to Section Info
A survey of Web accessibility and usability

Prototype 2: Weather.com


Weather.com, home page of the Weather Channel, is a vital Web resource for most people surfing the Web. However, the design of the site has remained consistently inaccessible and, for the most part, visually sub-par for years. Rather than picking a news site as my next project, I decided to attempt a reengineering of the Weather Channel's site to continue to push the boundaries of universal Web design.

Disclaimer: All graphics and text used in this prototype belong to and were originally created by Weather.com. They are used in this exercise merely as a demonstration of a certain design technique, and the criticisms or viewpoints discussed herein do not reflect those of Weather.com.

Process and Results

As with SpaceX, I picked apart this site using screenshots instead of using the existing code. I stuck with the original widths rather than attempting to make the site dimensions relative (percent-based, rather than pixel-based), and started the design with a single width delimiting block. I added the top rows, including an inline unordered-list for the top navigation links, and created the necessary banners and search boxes. Then I divided the remaining space into two columns, created a CSS class for a content block, and began making the substyles I would need to achieve the desired effects of each block.

Original Site Accessible Site Prototype
Click to view original site Click to view new site
View Original Site View New Site: as redesigned using compliant XHTML, CSS, and accessibility techniques.
Original Screenshot: to see the site layout if you have an old browser. New Screenshot: to see the new presentation as rendered using CSS and XHTML (the IE rendering).
Validation: This page had 184 HTML 4.0 Transitional errors and 977 XHTML 1.0 Strict errors (1.86 errors per line). Validation: Valid XHTML 1.0 Strict (0 errors)
Section 508: 41 errors, 167 user checks (test). Section 508: Bobby 508 Approved = 0 errors
WCAG: 187 errors; 35.6% of lines of code contain errors (test). WCAG: Bobby AAA Approved = 0 errors
Code Ratio: 13.54 = (38,693 / 2,857) Code Ratio: 3.89 = (3,804 / 14,807)

Source Code

Benefits achieved from the redesign:

Tradeoffs required to make the site accessible:

Summary and Conclusions

I chose this site to re-engineer because I knew it would be difficult. The resulting visual site, coupled with accessibility features and better validation statistics, is a very powerful testimony for the strength of universal design. While the original Weather.com site was not the most elegantly-structured site on the market, it was complex and contained a lot of information. The XHTML/CSS copy is somewhat more attractive, but that was not the point; the purpose of this exercise was to demonstrate the flexibility that can be achieved through creative use of style sheets.

All in all,
Weather.com should buy this code from me. The text is scalable; the site looks better but still achieves their vision; and it is universally accessible.

Validate this page for CSS compliance  Validate this page for XHTML compliance  Validate this page for Section 504 compliance

In this Section

Prototype 1 - SpaceX:
This commercial site blends visual appeal and creativity with proper marketing. The original site uses frames, Flash, large images representing core content, and small fonts. The redux is a tremendous improvement.

Prototype 2 - Weather.com:
The original site -- one of the most popular weather sites on the Web -- is very table-based and lacks consistency. In addition to improving its accessibility, the redesign moves the style forward a bit as well.

Prototype 3 - Student Government:
This prototype for the new UNC Student Government is actually being fully deployed by members of Carolina Consulting (including myself).

« Back to Prototypes

Project Vitals

Author: Greg Lanier
This site was originally created as a course project for Comp190 Enabling Technologies, given by Professor Gary Bishop at the University of North Carolina at Chapel Hill.
UNC : course : prof

Switch: v1 : v2

© 2003 Use but don't abuse