Thinking About Graceful Degradation and Progressive Enhancement

I really should have named this “Now that I understand how to use JavaScript effectively and in a cross browser friendly way because of Prototype I need to start really thinking and weighing graceful degradation and progressive enhancement every time I include that prototype.js file” For SEO purposes I shrunk it down. Fair?

While I was building off a script I found about drop down menus with Prototype to apply my desired enhancements and once I got it in a place where I was going to add my code to my all-mighty dev library’s finished folder, I tested accidentally it with JavaScript turned off and I was instantly disappointed in myself.


Screen Shot Examples

Here, in screen shots, I guess what I’m trying to say is my version needed some work. in the graceful degradation category.

My Solution

Screen Shot: My Solution with JavaScript Enabled Screen Shot: My Solution with JavaScript Disabled My solution breaks and looks terrible when JavaScript is disabled.

SW Drop Down

Screen Shot: SW drop down menu with JavaScript Enabled Screen Shot: SW drop down menu with JavaScript Disabled The original solution: SW drop down menu leaves the top level usable, a fair trade-off.

Son of Suckerfish

Screen Shot: Son of Suckerfish with JavaScript Enabled Screen Shot: Son of Suckerfish with JavaScript Disabled Son of Suckerfish is fully functional with JavaScript disabled, though that is CSS that is over my head, maybe I’ll take the time some day to really examine it!


How Important is Degradation for Me/This Specific Example

But how important is it that my solution work at 100% in a JavaScript free environment? I know for the needs of a drop down menu it’s likely I’ll have all of my secondary and tertiary links within the main page of a top level section, so can’t I just make sure my top level works (like the SW drop down menu solution?) To be honest I don’t see why not.

I know that my place of business tests in Windows: IE6, IE7 and Firefox (latest version) as well as Mac: Safari (latest version) and Firefox (latest version). If my design is usable to any degree with or without JavaScript in those environments I don’t see a need to spend days and days troubleshooting in IE5 (Mac or PC) or Netscape let alone Opera, Flock, Konqueror or Mozillia.

According to The Counter – January 2008 JavaScript Stats 94% of visitors to the sites they collect data from (over 4 million visitors) have JavaScript enabled. So I am willing to take the chance that a mere 6% would only have access to my top level navigation.

Side note: Why doesn’t W3Counters display JavaScript stats? Jerks.

So I ran off to fix my drop down solution to display the top level correctly when JavaScript is disabled, which turned out to be much less of a pain than I had expected.


Articles about Graceful Degradation

  • Dan’s Web Tips: Graceful Degradation (July 19, 1998) – A bit out-dated but still on point with theory. It is very important that as you begin to use more of the neat features (read: JavaScript) that the old browsers can still continue on their existence possibly not even knowing that they are missing something.
  • Digital Web Magazine – Fluid Thinking (October 2, 2002) – This article brings up the two main keys to graceful degradation:
    1. Any browser must be able to view the content of the site.
    2. Any browser must be able to navigate the site.
  • Graceful Degradation with Prototype, Scriptaculous… (November 11, 2005) – fantastic 2 part article – second part continues here: Graceful Degradation with Prototype, Scriptaculous…part 2 and even the second part starts to diagram and explain how to ensure even you ajax-less users should and could be able to use all the features on your site, maybe just not in the way you hope and imagine they will. As long as it gets the job done, right?
  • Graceful Degradation & Progressive Enhancement (February 6, 2007) – A more current look at graceful degradation bringing not only the alt attribute and <noscript></noscript> tag pair into play but also addressing the use of JavaScript with CSS and how to apply your JavaScript in a way that a text based user would still be able to access, while providing a visual use with something more interesting. Because let’s face it if you are browsing the web with Lynx you’re not looking for anything but plain content. This article also goes on to address Ajax and it’s effect on polite society’s web using experience.

This site runs on the Thesis WordPress Theme

Thesis Theme thumbnail

If you're someone who doesn't understand a lot of PHP, HTML, or CSS, Thesis will give you a ton of functionality without having to alter any code. For the advanced, Thesis has incredible customization possibilities via extensive hooks and filters. And with so many design options, you can use the template over and over and never have it look like the same site.

If you're more familiar with how websites work, you can use the fantastic Thesis User's Guide and world-class support forums to make more professional customizations than you ever thought possible. The theme is not only highly customizable, but it allows me to build sites with a much more targeted focus on monetization than ever before. You can find out more about Thesis below:

Comments on this entry are closed.

Previous post:

Next post: