When designing your web documents always consider the principles of progressive enhancement, graceful degradation and unobtrusiveness.
The principle of progressive enhancement is the idea of adding layers of enhancements to your web page. There are three main types of enhancements:
After you have created data from your data requirements document and added structure using markup, then you can add layers to progressively enhance your document:
Thus, starting from the raw data you structure the data with markup and then you add successive layers of enhancements: you add a stylesheet layer to format the information, you add a behavior layer to make the information interactive, and you inject Microformats to enrich its semantics.
You may add additional layers as well!
The principle of graceful degradation is the idea that if a layer is removed the information is still usable. Thus, if the browser does not support CSS, or the CSS document is inaccessible for some reason, the information is still in an acceptable format. If the user has turned off JavaScript in his browser, there is no loss in functionality. And if the browser is ignorant of Microformats, it still can display the information.
The principle of unobtrusive enhancements is the idea that data, behavior, and styling should be kept separate. Do not embed CSS style rules within your markup. Do not embed JavaScript, or calls to JavaScript in your markup. Thus, the marked-up data is in one document, the CSS stylesheets are in separate documents, and the JavaScript is also in separate documents.
Jeremy Keith has written an outstanding book, DOM Scripting, which takes the reader step-by-step through the process of designing a web page where additional layers of capabilities are added onto it, and he shows how to design the web page so that it degrades gracefully.
I have written a Microformat tutorial that shows how to add semantic layers to your web page.
This document was created using the above principles. It is being styled using CSS, which is in a separate file. The semantics are enriched using the hCard and rel-tag Microformats. And if you turn off CSS styling the document is still quite presentable!
Last Updated: November 19, 2007