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