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.

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

• graphics support (Mosaic 1.0)
• tables support (Navigator 1.1, Mosaic 2)
• scripting (Navigator 2)
• embedded components (ActiveX, Java, Flash, et al.)
• HTTP Host: header and virtual hosting
• DHTML and Web “apps”

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

• HTML 3.0 from W3C (poor adoption, Arena, Amaya)
• HTML 3.2
• HTML 4.01
• XHTML 1.0
• alternate devices (WAP, XHTML Basic, etc.)
• CSS 1 (IE3, NS4 somewhat, IE4+)
• CSS 2 (IE5.5/6, NS6/Mozilla, Opera, Safari/Konqueror)
• ECMAScript (JavaScript/JScript)

• tables versus stylesheets
• font tags versus stylesheets
• ice, jello, liquid
• pixel perfection versus adaptability
• conservatism of typography versus “edgy” design

• new forms of web publishing
• no longer document centric
• greater functionality
• more complex behavior
• more difficult to support all devices

• Doesn't straddle technology inflection points well
• Many designers don't test anything but one rev back
• Does not address different needs of different audiences
• It's expensive to retrofit to new alternate devices
• Whatever is “good enough” usually rules

• Bandwidth limitations (back to 28Kb/s)
• Memory limitations (bloated pages don't display)
• Display, screen size, resolution limitations
• User interface limitations (client and device)

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.

• recognizes that new devices, not just legacy software, do not (and likely will not) support advanced technologies
• defines graceful degradation in terms of current capabilities, not in terms of legacy or obsolete software
• embraces accessibility, universality, peaceful coexistence with more featureful browsers/devices
• allows for adoption of new tech and strategies without leaving any browser/device behind
• allows for future compatibility with new tech by embracing more robust standards and tech (XHTML, CSS -> XML, XSL/T, etc.)

• start with lowest common denominator (baseline)
• design for semantics and structure
• add features appropriate for baseline devices
  • warnings about display, to be hidden with CSS
  • “skip nav” links
• add features appropriate for accessibility
  • alt, longdesc, title

• add layout markup and stylesheets for structural layout
• add baseline presentational stylesheets using link
  • use semantic markup, add more if necessary/desired
  • determine targets for stylesheets
  • determine necessary workarounds/hacks

• add behavior (scripts, css hover, etc.)
  • ensure all behavior has fallback cases
  • href fallback for onlick
  • server-side fallback for client-side form validation

• add workarounds/hacks for recalcitrant browsers
  • Caio comment hack to hide style rules from Navigator 4.x
  • Fabrice's Inversion to show style rules only to Navigator 4.x
  • @import to avoid legacy graphical browsers
• define styles for modern graphical browsers
  • link to baseline styles, override in subsequent styles
  • Tantek's high pass filter to avoid midrange legacy graphical browsers
  • Owen hack to hide from Opera
  • Box Model Hacks to fix bugs in IE5.5/Win
  • Commented backslash hack to hide from IE5/Mac
  • @import hack for IE5/Mac only

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