Modern Web Development:
A Vision to Reclaim Hypertext for Universal 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."

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

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."

Summary

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 (w3.org 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

• Int'l growth rates exceeding domestic
• Acceleration of browser proliferation
• Explosion of devices
• Increasing focus of US and Int'l law
• Mature technology removes old excuses
  • Problems can be solved without generating worse dilemmas downstream
• No longer an option to ignore or postpone

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

• Web development supporting information access
• Support isn't binary, but graded

1) Graded Browser Support

• C-Grade
  • Core Experience
  • Blacklist + Nag Bar
• B-Grade
  • Full Experience w/ Nag Bar
• A-Grade
  • Whitelist
  • Active QA
  • Full Experience

2) Core Experience Design

• What is the goal / core task?
• What is the (hypertext) flow?

Strength comes from a solid foundation

2) Core Experience Design: Content

Example: Content then style

• The core content experience
  
• Same content, with CSS
  

2) Core Experience Design: Interaction

Example: Choosing a date

• The core experience is to enter with the date via form elements, a fundamental part of HTML since the old days.
• For browsers with basic Javascript, a popup window can be triggered letting the user click to choose from a graphical calendar.
• For dhtml-ready browsers, a pop-up div allows them to choose a data from a graphical calendar without leaving the page.

3) Progressive Enhancement

• Frame the issue around enhancement not degradations
• Innovate to provide enhancement
• Safe, because core is sound

Progressive Enhancement: Markup/Presentation: HTML + CSS

• Semantic markup
• Hierarchy of content
• Progressive loading + Source order
• Pseudo-classes (:hover, :focus)
• Increased responsiveness
• More precise visual language
• Cheap images

Progressive Enhancement: Behavior: Javascript & DOM

• Remember, an enhancement
• Keep markup pure
• Maintain accessibility
  • Don't use onchange or onblur
  • Equality between mouse and keyboard
• Protect scripts with method checks
• Don't detect user-agent strings

Summary

• Support ALL through Graded Browser Support
• Design a core experience, and then have fun with...
• Progressive Enhancement

Successful way to frame the issues

Bonus Slide: So many browsers!

• At least nine new browsers in October alone!
  • Red Browser, Avant Browser, Slim Browser, Listleaf, Optimal Desktop, FastStone, Wichio Browser, 3B Browser
• C|Net downloads lists over 115 browser - for Windows alone!
• At my job, we've logged nearly 200 browsers recently, just desktops
• Another 45+ for mobile devices
• Pervasive computing (nearly 6B devices in the market already)