Throughout the course of my web development career I have debated this point with project managers, designers, clients, and even other web developers, who have argued that websites should look identical in every browser.

There are several reasons that is impossible:

• Fonts - are not rendered in the same way on PCs, Macs and other devices. Even if you set a fixed size such as px or pt, there are still variations in size across different operating systems. Helvetica is a good example of a these differences - it looks really smooth on a Mac but horrible and blocky on a PC.
• Accessibility - all the major browsers offer a text size as well as a zoom option (for that reason we should still be using relative measures like em or %) - so we need to make sure a site displays well at various font sizes.
• Forms - Each browser has a differently designed set of fields. Buttons, text inputs, text areas, select boxes, and file input fields all vary between browsers. While it is true that there are Javascript solutions which allow you to style form elements such as the jQuery Stylish Select, not all browsers choose to run (and not all users choose to enable) JavaScript.

A lot of websites make extensive use of images for headings, navigation items etc to get around this problem, but this results in slower page load times and loss of definition when zooming in. And even this won’t fix the problem. Viewing an image heavy website on the iPad will look very different on Amazon’s Kindle.

Loss of definition when zooming in on images

Rounded corners is a perfect example of the differences between browsers. In CSS3, we can specify “border-radius” to create a border with rounded corners. It will work in all the latest versions of Safari, Opera, Chrome, and Firefox (with the property “-moz-border-radius”). Microsoft haven’t implemented CSS rounded corners in IE8, so web developers are forced to implement an alternative such as the jQuery Rounded Corners plugin, or resort to using images. Either way, web developers probably should implement two solutions - one for browsers which have implemented rounded corners, and another for those who haven’t. But more often than not, web developers implement a “one fits all” solution which makes the page load more slowly, is less accessible and generally stifles progression - developers put more effort in to making sure their site is backwards-compatible than making sure their site makes full use of the latest web development technology. But I suppose the one thing we generally can’t do is tell our clients that the rounded corners don’t display in one of the most popular browsers, so we have to implement that alternative.

The main thing I want people to realise is that the web is not print. The web is very much about design, but just as (if not more) importantly, the web is about content, user experience and accessibility - people should be able to consume web content from their laptop, PC, phone, tablet or screen reader.

My strategy is simple: ensure the site looks as close as possible to the original design in the latest version of all the major browsers, and ensure the content and functionality is accessible in in older versions, across a range of platforms. The most important thing to test in older browsers is functionality and accessibility - if functionality is visible in older versions of a browser, make sure it works! If your functionality is only supported in the latest browsers, ensure their is a graceful fallback, tell the user what they’re missing and encourage them to upgrade!

Youtube in Internet Explorer 6

Some websites take a stronger stance - both YouTube and Digg have dropped support for IE6 (and I’m currently getting a JavaScript error when testing Twitter).

Digg in Internet Explorer 6

For me this goes slightly too far. Like it or not, there are still a large number of people using Internet Explorer 6 - so it’s important to spend time making sure the site looks error free, but it’s equally important no to spend hours pushing pixels trying to reach an unachievable goal.

And above all else, does the user really notice? If you were to visit a website in Safari, then then next day visit the site in Firefox would you notice if the font was 1px larger? Would you notice if lines of content were 4 pixels longer? There are plenty of beautifully designed sites out there which look amazing regardless of the minute differences between how they look in various browsers. And if god had wanted websites to look the same in every browser, he would have created a “world wide web consortium” to get browser vendors to agree on a set of core principles which would be supported by everyone.
Oh wait….