The Boagworld podcast will be back on Wednesday the 14th January.
Effective browser support
Published on: 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.
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
Post by Jason Zimdars on January 5, 2009 5:37 PM
Post by Smart Boy on January 5, 2009 5:40 PM