Not all web browsers are created equal. And as much as popular browsers are more similar than ever, they’re still distinct enough that they won’t necessarily display your website in the same way. It’s crucial, therefore, to test a website in different browsers.
Performing this type of cross-browser testing is important for any WordPress site, big or small. After all, you’ll want your visitors to have a smooth experience, no matter what device and browser they use to explore your content. With just a little time and effort, you can ensure your site works well and looks good no matter what.
Why it’s important to test a website in different browsers
You probably have a favorite browser – most people do – and chances are you typically use nothing else to work on your website. The most likely candidate is Chrome, which has by far the largest market share, but alternatives such as Firefox, Safari, and Internet Explorer are still popular.
However, if you spend your time using only your preferred browser, it can be easy to forget that not all of them work the same way. While most modern browsers are similar, they’re coded differently and have varied feature sets.
As a result, one website won’t always look or act the same across all browsers. If you’ve only viewed your own site in Chrome, and you switch over to Firefox or Safari, you may be surprised by the differences. Your layout might not look the same, and specific features may even work incorrectly.
Fortunately, this is an easy problem to avoid by testing your website on a variety of browsers – preferably the most popular options. Since this is such a crucial task, there are plenty of resources and tools to help you.
How to test your WordPress website in multiple browsers (2 easy tools)
It’s hard to predict exactly how your website will perform in any given browser. To avoid potential issues, the best and simplest solution is to do some testing. While you could download a bunch of browsers and perform those tests manually, it’s a lot easier with some dedicated tools.
It’s most important to test a website in different browsers when you’re first designing it, or when making major changes. However, it’s also smart to repeat these tests periodically, since browsers go through a lot of updates and changes. We’d suggest conducting a thorough review at least once a year.
The following two tools can help you, and although both have the same basic goal, each offers somewhat different features and results. Therefore, you can benefit from trying both of them out, and seeing which one best suits your needs.
Let’s start with the simpler tool. Browsershots is pretty basic in how it works and what it offers – although that doesn’t mean it’s not useful. On the contrary, it’s a perfect way to start your testing process.
To use Browsershots, you’ll need to visit its home page and enter your website URL into the field. Then, select all the browsers you want to test from the options listed below:
There are a ton of choices here, covering most of the major browsers and their more recent versions (although you may notice that Internet Explorer is missing). Simply check off all the boxes you want, and then hit the Submit button.
The test may take a few minutes to run. Once it’s finished, you’ll be presented with a series of screenshots you can view or download to your computer – one for each browser version you selected:
At this point, you’ll want to review each screenshot carefully:
Layouts might differ slightly, but look for any significant issues such as misaligned text or images, missing elements, and so on. While there’s no harm in checking as many browsers as you can, you’ll want to focus on the most popular solutions, at their most current version or two.
Browsershots is simple to use, offers a lot of options, and is completely free. However, it only enables you to see what your website will look like in various browsers. It doesn’t let you actually test your site’s functionality. So while this is a solid starting point and a way to identify potential issues quickly, you may want to spend some time with a more robust tool.
If you want to test your website using a more comprehensive set of features, CrossBrowserTesting is a good place to start. This tool offers a number of options, and like Browsershots, it can take screenshots for you to look over and compare.
However, CrossBrowserTesting also enables you to play around with the functionality of your website. It lets you virtually test your site using real devices, and offers over 1,500 combinations of browser versions and screen resolutions.
With all this on offer, it probably wont surprise you to learn that this tool isn’t free. The cheapest plan costs $29 per month, and includes unlimited testing for one user. However, there’s also a 7-day free trial, offering 100 minutes of testing time. This is enough to try out all of the features and see if you like them, and even to test a small site.
After signing up for an account, you’ll get access to a complete dashboard:
You can use the Screenshots tab to take static images of your site, or enter your URL into the Start a Live Test field to perform a full test. Finally, choose your device and select the Operating System (OS) and resolution you want:
Once you run the test, you’ll get access to a full simulation of your site:
At this point, you’ll want to interact with its primary features, click on buttons, try navigating through the menu, and so on. Keep an eye out for both visual and functional issues, although don’t be alarmed if there’s some noticeable lag – that’s just a side effect of the simulation itself.
Afterwards, you can continue to run tests in other combinations of devices, browsers, and resolutions. This may take a while, depending on the size of your site. However, the amount of in-depth information you’ll get access to will be worth the time investment.
Testing your website across browsers is one of those tasks you don’t want to ignore, even if it’s not exactly exciting. If you want to grow your audience and provide a solid user experience, you need to make sure your site presents well on all the popular browser options.
Fortunately, there are plenty of tools that can help you test a website in different browsers. Two of our favorites include:
- Browsershots: A simple, free tool that offers screenshots of your site on a wide variety of browser versions.
- CrossBrowserTesting: A more comprehensive, premium option that supports both screenshots and live testing using physical devices.