Internet Browser Wars and the Importance of Cross-Platform Testing

Originally written by Jessica Sullivan, Founder of Crystal Realm Designs, as Web Producer for The EGC Group.

Firefox, Safari, Opera, Internet Explorer, Chrome logos
With all the browser choices out there, how do you choose? Which one is the most standards compliant?

Since the beginning of browser based internet, different browsers have caused web developers a lot of headaches.

In the late 1990s, when the big browsers were still Internet Explorer and Netscape Navigator, illustrated just that difference between the two early powerhouses. Back then, there were even differences in what HTML tags were supported, such as <blink> for Netscape and <marquee> for Internet Explorer.

While Netscape and a few other old browsers have now fallen by the wayside in favor of Firefox and Chrome, browser differences are still the bane of a developer’s existence. A designer, for instance, can create an amazing template in Photoshop on their Mac, send it over to the developer (who is often using a PC), who will then create the HTML mock-up, test it in whatever browsers they have downloaded, and then send back the test link. The designer will look at it in a different browser version on a different operating system, and say that it’s all wrong.

A great resource for developers is the site, A lot of developers use it to find quick tutorials about web technologies that they haven’t used in a long time, or to double check something they weren’t sure about. The site has an entire section dedicated to browser stats, operating system stats, and display settings.

While the browser-specific tags that once separated Internet Explorer from Netscape Navigator are pretty much gone, today’s big browsers all display spacing (such as margins and padding) differently with cascading style sheets. Often, this can push elements on the page too far in one direction in one browser, but too far in the other direction in a different browser. Depending on how a viewer’s zoom setting is set, the text size will look different. Depending on the user’s screen resolution, pictures can often appear smaller or bigger, clearer or more pixelated. In most situations, these problems are not due to the developer not coding the page properly, but rather, the settings of the computer it’s being displayed on.

A Mac with Safari will display a page differently than a Mac with Firefox or a PC with Chrome. Testing for every possible combination in existence is downright counterproductive. Each version of an operating system or browser will also display differently from other versions of the same combination. A Windows XP computer using Internet Explorer 8 is going to display a website differently than a Windows 8 computer using Internet Explorer 10.

The philosophy of web development presented by in the article linked to earlier tends to be a timely standard that doesn’t seem to be going out of style anytime soon; it’s one that covers most possibilities without leaving your QA team under a heap of tests to run: Develop for the latest two browsers, at middle-of-the-road display setting, and aim for the last operating system version, not the latest. While it’s great to say that you can offer state-of-the-art techniques and brand new technology, keep in mind that it takes a while for new browser versions to propagate across an internet audience. You might end up with a large number of end users (or a client) who can’t see your cool, new CSS special effects.

It might also be a good idea to encourage your clients to upgrade to one of the latest two browser versions. This will allow them to see exactly what you intended your work to look like. Even after that, however, individual browser settings (allowing JavaScript, cookie settings, security level) and sometimes even network settings (blocked scripts, blacklisted ad servers) can have a major effect as well. Always make sure your intentions of what you want to develop are clear at the contract level before you start working, or you may end up programming for a lot of individual browser settings instead of a standard default setting.

Until standards of support are set across the entire internet industry, this is something that will likely remain an issue for developers and ad agencies in the future. It’s always best to be prepared and to have tools at your disposal to help ease the development process. Microsoft offers a tool called ‘Expression’ that attempts to emulate many different browser versions and settings so you can get an idea of what something will look like. Adobe also has one available called ‘BrowserLab’. Last summer, wrote an article reviewing various testing tools that are available for developers to use. Some are free, some are subscription based, and some are a flat fee.

Keep in mind, while these tools are very helpful in finding many of the problems, they’re not fool-proof and still can’t test for every single combination of settings, versions, and hardware (let alone mobile!) that an end user might have. In this internet-driven age, finding a common denominator is very hard to do.