Richard Parnaby-King

Web Developer – PHP, Zend Framework and Actionscript 3

Posted on | | 5 Comments

If you have programmed anything in javascript or flash then you have probably come across the problem of “what to show the user if they don’t have (javascript|flash)”.

There are two approaches to solving the problem: Progressive Enhancement and Graceful Degradation.

This post will introduce both concepts (hopefully unbiasedly), with examples of both.

Graceful Degradation

You make your website using all the latest technologies available – HTML5, CSS3, javascript with AJAX requests, and flash. Then you want the website to still work for search engines, be backwards compatible to IE6, and for blind users to be able to use the website on their braille readers.

The easiest thing to do is include the html “noscript” tag somewhere near the top of your page that gives a message saying that the site REQUIRES javascript or things won’t work right. StackOverflow is a perfect example of this. Most of the buttons at the top of the screen run via javascript. Turn it off and you get a nice red banner and the drop down js effects are gone.

Another example is YouTube. They are trying to have all their videos viewable using HTML5 technologies. As a graceful degradation, if a user does not have a compatible browser, the video is displayed in flash. If you do not have flash installed, you get a polite message telling you to either download flash or upgrade your browser.

Progressive Enhancement

This is, in my opinion, easier than graceful degradation. Get the site working in it’s entirety without javascript / flash / css3 / whatever, THEN enhance it bit by bit (still include the noscript tag) to improve the user experience. This ensures you have a fully working, readable website regardless if you’re a disabled user with a screen reader or search engine, whilst providing a good user experience for users with newer browsers.

For any dynamically generated content (for example page elements generated via AJAX or flash) there has to be a static page alternative where this content must be available via a standard link. If you are using javascript for tabbed content, then show all the content in a way that is consistent with the rest of the webpage.

An example is BBC News; Turn off javascript and you have a full page of written content, pictures, links etc. Turn on javascript and you get scrolling news stories, tabbed content, scrolling pictures and so on.

Conclusion

There are evangelists that strongly support both approaches, but it is ultimately dependant on the project. If you have not started the project yet, I strongly suggest approaching it with Javascript etc turned off, then enhance the website once all the content is in and done. If the project is near the end of it’s life-cycle, then you have no choice but to offer the user alternative sources and / or messages explaining why the website is not working properly.

More Information

To read more about either technique, visit Wikipedia:
Progressive Enhancement – Wikipedia
Graceful Degradation

Category: Coding, SEO

Posted By:

Comments

  • ABOUT

    Having fifteen years of programming experience in PHP, Zend Framework and ActionScript3, I have a very strong working knowledge of object orientated programming.

    I am a PC Gamer! Playing FPS, RTS, RPG and the occasional MMO since 1996 I have a huge number of a variety of fast-paced games.

  • Recent Posts

  • Categories

  • SUBSCRIBE TO OUR FEED