What is Progressive Enhancement?

Question

Jeff mentioned the concept of 'Progressive Enhancement' when talking about using JQuery to write stackoverflow.

After a quick Google, I found a couple of high-level discussions about it.

Can anyone recommend a good place to start as a programmer.

Specifically, I have been writing web apps in PHP and would like to use YUI to improve the pages I am writing, but a lot of them seem very JavaScript based, with most of the donkey work being done using JavaScript. To me, that seems a bit overkill, since viewing the site without Javascript will probably break most of it.

Anyone have some good places to start using this idea, I don't really care about the language.

Ideally, I would like to see how you start creating the static HTML first, and then adding the YUI (or whatever Ajax framework) to it so that you get the benefits of a richer client?

Blalock

Link to a blog post for the same: neerajkumar.net/blog/2012/08/19/progressive-enhancement – Thorson

Answer 1

See also Unobtrusive JavaScript which is the bedrock progressive enhancement is built.

Adest

Excellent link there. For some reason, it didn't occur to me to Wikipedia it. :) – Blalock

Answer 2

As you've said

To me, that seems a bit overkill, since viewing the site without Javascript will probably break most of it.

This isn't progressive enhancement. Progressive enhancement is when the site works perfectly without JavaScript or CSS, and then adding (layering) these extra technologies/code to increase the usability and functionality of the website.

The best example I can give is the tag input box on this website. With JavaScript turned off, it would still work allowing you to enter tags separated with a space. With JavaScript turned on, you get a drop down with suggestions of previous entries.

This is progressive enhancement.

Driblet

Answer 3

Going at it from the other direction is sometimes referred to as graceful degradation. This is usually needed when the site is built first with the enhanced functionality afforded by the various technologies then modified to degrade gracefully for browsers with those technologies are not available.

It is also graceful degradation when designing to work with older browsers (ancient in the Internets terminology) such as IE 5.5, Netscape, etc...

In my opinion it is much more work to gracefully degrade the application. Progressively enhancing it tends to be much more efficient; however, sometimes the need to take an existing app and make it accessible in these lacking environments arise.

Kook

Answer 4

Basically, if your site still works with JavaScript turned off, then anything you add with JavaScript can be considered progressive enhancement.

Some people may think that this is unnecessary, but plenty of people browse with addons like NoScript (or, with JavaScript simply turned off in their browser settings). In addition, many Mobile web browsers may or may not support JavaScript. So, it's always a good idea to test your site completely with and without JavaScript.

Igloo

Answer 5

Progressive Enhancement is a development technique that stresses the primacy of the semantic HTML, then testing for browser-capability and conditionally "layering" on JavaScript and/or CSS enhancements for the browsers that can utilize those enhancements.

One of the keys is understanding that we're testing for what the browser can do, as opposed to browser-sniffing. Modernizr is a very popular browser-capability test suite.

Progressive-Enhancement is inherently (section 508) accessible; it provides for meeting the letter of the law and the spirit of the rule.

The Filament Group wrote the excellent "Designing With Progressive Enhancement" book on the subject. (I am not affiliated with Filament Group, though they are so freaking smart I wish I were.)

Tayyebeb

Answer 6

This is such an important concept and it saddens me that so few web developers understand it.

Basically, start by building a site/framework in Plain Old HTML -- structural elements, links and forms. Then add on some style and then shiny stuff (Ajax or what have you).

It's not very difficult. Like palehorse says, graceful degradation is more work.

Websites should work in any user agent, not look the same (not even look but sound if your vision impaired), just work.

Aphonia

Answer 7

Progressive Enhancement:

1. The plain HTML/CSS site is awesome (fully working and user-friendly).
2. Adding JavaScript defines a new level of awesome.

Step