Effective browser support
Posted in Tech/Development on: Monday, January 5, 2009 by Paul Boag
Browser support should focus on usability and accessibility rather than pixel perfect design. Sites should render in all browsers, but provide advanced features and aesthetics to those which can support it.
Most web design contracts address browser support. Many agencies still treat support as a black or white decision – a browser is either supported or it is not. If the browser is not supported the site is often unusable. However, this approach fails to acknowledge the diverse and evolving nature of the web. We should be supporting all browsers.
What does ’support’ mean?
Although we support all browsers, that does not mean every user will have the same experience. For example, it is unrealistic to expect a user accessing the web through a text only browser to have the same experience as somebody using the latest version of Firefox.
As Yahoo states in their own browser support documentation:
Requiring the same experience for all users creates a barrier to participation. Availability and accessibility of content should be our key priority.
Supporting a browser should provide the best experience possible within the constraints of that browser, and should exclude none.
Expecting pixel perfect accuracy across browsers is unrealistic and not cost effective.
The problem with pixel perfect design
With browser technology improving all of the time it is unsurprising that modern websites do not always render the same in older browsers such as Internet Explorer 6 (released 2001) as they do in more contemporary counterparts. In fact even modern browsers differ in the way they display HTML.
Many web designers go to extreme lengths to ensure consistency across their ’supported browsers’. However although this is achievable if the number of supported browsers is limited, it comes at a cost. This includes:
- Significant overhead in the time required to overcome limitations in older browsers.
- Increased likelihood that unsupported browsers cannot access the site. This is because of hacks and excessive code employed to ensure consistency.
- A tendency to design for the lowest common denominator.
A better approach is to ensure that the site works well and looks reasonable on the lowest common denominator browser, and then ‘enhance it’ for more capable browsers.
For example, modern browsers support design enhancements such as:
- rounded corners
- drop shadows
- Improved typography
and various other styling not supported by older browsers without additional code and effort. However as Andy Clarke explains – because these design elements are not intrinsic to the usability or functionality of the site they can be safely dropped.
If this approach is adopted, it is less likely browsers will render sites incorrectly and so the level of testing can be reduced.
Testing
When a black and white approach to browser support is employed, testing can become expensive and time consuming. While website owners want to support as many browsers as possible, web designers want to limit the number supported to make testing manageable.
However, if a modern approach is adopted the burden of testing is reduced. This is because instead of testing focusing on pixel perfect precision across all browsers, the focus is on usability and accessibility.
Obviously, when claiming support for all browsers it becomes impossible to test in every browser combination. Instead it is necessary to prioritize browsers based on website statistics and ensure accessibility by testing in these.
The number of browsers and versions that a site is tested on will vary depending on the budget available for testing. However, even testing on a handful of browsers will normally cover the majority of users experiences (as a relatively low number of browsers dominate the market). In addition, those browsers that are not tested should reliably render the page because no unnecessary code or hacks are used to build the site.
Conclusion
In conclusion, building websites that are enhanced for more capable browsers – improves accessibility, reduce costs and ensure every user gets the best experience possible within the limitation of their choice of browser.
12 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
I’ve recently embraced a similar attitude and have jumped in using modern CSS techniques with near impunity.
CSS properties like border-radius are well supported by Firefox and Safari eliminating the need for countless background images and often additional mark-up. And what do users of a browser that doesn’t support it see? Square corners. I can live with that and so can our users.
Similarly, I’ve used box-shadow, text-shadow, PNG images, and CSS adjacent selectors where browsers support them. Users who can’t see these effects aren’t seeing the design exactly as I intended but they’re not missing anything that causes the design to be less accessible or useable.
When we think of these techniques as enhancements, everyone wins. The entire project becomes simpler. Less mark-up, fewer images, and fewer cross-browser workarounds all save time in development, testing, and maintenance. These things also save in bandwidth and make for a snappier experience for users. And the only loss is to some design effects that don’t get in the user’s way by their absence.
Thank you for sharing your thoughts. It’s an interesting discussion in deciding how to balance usability and design. Where do we focus more of our attention – and how do we create the best experience for the end user? Not only do developers need to analyze these ideals – but webmasters need to be involved also.
This is actually the approach I’m taking in my redesign. There’s a few touches of added functionality — the wonders of jQuery — that I’m going to be removing from IE6, as well as certain aspects of the design. Though my process is slightly different than the one laid out. Where this article recommends designing for IE6 and then making it progressively better for grade-A browsers I simply design for those browsers to start with and then remove the parts that will be troublesome for IE6, such as an on-page list search I’m implementing.
Personally I think this is a better road to take as the only people who lose anything are IE6 users and while I don’t believe it’s right to ignore them entirely I have no problem with giving them a stripped down version of my site with a little notice saying, “Upgrade your browser to get the full experience” or something along those lines.
Nice article Paul.
Elliot Jay Stocks wrote a great Christmas card tutorial that uses progressive enhancement to enrich the users experience. Everyone gets something nice – the more modern your browser though, the more bells and whistles (in this case CSS3 specific effects and hCard goodness)
http://24ways.org/2008/a-christmas-hcard-from-me-to-you
From the commonsense point of view, you are perfectly right. But try to explain this to customers – well most of them. The worse of them are the designers that wants to have their precious design “pixel perfect” in all browsers.
The usability face of a website design is , no matter how much we talk, and try to explain, left in the second place, in favor of a nice fancy looking design – this in the happiest cases, as many of them just want a site, and usually they choose their taste as the best choice….
I completely agree, thanks for the article. When I’m developing, my bestest friend is the Web Developer Toolbar for firerfox, I am constantly turning Javascript and CSS off and on to ensure that the site works without them. I take the approach of building it to work essentially with Lynx or similar then use (normally) jQuery to add in the cool behaviours and features to the page.
If all users have the same experience on sites regardless of their browser, how will they ever know that it is better to use one over another. As advanced users, designers or developers we know the frustrations of working with Internet Explorer 6 and the advantages of using an updated browser. However the majority of users just use what comes with their computer (in most cases internet explorer).
By having a better design in browsers which support it, users will see that not all browsers are equal and will be more likely to upgrade or switch.
So I agree, make your design work in IE6, but make the design better in other browsers.
I completely agree on this. I find that clients that are interested in pixel-perfect design are not really interested in their content as the most important part of their site.
Getting caught up in the minutiae of how every pixel looks on one browser vs. another is essentially a waste of time. We try to explain this to all of our clients. What if someone has their text site to large, or high contrast, or their images are turned off on a mobile device and so on?
The average viewer does not bring up Firefox, IE and Safari just to check on how a site looks in one vs. the other.
I completely agree. As someone rightly said, designers are the worst. They often come from a print background and just can’t get their heads round the fact that the web is not a static medium like paper.
I see not reason to spend hours fixing IE6 to look like Firefox 3.1 just because people are too ignorant to upgrade their browsers. In fact I think that those of us (me included) who pander to IE6 users are actually making web dev/designers’ lives more difficult as it perpetuates the myth that IE6 is still a capable browser and allows them to keep using it. I think that if they we to discover that Facebook/BBC website looked a lot less good in IE6 than in a modern browser then perhaps they might be persuaded of the need to upgrade? I really think that this argument should be brought up on BBC Breakfast or Prime Time news so that it makes the majority of the population aware of the need to stay current!
Me again
The average user doesn’t open several browsers to see how the design appear…but the average client does.
I’m mostly an outsourcer, and the buzzwords like ajax, w3c valid, web2.0, table-less, usable( this one is the most ignored, but very used), cross-browser in the end, are words very often used in their marketing… and with no offense, half of them( the clients ) don’t really know what they are talking about – but is shinny, and sells good.
And how to open several browser – 2 in most cases Firefox and the infamous IE6 – is the easiest way to check what “that ignorant ie hater coder” did , we reach this point.
On the other side as coders, we must create sites for users, not for clients. Most of corporations still use IE6, many users use a computer like a pen and paper, they don’t know about FF /opera/safari etc
so is our duty to allow this kind of users to access the sites we make – even we like, or dislike IE6 ( and we all know how much we dislike it )….
take a look in your awstats, ie is still there :( ….
Great information here…this surely gives idea on how to optimize the performance of websites and this is beneficial most especially for business.
“As someone rightly said, designers are the worst. They often come from a print background and just can’t get their heads round the fact that the web is not a static medium like paper.”
What a load of crap this statement is. I’ve been working as a web designer for well over a decade, and I can say with great conviction that the vast, prevailing majority of designers I’ve worked with at web shops, ad agencies, and web software companies did not come from a print background, and the directors of design departments that design for digital mediums simply don’t hire print designers with no experience designing for screen if they’re remotely worth their salt. If you consistently encounter print designers trying – and failing – to hack it as web designers, maybe you should look for a better job at a company that employs designers who ‘get it’.
These days there’s a lot of noise about dedicated ‘experience designers’ – designers dedicated to researching and identifying user needs, and planning to meet them. This discipline isn’t new – graphic/web designers who take their jobs seriously, and realize that design is more than simply acting as an aesthetician, have been doing this all along.
Sometimes meeting/exceeding a user’s (or client’s) needs and desires requires working in the constraints of the medium. Sometimes it requires challenging the constraints, and pushing the bounds of the technology. It’s the role of a good developer to collaborate with designers to constantly explore the current constraints of whatever medium they’re working with (in this case, browsers), and frequently the result of a successful collaboration is a successful website, both from a business and user perspective.
On the other hand, there’s an easy cop-out if you just don’t feel like collaborating, or working a bit harder to achieve higher quality: you can piss and moan about designers.