Let's say you have a jQuery image gallery scroll control on your site, it looks nice and functions beautifully. You turn off javascript to see what it look like, your whole site looks a mess now with images all over the place, styling is messed up, etc.
The best way to make your site degrade gracefully and function with or without javascript is to build it without javascript first, then add the bells and whistles later. Let's take that image gallery example, and see how we can make it degrade gracefully.
How do you want it to function without javascript? Do you want to hide it with CSS and let javascript show it? Do you want to allow some user interaction even if they don't have javascript enabled? This is what I would do, I would make a couple of wrapper divs for the control, like so:
<div id="imgGalleryWrapper">
<div id="imgGalleryScroll">
<!-- images here -->
</div>
</div>
Then I would set the height and width's of the divs with CSS:
#imgGalleryWrapper{
width:250px;
height:250px;
overflow:auto; /* this will make scrollbars show up if the content in the div goes beyond the set boundaries */
}
#imgGalleryScroll{
width:500px; /* making it wide to accommodate the images for scrolling */
height:250px;
}
Now that we have the HTML and CSS in place, look at the page and you'll see a nice section for your images. That is what it will look like without javascript. Now let's take away the scrollbars with jQuery:
$(document).ready(function(){
$('#imgGalleryWrapper').css('overflow', 'hidden');
});
So if the user has javascript enabled, then they won't see the scrollbars no matter how many images are in the #imgGalleryScroll div.
That's just a very short and sweet way of making great degrading, there's many ways you can do so. You could get way more advanced than this. I didn't mean to type so much, just like to explain how I work, that's how I've built my companies site.
