Cross-browser testing: how to live with Internet Explorer

By Jordy Pickel | October 24, 2014

Show articles about:

The Author

Jordy Pickel

More by Jordy | Bio

Share This

Ask a group of web designers what they think of Internet Explorer and you’ll get a fair share of groans. Most will grumble about CSS hacks and quasi-transparency support, and the rest will make hilarious jokes like “Internet Explorer is only good for downloading other browsers.”

What’s really at the heart of all this hostility—to a once industry-leading product—is simply the aggravation of writing code that isn’t always accepted by all browsers (and the need to have to troubleshoot in so many different potential environments).

While there are HTML, CSS, JavaScript, and Mobile coding standards, a browser that doesn’t support the new “whiz bang” techniques becomes a headache for designers (think transparency and rounded corners). On top of that, the user experience that morphs from a desktop hit to a mobile hit can dramatically alter the performance of a website (much like drop down menus and hover effects on touch screen devices).

The Players

We’ve gone from a world in which everyone used Netscape to steal Metallica MP3s, to one in which a user’s browser may change as they transition from their desk to their car to their couch. Even if you could control what browsers people use, it’s nearly impossible to control what versions they have (or have not) updated to. In fact, it has become such a problem that a few big names have launched campaigns to stop using their own products. There’s just no guarantee which browser your visitors will be viewing your content in, so you need to optimize for them all.

At ThinkFVM.com, we see that our visitors use the usual suspects:

FVM Browsers by Type

A full 15% of our visitors are on IE, which immediately raises flags. Will all of them be able to handle our Parallax? Do we have border radius styles that are going to look good when they’re downgraded? How many of these visitors are using versions of IE that can’t handle background sizing?

So, since Internet Explorer is the biggest culprit in behind-the-times-itis, we usually keep an eye on visitors’ IE browsers:

FVM Browsers by IE Version

Seriously? There are still IE6 users out there?

Right out of the gate we know that almost 8% of our visitors have IE8 or earlier. Those are the biggest culprits we’re seeing today, and to them, our website may not look as spectacular as we intended it to. We’re used to this and we incorporate that thinking into our concepts, but we don’t always want to sacrifice design for a troubled few. So we build what we want to and test accordingly. However, short of owning a 1980s-esque room full of computers and outdated operating software, what’s a coder to do?

Well, there are tools to help us out.

The Solution

Our personal favorite browser testing website is CrossBrowserTesting.com. We joined this subscription-based service when it first launched, at a time when coders were lost for quality tools, and it has grown with the market ever since. Although no matter which browser testing software you use—BrowserStack, SauceLabs, BrowserShots, Ranorex, and SmartBear all have their own products—the tools are straightforward: plug in a URL and see how pages are rendered on the screen, in various browsers, and in multiple operating systems.

CrossBrowserTesting.com offers two methods for its troubleshooting: screenshots and live tests. We typically run all new websites and landing pages through the screenshots application, running IE7-IE11, a current and legacy version of Firefox, Chrome, Opera, and even iOS and Android mobile browsers. With a few clicks, we can test each layout design and check back later to compile a punch list of CSS miscreants.

If there are any active elements on the page—say scrolling marquees, dynamic drop down lists, or unique hover states—we can click from the screenshot result to view a live test of the website. This also helps when troubleshooting a CSS fix to make sure it was effective.

Use Case In Action

When we built our website, we took advantage of full-bleed images, which came at a cost to lesser capable browsers. We knew that IE8 and 7 did not support the background-width property, so we started right out with a failsafe image placement. Still, our website looked like this:

Screen Shot 2014-09-24 at 1.46.33 PM

IE 9, 10, and 11 look great, as does IE7. IE8 however, doesn’t scale the background image properly, and the failsafe image that IE7 displays isn’t rendering in IE8 like it should. Sorry to our one user who visits in IE6, but we don’t bother testing for that browser anymore. You need to upgrade!

Yeesh. Luckily we ran into this problem before and implemented an easy hack.

Screen Shot 2014-09-24 at 2.17.10 PM

Now, our pages look as uniform as they can be. Sure, the transparent black behind our bios is nicer than the solid grey, but that’s life. There’s probably a transparency hack out there somewhere, but the design didn’t warrant the extra scripting for the expected payout. The point is that no matter what browser a visitor uses to view your website, they can still view the website. And, with the cross-browser testing tools that we have at our disposal, we didn’t spend a lot of time guaranteeing a uniform user experience.

After all, we have a lot of other stuff going on.

Topics: ,