Progressive enhancement is a strategy in

web design Web design encompasses many different skills and disciplines in the production and maintenance of websites. The different areas of web design include web graphic design; user interface design (UI design); authoring, including standardised code a ...

that puts emphasis on

web content Web content is the text, visual or audio content that is made available online and user encountered as part of the online usage and experience on websites. It may include text, images, sounds and audio, online videos, among other items place ...

first, allowing everyone to access the basic content and functionality of a web page, while users with additional browser features or faster Internet access receive the enhanced version instead. This strategy speeds up loading and facilitates crawling by

web search engine A search engine is a software system that provides hyperlinks to web pages, and other relevant information on World Wide Web, the Web in response to a user's web query, query. The user enters a query in a web browser or a mobile app, and the sea ...

s, as text on a page is loaded immediately through the

HTML Hypertext Markup Language (HTML) is the standard markup language for documents designed to be displayed in a web browser. It defines the content and structure of web content. It is often assisted by technologies such as Cascading Style Sheets ( ...

source code rather than having to wait for JavaScript to initiate and load the content subsequently, meaning content ready for consumption "out of the box" is served immediately, and not behind additional layers. This strategy involves separating the presentation semantics from the content, with presentation being implemented in one or more optional layers, activated based on aspects of the browser or

Internet The Internet (or internet) is the Global network, global system of interconnected computer networks that uses the Internet protocol suite (TCP/IP) to communicate between networks and devices. It is a internetworking, network of networks ...

connection of the client. In practice, this means serving content through

, the "lowest common denominator" of web standards, and applying styling and animation through CSS to the technically possible extent, then applying further enhancements through

JavaScript JavaScript (), often abbreviated as JS, is a programming language and core technology of the World Wide Web, alongside HTML and CSS. Ninety-nine percent of websites use JavaScript on the client side for webpage behavior. Web browsers have ...

. Deprecated

Adobe Flash Adobe Flash (formerly Macromedia Flash and FutureSplash) is a mostly discontinuedAlthough it is discontinued by Adobe Inc., for the Chinese market it is developed by Zhongcheng and for the international enterprise market it is developed by Ha ...

could be thought of as having shared the final spot with JavaScript while it was widely in use. Since web browsers can load site features to the extent supported rather than failing to load the entire site due to one error or missing feature in JavaScript, a progressively enhancing site is more stable and backwards compatible.

History

"Progressive enhancement" was coined by Steven Champeon and Nick Finck at the

SXSW South by Southwest (SXSW) is an annual conglomeration of parallel film, interactive media, and music festivals and Convention (meeting), conferences organized jointly that take place in mid-March in Austin, Texas. It began in 1987 and has conti ...

Interactive conference on March 11, 2003, in Austin, and through a series of articles for Webmonkey which were published between March and June 2003. Specific Cascading Style Sheets (CSS) techniques pertaining to flexibility of the page layout accommodating different screen resolutions is the concept associated with the

responsive web design Responsive web design (RWD) or responsive design is an approach to web design that aims to make web pages render well on a variety of devices and window or screen sizes from minimum to maximum display size to ensure usability and satisfactio ...

approach. In 2012, net Magazine chose Progressive Enhancement as #1 on its list of Top Web Design Trends for 2012 ( responsive design was #2).

Google Google LLC (, ) is an American multinational corporation and technology company focusing on online advertising, search engine technology, cloud computing, computer software, quantum computing, e-commerce, consumer electronics, and artificial ...

has encouraged the adoption of progressive enhancement to help "our systems (and a wider range of browsers) see usable content and basic functionality when certain web design features are not yet supported".

Introduction

The strategy is an evolution of a previous web design strategy known as graceful degradation, wherein Web pages were designed for the latest browsers first, but then made to work well in older versions of browser software. Graceful degradation aims to allow a page to "degrade" – to remain presentable and accessible even if certain technologies expected by the design are absent. In progressive enhancement the strategy is deliberately reversed: The

is created with a markup document, geared towards the lowest common denominator of browser software functionality. If content is to be revealed interactively through JavaScript, such as a collapsible navigation menu, the HTML markup reveals all the content by default and JavaScript itself hides some of the content. The developer adds all desired functionality to the presentation and behavior of the page, using modern CSS,

Scalable Vector Graphics Scalable Vector Graphics (SVG) is an XML-based vector graphics format for defining two-dimensional graphics, having support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium sin ...

(SVG), or

Background

The progressive enhancement approach is derived from Champeon's early experience () with

Standard Generalized Markup Language The Standard Generalized Markup Language (SGML; ISO 8879:1986) is a standard for defining generalized markup languages for documents. ISO 8879 Annex A.1 states that generalized markup is "based on two postulates": * Declarative: Markup should de ...

(SGML), predating HTML and other Web presentation languages. Writing content with semantic markup and considering the presentation of the content separately, rather than being embedded in the markup itself, is a concept referred to as the rule of ''separation of presentation and content''''''. Champeon expressed a hope that, since

web browser A web browser, often shortened to browser, is an application for accessing websites. When a user requests a web page from a particular website, the browser retrieves its files from a web server and then displays the page on the user's scr ...

s provide a default presentation style for HTML content, this would result in websites with their content written as semantic HTML, leaving presentation choice to the web browser. However, the needs of web designers led to the

standard being extended with hardcoded features that allowed HTML content to prescribe specific styles, and taking away this option from consumers and their web browsers. These features forced publishers to choose between adopting a new disruptive technologies or allowing content to remain accessible to audiences that used other browsers, a dilemma between design and compatibility. During the 1990s, an increasing number of websites would not work in anything but the latest versions of popular browsers. This trend reversed after the 1990s, once CSS was widely supported, through grassroots educational efforts (from Eric Costello, Owen Briggs, Dave Shea, and others) showing Web designers how to use CSS for layout purposes.

Core principles

The progressive enhancement strategy 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 externally linked JavaScript. * End-user web browser preferences are respected.

Support and adoption

*In August 2003 Jim Wilkinson created a progressive enhancement wiki page 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

(such as

Ajax Ajax may refer to: Greek mythology and tragedy * Ajax the Great, a Greek mythological hero, son of King Telamon and Periboea * Ajax the Lesser, a Greek mythological hero, son of Oileus, the king of Locris * Ajax (play), ''Ajax'' (play), by the an ...

) to provide flexible, but powerful, user experiences. * Aaron Gustafson wrote a series for A List Apart covering the fundamentals of progressive enhancement, from the underlying philosophy to CSS approaches to how to handle JavaScript. * CSS Zen Garden by Molly Holzschlag and Dave Shea, spread the adoption of the term to refer to CSS-based design strategies. * Organizations such as the Web Standards Project (WaSP), which was behind the creation of Acid2 and Acid3 tests, have embraced progressive enhancement as a basis for their educational efforts. * In 2006 Nate Koechley at

Yahoo! Yahoo (, styled yahoo''!'' in its logo) is an American web portal that provides the search engine Yahoo Search and related services including My Yahoo, Yahoo Mail, Yahoo News, Yahoo Finance, Yahoo Sports, y!entertainment, yahoo!life, and its a ...

made extensive reference to progressive enhancement in his own approach to Web design and browser support, Graded Browser Support (GBS). * Steve Chipman at AOL has referred to progressive enhancement (by DOM scripting) as a basis for his Web design strategy. * David Artz, leader of AOL's 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. * Progressive enhancement is used in the front ends of

MediaWiki MediaWiki is free and open-source wiki software originally developed by Magnus Manske for use on Wikipedia on January 25, 2002, and further improved by Lee Daniel Crocker,mailarchive:wikipedia-l/2001-August/000382.html, Magnus Manske's announc ...

-powered sites such as

Wikipedia Wikipedia is a free content, free Online content, online encyclopedia that is written and maintained by a community of volunteers, known as Wikipedians, through open collaboration and the wiki software MediaWiki. Founded by Jimmy Wales and La ...

, as it is readable, navigable, and even editable using the basic HTML interface without styling or scripts, though is enhanced by such. For example, the wikitext editor's toolbar is loaded and operates through JavaScript. * Chris Heilmann discussed 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 proposed a "Test-Driven Progressive Enhancement", recommending to test the device capabilities (rather than inferring them from the detected

user agent On the Web, a user agent is a software agent responsible for retrieving and facilitating end-user interaction with Web content. This includes all web browsers, such as Google Chrome and Safari A safari (; originally ) is an overland jour ...

) before providing enhancements. * Wt is an open-source server-side web application framework which transparently implements progressive enhancement during its bootstrap, progressing from plain HTML to full Ajax.

Benefits

Accessibility, compatibility, and outreach

Web pages created according to the principles of progressive enhancement are by their nature more accessible, backwards compatible, and

outreach Outreach is the activity of providing services to any population that might not otherwise have access to those services. A key component of outreach is that the group providing it is not stationary, but mobile; in other words, it involves meetin ...

ing, because the strategy demands that basic content always be available, not obstructed by features or scripting that may be easily disabled, unsupported (e.g. by

text-based web browser A text-based web browser is a web browser that renders only the text of web pages, and ignores most graphic content. Under small bandwidth connections, usually, they render pages faster than graphical web browsers due to lowered bandwidth deman ...

s), or blocked on computers in sensitive environments. 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 progressive enhancement sites work with older tools designed to deal with table layouts, " tag soup", and the like.

Speed, efficiency, and user control

The

client (computing) is a computer that gets information from another computer called server in the context of client–server model of computer networks. The server is often (but not always) on another computer system, in which case the client accesses the servi ...

is able to select which parts of a page to download beyond basic HTML (e.g. styling, images, etc.), and can opt only to download parts necessary for desired usage to speed up loading and reduce bandwidth and power consumption. For example, a client may choose to only download basic HTML, without loading style sheets, scripts, and media (e.g. images), due to low internet speeds caused by geographical location, poor cellular signal, or throttled speed due to exhausted high-speed data plan. This also reduces bandwidth consumption on the server side. In comparison, pages whose initial content is loaded through AJAX require the client to inefficiently run JavaScript to download and view page content, rather than downloading the content immediately.

Search engine optimization (SEO)

Improved results with respect to

search engine optimization Search engine optimization (SEO) is the process of improving the quality and quantity of Web traffic, website traffic to a website or a web page from web search engine, search engines. SEO targets unpaid search traffic (usually referred to as ...

(SEO) is another side effect of a progressive enhancement-based Web design strategy. Because the basic content is always accessible to search engine spiders, pages built with progressive enhancement methods avoid problems that may hinder search engine indexing, whereas having to render the basic page content through JavaScript execution would make crawling slow and inefficient.

Criticism and responses

Some skeptics, such as Garret Dimon, have expressed their concern that progressive enhancement is not workable in situations that rely heavily on JavaScript to achieve certain user interface presentations or behaviors. Laurie Gray (Information Architect at KnowledgeStorm) countered with the point that informational pages should be coded using progressive enhancement in order to be indexed by search engine spiders. Geoff Stearns (author of SWFObject, a popular Flash application) argued that Flash-heavy pages should be coded using progressive enhancement. Designers Douglas Bowman and Bob Stein expressed 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.