Modern Web Development:
A Vision to Reclaim Hypertext for Universal Design

Nate Koechley (nate [at] koechley [dot] com)
Senior Web Developer, Platform Design
User Experience and Design

Thanks and Welcome!

Thanks to our hosts and attendees, and congrats to MSU on the beautiful new center

Casual format: please interrupt, question and contribute

Universal Design

"The design of products and environments to be usable by all people, to the greatest extent possible, without the need for adaptation or specialized design."

Ron Mace,

Seven Principals of Universal Design

  1. Equitable Use
  2. Flexibility in Use
  3. Simple and Intuitive
  4. Perceptible Information
  5. Tolerance for Error
  6. Low Physical Effort
  7. Size and Space for Approach and Use
The Center for Universal Design (1997). NC State University

Industry Accepted

Pacific Bell Universal Design Policy:

"The quality of access is far superior when it is incorporated into the structural design from the beginning."

"It is much more cost effective to design access at the blueprint stage than to add access on later, through retrofits and reconstructions."


Universal is a powerful frame for thinking about appropriate design. It's not the Accessibility Wide Web - it's the World Wide Web.

Origins on the Web: The Vision of Hypertext

Hypertext is text which contains links to other texts ( definition | history)

The World Wide Web is a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documents (1st Int'l WWW Conference)

No conflict...

There is no conflict between Universal Design and the philosophical and technological underpinnings of Hypertext and the World Wide Web

Then how did we get off track?

It's no surprise that we're just now getting around to this:

  1. Poor technology-the need to hack
  2. Optimization
  3. The speed of business and innovation

Important to get back on track

How do we get back on track?

  1. Graded Browser Support
  2. Core Experience Design
  3. Progressive Enhancement
    • Structure and Semantics with Markup
    • Presentation with Cascading Style Sheets
    • Behavior with JavaScript

1) Graded Browser Support

1) Graded Browser Support

2) Core Experience Design

Strength comes from a solid foundation

2) Core Experience Design: Content

Example: Content then style

2) Core Experience Design: Interaction

Example: Choosing a date

3) Progressive Enhancement

Progressive Enhancement: Markup/Presentation: HTML + CSS

Progressive Enhancement: Behavior: Javascript & DOM


Successful way to frame the issues

Bonus Slide: So many browsers!