Skip to main content

Browser support - how to choose

· 5 min read
Luke Owen
Luke Owen
Lead Front End Developer @ Lunio

Regardless of whether you’re a developer, designer, or marketing person; the decision of which browsers to support is kinda an important one.

Support too many and you’re wasting development and testing resource, support too few and you’re cutting out part of your target market.

It can be a delicate balancing act and there’s no definite answer, but there are some big factors to take into account when you try and decide…

The tech you use​

The first and most obvious limit is your front end tech stack:

  • Using React? Then say goodbye to anything below IE9
  • Bootstrap 4? You’ll need a browser that supports flexbox

The internet and the technology we use to build it are constantly changing, it’s inevitable that if you want to keep using the latest tech: you’ll need to keep dropping support for the oldest browsers.

Your user base​

Next up is analysing who actually uses your site.

Finding out the global browser market share is easy, there’s a lot of public data. This will help but you’ll need to get the specifics for your site, tracking software like Google Analytics will help you here.

On top of this you’ll need to assess your audience, a technical audience is a lot less likely to use Internet Explorer than the internal users of a major corporation.

Commercials​

You’ll also need to take account of commercial pressures, if you get 80% of your income from one client who uses IE7 then you’ll probably want to support it…even they’re only a small percentage of your user figures.

Likewise if your entire sales team is using MacBooks to demo to clients, you should probably check which browser they use and make sure it’s supported.

How I do it​

It’s pretty clear that deciding browser support needs to be unique for each project, but you can still create a more general list and fine-tune it as needed.

I generally split browsers into three groups depending on how the site will work: Active Support, Passive Support, and No Support. In theory, browsers will start on Active Support and over time work their way down to No Support.

Active Support​

The browsers I fully support, everything should work perfectly and look good. If someone finds a bug that prevents the site from working: it’ll always be fixed.

This is the ‘official’ list of browser support, and it’ll likely be the only one made public. The other two categories will just be for internal use (for example for the sales or support teams).

Passive Support​

Older browsers that follow older standards, most parts of the site will probably still work here but I don’t provide any guarantees. As a minimum: visual bugs will start to creep in.

If a catastrophic bug appears it might be fixed, but more likely the browser will move down to the next category and support will be dropped.

No Support​

Hopefully self-explanatory but this category is everything else. Nothing is guaranteed to work for these browsers. Seeing as most browsers are now evergreen, if you’re using a browser in this category then you’ll have some difficulty using the internet anyway.

My browser support list for 2019​

With that in mind, here’s what I’m supporting for personal projects this year:

Active Support​

  • Chrome (Windows/Mac): Latest 2 versions
  • Firefox (Windows/Mac): Latest 2 versions
  • Safari (Mac): Latest 2 versions
  • Edge (Windows): Latest version
  • Safari (iOS): Latest version (12)
  • Chrome for Android: Latest version

Notice that Internet Explorer doesn’t make the list, this is a personal choice. IE11 is 5 years old now and it’s not evergreen, for personal projects I also have no commercial pressures to support it

Passive Support​

  • Internet Explorer 11
  • Edge: 17
  • Safari (iOS): between 11 and 7
  • Chrome releases older than two versions but less than a year
  • Firefox releases older than two versions but less than a year

No Support​

  • Internet Explorer 10 and below (Microsoft don’t support them)
  • Manufacture specific browsers (Blackberry/Samsung etc)
  • Any Chrome version below version 70 (about a year ago)
  • Any Firefox version below version 63 (about a year ago)
  • Safari iOS below version 7

Version numbers are correct at the time of writing, but it tends to be a rolling process: If its an evergreen browser and it’s more than a year old: then it belongs in this group.

Some important things to remember​

Your site probably won’t look the same in every browser​

There are at least five major browser rendering engines, they all do broadly the same thing but there are always subtle (and not so subtle) differences between how they act.

Its totally fine (and normal) for a site to look a little different across different browsers.

You can’t support everything​

There are lots of browsers and lots of browser versions, it’s impossible to fully support all of them. What you can do is make sure things fail gracefully or use a fallback when they’re not supported.

If the user has JavaScript disabled then leave them a message inside a <noscript> tag to tell them why they’re seeing a white screen

Decide early​

Browser support should be settled from the start before you even choose the technology you’re going to use.

It means you can set expectations early. It’s no good having a project fail acceptance testing because it wasn’t built to support a certain browser.

Seriously, rewriting an ES6+ project to support the finance director’s old Blackberry won’t be fun.

Keep testing it​

You don’t necessarily have to do a full set of regression testing on every browser you support for every release. Few teams have the resource for that, even with tools like BrowserStack.

But you should be testing throughout your development process, the first person to find a browser bug should not be your end-user.