Reprinted from The Triangle TechJournal

Rest in peace to the past strategies of web design; Progressive Enhancement is dancing on their graves.

As we all know by now, the primary goal of web design is to allow users to easily access and find the information they want. Sounds easy enough - but the trick becomes effectively meeting this goal with the wide array of browsers in today's world. No business wants to limit its audience because an individual is unable to access its information through a PDA, cell phone, or text reader. And it's no secret that with each passing day, we become more mobile, and as a result, information must be able to be accessed “on the go." Currently, achieving such audience reach is done through graceful degradation, which often follows the approach of designing for a target browser such as a previous version of Internet Explorer for Windows. Graceful degradation allows a site to “step down" in such a manner that it continues to operate, but provides a reduced level of service rather than failing completely. Great in principle, but unfortunately, in the world of non-desktop Web browsers - whose devices do not necessarily have the memory, bandwidth, or resolution capabilities to display such pages - the concept simply fails. And this is where progressive enhancement makes its play.

Progressive enhancement is an approach to web design that builds documents for the least capable devices first, then moves on to enhance those documents with separate logic for presentation, in ways that do not place an undue burden on baseline devices but which allow a richer experience for those users with modern graphical browser software. It uses one markup document and a variety of different stylesheets to provide a progressive, gradually enhanced experience across a wide variety of browsers. Progressive enhancement uses longstanding characteristics of markup, bugs in various browsers, and other tactics to place a renewed focus on information delivery - relying on the client request to determine the appropriate style rather than on browser sniffing. According to Steven Champeon, author of “Progressive Enhancement and the Future of Web Design," the idea is to separate not only the structure from its presentation, but also to make distinctions between what content needs to arranged in what way for the lowest common denominator browsers, and how to build on that structure, adding more features for those browsers that can handle them.

The rationale behind supporting progressive enhancement is that it:

• Recognizes that new devices, not just legacy software, do not support advanced technologies
• Defines graceful degradation in terms of current capabilities, not in terms of legacy or obsolete software
• Embraces accessibility, universality, and peaceful coexistence with more feature-rich browsers/devices
• Allows for adoption of new technology and strategies without leaving any browser/device behind
• Allows for future compatibility with new technology by embracing more robust standards and technology

And by employing progressive enhancement, businesses are able to realize such advantages as:

• Reduction in the maintenance time required to implement site content changes
• Lower cost of ownership of the organization's site
• Guaranteed availability of timely, accurate information
• Wider audience reach and greater customer retention through the ability to accommodate a variety of browsers

So how do we get from here to there? Strategies for implementing progressive enhancement include:

• Start with the lowest common denominator as the baseline
• Design for semantics and structure
• Add features appropriate for baseline devices
• Add features appropriate for accessibility
• 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
• Server-side fallback for client-side form validation
• Add workarounds/hacks for recalcitrant browsers
• Define styles for modern graphical browsers

As we have seen, Internet technology is moving at an exponential speed. More and more devices in diversified forms are available for users to access information. Therefore, it is becoming imperative that organizations create Web sites that are able to accommodate this wider audience. Progressive enhancement presents a viable approach by enabling the delivery of information as demanded by the users, while embracing accessibility, future compatibility, and determining user experience based on the capabilities of new devices. It is progressive enhancement that has stemmed the mantra of “Prepare once, present anywhere." And it is our goal to not leave anyone behind.