Making a degradable website:

Aims 
The whole point of the internet was to share information, regardless of what software/hardware was being used. So, your website should be able to conform to this. You may think that it would mean using only (X)HTML, but that is not the case. There are many degradable websites out there, that look pretty boring (mine included, heh); but it doesn't have to be like that. 

First steps 
Create a new XHTML or HTML document. I would suggest using XHTML, as it is simply more structured than HTML. You are going to make a website with a static version, and a dynamic version. The static version will contain the content (the purpose of the website), and anything else that is required. Anything that isn't absolutely necessary should be left out at this point. Usually, you'd have a title, then some links to navigate your way through the website, then the main content. You may also wish to put a copyright notice or something at the bottom of each page. 

I would recommend sticking to this basic structure, with the title at the very top of the page, followed by your links, then your content. You may not want the links to be at the top of the page, but you can move them about using CSS later. If you are using a text-only browser like Lynx (something I would highly recommend downloading), you will appreciate a well-designed, structured site. If you've clicked on the wrong link, you don't want to have to scroll down to the bottom of the page, to simply get to the links, now do you? 

Make proper use of the header tags (H1 through H6). Also, don't use a tag just because it looks the right size in your browser. Use H1 for the main title of your page, and then H2 for sub-titles. To separate content further, use H3 tags, etc. This will make it look it's best and most structured in text-only browsers. Don't worry about the sizes of the text now: that can be altered using CSS . 

Separate the main areas on your page into DIV tags. These DIVs will not show up using a text-only browser, but will be required to make different styles in the CSS , and to select particular parts of the page using the DOM in JavaScript. You might want to put the title in a separate DIV, and give the links a separate DIV. The content is another obvious part of the page to separate. 

Keep styles constant 
This isn't much of an issue to make the site degradable, but it makes the site much, much easier to understand and navigate. Simply, if you make a H3 tag red, then make all your H3 tags red. This helps enormously to make your site 'flow', and in my opinion makes it look much better too. Loads of different colors, unless it's done by an expert, looks very messed up. 

Start adding the initial CSS 
Once you've sussed the basic structure of the site, start work on the CSS for the static version of the site. The static version will be for browsers which support some CSS, but not enough CSS or DOM to warrant the viewing of the dynamic site. The dynamic site is generally restricted to IE5+ (sometimes IE6+, depending what you're doing), mozilla and it's variants (this means Netscape 6+), etc.. Opera supports quite a bit of CSS, but lacks a lot of the fundamental syntax of the DOM. Netscape 4, and older browsers will get the static version. 

The static version shouldn't be too amazing. Simply jazz up the basic XHTML a little. You can change the layout of the site a little, but nothing too weird. Make sure the content is still perfectly visible. 

Have a look at this site in mozilla or netscape 6, and you'll get the static version (there are still some bugs with the dynamic version in these browsers). The page looks nice, certainly a lot better than the basic XHTML would do. However, it isn't anything like as complicated as the dynamic version that you'll see if you're browsing this site with IE5+ (not that the dynamic version is complicated..) 

Use two external stylesheets 
External stylesheets make life a lot easier, as to make even large changes on the layout and design of your pages, you need only to edit and upload one file. Also, as all the pages in your site obey the same CSS, all the pages will look similar, making it a lot easier to navigate the site (building on what I said about keeping styles constant). 

Use a link tag like this: 

<link rel="stylesheet" href="/css/style.css" type="text/css" />

That will allow you to add external CSS for the static version. All fairly new browser will understand the link tag. Any that don't probably won't understand much CSS either, so it won't be worth letting them read it anyway. 

Use the import at-rule in CSS to add CSS for the dynamic version: 

<style type="text/css">
@import url('new_styles.css');
</style>

Browsers that don't support enough CSS to warrant to viewing of the dynamic version of the site won't support this rule. This means that Netscape 4 will ignore it, whereas newer versions of IE, and mozilla, Netscape 6, etc.. will read it. 

If you want to use the same property for the same element of class in both stylesheets, you only have to put it in the first stylesheet the you use (the one for the static page). That is why they are called Cascading Style Sheets (CSS). The cascading part refers to the fact that if there is more than one stylesheet in use, which both have properties defined for the same element, the properties defined in the first stylesheet will be remembered and cascaded down into the second stylesheet, etc. This is useful to remember, especially if you are trying to keep filesizes down. It also saves typing the same proerty several times :-) 

Validate your page 
Use the W3C's (X)HTML validator . You should always try to use valid (X)HTML, as if that doesn't validate, then it may cause more problems with your CSS and JavaScript (if you use the DOM). 

Validate your CSS too, with the W3C's CSS validator . Try to fix as many bugs that are true bugs, that you can fix easily. This should help the CSS work cross-browser. If you're using IE-only properties like scrollbar-coloring, then don't worry when the validator throws up errors at you. It's for your knowledge that the page works, and nothing more. So it doesn't validate: big deal. If it's just IE-only properties which you could remove to make the page validate, then it doesn't matter. Too many people are bothered about it validating now. It should validate in principal, i.e. use proper properties where needed. Don't worry about errors that you know about. 

Check your static version 
Make sure it looks good, especially in the browsers that will be seeing the static version when the final product is ready. Just make sure you can navigate it still, and get friends to have a look and criticise the static version. If they find it hard to navigate their way through the site, then change things. Remember that as you're using an external stylesheet, even major changes will only take a short amount of time. 

Start work on the dynamic version 
This means using the DOM to add extra DIVs if needed, etc. In my dynamic version, I add the main large picture, a part of the page where details of the links appear, and the custom scrollbar. Check the XHTML source: you won't find any DIVs there that could be used for the aforementioned uses. 

Even though you could align everything with JavaScript and the DOM, use CSS as much as possible. This is more likely to work cross-browser, and it a lot easier to find and fix errors. 

The box model hack in IE can be very useful too. On many occasions, the width you define for the styles in IE will be 5 pixels or so out in mozilla and NS6, making a crucial difference to the look of your site. I'm not going to explain the box model hack now: there are many other sites that do that for you. In a nutshell, it's a parser error in IE5+. Microsoft now obviously know about the error, but i'm not sure if they're going to do anything about it. There are advantages and disadvantages to leaving the error in, and removing it. 

Feature sense in your JavaScript like this, to see if the browser reading the JavaScript understands enough of the DOM to be able to properly view the dynamic version: 

if (document.getElementById) {
// run this code, DOM is supported
}
else {
// do this, DOM isn't supported ¬
(this else isn't required)
}

You can also check to see if more methods of the DOM are available, like this: 

if (document.getElementById && ¬
document.getElementsByTagName) {
// run this code, DOM is supported
}
else {
// do this, DOM isn't supported ¬
(this else isn't required)
}

Hey presto! 
That's the basics of making your site degradable. You can do more, but what I've said above will cover a lot of ground, and crucially, make it work in any browser or internet-enabled device imaginable.

Credit: Chris Poole / Homepage.

This information has been in the DesignerWiz.com Public Library.