universal web design

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

Prototypes

The research and discussion thus far has established several things about the current state of the Web and its accessibility for users with disabilities:

  1. The problem of accessibility exists and has only drawn the attention of a small group of people. Most commercial sites, out of fear of losing customers, design sites that are visually appealing but perpetuate not only bad coding -- which hurts bandwidth and technological progress -- but a disregard for the non-"normal" members of the audience.
  2. People fear change because it seems they will lose too much money or too much creativity if they design sites to comply with Web standards or accessibility guidelines.
  3. Fixing an inaccessible site is difficult if you do not support the reason behind the redesign.

I argue, however, that conceiving and developing a site with universality as the goal is not only the best practice in theory but is also the most practical, efficient, and socially-conscious way of doing things. This website itself is intended to demonstrate the power and simplicity of universal design techniques, but I do not think it is enough to convince anyone.

Thus, I have undertaken the redesign of three public sites to prove that universal design is both possible and liberating. We will see that a table and image-based website that uses clever abuses of HTML to achieve desired visual effects may not be directly transferrable to an XHTML/CSS carbon copy. However, I hope to demonstrate that my modifications to the original designs, while not creating exactly the same effect, actually improve the user experience and lead to a better overall visual presentation (since that is what people are so worried about). The added bonus is that the site makes momentous leaps forward in accessibility to users with disabilities or alternate viewing devices such as PDAs and cellular phones.

In other words,
As stated in my projects main thesis, conceptualizing a site from a universal framework leads to a design that is user-friendly in all scenarios while preserving -- and often enhancing -- the visual creativity that companies, government bodies, and other organizations demand. These prototypes demonstrate the potential of universal Web design and disprove concerns about its limitations.

Reverse Engineering/Creating

I wanted to pick three websites that are not only different in style but also approach, since news sites much pack information on the page, while artistic sites focus on visual appeal over content and consistency. In actuality, the artistic and personal website domains is exactly where most of the advances are being made in compliant design. Thus, I have chosen to tackle a stylistic commercial site, a news or content-heavy site, and a University information website.

Prototype 1: Stylistic commercial site

Space Exploration Technologies Corporation (SpaceX) is undertaking the development of commuter-type spacecraft to serve as an alternative to the space shuttles used by NASA, Russia, and other players in outer space. The site, originally designed by 2Advanced Studios (one of my favorite design boutiques), uses Macromedia Flash, frames, and images to create a pleasurable user experience -- for the sighted user. However, it is currently egregiously inaccessible.

» Visit the SpaceX prototype discussion.

Prototype 2: Content-heavy site

For my next prototype, I decided to reverse-engineer Weather.com, a site which I did not originally find to be very pleasing, but which I predicted would offer quite a challenge. The original site features two columns of blocked-out data, inconsistent font styles, and visually unappealing borders and width changes. The redesign uses nearly all the original layout characteristics but, hopefully, adds a little more flavor -- and, ultimately, accessibility -- to the site.

» Visit the Weather.com prototype discussion.

Prototype 3: UNC-CH informational site

Originally, I had planned on redesigning the UNC Chapel Hill homepage, since it is very below par with other big University websites. However, I found I had the opportunity to work with the new student government administration and the UNC Disabilities Services to develop a new online community to foster communication between the student government and the student body. Thus, my prototype for the new government site will actually be used.

» Visit the UNC Student Government discussion.

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