Back to Website Launch Checklist

How to make sure your website works cross browser and what browsers to target

How to make sure your website works cross browser and what browsers to target

Any web designer worth their salt should be aware that their users won't necessarily be using the same setup as them, and will adapt and test their work accordingly. Read on to find out what browsers you should be putting your efforts into targeting, and how to cross browser test your projects to ensure they work as consistently as possible for the majority of your users.


Browser support

How to choose which browsers to support

This can vary wildly per project, however the average small business or hobby website doesn't really need to go too far back as, on the whole, users are getting a lot better at keeping their browsers up to date. The most important question is: do you need to support Internet Explorer 9 or earlier? IE10 onwards has access to most of the modern features which you will be using regularly in your websites (such as flexbox and CSS transitions) and Chrome/Firefox/Safari have always had great support for modern features, and a much more motivated user base when it comes to updating.

Looking at the analytics of another website I run (in a non tech-savvy niche) IE9 and earlier only accounts for roughly 0.5% of traffic so I am more than happy to drop support for these browsers. If there's a particular HTML or CSS feature which you would like to use but you're not sure how well it's supported, you can type it into the extremely useful caniuse.com.

How to support older browsers (IE9 and earlier)

If you absolutely need to support, say, Internet Explorer 8 then that's when you're limiting what you can achieve, and some tricky decisions need to be made. You either:

Generally a combination of points 1 and 2 are what you should shoot for, but occasionally a polyfill (such as this flexbox polyfill) may be necessary.


Cross browser testing tools

The browsers themselves

To start off with, during the development of your website you should regularly check progress in multiple live browsers (Chrome, Firefox, Safari and IE/Edge) - this will allow you to flag up and correct issues early on, before they become buried in code. It also allows you to use each browser's native development tools to quickly inspect elements and figure out what's going on.

Browserstack

A crucial tool for Mac users as it's one of the few ways to test a native installation of Internet Explorer. Browserstack is an emulation tool which connects to real computers running real installations of your choice of operating system and browser, and streams it straight to your computer. It costs a little money, but this really is an invaluable tool for testing older versions of browsers and operating systems. Click here to check it out.

Browsershots

They desperately need to update their website, but nevertheless this is a decent tool to check, at a glance, that your website looks good in over 100 browser versions. You can use it completely free of charge but it takes a little time to generate all of your screenshots, or you can pay a small fee to skip the queue. Click here to check it out.


Hopefully this article has helped you get to grips with cross browser testing your website and some of the great tools available to make this easier.

  Back to Website Launch Checklist