Website Design Considerations
Graceful Degradation
Once you start to add advanced features to your pages you run an increasing risk of tripping over client-side support issues, some JavaScript applications may not run as you intended or even at all, form submission validations may not be performed, DHTML may not be as dynamic as you wished, the list of possible failures goes on...
As a designer you have little or no control over how visitors will browse your pages.
You do not know what browsers they may use, how they have their systems configured, what is supported and what is not and so on. You cannot guarantee that your client-side applications will work as you intended. But despite this you can still do a lot more than simply code and hope for the best.
The basic principle is simple enough; for each functional area that may not work as intended perform a simple test. If the test checks out the function is supported and you will have no further problems. But if it isn't then you must make arrangements for an alternative function, or at the very least to display a message to the user explaining the problem and its solution if there is one.
To simply do nothing and allow the webpage to 'fall-over' is not really acceptable, yes the user will soon realise that something is wrong, but not necessarily where the problem lies, the likelihood is that your pages will get the blame!
If your function should fail due to lack of support, your pages must still perform 'cleanly' and gracefully. This is where the term 'graceful degradation' comes from, whatever the outcome your webpage should remain elegant and graceful even when things go wrong!
There are several functions for which you will need to test depending which ones your webpages rely on, in each case the test can be handled by a simple JavaScript subroutine, follow the links to further discussions of these:
- CSS - Does the browser read and apply this correctly? — Details
- JS - Does the browser support JavaScript? — Details
- DHTML - Does the browser support the DOM model properly? — Details
- Cookies - Will the browser accept these? (sometimes these are blocked by over-zealous and paranoid firewalls) — Details
All of these are fairly easy to test for, indeed these functions are closely related and often intertwined, a successful test for one will often confirm others. Once you have established your test routines you are advised to add these to the shared code for the page <head>, this will have the effect of adding your tests to every page on the website.