A demonstration of graded browser support
Posted in Design on: Thursday, February 12, 2009 by Paul Boag
In my post ‘Effective Browser Support‘ I explained how we should not be looking to make sites identical in all browsers, but rather focusing on usability and accessibility. In this post I demonstrate how that works in practice.
I recently launched a new Headscape service called the Consultancy Clinic. As part of this launch I created a small single page website. Let me use this site to demonstrate how graded browser support can work.
Remember – the idea of graded browser support is to support all browsers so that your site is usable, accessible and at least reasonably attractive. With that in mind lets start with the lowest common denominator.
Starting with the basics – HTML
All web browsers can support HTML. So as a bare minimum I needed to ensure my new website was usable and accessible in raw HTML format. To test this I used the free Lynx Viewer and it returned this…
So far so good. But what about those browsers who think they understand CSS but don’t render it properly?
The pretenders
Unfortunately when it comes to CSS support things are not black and white. Although some browsers support styling flawlessly, others think they know what they are doing when they do not.
Poor implementation of CSS is the curse of older browsers. Browsers like Netscape 4 and IE 5 offer very limited CSS support and badly implementing what it does provide.
Instead of ignoring these browsers I create a basic CSS file which does some simple formatting. Instead of compromising the design to accommodate the limitations of these browsers, I deliver a simplified version which is usable and accessible.
As you can see the design focuses on some simple layout and typography. That way it avoids anything IE 5 may have trouble displaying correctly.
Dealing with IE6 and above
The next step was to create a more sophisticated design for browsers such as IE 6,7 and 8. These browsers understand CSS well but lack some of the more modern enhancements.
It was necessary to hide this enchanced stylesheet from ‘the pretenders’ who would render it badly. To do this I had to use a CSS hack, which was unfortunate. However, older browsers now completely ignore it.
How I did that is outside of the scope of this article. However if you want to know, view the source on the site and look for default.css.
This new design now renders perfectly well in the more modern versions of IE.
There are however, subtle differences between the versions of IE. For example IE6 does not support transparent PNGs and so in IE 6 the watermark on the form does not appear. Although it would have been possible to force IE6 to display this image, it was more sensible to simply not show it. After all the watermark is an embellishment to the design, not a fundamental part of it.
The bells and whistles
Finally I have added some further embellishments to the design for more advanced browsers. For example both Firefox and Safari support border-radius. This allowed me to add curved corners, which are simply ignored by browsers who do not support that style.
I was even able to go a step further in Safari because it supports dynamic shadows.
Conclusions
Design enhancements like drop shadows and rounded corners are important, but not to the same degree as usability and accessibility. With finite time and budget, we are better spending our time making sure the site is usable on all browsers rather than getting it looking identical in a few.
With the time I saved not trying to force IE6 to display a rounded corner correctly, I was able to ensure the site looked good in older browsers with a limited understanding of CSS.
Once you accept that your site will not look identical in all browsers, you will be able to build sites faster, cheaper and ensure a broader range of devices can access them. Surely that is worthwhile?
14 Comments
Comments are for the discussion of this post. If you have other questions / comments then post them to the forum or send me an email
Great work Paul. This is the way it should be done.
Great post! What would you suggestions be for larger sites, where multiple pages and more in-depth styling is needed?
I would love to see a follow up post that talks about good web practices for larger sites, particularly ones that need to run through any sort of CMS (wordpress, joomla etc etc).
Keep it up!
@lecombs – The size of the site makes absolutely no difference. The exact same principles apply.
Any reason why the £ sign displays as a J on my versions of IE7 and Firefox 2 ??
Excellent article, a subject close to my heart. I really like the logic and its a refreshing approach.
It’s a good attitude, and one I think I’m going to have to more further towards.
It’s so easy to find yourself having spent half an hour or more on IE6 just getting the most trivial thing to work as you’d like, when really it adds no functionality to the site.
That time would be much better spent building a legacy, or print, or handheld, stylesheet.
Great, definately the way I want to work just have to hope I can put a great case the way of the client. Ultimately this is where the real educating goes on and thats one issue I know will have the response that is our job to do however I don’t think its the designers and developers that need convincing of this idea.
Maybe it’s been just sheer laziness on my part, but I’ve basically stopped testing for IE pre version 6. Your article has made me reconsider that stance – and you’re right. there should at least be a usable version of a site available to IE 5 users.
Excellent article.
Sometimes when clients want their websites to render exactly in all browsers you have to avoid using nice features implemented only in modern browsers.
This is definitely something some clients needs to read! Explaining to them that their sites don’t have to look exactly the same in all browsers for them to function isn’t something a lot of clients understand too easily.
I shall be bookmarking this and forwarding to clients when the question once again shows its ugly head!
I agree with the principle of your article, usability and accesisibly should be the primary focus. However, most corporate clients we work with expect IE 6 support to match the initial comps–for many this is still the browser supported by IT internally. Our choice is to consider IE6 when creating the comps or produce some “intense wizardry” on the back end.
I must say, it’s a lot of extra work supporting IE6 and everyone would be better off, our clients and us, if we didn’t need to support it. But, that said, it’s amazing what my team manages to do to provide that “pixel perfect” rendering.
Bravo.
This is how many sites should be developed. It is not about presenting a page which looks identical, regardless of browser or operating system, nor is it implementing a plethora of hacks and tricks in an attempt to have it display correctly. It is more a page that even though it appears differently, it appears well rendered.
Even post-generation browsers should be supported, not shunned due to their limitations.
There appear to be three camps on the matter of post-generation browsers. Those who shun them & refuse to develop for them, those who madly attempt to hack the CSS to have it appear as closely as possible on all browsers, and those, such as yourself, who cater for them with style to their best ability.
It would be great to see everyone adopting this approach. Just because a browser doesnt support a particular CSS element, it shouldnt mean we leave them out in the cold. Its all about the accessibility isnt it, isnt that what the web was about?
Another good article!
One thing I would say is that I would not round the corners using CSS instead would stick to tradition method of using background image or even better, JavaScript, that way all users will benefit from the design looking as it should. I see the point you are making though! ;-)
Duncan.
Great hub! Thanks for the comprehensive basic info about web designing.