Make your site work when the visitor has JavaScript turned off

March 7th, 2011

One of the main draw backs of building a site that relies heavily on JavaScript is that the site can break completely when a visitor has JavaScript turned off in their browser. Luckily, if you set up your site right, this isn’t as big of a problem. I’ve created a solution to one popular use of JavaScript, the content slider.

I’ve built them, you’ve probably built them and they’re appearing on what seems like every second site now. Sliders built with JavaScript that feature either pictures or text and, especially in the case of text, a lot of information important to the site can be lost if the visitor has JavaScript is turned off and the slider doesn’t function. So I’ve built two examples, one that breaks if you turn off JavaScript and one that will still function and will just lose all the fancy effects.

The first example is built the way I’ve seen a lot of real sites and tutorials built. All the content is featured on one page and positioned with CSS and the sliding functionality is built using jQuery. All the content is divided into different section tags and then positioned horizontally in a row, with only the main page content displayed at first. The links in the navigation are given hash tags and those are used by the jQuery code to display the right content for the visitor. Everything works perfectly unless, of course, JavaScript is turned off. Then the visitor won’t be able to see any of the content except for the home page content. Of course, one solution would be to set up the HTML so that all the content displays vertically if JS is turned off and then visitor can just scroll to see it, but anyone who’s ever worked with a designer knows that this kind of solution usually won’t fly with them.

In the second example, my solution to fool proof this site is to use jQuery’s load event. I’ve just created an individual page for each section and then use load() to load the content I want and place it on the index page. And the links are to the actual HTML pages. This way we get the same effect that we did with the version that featured all the content in the same HTML. And with this set up, if the visitor to the site has JavaScript turned off, the links will just go the actually page. Really, all the only difference between the site with JS turned on or off is the slide effect on the content and if a person always visits with JS turned off, they’ll never know they’re missing out on anything. View the source in the examples to see exactly whats going on under the hood. One note, if you’re rebuilding this on locally, the load event won’t work in Google Chrome(at least the dev version) for some reason, but it seems to work in the other browsers.

I know that a lot of web developers are excited about what we can do with JavaScript now, but we have to remember that, just like not all web surfers have the Flash Player installed, not all are going to have JS enabled and we need to make sure that everyone can see the content of the site. Or else people will just end up with a hate on for JavaScript heavy sites like some do for sites that use plug ins.

Leave a Reply

Your email address will not be published. Required fields are marked *