How to Test Your Website in Different Browsers, Resolutions and Mobile Devices

When you get yourself in a groove and get really comfortable working with your Internet business, you can sometimes forget that not everyone is the same as you and not everyone is going to have the same experience. You publish what you think is a fantastic blog post and then a friend sends you a message to say that your blog looks broken.

You fire up Google Chrome on your Windows 7 machine, viewing it through your 24-inch monitor with a resolution of 1920 x 1080 pixels and… your site looks fine to you. You think that your friend is crazy… and then you learn that he’s looking at your website with Internet Explorer on his 8-inch Windows 8 tablet. And that’s the thing: the web and its users are not uniform. Even if everything looks perfect to you, it could be “broken” in some way or another for someone else.

And no one wants to visit a site where the design is all wonky and misaligned. You’ve got to break out of that bubble and remember to test your website under a range of different configurations. Of course, you probably don’t have dozens of computers, monitors and mobile devices on hand. The good news is that there are several online services that can do this for you.

WhatIsMyScreenResolution

The Multi Screen Test on WhatIsMyScreenResolution.com just launched not that long ago and it effectively lets you view your website (or any URL) through whatever resolution you’d like. This way, even if you’re used to seeing your blog on a 1080p monitor, you can see what it’d look like on a smaller screen.

While this tool does have options for mobile devices, tablets and smart TVs, it doesn’t seem to be configured to pick up on responsive designs or mobile theme redirects yet. The Quirk Tools Screenfly tool works in pretty much the same way, though with a slightly different interface.

Browser Shots

Optimizing for different screen resolutions is one thing, but it might be even more important to test your site in different web browsers too. That’s where Browser Shots comes in.

It is a free service, but your request will enter a queue based on how many other people are also submitting requests. The good news is that Browser Shots supports a huge range of different browsers (over 100), so you can test your site in different versions of Firefox, Opera, and Chrome on different operating systems, as well as more obscure browsers like SeaMonkey and Konqueror.

Mobile Phone Emulator

Admittedly, the interface on Mobile Phone Emulator could probably use some work. It’s not really optimizing the use of space in your browser. That said, it can show you how your site will look on your chosen cell phone or mobile device to real-life scale. You simply tell it the actual size of your monitor and it will render an iPhone or Android phone to exactly how big it would look in real life.

Browser Stack

Perhaps a better alternative to the Mobile Phone Emulator is the mobile simulator of Browser Stack. Just enter the URL you want to test and it will render how your site looks on a range of devices, including the iPhone 6, Galaxy S5, Kindle Fire HDX 7 and Nexus 4. You’ll need to register for an account to access more advanced features, like flipping the orientation or getting live interactive testing.

Google Chrome Device Mode & Mobile Emulation

One of the most significant changes to the Google search algorithm lately is the push for more responsive web design (or mobile-friendly design). You really need to make sure that your site looks and works well on the smaller screen of mobile devices, even if those small screens are getting increasingly dense resolutions.

If the mobile emulation of the above two services isn’t work out for you, a more robust option is Device Mode & Mobile Emulation as an extension of Google Chrome. It is a development tool and it “brings the insights of mobile testing to your browser tab.” You can even emulate device sensors, like touchscreens, GPS chips and accelerometers.

Of course, it’s unrealistic to test for every screen resolution, every browser and every mobile device. A good idea is to go into your Google Analytics account and see what the majority of your traffic looks like. The Pareto principle triumphs again.

The Original Dot Com Mogul

John Chow, a damn fine person, friend of the community, Ultimate Fighting Championship contestant, member of the Save the Whales Foundation, the man who controls the black market on baby seal pelts and member of the probably yo’ daddy foundation...