Ninedays Blog

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

My solution breaks and looks terrible when JavaScript is disabled.

SW Drop Down

The original solution: SW drop down menu leaves the top level usable, a fair trade-off.

Son of Suckerfish

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.