Use browser testing to see what your website looks like for different visitors

What’s the best way to test your website on different devices? How can you use browser testing to find out what your visitors are seeing?

Should you buy a laptop at every size and operating system, and every smartphone and tablet on the market? Well, of course not! There are easier ways to make sure your website looks great for every visitor.

Browser testing tools are a must for every website owner and designer. They allow you to input your website’s URL, then interact with your website as it would look on different browsers and operating systems. By connecting to a remote server running each operating system, they give you the ability to see any formatting problems that might come up for visitors.

For browser testing, I used to always recommend Adobe’s fabulous free product, Browserlab. However, this was recently closed down, so I’ve had to scrounge around for a viable alternative.

There are a few other options out there, for a range of different price and feature levels. I’ve tested most of the free tools, however I’ve been quite dissatisfied with them. Mostly, they only deliver screen shots of the website, so you can’t click any links or scroll down the page.

The two alternatives suggested by Adobe in the wake of Browserlab are BrowserStack and Sauce Labs. Unfortunately, neither one is completely free, however they both offer great sets of features.

1. BrowserStack

BrowserStack allows you to test a website on multiple platforms and browsers, all from your own browser. There is a free trial available, but after that it starts at $19/month, and increases depending on the number of users.

I really like the interface of BrowserStack. The design is clean and easy to navigate, and the test sites are generated quickly. However, it’s a shame there is no free option, as I’m not using the service often enough to warrant paying for it.

2. Sauce Labs

Sauce Labs also lets you test your website on various platforms and operating systems. You can use it directly in your browser, or download a desktop application (Mac only). Sauce Labs has a free option, which is perfect if you’re not using it too often. For heavier users, plans start at $12/month.

While the interface of Sauce Labs isn’t quite as user-friendly as BrowserStack, I love that they offer a free option so you can do the occasional testing and not have to pay a monthly fee.

3. Other tools

There are a couple of other testing tools worth noting here. These don’t have the full functionality of BrowserStack or Sauce Labs, but they’re worth checking out:

1. iPad Peek/ iPhone Peek: Free iPad and iPhone emulator. Shows you what your website looks like on these devices only.
2. Screenfly: Test your website at different screen resolutions for free.

What should I do if my website looks crazy on a different browser?

Sometimes, when you use these tools a problem will surface. For instance, elements might be overlapping each other, your sidebar might have jumped ship to the bottom of the page, or your fonts might look weird. Usually, these problems have been caused by an error with the code, or a plugin.

A good place to start figuring out the problem is the W3C Markup Validation Service. This web-based tool scans your website for any problems with the code, and shows errors if it uncovers anything. Sometimes, some browsers will overlook problems in the code, whereas others will make the display look all funky.

I hope this introduction to browser testing has been useful. If you’d like to delve deeper into troubleshooting WordPress websites, check out my Udemy course, Step-by-Step WordPress: Basics and Beyond. Use the above link to get a 25% discount!

This post originally appeared on Grassroots Internet Strategy.