brophytech.com

NOTE: Thanks to a wonderful blog post over at Accessites.org, I feel compelled to disclaim my shameless exclusive use of the term ‘graceful degradation’ when much of this post is truly more dedicated to the concepts behind ‘progressive enhancement.’ Read through both posts and see if you can decide which term is appropriate for each case!

Over the last few months I’ve seen numerous blogs about good ways to ‘gracefully degrade’ on a webpage. One may need to do this when they expect that a part of their audience will use a browser that does not support every convention that they would like to use, or has a particularly poor implementation. In such a case, they would knowingly sacrifice some functionality for the sake of allowing this subset of their audience to access their page without errors and to see it the way that the author intended it (though, by definition, when we speak about intents in this context, it really would be a secondary intent; a compromise).

Some ways that others have accomplished such ‘graceful degradation’ is through elegant usage of Javascript. For example, they may lay out a page entirely in HTML. After the page has finished loading, they could use Javascript to alter even the structure of the page to enable richer functionality in steps rather than demanding full cooperation from the browser all at once. Authoring a webpage in such a way allows one to cater to a very broad audience without having to settle for the lowest common denominator. It also allows for implementation of the ‘bleeding edge’ technologies without excluding users who are behind the update curve (or may be forcibly stuck with a browser that is broken).

I mentioned using Javascript. Let’s talk a little bit more about how that can be used effectively to meet our goals. First, we must remind ourselves that not every browser supports Javascript. Also to keep in mind is that some people willingly disable Javascript through their browser’s settings or by use of the popular FireFox addon NoScript. So when we’re designing a page, spend some time thinking about whether it can be done purely with (X)HTML and CSS. There exists the chance that it simply cannot be. In that case, it becomes alright to give our users an ultimatum: enable Javascript or go away! This comes with some stiff penalties, however. Novice users may not know how, and become frustrated, driving users away from your website. Security-conscious users may be disinclined to do so because of the pervasive nature of Javascript exploits and choose to stay away from your site. Mobile phone users that operate without the benefit of a Javascript engine will be excluded also. Last but not least, elitist users may turn their noses up at the notion of Javascript on a webpage and subsequently leave your site. As you can see, being able to provide a Javascript-free version of your webpage has many implied benefits (or at the very least, less drawbacks).

Some ways that you can implement degradable functionality by use of Javascript in your website are as follows:

• at window.onload, replace <a> href attributes with onclick event handlers (the beauty of applying additional Javascript with Javascript is that in order for the element to start calling out to Javascript, Javascript must already be enabled)
• upgrade incrementally from static links to links that target iFrames, or links which open a popup window that is able to communicate with the parent window, to links that make AJAX calls
• use Javascript to apply advanced/new CSS and measure the results; if you don’t get what you expected, use a combination of other properties to make it something passable (this can be very useful when making use of CSS3 properties that are ill-supported; having a script enumerate a given element and apply styles can be slower and certainly more tedious, but may be the only way to preserve the uniform look of a webpage)

In what other ways can we degrade without sacrificing usability? If you’ve ever used an iFrame, you know that it is not, by definition, an empty element. That is to say, it isn’t immediately closed (as in the case of a <br /> tag, which has no accompanying tag to end it). This content is displayed if, and only if, the browser does not support iFrames. Traditionally then, content of iFrame tags has been something to the effect of “This content served in an iFrame and you can’t see it.” Instead of telling the user what they’re missing out on, we can actually put additional content into this element. For instance, if we are using the iFrame as a lower-tech replacement for AJAX (to effect incremental page updates or POSTs of data to our server), can we allow a fallback one step further to updating the entire page by including plain old links/form controls inside the iFrame element?

The benefits of designing websites with graceful degradation in mind are manifold. It can be a boon not only to our users that intentionally turn off some features, but also to our users with accessibility restrictions (perhaps using aural browsers rather than visual).

Do you have compelling reasons to design with this in mind? Or have you come up with clever ways of accomplishing this? Please share them here!

References:

• http://webtips.dan.info/graceful.html
• http://accessites.org/site/2007/02/graceful-degradation-progressive-enhancement/
• http://www.edginet.org/techie/website/xhtml.html