A demonstration of graded browser support | Boagworld - Web & Digital Advice

Web & Digital Advice

Digital and web advice from Headscape and the addled brain of Paul Boag... tell me more

Paul Boag Posted by: Paul Boag On Thursday, 12th February, 2009

A demonstration of graded browser support

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.

Design:
The estimated time to read this article is 4 minutes

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…

Consultancy Clinic site viewed in Lynx

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.

Consultancy Clinic Website viewed in IE 5

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.

Consultancy Clinic website in IE 7

A watermark image is highlighted in this screenshot

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.

Consultancy Clinic Website in Firefox

I was even able to go a step further in Safari because it supports dynamic shadows.

Consultancy Clinic website in Safari

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?

Become a web expert with our newsletter

Receive invaluable advice every three weeks and get two free video presentations for subscribing. You can unsubscribe in one click.

Blog Updates

You can follow all my posts by subscribing to my RSS feed or signing up to my email newsletter above.

Podcast Updates

Subscribe to the podcast via itunes or RSS. You can also subscribe to my quick tips via itunes and RSS too.

Social Updates

I am completely addicted to Twitter so try following me there. I also have a Facebook page which contains considerably less waffle.

Comments

Boagworld is a community, not just the voice of one blogger. You've read the post, now its time to get involved.