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?
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.
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?
- 5 exercises to engage clients and stop you wireframing alone
- Design convergence is not a dirty word
- Call to Action: The 10 Most Effective Techniques