Which browsers should my website support in 2016?
What is a browser?
It may seem like an obvious question to most, but a browser is the program on your computer (or app on your phone) that lets you view web pages. You are probably using one now to read this blog post. There are many different browsers, although they all do the same job. Here are some of the most common browser icons.
Like almost all programs, browsers need updating from time to time. Sometimes it’s for security reasons, sometimes for added features. As you may have noticed, the internet has changed quite a lot since it was first created. Have a look at it here – the world’s first website. The past few years has seen a huge advancement in the way that websites are made. Two of the core technologies driving the web (HTML and CSS) have seen major new versions. This has facilitated lots of changes and improvements to what can be done on the web. Unfortunately, to take advantage of these improvements, the web pages have to be viewed on browsers that support the new features.
When building websites, many of the new features can dramatically decrease the time it takes to do certain things. Some of them have work arounds that can be implemented, although every implementation takes time and, as a result, increases the cost of the website.
For example, the new version of CSS gave us the ability to apply rounded corners to boxes or tables. This may seem like an insignificant feature, but creating rounded corners on old browsers that do not support this property is a very difficult thing to achieve. To get a similar result on old browsers, a developer would need to create an image of a rounded corner for each corner and then position it perfectly so it lines up with the borders of the box. This fiddly approach was inefficient and time consuming to get right across all devices.
Some people might consider rounded corners to be a fairly minor design detail that only adds aesthetic value, and one that could potentially be discarded from a website project in order to save money. However, for organisations whose branding and guidelines include this design element, it would be preferable to ensure the website’s look and feel is consistent with their offline marketing materials.
Our standard approach for rounded corners is to implement them using CSS only so that web users browsing with today’s modern browsers view the website how it should be, consistently on-brand. It’s been many years since we had to also apply the outdated corner-images approach for older browsers but can still offer this if required.
The Flexbox is something that can dramatically improve the way that websites can be built. It makes creating complex layouts that work well on screens of different sizes, something very important in today’s multi-screen world, much easier. Read our blog about the problems faced when only targeting desktop users. To get the same effect without using flexbox can take much longer.
Testing a website is vital and can take a considerable amount of time, particularly if the site is large with a variety of page layouts and types of content. The more browsers that need to be supported, the more time it takes to test and the more expensive the website will be. With the rise in popularity of mobile devices, websites need to be tested thoroughly on a range of different tablets and smartphones as well as desktop computers.
Which browsers should be supported?
This is a heavily debated question and one that some people feel very strongly about. Often, like many other things, it comes down to cost. If you want your website to support every browser that’s ever been made then be prepared to pay an awful lot of money, as that is going to take a significant amount of time and effort. If, on the other hand, you only want to target one browser and just hope your site works well on the others without testing it, then you’ll certainly save money but you’ll also run the risk of losing potential business from a vast percentage of web users.
We wouldn’t recommend either of the above options. As with most things, we suggest a happy medium. The difficulty is deciding exactly which browsers to support and which ones to ignore, so let’s take a look at that in more detail.
Chrome and Firefox
Google’s Chrome and Mozilla’s Firefox browsers both automatically update themselves and support the majority of new features very well. They both release regular updates and most users who choose to surf the web with these browsers will have versions that are up to date. It is generally agreed that if it works on the latest couple of versions of Chrome and Firefox, it will probably work on almost all versions unless you are dealing with highly experimental web features (something production websites probably shouldn’t be doing anyway). By supporting Chrome and Firefox, you already have (at the time of writing) a site that will be viewable by over two thirds (66%) of desktop / laptop users.
Opera and Safari
Many browsers use the same underlying technology as Chrome does. Opera is one such browser and, until quite recently, so did Safari. This means that if a website works well in Chrome, it will probably work quite well in these browsers too. Sometimes there will be some very minor changes needed but even that is rare. Once you have accommodated for these browsers as well, you can expect over 75% of desktop users to be able to view your website correctly.
Edge is the new browser from Microsoft that ships with Windows 10. It should automatically update too so supporting this browser will push your total expected support to over 81% of desktop users. This is a modern browser and supports most new standards that the other browsers we have mentioned above support.
Other small browsers
There are hundreds of other browsers that, on their own, only make up a fraction of a percent of the market share. It would be impossible to test all of these in a reasonable amount of time. Fortunately, most of them are also built on top of the technology of either Chrome, Safari or Firefox. In other words, if it works in those three, it should work in almost all of these. Combining all of them you can add another couple of percent to the supported browsers.
I have intentionally left Internet Explorer until last because it is where most of the confusion has historically been. Internet Explorer does not automatically update itself meaning there are people using old versions. Secondly, it comes as the default browser installed on Windows computers (before windows 10). That means many people who don’t know much about computers will use an old version of IE without realising it needs updating. Another annoyance is that older versions of Internet Explorer added features that were not part of the standard and then didn’t continue them in newer versions. Any businesses that had relied on these features could not update their browser. This meant that, until recently, there were lots of people using old versions of IE.
Internet Explorer 11
This was the latest version of Internet Explorer until Microsoft switched to their Edge browser. Currently it accounts for almost 13% of the market share for Desktop browsers. This will comfortably bring the supported desktop users above 96%. Internet Explorer 11 has some issues although, on the whole, it doesn’t take much additional work to add support for it.
Internet Explorer 10
Internet Explorer 10 has some additional problems, although these usually only relate to extras that the website could manage perfectly well without. One major annoyance is that it only supports an old version of the flexbox standard. This means that if you want to use flexbox, you have to code it twice. At the time of writing, IE10 has just 0.66% of the market share.
Internet Explorer 9
Internet Explorer 9 was the first version of IE to support a lot of new features. Unfortunately, however, there are still many features that are unsupported. Making websites usable in Internet Explorer 9 is usually achievable within a reasonable amount of time, although making a site work in IE9 to the same standard as other, newer browsers would take significantly longer.
Here at Fellowship, IE9 is usually our cutoff point. Websites built by us are perfectly usable in IE9, but will display and work even better in IE10 and above. If, as the client, you require a website that supports older browsers than IE9, then we can certainly deliver this for an additional cost.
I won’t go into such depth for mobile browsers because of one, simple reason. Both Android and iOS (the two most popular mobile operating systems) make it very clear when an app requires updating and they make it very easy to do so. This results in most mobile users having relatively up to date browsers and the majority of new features being available to most people.
So far, all statistics I’ve quoted apply to desktop / laptop users only. If you now include mobile browsers then IE9 and IE10 have a combined market share of less than 1%, so you’ll need to consider how much time and effort is spent on supporting such a small number of web users.
So, which browsers should your website support?
Assuming that your site will receive normal traffic, without specific requirements, we think your site should meet the following requirements:
- Fully functional for the 3 newest versions of Chrome/Chromium (Desktop and Mobile)
- Fully functional for the 3 newest versions of Firefox (Desktop and Mobile)
- Fully functional for the 3 newest versions of Edge (Desktop and Mobile)
- Fully functional for the 3 newest versions of Safari (Desktop and Mobile)
- Usable, but without bells and whistles, for IE9+
How can we help?
Hopefully you’ll have found this article useful, particularly if you’re thinking of embarking on a new website and are unsure as to which browsers to support.
One simple way we can help is by taking at look at the statistics of your current website (assuming you have one of course) to find out which browsers are being used by your visitors. From there, we can start considering your new website and which level of browser support we feel is appropriate. If you have any questions, contact us.