What I’ve Learned from Performing Cross-Browser Testing

I’ve been doing cross-browser testing for a few years now, and I wanted to share some of the insights and tips that I’ve learned:

Emulators vs. Remote Desktop

When doing cross-browser testing, it’s important to make sure a site works in not just the most current version of browsers, but also older versions that people might still be using. This is especially true for Internet Explorer, which is used by a lot of people who don’t often keep it updated. As of this writing Internet Explorer is on version 11, but many users are still using versions 7-10, so it is important to test the site using these older versions.

One way to test a site on an older version of a browser is to use an emulator, such as IETester. This is an acceptable method of testing, but while emulators can replicate the look of older versions of a browser, they don’t always fully replicate the functionality. This means that if you discover an issue, it can be difficult to tell whether the problem lies with the browser or with the emulator.

Instead of emulators, I prefer to use remote desktop connections that are set up to run older browser versions. Using the actual browser will tell me more about how the site works than an emulator will, which makes my testing more efficient and lets me know exactly how the site will look to actual users.

If you want to create virtual machines to test older versions of browsers, our Design team recommends this virtualization tool.

Mobile Devices

Since so many people use mobile devices to access websites, it is important to not only test desktop browsers, but also to test on different devices, screen sizes, and mobile browsers. However, it is very difficult to keep up with every variation of phone size and model, especially when new versions of hardware and software are released regularly.

A good solution to this is Perfecto Mobile, a tool which allows you to test a website on a large variety of mobile devices. You can select what kind of phone or tablet to use, and it will give you a live view of the actual device in real time as you click around the screen. This allows you to test your site not only on devices from different manufacturers using different mobile operating systems, but also across a variety of screen sizes to make sure it will be usable by as many people as possible. Perfecto Mobile is a paid service, but being able to test across so many devices is well worth the investment.

Styles and Effects

On modern websites, designers have come up with a number of ways to create visually appealing content. They do this using Cascading Style Sheets (CSS), which can add any number of visual enhancements, such as filter effects, images that automatically scale to fit the background, rounded corners on images or buttons, and different fonts, sizes, and colors for text. These visual styles can make for beautiful websites, but older browsers can sometimes have trouble displaying them correctly, which makes them something to watch for during testing.

One tool that our designers use is CanIUse.com, which offers a great way to check to see which styles are supported in different browsers. When testing, you don’t necessarily have to know exactly what will and won’t work in every browser, but this tool can help you learn what to watch out for.

I’ve found that since a lot of modern style effects don’t work in older versions of Internet Explorer, when you’re testing in those versions, you can’t focus on the small details, since much of these elements aren’t going to display as they would in modern browsers. Instead, you want to look at the big, functional pieces of the website, ensuring that the navigation works and that the site’s content shows up. The site won’t look its best in older browsers, but you still want to make sure it is usable and that users can find the information they are looking for.

Additional Tips

When doing cross-browser testing, I always start by testing the site in Google Chrome, my browser of choice. I then test in Internet Explorer, starting with older versions and moving up to the current version. This lets me note issues that might arise in older versions, and if those issues are resolved in newer versions, it lets me know that the issues are with the browser, not the site itself.

I also look at the site in Firefox and Safari, but if something works in Chrome, it will most likely work in those modern browsers as well. It can still be a good idea to check how the site looks in the different browsers, since looking for any differences between browsers can help me spot issues. Still, it’s important to remember that a site doesn’t need to look exactly the same in all browsers. There are going to be big and small differences, but the large differences are the ones to watch out for, especially when looking at older browsers.

While you may find that your site has issues for people using older browsers, you need to decide which versions you are willing to support. It helps to know what browsers and devices your visitors are using; if 40% of your users still use an older version of Internet Explorer, it is worth it to ensure compatibility for them, but if only 1% of people are going to access your site on older browsers, modifying your code to meet their needs will probably not be worth investing time and money to do so. If you know what browsers a majority of your users use, you can plan to make sure your site supports those browsers.

There are plenty of other facets of cross-browser testing to consider, but putting in the effort to fully test your site and ensure the best possible experience for your users is essential. Do you have any questions for us about cross-browser testing? Please let us know in the comments below, or contact us to speak with a Solutions Engineer.