Inclusive Web Design
For the Future
with Progressive Enhancement
Steven Champeon and Nick Finck

Delivered March 11, 2003
at SXSW Austin, TX
http://www.sxsw.com
Permanently archived at:
http://hesketh.com/publications/inclusive_web_design_for_the_future/

En Español (Traducido por: mort (Manuel González Noriega) para Simplelógica)

Introduction

Web design must mature and accept the developments of the past several years, abandon the exclusionary attitudes formed in the rough and tumble dotcom era, realize the coming future of a wide variety of devices and platforms, and separate semantic markup from presentation logic and behavior.

The goal of Web design is not merely to dazzle, but to deliver information to the widest audience possible.

Compromise is possible and desirable, but such compromise should not come at the expense of the user, but rather in terms of the native capabilities of the user's choice of device.

Given the powerful capabilities of modern graphical desktop browsers, it is now possible to provide a progressive, gradually enhanced experience across a wide array of browsers, using one markup document and a variety of different stylesheets, not selectively delivered to the user through browser sniffing, but rather requested by the client itself.

Leave no one behind.

A Brief History of Web Technologies

1984
SGML becomes ISO standard
1991
CERN linemode browser
1993
NCSA Mosaic et al.
1994
Netscape Navigator released, W3C Founded
1995
Microsoft Internet Explorer
1996
The Browser Wars, CSS1, JavaScript, DHTML
1997
HTML 3.2, CSS2, HTML 4.0
1998
XML
2000
XHTML 1.0

Obsolescence of Browsers

“graceful degradation”

Dates back to 1994 WRT the Web, earlier in computer science, other fields. Basic idea is that so long as less capable browsers can handle documents containing newer, perhaps unsupported technologies, and still get at the basic information and/or functionality, everything is fine.

In recent years, though, this has come to mean producing one version of the site without designing in support for less capable browsers, on the assumption that a few alt or title attributes are enough.

Mostly, this is because visual designers and others rightly believe that graphical desktop browsers are what most people use, and so the judgement is made on the basis of economics. But this ignores some basic realities:

  1. browsers, even modern browsers, have widely varying capabilities
  2. accessibility is for everyone, not just the disabled
  3. it is possible to support all browsers with X/HTML and CSS

The Rise of Baseline Standards

Conflicting Approaches to Design

Rise of Web apps and Dynamic HTML

Problems with graceful degradation

Problems posed by new platforms/devices

Progressive Enhancement

Progressive enhancement is a strategy that reaches back into the history of the semantic markup technologies that gave rise to HTML and inspired XML. By making use of new presentation technologies such as CSS, it allows the Web document designer, visual designer, and developer to play to their own strengths while enabling each to deliver the information and interactivity demanded by users, while embracing accessibility, future compatibility, and determining user experience based on the capabilities of new devices.

Instead of placing responsibility on server to determine what to send back to the client, PE uses longstanding characteristics of markup, bugs in various browsers, and other tactics to place a renewed focus on information delivery. Rather than hoping for graceful degradation, PE builds documents for the least capable or differently capable devices first, then moves on to enhance those documents with separate logic for presentation, in ways that don't place an undue burden on baseline devices but which allow a richer experience for those users with modern graphical browser software.

Rationale

Progressive Enhancement Strategies

Strategies, continued

Strategies, continued

Strategies, continued

Resources

CSS Hacks

http://tantek.com/CSS/Examples/
http://css-discuss.incutio.com/?page=CssHacks
http://www.albin.net/CSS/OwenHack.html
http://centricle.com/ref/css/filters/tests/fabrice/
http://css-discuss.incutio.com/?page=CaioHack
http://css-discuss.incutio.com/?page=BoxModelHack

Lists

http://WebDesign-L.com
http://evolt.org
http://css-discuss.org

Books

http://css-discuss.incutio.com/?page=GoodBooks