When creating a website or a web based system, one need to decide which browsers to support.
Defining a browser support strategy is a decision that may result in users having bad experience in some devices and require resources.
Surprisingly, many companies, especially startups and small businesses don’t thinks about it too much, don’t know how to address it, or simply dismiss it as not relevant and ask the development team to “support everything”.
This article suggests 3 strategies that will help you decide which browsers should your website support, and encourages a dialog between R&D, Marketing and Product departments before making the choice.
Agree? Disagree? Please comment here, or on our Facebook page.
This article covers:
- Why is supporting different browsers an issue?
- What is the real cost of browser support?
- Suggest 3 strategies to choose which browsers your website should support
Let’s go.
The image is a tribute to John Oliver
Why is supporting different browsers still an issue?
In a perfect world all the users will use the same browser with the same version, so when you develop a website you could develop and test it only in this ONE magic browser.
Unfortunately, this is not the case. Users (people) use different browsers – Google Chrome, IE, Safari, Firefox, Opera and otheres. And different versions of them too (although most browsers nowadays have the auto-update feature enabled by default, still there’s a different).
What are those differences? I will go over them in short.
CSS differences between browsers
CSS (cascading style sheet) – is the code used to style web elements on the screen, by defining font size, color, animation, hover and click behavior and much much (much) more. If you care about fonts, here’s one for you.
Although CSS is a corner stone of modern websites, each browser has its own engine for translating CSS commands/rules into pixels seen by the user.
This leads to all kinds of problems, like this one about the lack of support of margin-auto in older Internet Explorer versions.
More about these differences in SmashingMagazine’s article here.
Javascript spec support differences between browsers
Javascript is supported in all browsers, but each one support its spec in differently.
For instance, when ES6 was introduced, and added new capabilities to javascript, such as arrow functions, it was supported at first only in Chrome while others didn’t support it.
This means that if a developer wrote js code using ES6’s (arrow)=>{functions} it would run great on Chrome but would break in other browsers.
There are great tools to handle issues like that, personally I use Babel to translate new syntax into syntax supported by earlier Javascript versions.
But there are still bugs in that area.
The true cost of browser support
There are multiple ways to make your website look and behave great on different browsers. Sadly, nothing comes for free.
When a project starts, it’s easy to support all the browsers out there. When it grows, it becomes more difficult, time consuming and expensive.
Development time
Each feature needs to be compatible with all the browsers, so developers need to have access to machines that have them installed. At the place I worked in, there were several Mac Air Books switching hands all the time. And chargers also. Lots of time was spent on these sneaky chargers…
After fixing a visibility bug in Safari, one must check it didn’t break anything for Windows 10’s Edge users. Many times it did. So the circle continues.
Testing time
When declaring your product is supported on browsers X, Y, Z, one needs to test that they are indeed supported.
When the project is small, each feature gets a chance to be tested in all browsers. But what about regression tests, bug bashes (unified effort to test a specific feature), usability tests? Is it reasonable to test everything on every platform?
If you are blesses and you have some automated tests on the UI or End to end level, the browsers to run the tests with is also a consideration.
BTW, if you are into testing, check out – 6 expensive ways to fail in a testing project
Visual Designer time (UI)
Due to the differences between browsers, the appearance of a website may look different in Firefox and IE. The UI/design expert that planned the appearance of the screen will probably need to invest time in addressing these issues. Sometimes even a different spec needs to be done for a browser that doesn’t support scroll bar styling for instance.
Logo credits to Wikimedia
3 strategies to decide which browsers should your website support
After the long intro about why is browser support still a thing, we still haven’t decided which ones to actually support with full power in development, testing and visual designing efforts. Here are 3 different strategies:
Strategy #1 – Support browsers based on worldwide popularity
There’s a small battle going on underneath our noses between major browser vendors: Apple’s Safari, Google’s Chrome, Microsoft’s Internet Explorer & Edge, Mozilla’s Firefox, and other vendor like QQ (who???).
Each company wants its product, and its by products to take as much of the market as possible. However, browser’s popularity differs world wide.
Here are the world wide statistics for DESKTOP browsers usage in 2019, based on statcounter.com.
| Chrome | 71.05% |
|---|---|
| Firefox | 9.52% |
| Safari | 5.41% |
| IE | 5% |
| Edge | 4.6% |
| Opera | 2.44% |
Based on the information above, one can make a decision to support only Chrome and Firefox for desktop. And gain access for 80% of the people using desktops worldwide. If time permits, invest in all the others.
Advantages:
- Easy to understand
- No need for a deep market research
- Suits for the case you are developing a product “for every user on the planet” from day one
Disadvantages:
- From my experience, when a company starts a product that is targeted “for everyone, from your grandma to your gym instructor”, there’s a focus problem. If this is the case for you, discussing the browser support strategy might be a good platform to ask hard questions about the target audience.
- In case you know who is your target audience, this data is just too wide. Perhaps you are targeting bankers who have only IE9 installed on their machines and cannot upgrade? ever?
If you are targeting an Asian market, these statistics can simply be wrong for you. - You might focus your efforts on the wrong browser, not used by your own users.
Strategy #2 – Support browsers based on specific country/region/sector statistics
Although it’s tempting to see the whole world as potential users, this is hardly the case (sorry Facebook employees, you can skip this paragraph).
Choosing the right browsers to support should be influences by the usage of your potential users. Each country and region have different statistics.
India’s statistics vs. global statistics
Let’s say your product is designed for the Indian market. According to the global statistics, your should support at least Chrome, Firefox and Safari to gain more the 80% of the market.
Have a look at the desktop browser’s usage statistics in India in 2019
| Chrome | 81.08% |
|---|---|
| Firefox | 9.99% |
| UC Browser | 2.48% |
| Opera | 1.72% |
| Edge | 1.53% |
| Safari | 1.43% |
By looking at a specific country you might find out that:
- You shouldn’t support Safari. I guess your UI designer will not like it though, because she uses a mac 🙂
- Developers and QA should install the UC browser (that wins Chrome on mobile in India) and work with them. Maybe there’s an opportunity here also.
China’s statistics vs. global statistics
Another case where global statistics don’t match local ones is a small country named China.
China’s desktop browser statistics are as follows:
| Chrome | 66.05% |
|---|---|
| QQ Browser | 9.61% |
| IE | 5.59% |
| Firefox | 4.97% |
| Sogou Explorer | 4.11% |
| Edge | 4.05% |
Look at the second most popular browser: QQ Browser. I never heard of anyone using it, but perhaps it’s because I’m not Chinese.
If I would address the customers in China, I would definitely make sure my website looks and behaves well in this browser.
Advantages:
- Marketing oriented decision
- Engages a dialog between different parts of the organization
- Pops up new obstacles such as unknown browsers to support, at an early stage
Disadvantages:
- Not good for a company aiming to conquer the entire world at a glance
- Requires some research
- It is still not accurate in 100%
Strategy #3 – The lean approach. Support only what real clients are using
In case you are not focused on a market or region, and you do not have the resources to support everything, this one is for you.
The idea is simple:
- Support only Chrome.
- Deploy a lean landing page with a “coming soon, please subscribe for updates” form. No real functionality, just marketing stuff. Make sure you have google analytics/other tool tracking setup.
- When enough traffic arrived and the sales people have enough potential leads, analyze the browser/mobile statistics usage using google analytics. These are the potentially first REAL USERS that will use your website.
- Support what they are browsing with.
- Repeat as your websites grows and evolves.
I think this solution is good for startups with a small R&D team, and it’s a way to get R&D, marketing and product to sit together and talk about real users and their behavior.
Advantages:
- Goes with the Agile spirit, just in time browser support
- Can be done with a small R&D
- The decision of which browser to support is 100% based on data coming from real/potential users
Disadvantages:
- Requires a tight collaboration with marketing department (maybe an advantage?)
- There’s a chance that this browser support strategy is too narrow, and you can invest efforts in potential customers that won’t become paying ones.
Conclusion:
Browser support strategy is something to consider when designing a website. It has potentially high costs on development, testing, and visual design.
Some companies ignore this question, and deal with it as a “technical issue” that R&D should handle.
IMHO, choosing the browser support strategy should be done in collaboration between Marketing department, providing information regarding the target market, Product department, that oversees future features and plans, and R&D to reflect the cost of supporting browser X on OS y.
Thanks for reading, please share which browser support strategy would you use and why?