Saturday, June 2, 2012

An Example of Graceful Degradation in JavaScript

In continuation of the series, this entry addresses a section in the second edition of Jeremy Keith's and Jeffrey Sambells's book "DOM Scripting: Web Design with JavaScript and the Document Object Model."
In Chapter 5 of the book, there is a syntax error under the section 'Graceful Degradation' which I have fixed below:

Example


The original text missed the closing parenthesis for the window.open call.

The authors have already addressed the error on their website, but I thought I'd write an entry to draw attention to an important topic in the book for which the above example provides an introduction.

Keith and Sambell write that, "web pages that are built using progressive enhancement will almost certainly degrade gracefully." This advocates a layered architecture with the end goal of improving usability. It is a general design principle, and in this context, refers specifically to the separation of content from presentation.
Content must be accessible to all users.

A browser's feature set should not limit the content available to the user. Rather, the content author--the web designer--must design for graceful degradation.
Take, for example, a misguided attempt to load a page in a new window:

Bad example

By setting the href attribute to "#", the web designer prohibits access to the link for users who've disabled JavaScript in their browsers. The desired result here may have been to safeguard against the default behavior for clicking a link, but the 'return false;' statement should address that. A better approach sets a valid href attribute value so the link is always accessible, even if JavaScript or popups are disabled:

Bad example


Progressive enhancement leads to graceful degradation.