Skip to Main Content

Web Browser Testing: It Doesn’t Have to Look the Same

A trend is clear in the web design and development world: web sites do not need to look the same in all web browsers.

An Event Apart Boston 2009 “the design conference for people who make web sites” just wrapped up today, and that was a strong message from no less than four of the fifteen presenters. In the past there has been a tacit assumption in the web design community that web sites should look the same, pixel for pixel, in the web browsers used by the majority of web site visitors. That would currently include Internet Explorer 8 (IE8), IE7, IE6, Firefox, Google Chrome, and Safari. One of those six browsers are used by approximately 97% of web site users according to the W3 Schools browser statistics page as of May 2009.

The new trend is a more realistic approach to web site design and development issues. “Different does not mean broken” said Andy Clarke, one of numerous presenters at the conference making the point that it is okay for web sites to not look identical in different web browsers.

What matters is that the content and functionality of a web site be made available to the largest number of web site visitors possible. If a button has rounded corners in Firefox but not in IE6, it’s not a big deal.

This approach allows web developers to start using some of the new features available in CSS3 right away, including creating rounded corners and drop shadows on both text and containers. Implementing these style elements in CSS saves time in the development process when initially creating a web site, and over time when maintaining it. The problem is that CSS3 features are not supported by IE7 and earlier. Many CSS3 features are supported by IE8, Firefox 3.5 and above, and Safari 3 and above. So going forward, support for these features will continue to improve.

Web site owners will be interested to know that implementing these features, like rounded corners, using CSS3 saves them money both in the short term (during development) and in the long term (considering web site maintenance). Design elements like rounded corners can be made to work in older browsers that don’t support CSS3, but that requires the designer to create separate special background images for each of the four corners of the box, and requires the coder to use extra HTML markup to apply those images. These images mask the “natural” square corners of the box giving them a rounded appearance.

While this looks great in more browsers, there are many downsides. In addition to taking more labor to create the effect in the first place, if changes need to be made to the corners in the future it takes more time than changing a few digits in a style sheet. There is also a slight performance hit to the web server, as more graphics have to be downloaded to the user’s computer in addition to a slightly more complex and therefore larger HTML file.

I am very much in favor of the new direction. What it does is focus our attention on what matters more as web site owners and web site designers: the content of the web site and the functionality of the web site. That is what we should be striving to deliver effectively to our web site visitors. Using the new techniques, if web site visitors are also using modern software, they will be rewarded with an enhanced appearance to the page.