The wonderful world of cross browser web development and the tools that will help you keep your sanity.

The bane of all web developers across the world is cross browser compatibility. Every developer has had that moment when they think they’ve finished developing their beautiful web page and think to themselves “Look’s like I’m almost done, all I have to do is one last check on Internet Explorer…” only to realize their webpage looks like it was developed by a baby banging on a keyboard.

Below is how we typically tackle this pesky problem and some of the tools that we use.

Understanding Browser Marketshare

The first step in cross browser compatibility success is understanding the current browsers market. It’s unrealistic to say you will support ALL browsers on ALL platform, as the amount of testing needed would become cost prohibitive, even for the deepest pockets. A better approach is to understand who your target audience is, what types of browsers they use, and supporting only those browsers.

For example, if your application is targeting millennials, your target set of browsers might be all current major desktop browser versions (Firefox, Chrome, and IE) plus one older version. Also you would want to support mobile browsers on Android and iPhone. If your target demographic is leaning more towards company employees of a corporation that uses older versions of IE and has a deal with Blackberry, you will have to include those browsers and devices to your browser test matrix.

To figure out what browser to support, you can use browser usage market share data. Wikipedia is a great place to find the market shares of both desktop and mobile browsers. Also if you need to know mobile specific versions of different mobile browsers you can find iPhone’s and Android’s version market share on their developer sites. One of the biggest sticking point is what version of IE support. You can find IE8’s and IE7’s market shares on these ever hopeful countdown sites.

Tools to make your life easier

Once you’ve selected your browser test matrix, it’s on to development. While developing you can use the website caniuse.com to understand which html, css and javascript features are available on which browsers. For example border radius, is supported in all major browsers except IE8 and opera mini.

The javascript library modernizr is an essential tool for all web developers. It helps you detect which capabilities are available on the user’s browsers. With this information you can create graceful fallbacks when certain features you typically rely on are not available (like geolocation). In conjunction with modernizr, there are a number of polyfills that will help bring modern capabilities and features to older browsers.

Another thing you can do to make your life easier is to use a battle tested responsive framework. These frameworks make it easy to deal with browsers of all different sizes, and help solve a lot of common issues seen by many developers. Some of the most popular ones out there right now are bootstrap, foundation, and starter kit.

Testing, Testing, Testing

You’ve done your work and selected your browser matrix, and used the above tools to create a website that has maximum cross browser compatibility. Now it’s time to test it and make sure everything is working.

The old way of testing would be to open up your web page on every browser on every devices in your browser matrix. However this can be cumbersome and take a lot of time. Not only that, it means you need a mac and a windows computer.  These day you can use virtualization software like virtualbox, vmware, and parallels, that will allow you to host  Windows on a Mac, and OSX on a PC. Microsoft created Modern IE where you can get all the older versions of IE and load them up in the virtualization software of your choosing, and quickly test without having to have a PC.

To speed up testing on different browser resolution and devices, you can use Chrome’s Developer tools device emulator to quickly test without having the actual device.  There are also services that will take a screenshot of your website against a huge array of devices and browsers. My favorite productivity tools for testing against a bunch of browser is BrowserSync, which automatically reload and sync multiple browsers at once. This allows you to test IE, Chrome, Firefox, Safari, iPad and Android all at once!

Summary

Cross Browser testing can be a pain. However with the right resources and and the right tools, it no longer has to be the thing of nightmares.

What tools do you use for cross browser testing?

If you like this post, it would mean a lot if you tweet it out or share it with a friend!