universal web design

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

Prototype 1: SpaceX


I discovered this site when I checked out the recent portfolio of 2advanced Studios, which produces pretty slick Flash-based commercial websites. I found the recent addition of Space Exploration Technologies, visited the site, and found it to be a viable candidate for backwards engineering.

Disclaimer: All graphics and text used in this prototype belong to and were originally created by Space Exploration Technologies and 2Advanced Studios. 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 the Space Exploration Technologies or 2Advanced Studios.

Process and Results

To re-engineer the site, I began taking multiple screen shots to capture the needed images. I opted to ignore the Flash movies and just used images in their place. I then ported the content into a basic HTML format with simple header, paragraph, link, list, and div markup. I then wrote the style sheet to mimic the desired effect.

Original Site Accessible Site Prototype
Click to view original site Click to view new site
View Original Site: as created by 2advanced (currently active 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.
Validation: this site is designed using frames, so it is difficult the measure the XHTML 1.0 and HTML 4.0 errors because the Validator is always redirected to the frames page, which does not reflect the entire site. Validation: Valid XHTML 1.0 Strict (0 errors)
Section 508: ? Section 508: Bobby 508 Approved = 0 errors
WCAG: ? WCAG: Bobby AAA Approved = 0 errors
Code Ratio: ? Code Ratio: 2.62 = (5,711 / 2,180)

Source Code

Benefits achieved from the redesign:

Tradeoffs required to make the site accessible:

Summary and Conclusions

To illustrate the power of abstracting the page content from its style/presentation, I have included a feature that will let the visitor remove the style sheet to see how the site would look to a screen-reader or to an older browser such as Netscape 4. Return to the prototype site, click on the "Careers" link at the top in the navigation bar, and observe the structured content. To return to the styled page, click on "Media."

Of course the un-styled version of the prototype is dull and boring, but it illustrates the value of universal design. A complex, visually appealing site can still be designed using proper (X)HTML markup without having to abuse HTML, tables, images, frames, and JavaScript to provide the visual presentation.

All in all,
I think this was a successful prototype exercise. It clearly illustrates that creativity need not be stifled in the pursuit of accessibility. By sticking to clear XHTML, solid CSS markup, and universal-mindedness, one can even improve fantastic visual sites that are nearly inaccessible to the disabled user or one using an alternative viewing device. The ratio of code to content can stay low, thus reducing bandwidth load; full compliance with XHTML, CSS, Section 508 and WCAG standards can be achieved; and the designer can provide a very appealing and pleasurable experience for all users.

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