Browser compatibility and testing

This process was written a long time ago and is due for review. It's been left here in case it's useful to you, but a different approach may apply for your projects.

A web browser is the primary window through which all of our work is seen. It's vital that we're testing our work across a suite of standard browsers so that we can be confident in achieving compatibility.

How to test your work for for browser support

Whenever you work on something that affects the frontend layer of a site it's likely that you'll need to do some browser testing. It's essential to test your work before passing it over to our internal testing process.

When working on a frontend task you should satisfy yourself that the component you are working on will meet the compatibility requirements of your project and you should test in as many browsers as it is necessary to do that for.

For testing on devices and alternative operating systems we use BrowserStack.

When deciding which browsers to test your work in, consider the following:

• The complexity of the change which you are making. A new component which makes heavy use of CSS grid will need more time and attention than a layout modification to an existing component.

• Chrome, Firefox, and Safari all have different rendering engines, except on iOS which is always Safari.

• Rendering engines are generally consistent across platforms, but be aware of common gotchas - for example Windows and macOS have different default font sets and Chrome on Android has some modifications for battery life and performance, so it isn't always exactly the same as viewing on a desktop in "responsive mode"

Our default support table

We divide browser support into two categories:

1. Full support. In these browsers, we strive to provide the full user experience as designed and design our technical architecture to avoid the need for compromise.

2. Content compatible For these browsers, the content of the site should be accessible, but compromises can be made on enhancement and purely cosmetic functionality.

Many of our clients will have their own specification for browser support so you should check before working on a task exactly which specification you are working to. Here's our default list of supported browsers:

Operating System	Browser	Support
iOS	Safari	Full support
iOS	Safari (in-app)	Content compatible
Android	Google Chrome	Full support
Android	Webview	Content compatible
Android	Samsung Internet	Content compatible
Windows	Edge	Full support
Windows	Google Chrome	Full support
Windows	Firefox	Content compatible
macOS	Safari	Full support
macOS	Google Chrome	Full support
macOS	Firefox	Content compatible

Client specific requirements

Many of our clients will have their own specifications for browser testing based on their own analytics and audience figures. Before you start work on any task you should be aware of the necessary support level for that client so that you can make appropriate architectural decisions about your technical approach.

This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.