A good site to an end-user should just work, whether that user is accessing it from Safari on their iPhone, Microsoft Edge in Windows, Google Chrome on MacOS or Firefox in Linux. Irrespective of the browser they use and on what device or which operating system, the experience should (mostly) be the same and should function based on their needs.

However, achieving this isn’t as simple as just building it, testing once and calling it a day. Each browser works differently and will display a particular site in a slightly varied manner due to various factors. Take the below 2 images as an example:-

The top image is from Google Chrome, the bottom from Firefox, both set to 100% zoom and the same font sizes. For the most part, these appear the same, however, look at the box on the right. In Chrome, the box fits within the height of the screen, meanwhile in Firefox, you need to scroll further down to see the bottom.

This can be attributed to both browsers using different rendering engines. A rendering engine is the part of the browser that takes the HTML and CSS of your website and turns it into something your visitors can understand. Each rendering engine can handle this HTML and CSS in slightly different ways resulting in differing experiences for different users.

Some browsers will render in more or less the same way due to using the same rendering engine, for example, Google Chrome and Microsoft Edge both use Chromium, as a result, they should both process a site in a similar fashion. However, Firefox, as a further example, uses Gecko as it’s rendering engine meaning that it’ll process a site differently from Chrome or Edge.

This is only one aspect in which sites can be handled differently as a result of using a different browser, therefore to ensure the best experience across all browsers, extensive testing must be done to ensure that a site will work as intended across the board, rather than for a specific set of users who may only use a specific browser.

 

BrowserStack

One way of testing a site across different browsers and devices would be to have multiple devices setup with multiple browsers and have our testers test in each one to ensure the correct experience, however, this can be expensive depending on how many devices are required and how many environments they need to run in e.g. do they need to run in every version of Windows from Windows 7 onwards?

BrowserStack is a platform that allows for testing across a range of devices and browsers easily without the need to buy multiple devices to run each possible instance of the environments you need to test. Upon loading BrowserStack, you’re provided the following options:

The options are split into 2, with the left-hand side providing the different environments your browser can run in e.g. Android, iOS, Windows, macOS etc. and the right-hand side providing specific devices, in this case, Android.

Selecting a device (or in the case of a version of Windows or macOS) will give the option of which browser you wish to test your site in. Once selected, BrowserStack then runs a virtual machine, an emulator, or a live device with the selected browser running depending on which environment you’ve picked to test your site. This then allows for testing in a highly accurate use case to ensure a site works as intended and allows for testing across a range of scenarios to ensure high compatibility.

Windows and macOS environments are also customisable to allow for different screen resolutions to see how your site will display depending on the monitor a visitor to a site may use. Mobile devices allow for the orientation to be set so you can see if the site works correctly whether the user is viewing the site in either a landscape or portrait format and all devices can have a custom location set to allow for location-based testing such as correct redirects, currency defaults, product availability and more.

Testing on mobile devices will also frame the environment so it appears as though it’s on the device itself, take the below example:

This screenshot is running on BrowserStack using a Samsung Galaxy S10. As you can see, the environment itself appears as though it’s running on the device, including physical features such as the in-display camera, allowing testers to determine if this may affect the browsing experience by obscuring content and if necessary, enabling developers to ensure this can be compensating for when building the site.

Tools like BrowserStack allow our testers to quickly and easily ascertain whether a bug is with the site itself as a whole, or whether it occurs specifically within one or more browsers or even on a specific device or environment, which then ensures our developers can more easily find the problem and fix it. It allows for highly efficient testing of a site with minimal cost and saves time for our testers who only need one PC to test in any scenario that may be required by the end-user.

 

Summary

Website testing is more complex and involved than it may initially seem and ensuring the best experience for as many end-users as possible can be time-consuming and difficult. Tools such as BrowserStack save testers time and reduce costs by providing as many different testing scenarios as possible using a range of devices, operating systems and web browsers to allow testers to easily determine what could be causing a fault and enabling developers to ensure the site works as intended irrespective of the end-users setup.

If you have any further questions about website testing or need to ensure your site works with a specific device, environment or browser, then be sure to get in touch and speak to one of our experts, who can advise further regarding the best solutions for your testing needs and inform further regarding your testing questions.

If you have any questions about website testing or need to ensure your site works with a specific device, environment or browser, get in touch for further information today!

Author

Sam Manojlovic

Leave a Comment

Your email address will not be published. Marked fields are required.