While answer the question from Daren me about the accessibility of my jQuery.Plugin ImageSwitch, I think I should write a bit more about this issue. Javascript is an amazing powerful programming language help enhance your website with special effect and more user interactive. However, not all your visitors have javascript support browsers or simply they just don’t want to turn javascript on. If you didn’t think about this, your visitors could visit your website and don’t even know what really going on when all your animation just gone dead and your main content get hidden. So how will we fix it?

Build for non-javascript users first

I have seen a lot of developers/designers made the same mistake, put too much effort for the special effect at the very early stage of web design. They could spend hours to make a nice modal log-in box for users and than have to go through a lot of trouble to make it work again for non-javascript visitors. Even all the browsers nowadays support javascript but many visitors try to turn off their javascript to avoid virus and malware.

To save your time, always build a website for non-javascript users to start with. All the javascript is only some spice for your meal, so keep it until you’re happy what what you see. Try to spread out all the information it should be display in the page.

After you have that’s done, write javascripts code to re-arrange for javascript-enable visitors. It could be done easily with jQuery. Here is an example:

	$(document).ready(function(){
		// you could hide it away by using $(".NoJS").css("display","none")
		$(".NoJS").remove();
	});

HTML

<img src="images/slash1.jpg" alt="Slash" class="Slash"/>
<img src="images/slash2.jpg" alt="Slash" class="Slash NoJS"/>
<img src="images/slash3.jpg" alt="Slash" class="Slash NoJS"/>
<img src="images/slash4.jpg" alt="Slash" class="Slash NoJS"/>
<img src="images/slash5.jpg" alt="Slash" class="Slash NoJS"/>

So if the browsers don’t support JS, this line will never be run and full content will be display. However with javascript turn on, you could hide away you content and start interact with the visitors.

As @BjornW suggest in my comment area, I should mention beside removing unnecessary elements you could also add the new elements for javascript user only as well. You could use jQuery.append, insert… to achieve this. Please check the jQuery API for more detail.

Examples

This file is a demonstration, it’s using jQuery ImageSwitch to switch between images. However, if the javascript turn off, all the image will be line up one by one.

But sometime it’s alright

In theory, your website should be the same in all different browsers (Do you think so too?), when the javascript turn on or off. However, I personally think it’s really depend on your target audiences. Say my website is more about jQuery, Web dev… It targets technical users who more likely have the latest browsers or at least support javascript anyways. So I don’t really need to spend too much time for this problem.

In contrast, if you’re building a social network or an e-commerce website, your main visitors more likely non-technical people and they maybe still using the very old browsers which don’t support javascript. Which mean you will have to be extra careful this problem. So base on your website to make the decide, spend more time for full look or more time for effect.

Some more useful articles for you

• I’m on holiday