Last Updated: September 8, 2021
Designing for Different Browsers and Devices
Not all browsers will render web pages in the same way. There are often visible differences in the ways that different browsers handle technologies like CSS, HTML and JavaScript.
Services don’t have to look perfect in every browser, but they should always be accessible. Users must be able to access and use all the information and features they need, regardless of which browser they use, to a reasonable degree.
Compatibility Testing
Test that your service works in the browsers used by your intended audience.
These lists represent usage statistics from gov.bc.ca for non-government users. These statistics represents about 98% of users.
| Browser | % of Users | Yearly Change (%) |
|---|---|---|
| Chrome | 45.1 | -1.3 |
| Safari | 37.9 | +5.9 |
| IE 11 | 5.6 | -3.3 |
| Firefox | 5.3 | -1.1 |
| Edge | 4.1 | -0.5 |
| Operating system | % of Users | Yearly Change (%) |
|---|---|---|
| Windows | 36.4 | -6.5 |
| iOS | 34.4 | +9.8 |
| Android | 15.4 | +0.5 |
| Mac OS X | 12.5 | +10.4 |
Usage statistics for one-year April 2, 2019 to April 2, 2020
Building services that government workers use
There are many internal government users still using IE 7 and other legacy browsers or operating systems.
If internal government workers are your key users rather than the general public, make sure you understand their browsers and operating systems. Look at your analytics data and check which browsers and operating systems your users are using.
Design for your audience
When designing your service, you should analyse your users’ choice of:
- operating systems
- browsers
- browser versions
- screen size/resolutions
- choice of mobile device
If evidence shows that your users have specific needs or extra support requirements, you should design for these needs.
Adapt to changing behaviour: do user research and monitor analytics
Decisions about compatibility can’t be something you specify at the start of your project and then forget about. Digital services need to reflect and adapt to the changing digital behaviour of their users.
Do this by researching your users and checking statistics on a regular basis.
New products and platforms might not appear in any data, but it makes sense for you to test against them if they’re likely to be popular. For example, 1,007 users accessed gov.bc.ca using their Sony PlayStation.
You also have to work out when to stop supporting a product or system if its popularity is declining.
Inform users of unsupported browsers
If your website or application doesn’t support IE, you can create a page telling users their browser is no longer supported. Below is some content and graphics that you can use for that page.
(H1) Hmm…looks like your browser isn’t supported
(Paragraph text) You seem to be using an unsupported browser.
To get the best experience using our site, download the latest version of any of the following browsers:
- Google Chrome
- Mozilla Firefox
- Microsoft Edge
- Apple Safari