Cross-Browser QA on Mobile

There are 3 main approaches to mobile QA:

  1. Use a physical device
  2. Use a local emulator
  3. Use a hosted service

We’ll discuss all three options and then focus on the sorts of things that you should QA on a mobile device which are the same no matter which approach you take for a testing environment.

Mobile QA with a Physical Device

You will get the most accurate experience by testing with an actual device, but this can be an expensive investment if you try to cover the field. Again I recommend looking at your analytics to see what mobile browsers are visiting your site.

mobile-browser-analytics@2x
Mobile device analytics with Browser Version secondary dimension.

It would be a good idea to invest in one or two of the top devices and it’s likely that you already have one of them.

Mobile QA with a Local Emulator/Simulator

Using a local emulator/simulator is a good option but the experience may be subtly different.  Both the iOS Simulator and Android Emulator are available for free from Apple and Google respectively.

Android Emulator

The Android Emulator lets you test a wide variety of Android versions and device settings but the installation and setup can be quite involved. 10 Tips for Setting Up + Using Android Emulator (Smart Layers Style) is a good blog post to get you going.

iOS Simulator

The iOS Simulator is available with Xcode from Apple and lets you test the latest version of iOS on multiple devices. Setting Up an iOS Simulator on Your Mac is a good blog post to get you going.

Mobile QA with a Hosted Service

Both services we listed last week support manual testing on a mobile device:

These can be a good way to get access to many different devices and OS’s without having to setup the infrastructure yourself. It’s especially useful if you need to debug specific one-off problems on devices.

What to QA on Mobile

Conducting a good QA on mobile is different from on the Desktop. Since mobile web browsers are generally as advanced as modern desktop browsers, you won’t be looking for the same sorts of cross-browser display discrepancies. Rather, you will be looking for situations where the mobile experience is generally different from the desktop experience and you want to ensure that it’s still a good one.

With that in mind, here are some specific things to look for when doing Mobile QA.

All Appropriate Page Elements Visible

Frequently in a responsive design page elements are rearranged or hidden. It is important to check that all of the elements that are appropriate for a given page are visible on the page on a mobile device.

Decent Default Display

When your homepage first loads on a mobile device, does it display decently? Even if it’s not responsive, you should aim for something that conveys your main message to a visitor in that first view that they will get.

Menus Work

Can people use your menus? This is where having an actual device makes testing easier. You need to be sure that the menus on your site work correctly with a touch interface.

Interactions Work

Do any interactive areas of your website work? Maybe you’ve got an interactive infographic that changes based on user interaction. Mobile devices don’t have a “hover” state so you need to make sure that you have some kind of touch fallback or recognize and accept that the interactive infographic experience won’t be the same for mobile devices. If there is some interactivity that doesn’t work, does including it for mobile display still make sense?

Touch Targets Large Enough

You need to make sure that links and buttons are large enough for a user to comfortably tap them. Finger-Friendly Design: Ideal Mobile Touchscreen Target Sizes is a good blog post that digs into the topic.

Text is Readable

Is your text large enough to be readable on the device? If people need to squint or zoom they’re less likely to stay on your site.

Rotating Device is Sane

What happens when you rotate the device from portrait to landscape and back? How about from landscape to portrait and back? Does the website resize to fit the view screen in a sane manner? Be sure to test starting in both portrait and landscape because sometimes the behavior can be different.

Performance is Decent

Mobile devices have fewer resources and generally slower processors than desktop devices. It’s important that your site is still performance and a decent user experience. If you have some heavy client-side JavaScript it may slow down your site to the point where it’s sluggish or could even crash the browser.

Videos Work

If you have videos on your website they need to be available in HTML5. Try watching the videos on your device and make sure that they play.

Wrapping it Up

Over the last few weeks we’ve taken a good look at some of the considerations and needs for cross-browser QA. Today’s focus on mobile finishes the series but we’ll be returning to some individual topics and fleshing them out in the future.

As always, if you have any questions about QA please feel free to ask in the comments or via email.