Atomic Smash homepage splash

Effective browser & device testing for your website

Words by George HieronNovember 20, 2017

Highlighting some tips and tricks for making sure your website works well on as many browsers and devices as possible.

That website you’ve been building is nearly ready to go live – all that’s left to do now is to make sure that it looks and behaves correctly on a variety of browsers, to give a consistent experience for everyone that visits it.

The most obvious place to start is by using a variety of desktop browsers. On laptop and desktop machines, Chrome and Firefox are two of the most-used browsers, and should definitely be tested no matter your operating system. For Windows, you should also of course check Internet Explorer and/or Edge, and Mac users should also remember to check their site on Safari. If you have it, Opera is also worth testing with. To check browser usage statistics, take a look at https://www.w3counter.com/globalstats.php .

Mac users should also be testing their sites for IE and Edge compatibility too, and there are a couple of solutions for this. Perhaps the best solution for keeping everything on one machine is to install VirtualBox, which can essentially create a computer within a computer. You can use this to install, for example, a Windows 8 emulator to test your sites’ compatibility with IE10. Another solution is https://crossbrowsertesting.com/ , which allows you to create a live test of various browsers on several versions of Windows, Mac and Ubuntu operating systems, as well as a plethora of mobile devices. Another solution, of course, is to just keep a separate Windows machine handy! CrossBrowserTesting would also be useful for the Windows user looking to test their site’s compatibility with Safari.

Running Windows 7 with IE10 using VirtualBox.

Using VirtualBox to run Windows 7 with Internet Explorer 10 installed.

 

When looking through your site on all these browsers, you should check all the pages of your site to ensure that all elements are rendering correctly, particularly more complex elements such as those that are size-responsive or dynamic. It’s also a good idea to shrink and expand the size of the window so that you can account for people using that browser on smaller screens than your own.

Moving on to actual smaller screen sizes, you should of course test your website on your own smartphone using as many browsers as possible. If, like me, you are a Mac user that doesn’t have an iPhone, you can get Xcode from the Mac app store: https://itunes.apple.com/gb/app/xcode/id497799835?mt=12 . Xcode is a set of developer tools for Mac developed by Apple themselves, and contains an app called Simulator which perfectly replicates an iPhone or iPad on your Mac – you can choose which iOS version and which device you want to test with.

Using Simulator to simulate an iPhone 6S Plus running iOS9.2.

Using Xcode Simulator to simulate an iPhone 6S Plus running iOS9.2.

 

As with desktop browsers, you should be checking all the pages and different elements of your site to make sure that they work. Something I like to do to ensure that everything possible is working as intended is to create a new page on the site that is purely for testing, which contains every possible instance of content on the site. This is particularly useful for sites where clients have the ability to add new types of content later down the line, that are not currently needed or being used for the site’s launch. Doing this will save you headaches later on if they should start using something that you didn’t test, and it’s not working properly!

Finally, double check any fixes you have made for issues that you find, just in case something is still wrong or another issue has arisen in its wake. The entire process of testing like this can become quite time consuming and mentally demanding, but it’s always best to pick up small errors and bugs before showing or handing over to the client.

Go back to top

Keep up to date with Atomic news