You’ve been up all night furiously writing CSS and you’re itching to put your new design live. Hang on. You’ve checked this in Internet Explorer, right?
Get your facts right
Using Google Analytics, you can get an idea of the cross section of browsers being used to visit your site. You may be surprised to see that although the number of visitors using one of the older (and more troublesome) browsers is quite low, there is still the odd nut job surfing your site on Netscape Navigator.
Analytics -> Audience -> Technology -> Browser & OS
Even if the percentage is low, don’t use this as an excuse to do nothing.
Lost revenue
A sale is a sale, and dismissing visitors on older browsers is just laziness. If you’re really serious about this whole eCommerce thing, fix your shit.
If you’re unknowingly (or even worse, knowingly) missing sales because your checkout doesn’t work in Opera 10, this is money down the drain. If you’re paying for visitors who simply can not convert on your site, you’d be better spending your money on Findus shares or a book of HMV vouchers.
So the lesson here is make time for a few hours testing, fixing and testing again. There will be financial rewards to gain in the long run.
Internet Explorer
The mention of the name alone is enough to send any seasoned web developer in to a blind rage. But like programming languages, there is the tendency to needlessly “slag off” what other people use when it comes to browsers, or feel your tool of choice is somehow superior. “I use Chrome”. Nice one.
I’m not saying Internet Explorer is perfect, but like it or lump it, people use it. Don’t let the “You’re an idiot for using IE” attitude prevent maximising sales.
If you employ an agency or developer to take care of this stuff, don’t let them fob you off with excuses like “low browser market share”.
Getting Internet Explorer to play nice
In previous versions of Internet Explorer, you could use “conditional CSS”. Microsoft, having decided to give the finger to most conventional web standards allowed for version specific CSS to be applied to smooth over the fact their browser was pretty flaky.
By using these conditional statements in your page, you can add version specific CSS for Internet Explorer users to iron out any nastiness.
Internet Explorer 10
But hang on, what’s that you say!? Windows 8? Internet Explorer 10? Hurrah! At last, no more conditional CSS required!
Oh wait, it’s still broke.
So now we’ve established Internet Explorer 10 is also doing weird stuff, we can employ some server side magic to detect the browser, or my preferred method, use some Javascript Kung Fu instead.
Using a Javascript framework (such as jQuery) you can quickly check for the browser type (and version) and update the HTML when the page when loads.
Testing browser/OS combinations
This can be a bit of a headache. If you have Windows 7 or later, you can setup up older versions of Internet Explorer on a virtual machine.
However you’re still left with Mac OS X, Lion, Mountain Lion, and the several different flavours of Linux desktop distributions to test on.
Don’t forget mobile browsers either. Think about the shopping list required if you were to buy every combination of hardware / mobile OS, it’s going to get pricey.
At Copify, we use a web based product called Browserstack. It allows you to test many combinations of OS (both desktop and mobile) with all the available browsers.
Desktop OS / Browser combinations
Multiple combinations of Mobile OS/Hardware
There are literally dozens of combinations to test with. Go grab a coffee, and give their free trial a go.
Testing with Safari on iPad2
HTC running Android
Whether you’re setting up multiple machines or using a tool like Browserstack, don’t underestimate the value of testing. You never know how many sales you might have let slip.
