browser-773215_1920.png - Simon Antony Web Design Manchester and Stockport, UK

When building a website or application, which devices should you support? What are the most commonly used browsers today? This can be quite a difficult question to answer!

Browser

Usage

Chrome

53.91%

Safari

14.41%

UC Browser

8.57%

Firefox

5.94%

IE

3.93%

Opera

3.82%

According to the latest figures from statcounter, the popularity of browsers by July 2017 are:

Statcounter also reports (at the time of writing) that desktop users make up 45.75% of web users, where 54.25% are desktop web users.

However, the statistics don’t tell the whole story and it’s easy to walk away with a skewed perspective until we realise these are not all weighted equally. For instance:

  • These trends will vary based on a number of factors including geographic region. Consider the UC Browser, one of the more popular browsers in China along with QQ. Yet few people in the West will likely have heard of these! Similarly, Yandex is the second most popular browser in Russia (enjoying a 12.7% share) which few in the West will likely use.
  • The same browser will work very differently across different devices and operating systems. The  Google Chrome on your Windows desktop computer will be completely different in code and functionality to your Android Google Chrome browser, even though we lazily refer to them both as “Google Chrome”. Similarly, Google Chrome on the Apple Mac can be slightly different again.

There are a lot of ‘other’ browsers, comprising a range of built-in browsers to devices like smart TV’s, games console and similar devices.

Are Browsers Really That Different?

Despite the organic variants of these applications being available, they actually all do the same thing: render web pages. They achieve this using a ‘rendering engine’ (also known as a ‘layout engine’) which is typically code used by the web browser to ‘draw’ the website. Thankfully, there are only a handful of these:

  1. Webkit is used in Safari and used to be used by Chome up to 2014
  2. Blink is a fork of Webkit now used in modern Chrome, Opera, Vivaldi and Brave.
  3. Gecko is used in Firefox.
  4. Trident is used in Internet Explorer.
  5. Edge HTML is an updated version of Trident which is used in the modern IE Edge browser.

Most major browsers today will use one of these rendering engines, each is written by a very different team, most of whom collaberate with W3C to ensure new technologies are adopted by everyone in the same way. Browsers are closer than they’ve ever been and modern smartphone applications are a match for their desktop counterparts.

As a result of this, no two browsers render any given page in quite the same way. Thankfully, the majority of differences are typically quite subtle.

For example, a particular feature may be fully implemented in one browser, partially implemented in another, and non-existent elsewhere. This is particularly true when HTML5 and CSS3 were introduced and each browser added support at different points in time.

Can My Site Work in Every Browser?

Yes this is possible and there are techniques to help. Progressive Enhancement (PE) for instance, focuses primarily on content (since this is what will drive your website). This strategy encourages the progressive addition of new layers of presentation. The idea of this, is to ensure everyone has access to the basic content and functionality, regardless of browser.

PE works well for content sites and apps with basic form-based functionality. It becomes less practical as you move toward applications with rich custom interfaces. Your new collaborative video editing app is unlikely to work in the decade-old IE7. It may not work on a small screen device over a 3G network. Perhaps it’s possible to provide an alternative interface but the result could be a separate, clunky application few would want to use. The cost would be prohibitive given the size of the legacy browser user base.

Advice to Website Owners

So how do you navigate this menacing minefield of cross browser compatibility? There are two sides to this and here is our advice for website owners:

The web pages are not leaflets!

Unlike a billboard or poster the website is unlikely to look exactly the same in two separate browsers. If you have a modern responsive website, then the device itself will largely govern how the page is displayed. The capabilities of the user's internet connection and other factors may also play a large role as to how the finished page will look. The focus should be on usability: “is the content usable by all” and does it look good?

Functionality may not be the same

While browsers may draw the page in similar ways, this doesn’t mean the elements will behave the same. For example: all mainstream browsers will support form dropdown boxes along with other form elements, but the look and feel of these will depend entirely on the browser displaying them and not all styles may work across all browsers for all form elements.

Your site/app will not look identical everywhere, as each device has a different OS, browser, screen size and capabilities.

Assess your project

Is this a brochure website, a simple application or desktop application or game? What are the needs of the end users? Establish a scope of browser compatibility suitable for your project (for instance, how backward compatible must it be? (i.e. what is the earliest browser it should be expected to work on?) How fast does the users connection need to be?

Assess your audience

Do not rely on global browser statistics - as you’ve seen from our post, they are oversimplified and can actually be misleading. What you should be asking is: 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 to think that a web page coded twenty years ago works today. It won’t necessarily be pretty or usable but browsers remain backward compatible. However, technology evolves and the more complex your website or application, the more likely it is to require ongoing maintenance.

Advice for Web Developers

With a little care it’s possible to support a huge variety of browsers.

Embrace the web!

The web is a device agnostic platform, it is possible to effectively serve content across all platforms including modern laptops, phones, games consoles and more. 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.

Familiarise yourself with some of the browsers limitations and quirks. For instance, an SVG graphic will behave oddly in IE 9 to 11 and may not work below IE 8 at all. That doesn’t mean it’s a binary choice of rejecting SVGs or abandoning IE support, but it may mean having alternative provisions.

  • 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.

Test early and test often

In today’s web it’s not possible to test every device but developing for a single browser is also a futile task.

Test your project in a variety of applications at every stage, leaving the testing phase to the very end only can make these issues even harder to resolve. It’s easy for us to blame tools and browser inadequacies but the majority of issues can be rectified early in the development process if they’re spotted early enough.

That’s not to say everything must work identically in every browser, as we’ve already noted, each has it’s own features and limitations so the experience will always differ.

It’s a good idea to have a wide range of browsers installed on your development machines, and we also find it helpful to use virtual machines for much older versions of Internet Explorer and alternative operating systems. There are also some very good online testing tools such as BrowserStack, IE Net Renderer, Microsoft even have their own dedicated virtual machine download page for previous versions of Windows with legacy versions of Internet Explorer. https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/

Modern browsers also now have excellent built-in mobile emulation and debugging facilities which make real devices much easier to develop for. Most will also simulate a limited or low bandwidth connections as people may experience when out and about.

Use HTTPS on your end

The web is gradually making HTTPS the preferred protocol and this trend is continuing. Google now actually rank sites higher if they have HTTPs which is why we recommend it for every website.

Google Chrome will  indicate that non-HTTPS sites as insecure, a good reason to configure your site to use HTTPS. An excellent blog post about https://auditmywebsite.co.uk/do-i-need-an-ssl-certificate/

Have We Missed Anything?

As you can see from our post, the question “which browsers should you support?” is too restrictive and overlooks the rich diversity of devices, operating systems and how people use them in their daily lives.

Even if I tell you I use Google Chrome, this won’t tell you anything useful (as a developer) unless I tell you:

  • Whether I’m using it on an Android mobile, Windows or Apple Mac
  • What the size and dimensions of my display are
  • How fast my connection is

Given this diverse set of devices and browsers used on the modern Web, clearly it isn't very practical to list every possible device and browser combination when discussing compatibility.

The spirit of this is to let the website content and functionlaity drive your choices when it comes to design. Accepting that certain elements will never quite look the same isn't the end of the world and might actually be beneficial if you can present something more suitable for the device currently at hand.

Perhaps the best solution is: “we’ll develop your project according to presumed demographics then test as in many devices, operating systems, browsers and versions as possible according to budget and time constraints”. Even then, you’ll miss that aging Blackberry the CEO insists on using. But then hopefully, if you have correctly identified the right demographics, at least you can be certain the website will look great for 99% of users

In short, you should be developing for the Web, not specifically for browsers.

Comments