{"id":782,"date":"2023-03-26T13:19:44","date_gmt":"2023-03-26T12:19:44","guid":{"rendered":"https:\/\/zumbicalvin.com\/?p=782"},"modified":"2023-11-26T13:22:16","modified_gmt":"2023-11-26T13:22:16","slug":"5-web-browsers-web-designers-should-know-how-to-design-for","status":"publish","type":"post","link":"https:\/\/zumbicalvin.com\/index.php\/2023\/03\/26\/5-web-browsers-web-designers-should-know-how-to-design-for\/","title":{"rendered":"5 Web browsers web designers should know how to design for"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"782\" class=\"elementor elementor-782\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-9348479 e-flex e-con-boxed e-con e-parent\" data-id=\"9348479\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\" data-core-v316-plus=\"true\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d0843d8 elementor-widget elementor-widget-text-editor\" data-id=\"d0843d8\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.17.0 - 08-11-2023 *\/\n.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:#69727d;color:#fff}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap{color:#69727d;border:3px solid;background-color:transparent}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap{margin-top:8px}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap-letter{width:1em;height:1em}.elementor-widget-text-editor .elementor-drop-cap{float:left;text-align:center;line-height:1;font-size:50px}.elementor-widget-text-editor .elementor-drop-cap-letter{display:inline-block}<\/style>\t\t\t\t<p>As a web designer, it&#8217;s crucial to be aware of the different browsers your audience might use. Here&#8217;s what to know about 5 of the most popular browsers.<\/p><p class=\"new_lede\">Testing a website on different browsers is a mandatory part of the web design process.<\/p><div class=\"rte w-richtext\"><p>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.<\/p><h2>1. Chrome<\/h2><p><a href=\"https:\/\/www.google.com\/chrome\/dr\/download\/\" target=\"_blank\" rel=\"noopener\">Google Chrome<\/a>\u00a0is a web browser developed by Google. It\u2019s 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.<\/p><figure class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\"><div><img decoding=\"async\" src=\"https:\/\/assets-global.website-files.com\/6009ec8cda7f305645c9d91b\/63c82442c388ec5b64ce22fe_google.jpg\" alt=\"Google Chrome shown on a laptop and smartphone\" \/><\/div><figcaption><em>Chrome for desktop and mobile devices. Image by Google.<\/em><\/figcaption><\/figure><h3>Chrome market share<\/h3><p>Google Chrome is one of the world&#8217;s most widely used web browsers. According to\u00a0<a href=\"https:\/\/www.statista.com\/statistics\/268254\/market-share-of-internet-browsers-worldwide-since-2009\/\" target=\"_blank\" rel=\"noopener\">Statista<\/a>, 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.\u00a0<\/p><h3>What is under the hood of Chrome?<\/h3><p>Chrome is based on an open-source engine called\u00a0<a href=\"https:\/\/www.chromium.org\/chromium-projects\/\" target=\"_blank\" rel=\"noopener\">Chromium<\/a>. 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&#8217;t want to release with the open-source license.<\/p><h3>Pros of using Chrome<\/h3><ul role=\"list\"><li><strong>Browser extensions:<\/strong>\u00a0Chrome makes it easy for users to extend the browser&#8217;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.<\/li><li><strong>Built-in web tools:<\/strong>\u00a0Chrome provides dev tools that allow web designers to dive into the HTML code of a particular web element or even debug a whole page.<\/li><\/ul><figure class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\"><div><img decoding=\"async\" src=\"https:\/\/assets-global.website-files.com\/6009ec8cda7f305645c9d91b\/63c82494379e8a501bf659e4_dev%20tool.jpg\" alt=\"Screenshot of CNN Travel website. Right side of image shows Google dev tools panel s\" \/><\/div><figcaption>Google Chrome dev tools<\/figcaption><\/figure><h3>Cons of using Chrome<\/h3><ul role=\"list\"><li><strong>Chrome collects user data and tracks history<em>.<\/em><\/strong>\u00a0Online 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.<\/li><li><strong>Chrome has high RAM consumption.<\/strong>\u00a0Many users complain that Chrome causes hardware performance issues, with RAM consumption being a\u00a0 particular problem area. Google is aware of this problem, and in Dec 2022, the corporation announced that Chrome is expected to get\u00a0<a href=\"https:\/\/techcrunch.com\/2022\/12\/08\/chrome-gets-memory-and-energy-saver-modes\/\" target=\"_blank\" rel=\"noopener\">memory and energy-saving modes<\/a>.\u00a0<\/li><\/ul><h2>2. Safari<\/h2><p><a href=\"https:\/\/www.apple.com\/safari\/\" target=\"_blank\" rel=\"noopener\">Safari<\/a>\u00a0is a web browser developed by Apple. It is the default browser on Apple devices such as the iPhone, iPad, and Mac.<\/p><figure class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\"><div><img decoding=\"async\" src=\"https:\/\/assets-global.website-files.com\/6009ec8cda7f305645c9d91b\/63c824e9ae2330bcb4eed774_safari.jpg\" alt=\"Screenshot of Safari browser on laptop running MacOS \" \/><\/div><\/figure><h3>Safari market share<\/h3><p>Safari is the second most popular browser. According to\u00a0<a href=\"https:\/\/www.statista.com\/statistics\/268254\/market-share-of-internet-browsers-worldwide-since-2009\/\" target=\"_blank\" rel=\"noopener\">Statista<\/a>, 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.<\/p><h3>What is under the hood of Safari?<\/h3><p>Safari is based on the open-source web engine called\u00a0<a href=\"https:\/\/webkit.org\/\" target=\"_blank\" rel=\"noopener\">WebKit<\/a>. WebKit is less popular than the Chromium engine that we&#8217;ve discussed above. The codebase of Safari is not public.\u00a0<\/p><h3>Pros of using Safari<\/h3><ul role=\"list\"><li><strong>Safari synchronizes browsing across devices.<\/strong>\u00a0Safari 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.\u00a0<em>Note: While this is possible with Chrome, you\u2019ll have to log into your Google account on each device.<\/em><\/li><li><strong>Safari integrates with the Apple ecosystem<em>.<\/em><\/strong>\u00a0Safari 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.\u00a0<\/li><li><strong>Safari has a clean interface<em>.\u00a0<\/em><\/strong>Apple is known for its ability to design clean, minimalist interfaces, and Safari is no exception. The browser\u2019s sleek design is straightforward and easy to use.<strong>\u200d<\/strong><\/li><li><strong>Safari offers advanced privacy protections.<\/strong>\u00a0Safari 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 \u2014 if you click on it, you will see how many trackers a particular page has.<\/li><\/ul><figure class=\"w-richtext-figure-type-image w-richtext-align-center\"><div><img decoding=\"async\" src=\"https:\/\/assets-global.website-files.com\/6009ec8cda7f305645c9d91b\/63c825343bc276703929aba3_safari%20tracker.jpg\" alt=\"\" \/><\/div><figcaption><em>Safari notifies users about data tracking.<\/em><\/figcaption><\/figure><h3>Cons of using Safari<\/h3><ul role=\"list\"><li><strong>Limited customization through browser extensions:<em>\u00a0<\/em><\/strong>Safari has a limited library of extensions and add-ons available through the\u00a0<a href=\"https:\/\/apps.apple.com\/us\/story\/id1377753262\" target=\"_blank\" rel=\"noopener\">Apple App Store<\/a>.\u00a0<\/li><li><strong>Lack of web tools:<\/strong>\u00a0Unlike 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.\u00a0<\/li><li><strong>Not a cross-platform internet browser:<em>\u00a0<\/em><\/strong>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.\u00a0\u00a0<\/li><li><strong>Potential for website errors:<em>\u00a0<\/em><\/strong>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.<\/li><\/ul><figure class=\"w-richtext-align-center w-richtext-figure-type-image\"><div><img decoding=\"async\" src=\"https:\/\/assets-global.website-files.com\/6009ec8cda7f305645c9d91b\/63c8255ddaf57ecbae76395a_safari%20error.jpg\" alt=\"Screenshot of ImageCapture API showing capatibility with Chrome but not Safari\" \/><\/div><figcaption><em>ImageCapture API is an example of an API compatible with the latest versions of Chrome but not with Safari. Image by\u00a0<\/em><a href=\"https:\/\/caniuse.com\/imagecapture\" target=\"_blank\" rel=\"noopener\"><em>CanIUse<\/em><\/a><em>.<\/em><\/figcaption><\/figure><p>\u200d<\/p><\/div><div><div class=\"u-mt-64 u-mb-64 w-dyn-list\"><div class=\"w-dyn-items\" role=\"list\"><div class=\"u-position-relative w-dyn-item\" role=\"listitem\" data-w-id=\"388536d2-84a8-4cc9-1d73-63d85f681390\"><div class=\"new_u-bg-gray-100 u-p-32 u-sm-p-24\"><div class=\"new_h2\">Freelance web design boot camp<\/div><p class=\"new_paragraph-l u-mt-16 u-mb-32\">Explore what a successful, fulfilling web design career can look like with this free, comprehensive course.<\/p><div class=\"u-d-inline-block\">Start course<\/div><div class=\"new_button-icon_top-right\">\u2197<\/div><\/div><div class=\"sr-only\">Start course<\/div><\/div><\/div><\/div><\/div><div class=\"rte u-mb-48 w-richtext\"><h2>3. Edge<\/h2><p><a href=\"https:\/\/www.microsoft.com\/en-us\/edge\" target=\"_blank\" rel=\"noopener\">Microsoft Edge<\/a>\u00a0is a web browser developed by Microsoft. It is the successor to Internet Explorer and is default browser for all Windows 11 devices.<\/p><figure class=\"w-richtext-figure-type-image w-richtext-align-center\"><div><img decoding=\"async\" src=\"https:\/\/assets-global.website-files.com\/6009ec8cda7f305645c9d91b\/63c8395b7c390876e8d06ffe_edge.jpg\" alt=\"Screenshot of Microsoft Edge homepage\" \/><\/div><\/figure><h3>Edge market share<\/h3><p>Only\u00a0<a href=\"https:\/\/www.statista.com\/statistics\/268254\/market-share-of-internet-browsers-worldwide-since-2009\/\" target=\"_blank\" rel=\"noopener\">4% of users<\/a>\u00a0opt to use Edge.<\/p><h3>What is under the hood of Edge?<\/h3><p>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.<\/p><h3>Pros of using Microsoft Edge<\/h3><ul role=\"list\"><li><strong>Better security:\u00a0<\/strong>Edge includes features such as\u00a0<a href=\"https:\/\/en.wikipedia.org\/wiki\/Microsoft_SmartScreen\" target=\"_blank\" rel=\"noopener\">SmartScreen<\/a>\u00a0and pop-up blockers, which helps protect users from phishing and malware.\u00a0<\/li><li><strong>Straightforward privacy settings<\/strong>: Users can choose between 3 levels of tracking prevention and review a list of blocked trackers.<\/li><li><strong>Cortana integration:<\/strong>\u00a0Edge can integrate with Microsoft&#8217;s virtual assistant, Cortana, which allows users to easily search the web and complete tasks using voice commands.<\/li><li><strong>Extension support:\u00a0<\/strong>Similar to Chrome,<strong>\u00a0<\/strong>Edge allows the use of extensions so users can easily enhance the browser&#8217;s capabilities.<\/li><\/ul><h3>Cons of using Microsoft Edge<\/h3><ul role=\"list\"><li><strong>Limited backward compatibility<\/strong>: Edge\u00a0<a href=\"https:\/\/learn.microsoft.com\/en-us\/microsoft-edge\/web-platform\/site-impacting-changes\" target=\"_blank\" rel=\"noopener\">does not support older web technologies<\/a>, which may cause some websites to display incorrectly or not work at all.<\/li><li><strong>Limited customizations<\/strong>: Edge offers users less control over how the browser behaves and looks than other browsers like Chrome or Firefox.<\/li><li><strong>Not all features are available on all platforms:<\/strong>\u00a0Some Edge features, such as Cortana, are only available on Windows and Mac devices.<\/li><\/ul><h2>4. Firefox<\/h2><p><a href=\"https:\/\/www.mozilla.org\/en-US\/firefox\/new\/\" target=\"_blank\" rel=\"noopener\">Firefox<\/a>\u00a0is an open-source web browser developed by the Mozilla Foundation. It is available for multiple platforms, including desktop (Windows, macOS, Linux) and mobile (Android).<\/p><figure class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\"><div><img decoding=\"async\" src=\"https:\/\/assets-global.website-files.com\/6009ec8cda7f305645c9d91b\/63c8399a712b601d462bae28_firefox.jpg\" alt=\"Screenshot of Firefox homepage\" \/><\/div><figcaption>\\<\/figcaption><\/figure><h3>Firefox market share<\/h3><p>With only\u00a0<a href=\"http:\/\/statista\/\" target=\"_blank\" rel=\"noopener\">3% of users worldwide<\/a>, Firefox has a relatively small user base compared to other major browsers.<\/p><h3>What is under the hood of Firefox?<\/h3><p>Firefox is based on the open-source browser engine,\u00a0<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Gecko\" target=\"_blank\" rel=\"noopener\">Gecko<\/a>, 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.<\/p><h3>Pros of using Firefox<\/h3><ul role=\"list\"><li><strong>Built-in accessibility tools<\/strong>: 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.<\/li><li><strong>Built-in web design tools<\/strong>: Firefox provides a collection of\u00a0<a href=\"https:\/\/firefox-source-docs.mozilla.org\/devtools-user\/\" target=\"_blank\" rel=\"noopener\">DevTools<\/a>, including Page Inspector, Web Console, JavaScript debugger, and more.\u00a0<\/li><\/ul><h3>Cons of using Firefox<\/h3><ul role=\"list\"><li><strong>Potential compatibility problems:<\/strong>\u00a0Firefox is less popular than the browsers we\u2019ve discussed before, so some websites and web apps may not be optimized for this browser.<\/li><li><strong>Fewer extensions:\u00a0<\/strong>Firefox doesn&#8217;t have as many extensions as other browsers, such as Google Chrome.<\/li><\/ul><h2>5. Opera<\/h2><p><a href=\"https:\/\/www.opera.com\/\" target=\"_blank\" rel=\"noopener\">Opera<\/a>\u00a0is a web browser developed by Opera Software. Opera has an impressive history dating back to\u00a0<a href=\"https:\/\/webflow.com\/blog\/90s-website-design\" target=\"_blank\" rel=\"noopener\">90s web design<\/a>\u00a0\u2014 the first Opera browser was released in 1995. Opera is available as a desktop and mobile browser.<\/p><figure class=\"w-richtext-align-fullwidth w-richtext-figure-type-image\"><div><img decoding=\"async\" src=\"https:\/\/assets-global.website-files.com\/6009ec8cda7f305645c9d91b\/63c839e77ca3d1c6189c2ad6_opera.jpg\" alt=\"Opera homepage shown on a laptop\" \/><\/div><\/figure><h3>Opera market share<\/h3><p>With only\u00a0<a href=\"http:\/\/statista\/\">2% of users worldwide<\/a>, Opera has a small user base compared to other major browsers.<\/p><h3>What is under the hood of Opera?<\/h3><p>Opera also uses the Chromium open-source browser engine, similar to Google Chrome and Microsoft Edge.<\/p><h3>Pros of using Opera<\/h3><ul role=\"list\"><li><strong>Unique features:<\/strong>\u00a0Opera offers some unique features other browsers do not have, such as a built-in VPN, battery-saving mode, and crypto wallet.\u00a0<strong>\u200d<\/strong><\/li><li><strong>Performance<\/strong>: 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<a href=\"https:\/\/www.opera.com\/browsers\/opera-mini\" target=\"_blank\" rel=\"noopener\">\u00a0optimized for those with weak internet<\/a>\u00a0connections.<\/li><\/ul><h3>Cons of using Opera<\/h3><ul role=\"list\"><li><strong>Fewer extensions and add-ons:\u00a0<\/strong>Opera has a smaller library of extensions and add-ons available compared to other browsers like Chrome.\u00a0<\/li><li><strong>Limited free features:\u00a0<\/strong>Although Opera for mobile devices is free to use, some features, like the built-in VPN service, are locked behind a subscription-based paywall.<\/li><\/ul><h2>What are the best web browsers to design for?<\/h2><p>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\u00a0<a href=\"https:\/\/vivaldi.com\/\" target=\"_blank\" rel=\"noopener\">Vivaldi<\/a>\u00a0and\u00a0<a href=\"https:\/\/brave.com\/\" target=\"_blank\" rel=\"noopener\">Brave<\/a>\u00a0aim 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.<\/p><\/div>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>As a web designer, it&#8217;s crucial to be aware of the different browsers your audience might use. Here&#8217;s what to&#8230;<\/p>\n","protected":false},"author":1,"featured_media":783,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"acf":[],"_links":{"self":[{"href":"https:\/\/zumbicalvin.com\/index.php\/wp-json\/wp\/v2\/posts\/782"}],"collection":[{"href":"https:\/\/zumbicalvin.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/zumbicalvin.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/zumbicalvin.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zumbicalvin.com\/index.php\/wp-json\/wp\/v2\/comments?post=782"}],"version-history":[{"count":4,"href":"https:\/\/zumbicalvin.com\/index.php\/wp-json\/wp\/v2\/posts\/782\/revisions"}],"predecessor-version":[{"id":787,"href":"https:\/\/zumbicalvin.com\/index.php\/wp-json\/wp\/v2\/posts\/782\/revisions\/787"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/zumbicalvin.com\/index.php\/wp-json\/wp\/v2\/media\/783"}],"wp:attachment":[{"href":"https:\/\/zumbicalvin.com\/index.php\/wp-json\/wp\/v2\/media?parent=782"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zumbicalvin.com\/index.php\/wp-json\/wp\/v2\/categories?post=782"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zumbicalvin.com\/index.php\/wp-json\/wp\/v2\/tags?post=782"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}