5 Web browsers web designers should know how to design for

Doing so ensures the website you design is functional and renders as intended across various platforms and devices. However, it can be hard to understand which browsers to run tests on. Below, we will walk through the 5 most popular web browsers and their functionality in the context of web design to help break down which browsers you should design for.

1. Chrome

Google Chrome is a web browser developed by Google. It’s available for a variety of platforms, including Windows, Mac, and Linux, as well as mobile devices running Android and iOS operating systems. The browser is known for its speed and its support for a wide range of web standards.

Chrome market share

Google Chrome is one of the world’s most widely used web browsers. According to Statista, more than 65% of users use Chrome to browse the web. Since Chrome accounts for the largest share of the browser market, web designers must test every website they create on Chrome. 

What is under the hood of Chrome?

Chrome is based on an open-source engine called Chromium. But unlike Chromium, Chrome is not completely open-source. Chrome has many components, such as Google-branded services, codecs, and specific functionalities that the corporation doesn’t want to release with the open-source license.

Pros of using Chrome

• Browser extensions: Chrome makes it easy for users to extend the browser’s functionality by adding third-party extensions called plugins. Compared to all other browsers on our list, Chrome has the most extensive collection of plugins.
• Built-in web tools: Chrome provides dev tools that allow web designers to dive into the HTML code of a particular web element or even debug a whole page.

Cons of using Chrome

• Chrome collects user data and tracks history. Online privacy is a critical aspect of digital design, and many users are cautious when it comes to sharing their data with organizations. But when you use Google Chrome, you accept that your personal data, such as browsing history, can be used for business purposes.
• Chrome has high RAM consumption. Many users complain that Chrome causes hardware performance issues, with RAM consumption being a  particular problem area. Google is aware of this problem, and in Dec 2022, the corporation announced that Chrome is expected to get memory and energy-saving modes. 

2. Safari

Safari is a web browser developed by Apple. It is the default browser on Apple devices such as the iPhone, iPad, and Mac.

Safari market share

Safari is the second most popular browser. According to Statista, more than 18% of users use Safari. A large percentage of these users are people who browse the internet from Apple devices because Safari is pre-installed and the default browser for both macOS and iOS.

What is under the hood of Safari?

Safari is based on the open-source web engine called WebKit. WebKit is less popular than the Chromium engine that we’ve discussed above. The codebase of Safari is not public. 

Pros of using Safari

• Safari synchronizes browsing across devices. Safari offers a better browsing experience for Apple users. If you use multiple Apple devices, this feature will be very useful because you can easily switch between devices without worrying about missing your browsing history, bookmarks, or passwords because Safari will have access to data stored in iCloud. Note: While this is possible with Chrome, you’ll have to log into your Google account on each device.
• Safari integrates with the Apple ecosystem. Safari gives many benefits to Apple users. For example, users can access Apple Pay, a payment method that significantly improves the convenience of the online shopping experience, as well as iCloud Keychain, which stores user passwords. 
• Safari has a clean interface. Apple is known for its ability to design clean, minimalist interfaces, and Safari is no exception. The browser’s sleek design is straightforward and easy to use.‍
• Safari offers advanced privacy protections. Safari has built-in security features, such as an ad-blocker and mechanisms that notify users about compromised passwords and prevent websites from tracking user activity. Safari displays a shield icon to the left of the address bar — if you click on it, you will see how many trackers a particular page has.

Cons of using Safari

• Limited customization through browser extensions: Safari has a limited library of extensions and add-ons available through the Apple App Store. 
• Lack of web tools: Unlike Chrome, Safari does not offer any built-in dev tools that allow web designers to dive into the code of a particular web element or debug a whole page. 
• Not a cross-platform internet browser: You cannot install Safari on Linux or Windows. Windows users can use older versions of Safari, but such versions might not be compatible with newer websites.  
• Potential for website errors: Some websites break in Safari because not all CSS styles and web APIs work for Webkit. As a result, the web page can function with errors in Safari while working fine in other browsers.

‍

3. Edge

Microsoft Edge is a web browser developed by Microsoft. It is the successor to Internet Explorer and is default browser for all Windows 11 devices.

Edge market share

Only 4% of users opt to use Edge.

What is under the hood of Edge?

Edge is based on the Chromium engine, which is the same engine that Google Chrome is built on. As a result, Edge and Chrome are very similar in terms of functionality, performance, and extension support.

Pros of using Microsoft Edge

• Better security: Edge includes features such as SmartScreen and pop-up blockers, which helps protect users from phishing and malware. 
• Straightforward privacy settings: Users can choose between 3 levels of tracking prevention and review a list of blocked trackers.
• Cortana integration: Edge can integrate with Microsoft’s virtual assistant, Cortana, which allows users to easily search the web and complete tasks using voice commands.
• Extension support: Similar to Chrome, Edge allows the use of extensions so users can easily enhance the browser’s capabilities.

Cons of using Microsoft Edge

• Limited backward compatibility: Edge does not support older web technologies, which may cause some websites to display incorrectly or not work at all.
• Limited customizations: Edge offers users less control over how the browser behaves and looks than other browsers like Chrome or Firefox.
• Not all features are available on all platforms: Some Edge features, such as Cortana, are only available on Windows and Mac devices.

4. Firefox

Firefox is an open-source web browser developed by the Mozilla Foundation. It is available for multiple platforms, including desktop (Windows, macOS, Linux) and mobile (Android).

Firefox market share

With only 3% of users worldwide, Firefox has a relatively small user base compared to other major browsers.

What is under the hood of Firefox?

Firefox is based on the open-source browser engine, Gecko, developed by Mozilla. Gecko is a very flexible and extensible browser engine that allows Firefox to support a wide range of web standards and makes it possible to release Firefox for different platforms.

Pros of using Firefox

• Built-in accessibility tools: Firefox is designed to be accessible to all users, including people with disabilities. The browser offers features such as high-contrast mode, natively in the browser.
• Built-in web design tools: Firefox provides a collection of DevTools, including Page Inspector, Web Console, JavaScript debugger, and more. 

Cons of using Firefox

• Potential compatibility problems: Firefox is less popular than the browsers we’ve discussed before, so some websites and web apps may not be optimized for this browser.
• Fewer extensions: Firefox doesn’t have as many extensions as other browsers, such as Google Chrome.

5. Opera

Opera is a web browser developed by Opera Software. Opera has an impressive history dating back to 90s web design — the first Opera browser was released in 1995. Opera is available as a desktop and mobile browser.

Opera market share

With only 2% of users worldwide, Opera has a small user base compared to other major browsers.

What is under the hood of Opera?

Opera also uses the Chromium open-source browser engine, similar to Google Chrome and Microsoft Edge.

Pros of using Opera

• Unique features: Opera offers some unique features other browsers do not have, such as a built-in VPN, battery-saving mode, and crypto wallet. ‍
• Performance: Opera is known for its fast browsing speed and efficient use of hardware resources, making it a good choice for users who value performance. Opera Mini, a mobile version of Opera browser, is optimized for those with weak internet connections.

Cons of using Opera

• Fewer extensions and add-ons: Opera has a smaller library of extensions and add-ons available compared to other browsers like Chrome. 
• Limited free features: Although Opera for mobile devices is free to use, some features, like the built-in VPN service, are locked behind a subscription-based paywall.

What are the best web browsers to design for?

If you want a simple answer to this question, I recommend you focus on Chrome and Safari. But the web design landscape tends to evolve rapidly, and the competition for more users in the browser market is ever present. So, while Google Chrome and Apple Safari together have more than 80% of the market, this could change in the future. Microsoft, for example, is known to invest heavily in its product, Edge, and new browsers like Vivaldi and Brave aim to capture a larger user base. So while covering your bases with Chrome and Safari should work for now, it is essential to keep an eye on browser updates, new features they develop, and new players that enter the browser market.