Graceful degradationIn an ideal world you would want any website you develop to have the largest audience as possible. Sites these days can rely on
multiple technologies to work (
Javascript, Flash, Java, ActiveX
, CSS) most of which the user can disable through choice even when their browser supports it. This means that when it comes to developing a site you have the decision between drawing a line in the sand and saying
you must use this browser above this version and have
JavaScript, Flash and ActiveX
enabled for it to work which will mean a small and very annoyed audience. Or the better way which is to build the site from bottom up starting with a
good HTML core structure that should work in all browsers and then
add layers of functionality on top.This means making sure all links have
href tags that point to
URIs and not Javascript: , images have
alt tags, client side validation is
duplicated on the server (
which is good practise anyway to prevent hackers avoiding it by disabling javascript) and that the core navigation is
not reliant on Javascript to work. This is called
graceful degradation and ensures that your sites
core functionality is available to as many users as possible.
For example if you were displaying
flash banners you would start with an image that had alt tags defined so that if the user has a
text based browser they read the content within the alt tags. If they have image support they would see the image but if they had
Flash enabled they would view the movie.
The site I am currently working on
divides browser support up into 3 levels and to help the user we include a
browser compatibility page that lets the user see what level of support their
browser settings are providing them along with links to let them
download the latest version of their browser if they are using an old version. As well as showing the browser support level (see below) the page lists a number of
key settings and features that the site makes use of with an indicator of whether this feature is enabled or not. Settings displayed include
Flash, JavaScript, AJAX, Java, Cookies etc. Having one or more items on this feature list unavailable does not mean the site will not function only that certain parts of the site use this technology and therefore to get the
richest experience from the site and enjoy all the functionality they should enable those missing features. Obviously there are some items that have to be available for the site to work such as
forms and session cookies and we let the user know whether their
browser and settings are compatible with the site by showing them crosses or ticks next to each item and an overall compatibility rating.
Browser support levelsThe browser support grades are defined in the following way.
Leval 1 SupportThis means that the site should be fully functional and display correctly. We will test the site fully in
level 1 browsers to make sure any bugs are fixed as soon as possible. Currently our level 1 browsers are
IE 7,6, Firefox 2 (3 still buggy), Safari 3, Opera 9.Level 2 Support This means browsers that should work without any problem with our software but as we cannot test every single available browser we cannot guarantee that everything will work. For example if the browser is the latest version of
SeaMonkey or
Firebird which is based on the same
Gecko rendering engine that
Firefox is (
which is a level 1 browser) then the system should work perfectly depending on your browser settings. However as we do not fully test
the system with this browser we do not guarantee it will work 100%. Current
level 2 browsers would be
Firefox 3, Opera 8, Sea Monkey, Konqueror.
Level 3 Support This means older or niche browsers such as
PDA/Mobile phones that we do not test the system on. This is not to say the system won't work as it might do depending on your browser settings. However we are not going to test our system on
Netscape Navigator 4 or
every mobile phone to ensure it works.
A fully functional site means
no Javascript errors however the Javascript is not really a problem as most code that works in
IE 7 is going to work in
IE 5 and we all try to write
cross browser code nowadays which is made easier with all the libraries available. The issue is more to do with CSS
and all the
quirks between
IE/Mozilla and the various versions.
IE 6 for instance has a number of major differences which means special stylesheets or hacks have to be implemented. As much as we would like to
downgrade IE 6 to a level 2 browser we cannot due to the simple fact that a number of
our largest clients still use IE 6 as their browser. We have enquired about the possibility of them
upgrading but were actually told that their
technical support team would not allow them to which is understandable if you consider how much support time would be taken up by requests of help because of the new browser layout. I can imagine don't want to suffer the hundreds of phone calls asking
"where has the history menu disapeared to."I also have Firefox
3 in level 2 due to the fact that there are still a number of outstanding issues with the site which need resolving before we would make it
level 1. Some of these issues are definitely a problem with the browser such as the
well known problem of playing Flash videos which an
upgrade to version 10 is the only workaround I have found. There is also an issue with the execCommand
function which I am not sure about as the code worked fine in Firefox
2 and other browsers but has suddenly started giving me Component returned failure code: 0x80004003 (NS_ERROR_INVALID_POINTER) [nsIDOMNSHTMLDocument.execCommand]" errors in an
iframe
based wysiwyg
editor the site uses.
Current browser usageI like to occasionally look at the
traffic statistics to see whether our grading of browsers over 3 levels is in keeping with actual Internet use.
The system I am logging against is
recording on average 350,000 page loads a day at the moment roughly
50-60% of which are from crawlers which is nothing out of the ordinary. So looking at the traffic from those site members who have logged into the website as opposed to just visitors the browser breakdown for this month so far is:
Browser %IE 7.0 61.56
IE 6.0 27.21
Firefox 3.0 5.44
Firefox 2.0 3.06
Safari 3.1 2.72
Which is no great surprise and shows how much of a market share
IE 6 still has even after 2 years of
IE 7 being around.
As for
obscure and old browser versions would you be surprised or not to know that for today only the following browsers appeared in the stats for all non-crawler traffic:
- 62 different people used IE 5.0 and 1 came along in IE 4!
- 5 visited on various versions of Netscape Navigator 4.
- Overall users to the site Yandex the Russian search engine came third after IE 7 and 6.
- There were over 100 different types of browser/version recorded today alone.
Although not earth shatteringly exciting it does show the
breadth of browser types available and also that a large majority of the users out there do not seem upgrade very often, some not at all by the looks of things. With
new versions of browsers rolling out all the time it would be physically impossible to test a site in each one but if your site works in the
major 4 rendering engines (
IE/trident, Firefox/Gecko, Safari/Webkit, Opera/Presto) then you will be covering the majority of those users who do keep up to date with browser revisions.