Best JavaScript Fallback Practices

This is mostly directed toward SambaNeko or penagate, I must admit, but anyone is free to share their thoughts.

What would you say are the best practices for providing a JavaScript fallback? Should I utilize the <noscript> tag, or is there a better way? If I do use the <noscript> tag, should the JavaScript-y content just be placed in an element which is not displayed by default, but has JavaScript that makes it visible?

The website I'm working on is very modern and aimed at modern users (not supporting IE7 or below), but because of the potential for projects with educational institutions, I don't want the website to break just because they have JavaScript disabled.

In addition to this, how might you provide the functionality of a carousel without JavaScript: would you outright hide it from non-JavaScript users? Or would you do the extra work to build the functionality in with PHP?

Or, might you simply provide a very basic/static version of your website for non-JavaScript users?

If they don't have Javascript, I send them to the internet archive's copy of my site from 1995. Works great!

Pretty much your last sentence, which I'll rephrase as a doctrine of progressive enhancement. Every browser (user) gets the best version of the site that it is capable of handling; advanced browsers get the full experience, while older ones are unaware of anything they're missing. In the absence of Javascript, all of your core functionality should still work, it just might not work in the same way, or be as flashy.

For a carousel, I'd show the non-Javascript user only the first "page" of items. You'd need Javascript to page through the rest of the items (and the paging controls are not present in the basic markup: they get added to the DOM onload with Javascript), but you can accommodate the non-JS users with another page that shows all items in a more plain fashion. Like a "view all" page: this is useful both for your non-Javascript users, and for any Javascript users who just don't like carousels.

What I do is make the website work 100&#37; without JavaScript, then add the scripting later. I view JavaScript and Flash as enhancements to a website, not requirements. It does get frustrating effectively creating the same things twice: I like to see this as a benefit as well, because it forces you to properly consider whether the scripting you're doing is necessary. In other words, the benefit to the user experience has to be worth the effort. In many cases it is.

Look no further than this forum for an example of a site that works well with and without scripting enabled. The pop-up navigation menus and quick reply/quick edit are all enhancements to functionality that is available without scripting.

Quote:

---

Originally Posted by kows

Should I utilize the <noscript> tag

---

No .

OK, I have a related question... how would you handle a site that auto-updates its content? Case in point - I have a website that interfaces with a radio (internet streaming, non-terrestrial) and I want the site to automatically update itself when the song selection changes. Currently, I'm using a timer, which then runs am ajax call to retrieve the new information and updates the appropriate elements on the page. I suppose I could simply have a link somewhere on the page that causes a manual refresh of the page. Expose it when JS is disabled, otherwise, load the JS files and let the scripts run.

-tg

Just make the user refresh the page manually.

If JS is enabled, then you can either update on a certain interval (like you describe) or you can do an asynchronous request to a script which polls on the server-side until the song data changes, then returns the result. (You need to flush this type of connection every 30 seconds or so as well, to avoid time-outs.)

Avoid this:

HTML Code:

---

<meta http-equiv="refresh" content="30" />

---

Pages which do this are annoying.

Oh, I agree... I wasn't refreshing the entire page... I was simply making an asynch call, getting some xml back, then using that to update specific elements on the screen. when JS is enabled, it works nice... it's when it's disabled that I was looking at... sounds like manual refresh is the way to go.

-tg