Designing for javascript disabled

How important is it to make a website usable with javascript disabled? What percentage of users actually have javascript disabled? Am I going to lose sales because my site doesn't work well with javascript disabled? These questions are all important, but for the sake of this article, I'm going to ignore them. They all really boil down to "Who is my target audience and how important is it that I have javascript on my site." Personally, when time permits, I'd rather have a site that works great regardless of whether javascript was enabled or disabled, so that's what I'll be discussing here.

The idea here will be along the same lines as designing good CSS - you want the page to fall into a reasonable layout if CSS is disabled. With javascript disabled, this can get a bit trickier. This method won't work for all javascript disabled pages, but you might find you're doing something similar and can employ this technique.

First check out The NewlyWebbed Portfolio Page. With javascript enabled, it uses jquery to navigate sections. This looks good and can be fun for the user. If you have noscript or know how to do this manually through your browser settings, disable the page. It ends up looking something like this: The first step was to design the page with javascript enabled. Each section was a separate div using CSS to create the look of the page. It's important to design the page in this step so it would look reasonably good without any CSS as this will translate well to making it look good without any javascript.

Once I was done with the javascript enabled design, I took a look at the css to determine how I could make it look good without having the show/hide javascript functionality. These were the classes that mattered:

.port_sec {
	border: 1px solid #333;
	margin: 0 0 5px 5px;
	padding: 0;
	width: 300px;
	float: left;
}

.port_info {
	padding: 10px;
	display: none;
}

There are 3 things that just won't look right with javascript disabled on this page: width: 300px, float: left, and display: none.

What I did to solve this was remove them from the existing classes and added 2 new classes:

.port_sec {
	border: 1px solid #333;
	margin: 0 0 5px 5px;
	padding: 0;
}
.port_sec_js {
	width: 300px;
	float: left;
}

.port_info {
	padding: 10px;
}
.port_info_js {
	display: none;
}

With javascript disabled, the divs only use port_sec and port_info classes, allowing them to stack vertically like normal DIVs, fully displayed (i.e. not hidden). In a script tag, I put the following:

$(document).ready(function() {
	$(".port_sec").addClass('port_sec_js');
	$(".port_info").addClass('port_info_js');
});

This will add the extra classes to each of the elements if (and only if) javascript is enabled.

Let me know if this helped you at all or if you handle this sort of thing differently!