This article is part of a series created in partnership with SiteGround. Thank you for supporting the partners who make SitePoint possible.
The question “which browsers should my website/app support?” is often raised by clients and developers. The simple answer is a list of the top N mainstream applications. But has that policy become irrelevant?
What are the Most-used Browsers?The top ten desktop browsers according to StatCounter for May 2017 were:
- Chrome — 59.37% market share
- Firefox — 12.76%
- Safari — 10.55%
- IE — 8.32%
- Edge — 3.42%
- Opera — 1.99%
- Android (tablet) — 1.24%
- Yandex Browser — 0.48%
- UC Browser — 0.41%
- Coc Coc — 0.33%
- Chrome — 49.23%
- Safari — 17.73%
- UC Browser — 15.89%
- Samsung Internet — 6.58%
- Opera — 5.03%
- Android — 3.75%
- IEMobile — 0.68%
- BlackBerry — 0.26%
- Edge — 0.15%
- Nokia — 0.12%
- Patterns vary significantly across regions. For example, Yandex is the second most-used Russian browser (12.7% share). Sogou is the third most-used browser in China (6.5%). Opera Mobile/Mini has a 28% share in Africa.
- New browser releases appear regularly. Chrome, Firefox and Opera receive updates every six weeks; it would be impractical to check versions going back more than a few months.
- The same browsers can work differently across devices and operating systems. Chrome is available for various editions of Windows, macOS, Linux, Android, iOS and ChromeOS, but it’s not the same application everywhere.
- There is an exceedingly long tail of old and new, weird and wonderful browsers on a range of devices including games consoles, ebook readers and smart TVs.
- Your site’s analytics will never match global statistics.
Are Browsers So Different?Despite the organic variety of applications, all browsers have the same goal: to render web pages. They achieve this with a rendering engine and there is some cross-pollination:
- Webkit is used in Safari on macOS and iOS.
- Blink is a fork of Webkit now used in Chrome, Opera, Vivaldi and Brave.
- Gecko is used in Firefox.
- Trident is used in Internet Explorer.
- EdgeHTML is an update of Trident used in Edge.
Site Owner RecommendationsSite owners should appreciate the following fundamentals and constraints of the web. The web is not print! Your site/app will not look identical everywhere. Each device has a different OS, browser, screen size, capabilities etc. Functionality can differ Your site can work for everyone but experiences and facilities will vary. Even something as basic as a date entry field can has a diverse range of possibilities but, ideally, the core application will remain operable. Assess your project Be realistic. Is this a content site, a simple app, a desktop-like application, a fast-action game etc. Establish a base level of browser compatibility. For example, it must work on most two-year-old browsers with a screen width of 600 pixels over a fast Wi-Fi connection. Assess your audience Don’t rely on global browser statistics. Who are the primary users? Are they IT novices or highly technical? Is it individuals, small companies or government organisations? Do they sit at a desk or are they on the move? No application applies to everyone — concentrate on the core users first. Examine the analytics of your existing system where possible but appreciate the underlying data. If your app doesn’t work in Opera Mini, you’re unlikely to have Opera Mini users. Have you blocked a significant proportion of your market? Change happens It’s amazing that a web page coded twenty years ago works today. It won’t necessarily be pretty or usable but browsers remain backward compatible. (Mostly. The
<blink> tag can stay dead!) However, technology evolves. The more complex your site or application, the more likely it will require ongoing maintenance.
Web Developer RecommendationsWith a little care it’s possible to support a huge variety of browsers. Embrace the web! The web is a device-agnostic platform. Content and simpler interfaces can work everywhere: a modern laptop, a feature phone, a games console, IE6, etc. Learn the basics of progressive enhancement. Even if you choose not to adopt it for your full application, there will be pockets of functionality where it becomes invaluable. Adopt Defensive Development Techniques Consider the problem before reaching for the nearest pre-written module, library or framework. Understand the consequences of that technology before you start. Frameworks should provide a browser support list because they have been tested in limited number of applications. Learn about browser limits and quirks. For example, if you’re considering an SVG chart, be aware that it can look odd in IE9 to 11 and fail in IE8 and below. That doesn’t mean it’s a binary choice of rejecting SVGs or abandoning IE support. There are always compromises which do not incur significant development. For example:
- accept SVG rendering is weird but it remains usable
- only show a table of data in IE, or
- provide an SVG download which IE users can open elsewhere.
- Progressive Web Apps do not work offline on iPhones and iPads — but online operation is fine.
- CSS Grid is not supported in IE — but float, flexbox or full-width block fallbacks should be acceptable.
- The desktop edition of Firefox does not show a calendar for date fields — but users can still enter one.
You Haven’t Answered the Question!The question “which browsers should you support?” has become too restrictive. Presume your answer was just “Chrome”:
- which devices and OS is it running on?
- what range of screen sizes will be supported?
- which version are you referring to? The latest? Chrome 10 and above?
- what happens when a new version of Chrome is released?
- what will happen in other browsers when Chrome effectively becomes your application’s runtime?
Frequently Asked Questions (FAQs) About Browser Support for Websites
What are the most popular web browsers that websites should support?
The most popular web browsers that websites should support include Google Chrome, Mozilla Firefox, Safari, Microsoft Edge, and Internet Explorer. These browsers cover a significant majority of internet users. However, the specific browsers a website should support can depend on the website’s target audience and their preferred browsers.
How can I determine which browsers my website should support?
You can determine which browsers your website should support by analyzing your website’s traffic data. This data can show you which browsers your visitors are using. You can also consider the browsers that are most popular among your target audience.
Why is it important to support multiple browsers?
Supporting multiple browsers is important because it ensures that your website can be accessed by as many users as possible. Different users may prefer different browsers due to personal preference, device compatibility, or other factors. By supporting multiple browsers, you can provide a positive user experience for all visitors.
How can I test my website’s compatibility with different browsers?
You can test your website’s compatibility with different browsers using various tools and services. These tools can simulate how your website appears and functions on different browsers, helping you identify and fix any compatibility issues.
What are the challenges of supporting older browsers?
Supporting older browsers can be challenging because they may not support the latest web technologies. This can limit the features and functionality you can offer on your website. Additionally, maintaining compatibility with older browsers can require additional time and resources.
How often should I update my browser support strategy?
You should update your browser support strategy regularly to keep up with changes in browser usage and technology. This could be as often as every few months, depending on the pace of change in your industry and target audience.
What is progressive enhancement and how does it relate to browser support?
Progressive enhancement is a web design strategy that starts with basic functionality and then adds more advanced features for browsers that support them. This approach ensures that your website is accessible to all users, regardless of their browser’s capabilities.
How does mobile browser support differ from desktop browser support?
Mobile browser support differs from desktop browser support in several ways. Mobile browsers often have different capabilities and limitations compared to desktop browsers. Additionally, mobile users may have different needs and expectations, which can influence your support strategy.
What are some common browser compatibility issues and how can they be resolved?
Common browser compatibility issues include layout problems, functionality issues, and performance differences. These issues can often be resolved by using cross-browser testing tools, following best practices for web development, and regularly updating your website’s code.
How can I ensure my website remains accessible to users with older browsers?
You can ensure your website remains accessible to users with older browsers by using progressive enhancement, providing alternative versions of your website, or offering a message that encourages users to update their browser.