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.
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 |
---|---|
![]() |
![]() |
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:
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.