People visiting your website should have a good user experience regardless of the browser or device they are using to access your website. You’ve confirmed everything looks good for you, but how do you make sure everything looks great for everyone who visits? Here’s how to check browser compatibility of a website to ensure everything works as intended for all visitors.
Discover the Browsers and Resolutions People Use
Before you can test browsers to make sure everything is working, you need to know what browsers and screen resolutions to test. This will vary for every website. What you want to do is find out the details for the people who visit your website.
To do this, look at your Google Analytics account. The report varies depending on if you have the newest GA4 configuration or the Universal Analytics configuration.
In Universal Analytics, you can go to Audience > Technology > Browser & OS. This will show you the most popular browsers for your website.
Along the top, you’ll see Primary Dimension. You can view the data with various primary dimensions such as Operating System and Screen Resolution.
With the Browser primary dimension selected, you can even select a secondary dimension of Operating System to view the exact browser/operating system configurations people use to view your website.
With GA4, you can go to User > Tech > Overview. This will provide a few different charts that make it easy to visualize the most popular browsers, operating systems, and screen resolutions.
Once you understand which screen resolutions and browsers are most important to your audience, you can start to test them.
How to Test Screen Resolutions
Let’s start by testing screen resolutions. In my experience, it’s easier to test the different device sizes than it is to test browsers, and I find more inconsistencies with various screen sizes than I do with browsers, so I tend to start there.
There are two different tools I like to use to test screen resolution. You don’t need to use both. Just pick the tool that you like best and go with that.
Testing with Chrome
You can test your site on different device sizes directly in Google Chrome.
- First, navigate to your site.
- Right-click anywhere on the page and click on Inspect to open the developer tools.
- Click on the Toggle Device Toolbar icon in the top left of the developer tools panel.
- At the top of the page, you’ll see a dropdown.
- Select Responsive to either enter in any resolution or drag the window to resize.
- Select any of the devices from the list to use preset resolutions to view the page in the size used by that device.
Testing with Responsinator
You can test your website on different device sizes with a tool called Responsinator.
- First, navigate to https://www.responsinator.com/
- Enter your URL where it says Enter your site in the top left.
- You can then scroll down and view your site on various device sizes.
How to Test Browsers
Testing browsers can be a little more complicated. Depending on how many computers you have available, you likely won’t be able to test everything yourself. Regardless, that is where I like to start.
Start By Testing with the Browsers You Have
If you have a Windows computer, you’ll be able to test Google Chrome, Mozilla Firefox, and Microsoft Edge. If you have a Macintosh computer, you’ll be able to test Google Chrome, Mozilla Firefox, and Safari. So, basically, you need a Windows computer to test Edge and an Apple computer to test Safari.
The other hurdle you could come across when testing yourself is that you won’t be able to test older versions of the browser. Chrome updates automatically, so that should be less of an issue, but testing old Firefox versions can be challenging.
To start, test what you can. Start by making sure the experience is ideal in the browsers you have available. Then, refer back to your Google Analytics data. Is there a browser a large chunk of your audience uses that you haven’t tested? If so, is there any easy way to test it? Do you have a friend that has access to that browser that can check for you? If not, no worries, we’ll go over the solution now.
Testing Browsers with Cross Browser Testing
There are a few different tools available that you can use to test browsers. My favorite one is Cross Browser Testing. With Cross Browser Testing, you can test your site live on any browser and operating system. You can even select different versions and resolutions.
Instead of testing live, you can also get screenshots back. You just enter the URL and select the browser configurations (or choose a pre-populated list such as popular browsers), and then you will see a page with side-by-side screenshots of that page on all of the different browsers you requested.
This makes it super simple to test any browser. The only downside is it isn’t free. There is a free 7-day trial. There is also a month-to-month option. So, even if you don’t use this all the time, it could be worthwhile to pay for the tool after a major site change or just for one month a year to confirm everything looks good.
In Summary
Start by understanding the browsers and resolutions that are important to your audience. Then, create a plan to make sure you can view your site with those settings to confirm the experience is optimal for them.
Do you want to listen to this article? Here’s the podcast episode: