Progressive enhancement - AbsoluteAstronomy.com

Progressive enhancement is a strategy for web design

Web design

Web design is the process of planning and creating a website. Text, images, digital media and interactive elements are used by web designers to produce the page seen on the web browser...

that emphasizes accessibility, semantic HTML markup

Semantic HTML

Semantic HTML is the use of HTML markup to reinforce the semantics, or meaning, of the information in webpages rather than merely to define its presentation . Semantic HTML is processed by regular web browsers as well as by many other user agents...

, and external stylesheet and scripting technologies. Progressive enhancement uses web technologies in a layered fashion that allows everyone to access the basic content and functionality of a web page, using any browser or Internet connection, while also providing those with better bandwidth, more advanced browser software or more experience an enhanced version of the page.

History

"Progressive Enhancement" was coined by Steven Champeon of hesketh.com in a series of articles and presentations for Webmonkey

Webmonkey

Webmonkey is a popular online tutorial website composed of various articles on building webpages from backend to frontend. The site covers many aspects of developing on the web like programming, database, multimedia, and setting up web storefronts. The content presented is much like Wired magazine...

and the SXSW

South by Southwest

South by Southwest is an Austin, Texas based company dedicated to planning conferences, trade shows, festivals and other events. Their current roster of annual events include: SXSW Music, SXSW Film, SXSW Interactive, SXSWedu, and SXSWeco and take place every spring in Austin, Texas, United States...

Interactive conference between March and June 2003.

Introduction and background

The strategy is an attempt to subvert the traditional web design strategy known as "graceful degradation

Fault-tolerant system

Fault-tolerance or graceful degradation is the property that enables a system to continue operating properly in the event of the failure of some of its components. A newer approach is progressive enhancement...

", wherein designers would create Web pages for the latest browsers that would also work well in older versions of browser software. Graceful degradation was supposed to allow the page to "degrade", or remain presentable even if certain technologies assumed by the design were not present, without being jarring to the user of such older software. In practice, graceful degradation has been supplanted by an attitude that the end user should "just upgrade". This attitude is due to time and budget constraints, limited access to testing alternate browser software, as well as the widespread belief that "browsers are free". Unfortunately, upgrading is often not possible due to IT department policies, older hardware, and other reasons. The "just upgrade" attitude also ignores deliberate user choices and the existence of a variety of browser platforms; many of which run on handhelds or in other contexts where available bandwidth is restricted, or where support for sound or color and limited screen size, for instance, are far different from the typical graphical desktop browser. There is also a large group of Internet users unaware or uncaring about the features of the browser.

In Progressive Enhancement (PE) the strategy is deliberately reversed: a basic markup document is created, geared towards the lowest common denominator of browser software functionality, and then the designer adds in functionality or enhancements to the presentation and behavior of the page, using modern technologies such as Cascading Style Sheets

Cascading Style Sheets

Cascading Style Sheets is a style sheet language used to describe the presentation semantics of a document written in a markup language...

or JavaScript

JavaScript

JavaScript is a prototype-based scripting language that is dynamic, weakly typed and has first-class functions. It is a multi-paradigm language, supporting object-oriented, imperative, and functional programming styles....

(or other advanced technologies, such as Flash

Adobe Flash

Adobe Flash is a multimedia platform used to add animation, video, and interactivity to web pages. Flash is frequently used for advertisements, games and flash animations for broadcast...

or Java applet

Java applet

A Java applet is an applet delivered to users in the form of Java bytecode. Java applets can run in a Web browser using a Java Virtual Machine , or in Sun's AppletViewer, a stand-alone tool for testing applets...

s or SVG

Scalable Vector Graphics

Scalable Vector Graphics is a family of specifications of an XML-based file format for describing two-dimensional vector graphics, both static and dynamic . The SVG specification is an open standard that has been under development by the World Wide Web Consortium since 1999.SVG images and their...

, etc.) All such enhancements are externally linked, preventing data unusable by certain browsers from being unnecessarily downloaded.

The PE approach is derived from Champeon's early experience (c. 1993-4) with SGML

Standard Generalized Markup Language

The Standard Generalized Markup Language is an ISO-standard technology for defining generalized markup languages for documents...

, before working with HTML

HTML

HyperText Markup Language is the predominant markup language for web pages. HTML elements are the basic building-blocks of webpages....

or any Web presentation languages, as well as from later experiences working with CSS to work around browser bugs. In those early SGML contexts, semantic markup was of key importance, whereas presentation was nearly always considered separately, rather than being embedded in the markup itself. This concept is variously referred to in markup circles as the rule of separation of presentation and content
Separation of presentation and content
Separation of presentation and content is a common idiom, a design philosophy, and a methodology applied in the context of various publishing technology disciplines, including information retrieval, template processing, web design, web development, word processing, desktop publishing,...

, separation of content and style, or of separation of semantics and presentation. As the Web evolved in the mid-nineties, but before CSS was introduced and widely supported, this cardinal rule of SGML was repeatedly violated by HTML's extenders. As a result, web designers were forced to adopt new, disruptive technologies

Disruptive technology

A disruptive technology or disruptive innovation is an innovation that helps create a new market and value network, and eventually goes on to disrupt an existing market and value network , displacing an earlier technology there...

and tags in order to remain relevant. With a nod to graceful degradation, in recognition that not everyone had the latest browser, many began to simply adopt design practices and technologies only supported in the most recent and perhaps the single previous major browser releases. For several years, much of the Web simply did not work in anything but the most recent, most popular browsers. This remained true until the rise and widespread adoption of and support for CSS

Cascading Style Sheets

Cascading Style Sheets is a style sheet language used to describe the presentation semantics of a document written in a markup language...

, as well as many populist, grassroots educational efforts (from Eric Costello, Owen Briggs, Dave Shea, and others) showing Web designers how to use CSS for layout purposes.

PE is based on a recognition that the core assumption behind "graceful degradation" — that browsers always got faster and more powerful — was proving itself false with the rise of handheld and PDA

Personal digital assistant

A personal digital assistant , also known as a palmtop computer, or personal data assistant, is a mobile device that functions as a personal information manager. Current PDAs often have the ability to connect to the Internet...

devices with low-functionality browsers and serious bandwidth constraints. In addition, the rapid evolution of HTML and related technologies in the early days of the Web has slowed, and very old browsers have become obsolete, freeing designers to use powerful technologies such as CSS

Cascading Style Sheets

Cascading Style Sheets is a style sheet language used to describe the presentation semantics of a document written in a markup language...

to manage all presentation tasks and JavaScript to enhance complex client-side behavior.

First proposed as a somewhat less unwieldy catchall phrase to describe the delicate art of "separating document structure and contents from
semantics, presentation, and behavior", and based on the then-common use of CSS hacks

CSS filter

A CSS filter is a coding technique used to hide or show CSS markup depending on the browser, version number, or capabilities. Browsers have different interpretations of CSS behavior and different levels of support for the W3C standards...

to work around rendering bugs in specific browsers, the PE strategy has taken on a life of its own as new designers have embraced the idea and extended and revised the approach.

Core principles

Progressive Enhancement consists of the following core principles:

basic content should be accessible to all web browsers
basic functionality should be accessible to all web browsers
sparse, semantic markup contains all content
enhanced layout is provided by externally linked CSS
enhanced behavior is provided by unobtrusive
Unobtrusive JavaScript
"Unobtrusive JavaScript" is a general approach to the use of JavaScript in web pages. Though the term is not formally defined, its basic principles are generally understood to include:...

, externally linked JavaScript
end-user web browser preferences are respected

Support and adoption

Jim Wilkinson created a page for Progressive Enhancement Wiki to collect some tricks and tips and to explain the overall strategy.
Designers such as Jeremy Keith have shown how the approach can be used harmoniously with still other approaches to modern Web design
Web design
Web design is the process of planning and creating a website. Text, images, digital media and interactive elements are used by web designers to produce the page seen on the web browser...

(such as Ajax
Ajax (programming)
Ajax is a group of interrelated web development methods used on the client-side to create asynchronous web applications...

) to provide flexible, but powerful, user experiences.
Others, including Dave Shea
Dave Shea
Dave Shea is an Canadian web designer and co-author of The Zen of CSS Design: Visual Enlightenment for the Web.He is known for his work in web-standard development—from his design community project CSS Zen Garden to his active contributions at the Web Standards Project...

, have helped to spread the adoption of the term to refer to CSS-based design strategies.
Organizations such as the Web Standards Project
Web Standards Project
The Web Standards Project is a group of professional web developers dedicated to disseminating and encouraging the use of the web standards recommended by the World Wide Web Consortium, along with other groups and standards bodies....

have embraced PE as a basis for their educational efforts.
In 2006 Nate Koechley at Yahoo!
Yahoo!
Yahoo! Inc. is an American multinational internet corporation headquartered in Sunnyvale, California, United States. The company is perhaps best known for its web portal, search engine , Yahoo! Directory, Yahoo! Mail, Yahoo! News, Yahoo! Groups, Yahoo! Answers, advertising, online mapping ,...

made extensive reference to PE in his own approach to Web design and browser support, Graded Browser Support (GBS).
Steve Chipman at AOL has referred to PE as a basis for his Web design strategy.
David Artz, leader of the AOL Optimization team, developed a suite of Accessible Rendering Technologies, and invented a technique for disassembly of the “enhancement” on the fly, saving the user's preference.
Chris Heilmann discusses the importance of targeted delivery of CSS so that each browser only gets the content (and enhancements) it can handle.
Scott Jehl of Filament Group introduces "Test-Driven Progressive Enhancement" on A List Apart. The article proposes testing browser capabilities (rather than user-agent detection) before applying enhancements, to ensure a usable experience to the largest audience possible. Ideas in this article led to creation of the EnhanceJS framework.
Wt is a web application library which transparently implements progressive enhancement during its bootstrap, progressing from plain HTML to full Ajax.
EnhanceJS is a Javascript framework maintained by Filament Group designed to improve the application of Progressive Enhancement by first testing browser capabilities for key Javascript and CSS support before applying advanced styles and scripts to the page.

Benefits for accessibility

Web pages created according to the principles of PE are by their nature more accessible, because the strategy demands that basic content always be available, not obstructed by commonly unsupported or easily disabled scripting. Additionally, the sparse markup principle makes it easier for tools that read content aloud to find that content. It is unclear as to how well PE sites work with older tools designed to deal with table layouts, "tag soup

Tag soup

In Web development, "tag soup" refers to formatted markup written for a web page that is very much like HTML but does not consist of correct HTML syntax and document structure...

," and the like.

Benefits for search engine optimization (SEO)

Improved results with respect to search engine optimization

Search engine optimization

Search engine optimization is the process of improving the visibility of a website or a web page in search engines via the "natural" or un-paid search results...

is another side effect of a PE-based Web design strategy. Because the basic content is always accessible to search engine spiders, pages built with PE methods avoid problems that may hinder search engine indexing.

Criticism and responses

Some skeptics, such as Garret Dimon, have expressed their concern that PE is not workable in situations that rely heavily on JavaScript to achieve certain user interface presentations or behaviors. Others have countered with the point that informational pages should be coded using PE in order to be indexed by spiders, and that even Flash-heavy pages should be coded using PE. In a related area, many have expressed their doubts concerning the principle of the separation of content and presentation in absolute terms, pushing instead for a realistic recognition that the two are inextricably linked.

External links

The source of this article is wikipedia, the free encyclopedia. The text of this article is licensed under the GFDL.

History

Introduction and background

Core principles

Support and adoption

Benefits for accessibility

Benefits for search engine optimization (SEO)

Criticism and responses

See also

Further reading

External links