Why Cross Browser Compatibility Testing is Crucial for Your Website

What Is Cross Browser Testing?

Having an amazing website is great. But if it doesn’t work correctly in the web browsers of the devices your visitors are using, they’re not receiving the intended experience.

There are so many browsers out there. Available on multiple device types, using different operating systems, and there are multiple versions of each browser still in use. Each will have its own rules around how it understands and renders your website’s code for users in the browser.

Cross browser testing ensures that a website will display and function correctly in as many browsers as possible. It’ll also ensure that the website will work correctly with assistive technology like screen readers. Testing will identify any issues that exist, which need to be addressed ahead of launch.

How To Know Which Browsers To Test

So how do web developers ensure that a website will display as intended on every browser, device, and version out there? Short answer, they don’t. Instead they make sure everything works across an ‘acceptable’ number of browsers.

But how do you define ‘acceptable’? Ideally, this is as many as possible. This is usually a decision made between developers and their clients. 

A good place to begin though is to take a look at existing analytics data for a website (in the case that it’s a redesign or migration rather than a brand new site). To drill down into the specific browsers, devices and operating systems existing users are accessing the website with.

Browser version market share data can also be useful. Depending on the location of the target audience of the website, you can look at global or country specific data. 

Depending on the CMS the website is to be built on, it’s also worth knowing which browsers the CMS supports, and which it no longer supports. 

For example in their best practice handbook for WordPress Core, they list the browsers and versions which they consider best practice to support when releasing a new version of Core. They also list the browser versions they no longer support.   

Compatibility Issues You Might Encounter Without Testing

Imagine that a website has gone live, and no cross browser testing has been carried out.

The website might work great on the browser favoured by the web developer, in this case let’s say Mozilla. But then you start getting messages from users who are experiencing issues.

You do a little digging and the users are all using Chrome, Edge and Safari, or older versions of Mozilla. 

So what is the issue?

• Different browsers, and particularly older versions may not all support the latest code features, or web technologies.
• If HTML and CSS haven’t been properly validated, some browsers may still display everything fine, but others may hit issues even with minor errors.
• Along the same lines as the point above, there might be Javascript logic or syntax errors. In one browser these might not be an issue, but in others thy could affect functionality.
• If a user is accessing the site with a screen reader or other assistive device, it may be that the site isn’t accessible for them.
• The website might look great on a desktop or laptop screen, but offer a really bad experience on a mobile device.
• The user’s device or internet connection might be a limiting factor, and so features that are fine on a fast new device with a speedy internet connection, might be laggy for a user on an older device or slower internet connection.

Why Browser Compatibility Testing Is Important

The list of potential issues covered above, is why cross browser compatibility testing is important. It’s also why testing should be done as widely as possible, and as early as possible before launch. 

Without delaying the launch, these issues and any others can be identified and corrected, or fallbacks can be put in place. Preventing a bad user experience once live.

How Is Cross Browser Testing Done?

Running cross browser testing fully manually is almost impossible these days. With so many browsers, versions, devices, operating systems, web technologies and so on, a developer would need a device collection to rival a large electrical retailer.

Thankfully, there are now numerous tools available which automate some of the process, and can test on a huge range of browsers and devices.

Testing is set up for the specified range of browsers, versions, devices, screen resolutions, and screen orientations. Anything that doesn’t pass is flagged up in reporting.

These errors and issues can then be fixed, and testing carried out again. This process is repeated until all tests are successful.

Testing should include but not be limited to:

• Identifying visual inconsistencies – fonts, images, animations
• Identifying issues with responsive layouts
• Ensuring accessibility meets with guidelines
• Debugging code
• Testing basic functionality
• Testing processes like form completions, and checkouts

If you’re planning a website redesign, talk to our team of web development professionals about our process, and how we implement cross browser testing into our workflow.