Progressive Enhancement vs. Graceful Degradation

Basi­cally (and apolo­gies here if I’m preach­ing to the con­verted) there are two usabil­ity philoso­phies, with a sub­tle dis­tinc­tion between them that’s lost on a lot of people.

Grace­ful degra­da­tion is the idea that you ini­tially develop your site using Javascript/Flash/whatever, and then go back later and add noscript/noembed tags and server-side han­dlers to allow non-JS browsers to still sue the site.

GD (in this sense) has largely been dis­cred­ited as a design phi­los­o­phy, because it allows/encourages poor, technology-dependent design and (as you note) it requires extra work to make the site accessible/usable for non-standard clients.

Pro­gres­sive enhance­ment is a newer approach, where you ini­tially design your site to work using only HTML and REST, then add pro­gres­sive lay­ers of CSS, javascript/AJAX and Flash to enable more advanced user-interface func­tion­al­ity if the client sup­ports it.

The dif­fer­ence is sub­tle, but impor­tant — PE means the site is always acces­si­ble from day one, using any client which under­stands HTML+HTTP/REST+cookies (ie, sup­port­ing less-capable clients — which include things like auto­matic trans­la­tion ser­vices, aggre­ga­tors, mashups, search engine spi­ders and the like — requires no “extra” work). Then, with a strong foun­da­tion you can build upon, you can layer what­ever newer tech­nolo­gies you like over the top, as-and-when they become sup­ported (or even as-and-when they’re invented).

GD is basi­cally build­ing and dec­o­rat­ing a house, then going back and dig­ging foun­da­tions under it if you remem­ber, and can be both­ered, and the foun­da­tions can be made to fit.

PE is build­ing good strong foun­da­tions, then build­ing increas­ingly com­plex, beautifully-designed floors on top of that foundation.

There’s not much argu­ment about GD vs. PE (GD is largely deprecated/discouraged) because even if you design a site using GD, as soon as a new tech­nol­ogy comes out (like CSS, or AJAX, or what­ever) you then either have to re-implement your entire site from scratch with the new tech­nol­ogy and then go back and fill in the noscript/noembed/no-whatever-the-new-technology-is tags again, or you’re effec­tively doing ”de-facto” PE (build­ing newer advanced lay­ers over an exist­ing, sim­pler foun­da­tion) from that point on.

Since you’re faced with either wast­ing a huge amount of time re-implementing or effec­tively forced to use PE from then on — the con­clu­sion goes — you might as well design using PE from the start, and ensure your site works for all browsers everywhere.

Oth­er­wise you’re build­ing a site using a weird, ad-hoc, incon­sis­tent mish­mash of GD and PE, with­out any kind of over­all archi­tec­ture gov­ern­ing the design and imple­men­ta­tion process.

Given this, the core func­tion­al­ity of your site should always be imple­mented the sim­plest tech­nol­ogy avail­able (HTML+HTTP for web pages, sta­tic image files for pic­tures, Flash for embed­ded videos, etc), then you should pro­gres­sively enhance the user-interface using what­ever tech­nolo­gies you like (eg, lay­er­ing unob­tru­sive Javascript and AJAX sys­tem over HTML+HTTP forms, or replac­ing sta­tic images with inter­ac­tive SVG/Flash dia­grams, or plain HTML wid­gets with pretty javascript widgets).

As 9jack9 (admit­tedly some­what opaquely) says, javascript should be used to enhance usabil­ity, not to imple­ment it.

The site should work in the low­est tech­nol­ogy pos­si­ble, then advanced tech­nolo­gies (Javascript, CSS, Flash, SVG, Sil­verlight, what­ever) should be used to improve the user experience.

Make more sense?