How best to test your responsive website across devices and browsers…

Here’s a completely hypothetical scenario that’s never happened to anyone in particular before when testing responsive websites…

So you built a cool website and you feel proud. You lean back in your chair put your hands behind your head and think, “Wow, that’s a nice website. Everyone should see this.”

So you press the big green GO LIVE button and then go over to LinkedIn and start shouting… “HEY EVERYONE! EVERYONE!!! C’MERE AND LOOK AT WHAT I DID…”.

But then the tide begins to turn as a trickle of comments, DM’s and emails begin to illuminate something unforeseen in the polite manner often associated with LinkedIn. “Hey! Amazing work. Looks awesome. But I can only see a quarter of a cat so I’m not sure if it’s working properly”.

Oh dear… what have you done. It looks perfect on your screen. What does everyone else see. Everyone is going to think you’re a ***insert demoralizing noun here***

And so the scurry begins. It looks perfect on my screen. I’m using chrome on Windows. It must be MAC users. How can I check it for MAC… Damn you Steve Jobs, why couldn’t you have left PCs to Bill Gates.

Okay… So now you’ve learnt a very important lesson about testing. You were lucky this time because it was only a little personal project. It might have damaged your pride a little but the error didn’t cost your employers thousands. But if something like this had happened at scale, under the very watchful eye of your boss, well…

Let’s start looking at ways to mitigate such scenarios.

Make a list of things the website needs to do.

List the scenarios that need to be tested. List the user goals and the business goals and make sure that these can be completed. For an ecommerce website this might include:

1. View shop
2. View product
3. Add product to cart
4. View cart
5. View checkout
6. Add deliver details
7. Add billing details
8. Pay
9. Redirect to thank you page
10. Receive email notification

Spend some time on these scenarios and bear responsive website testing in mind. The more time you spend on them the better your testing (and development) becomes. I see a lot of small ecommerce websites who might have the checkout process tickityboo for a guest checkout, but when I go to create and manage my account the whole website looks broken. So add that user flow to your ecommerce testing list.

Nothing compares to the real thing for responsive website testing. The real deal. Real devices. Real people.

In my opinion and experience, nothing beats the real thing. Physically looking at a website on a physical device. You can of course use virtual machines and remote testing tools but I’ve found these come with their own headaches and drawbacks such as lagging, inaccuracies and price. I’ve found that grabbing a device and going through a testing checklist on all available browsers on that device to be the most time-effective way to test.

I know what you’re probably saying to yourself now. You’re not going to go out and buy all these different devices for testing. And nor should you…

If you’re in an office, you can do a hallway test. Hallway testing is often associated with UX testing but there’s no reason why you shouldn’t be able to do the same for device and browser testing. Hallway testing is very simple, you just shout at people in the hallway to get them to test your website. It’s also cost effective.

If you’re not in an office, you can still do some testing by leveraging your peers and networks. I use a Windows machine, my wife has a MAC. I’m always grabbing her machine for testing websites I’ve built. I’ve also sent websites to my Mam to make sure they’re working on her devices.

Focus on moving the big rocks

Focus on what’s important. You can cover off the majority of devices and browsers relatively easily by focusing on a handful of each. Don’t worry about the little rocks yet. Don’t go down that rabbit hole trying to fix tiny bugs for the losers using some weird browser on some weird android phone that only accounts for 0.0001% of the market.

At time of publishing (15/01/2021 at 15:37), chrome and safari account for over 80% of the browser market. So be smart and make sure you cover off those.

Source: StatCounter Global Stats – Browser Market Share

Here’s another helpful tip… Try to find out what devices and browsers your clients and key stakeholders are using. Just drop it in to a discovery meeting… “Hey nice laptop… what browser are you using”.

I’ve worked with clients before who have ancient systems in place and still using Internet Explorer. A quick check on this browser can prevent those awkward, “It’s completely broken” conversations.

Use DogNotDuck…

I know… A shameless plug on the DogNotDuck blog. I don’t think anyone expected that.

But as you’re hopping from device to device and browser to browser, you’re going to need a way to document the bugs that are popping up. And because DogNotDuck is embedded in the website, you can log in on any device/browser. See the demo here:

Finally, some other tools for responsive website testing…

Here are some tools that will help with responsive website testing that are also worth checking out…

You can use Chrome’s built in dev tools to make sure the website works at the correct browser width for relevant devices. It’s obviously not going to be as accurate as a real device but it may help to move some of those big rocks we discussed.

CrossBrowserTesting provide a means to test website across multiple devices and browsers using virtual machines.

Not quite browser/device related but I do love Pingdom for speed testing. Paste a url, select a location and run the test. Couldn’t be easier.

Another off-topic tool but if you’re comfortable with the command line, I quite like Pa11y for accessibility testing.