universal web design

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

Prototype 3: UNC Student Government


One of my original intentions coming into this project was to attempt a redesign of the UNC-CH website, which has frustrated me for four years now. I wanted to put it on par with (or better than) other major university websites that have a much clearer structure as well as a stronger visual appeal. Furthermore, my diagnostic tests indicated that the website has some accessibility issues. It is time for a change, but I doubted that any work I would do would actually be used, since I would only have a few weeks left at the University to push it through.

I had decided to do it anyways for demonstration purposes, but I was subsequently presented with the opportunity to work with Matt Tepper, the school's new student body president. He had discussed student organization websites with the UNC Disabilities Services coordinator, and when I mentioned my research, we became interested in working together to design the new student government site. The goal was to develop a fantastic site that will help bridge the gap between government and the student body as well as make a site that will be the benchmark for accessibility for other student organizations.

The plan was that I would help conceptualize the site and design the layout, and then I would pass the torch to two fellow CS majors -- Andrew Synowiez and Aamer Abbas -- to do the backend work after I graduate.

Process and Results

I approached this project as I would any other new project, but with a clear universal model from the outset. After I designed a rough model of the site in a graphics editor, I followed my own suggestions presented here and structured the content using strict XHTML, with a lot of foresight into the logical flow. I then created the style sheet needed to produce the desired visual effect. The result was pleasing, and we chose to go forward with it.

Accessible Site Prototype
Click to view new site
View Site Prototype: as designed using compliant XHTML, CSS, and accessibility techniques.
Screenshot: to see the site's presentation as rendered using CSS and XHTML.
Validation: Valid XHTML 1.0 Strict (0 errors)
Section 508: Bobby 508 Approved = 0 errors
WCAG: Bobby AAA Approved = 0 errors
Code Ratio: 3.17 = (6,228 / 1,959)

Source Code

Benefits and Tradeoffs:

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