How to Test Your WordPress Site for Mobile Usability Problems
Almost exactly two years ago, I wrote a post about the key aspects of User Experience design you need to focus on when designing for mobile.
That post identified four UX priorities for mobile: touchable areas, navigation, forms and interactions.
Two years have passed since then and things have moved on in the web development world. Although I’d argue that they’ve moved a lot more slowly in mobile development over the last two years than they did in the two years before that post.
Although the iPhone’s been around since 2007 and Android since 2008, web developers didn’t really engage with mobile design and mobile UX for some years. Apple was insistent for years that websites worked just fine in their desktop state, even when shrunk down to fit in tiny browsers, and it took a while for media queries to be used in the majority of website stylesheets. The focus at first was on layout and how the site looked, but then came usability. We started to realise that using a website on a handheld device is a different experience from using it on a laptop or desktop computer, and developed the way we design and develop for mobile accordingly.
So I’d argue that the UX priorities for mobile which I listed in my last post haven’t changed much in the last two years. However I will add one more priority: speed. A site that doesn’t load fast won’t be enjoyable to visit, and will get many people leaving it before the home screen even appears. Many mobile devices have faster internet connections now that their desktop counterparts; I often switch my wifi off when it tries to hook up to a slow public service and use 4G instead. If you’ve ever tried to use the wifi on a train you’ll know what I’m talking about. But you still need to test your site’s performance on desktop and mobile.
In this post I’m going to look at how you can test your site against those criteria. I’ll identify some of the tools you can use to test your mobile site and to emulate mobile devices you may not have access to.
Testing on Mobile Devices
The obvious first method for testing is to use a mobile device. Few of us can afford to have a fully representative stock of these, but it makes sense to have one or two to test things out. Using a recent iPhone and an Android device will cover the majority of mobile usage and always adds more to your testing than just using an emulator or simulator.
Holding a device running your site in your hand lets you experience usage of that site in greater depth than viewing it on a screen. It helps you test interactions, animations and speed.
Whatever other tools you use, I’d always start with a mobile device.
Things you can test best on a mobile device are:
- Touchable areas – navigate around your site and interact with all of the buttons, links and menus using your fingers or thumbs. Test it with other users (maybe people with big hands!). Touchable areas should be at least 44px square and should also be easily identifiable.
- Navigation – since I wrote my last post on mobile UX, burger menus have become increasingly prevalent on mobile sites. On a device, you can check that any animation works smoothly and that the menu icon is easy to tap with a finger or thumb.
- Forms – filling out forms is arguably one of the least user-friendly things you can do on mobile. By testing forms on a mobile device you’ll be able to check that your forms work well with Autofill and that any scrolling you have to do to get between fields is smooth and doesn’t result in the user accidentally entering text in the wrong field.
- Interactions – check that links are easy to tap with your finger or thumb, that any processes running during interactions are smooth and that users are provided with information about what’s going on. If your site interacts with third-party apps (e.g. YouTube), you can test that the correct app opens from your site by using a device with that app installed.
- Speed – try running your site on one or more mobile devices through 4G and wifi, and 3G too. It’s worth keeping older devices so you can test these too – not all of your visitors (in fact not that many of them) will have the very latest device.
Testing Development Sites on a Mobile Device
One of the challenges when it comes to mobile UX testing is accessing your local development copy of a site on a mobile device. After all, you can’t run MAMP on a mobile phone.
But there is a way around this. You can access your local server via your mobile device, as long as it’s on the same network as your desktop. For a WordPress site it does need some extra setup, but it means you can directly access the site on localhost.
If you don’t want to go through all that for a quick test, another option is to create a staging version of your site on your server. That way you can test on a mobile device and you get the benefit of testing (on mobile and desktop) in the same environment that the site will be in when it goes live.
Once you’ve got this set up, you can test your site’s touchable areas, navigation, form, interactions and speed just as above – and by using a staging site, you get a much more accurate speed test.
Using Browser Developer Tools to Test Your Mobile Site
Another option, and one I use as I’m developing and before I’m ready to test on an actual device, is to use tools provided right in your browser.
Toggling Devices in Chrome
In Google Chrome, you can view your site as it would look on a range of Android devices by toggling mobile view on and off. Right-click on your page, select Inspect from the menu, and then click the device toggle icon at the top left of the inspector window:
This then gives you a view of how your site looks on a mobile device. Select the Responsive dropdown menu at the top of the screen and then pick form the devices available:
This means you can see how your site works, and test the user experience, on a range of devices without having to own them all.
Safari Responsive Design Mode
Safari also has the option to view your site as it would look on an iPhone or iPad. Go to Develop > Enter Responsive Design Mode, and you’ll be provided with a number of options. You can select different Apple devices and see how your site looks:
1.6 million WordPress Superheroes read and trust our blog. Join them and get daily posts delivered to your inbox - free!
This is a useful way of being able to see how your site looks on older and newer iPhones as well as iPads.
What Can You Test in a Browser?
So with these tools, you can test a lot of aspects of your mobile UX but some things just aren’t the same:
- Touchable areas – not much you can do here except check that your touchable areas haven’t mysteriously shrunk on different screen sizes that you may not otherwise have access to.
- Navigation – you can check that your navigation areas are displayed as you want them to be on a variety of devices and screen sizes.
- Forms – filling out forms will be easier as you’re on a desktop, so the UX isn’t testable this way, but you can check that everything’s in the right place and not cut off somehow.
- Interactions – you can test any animations or processes and check they work on a variety of screen sizes, but beware that the way they’re actually run by those devices can only be tested on the device.
- Speed – if your site contains different content on mobile, you can run a speed checker for comparison but beware that this ins’t truly representative on a desktop.
There is a way you can get closer to the mobile device experience on your desktop, however. That’s by using an emulator.
Using Mobile Device Emulators
An emulator or simulator will give you a balance between using an actual device and testing in the desktop browser. They’re designed to give you something closer to the experience of testing on the device without having to own one.
The difference between an emulator and a simulator is that an emulator uses the underlying system to emulate all aspects of what you’re testing. A simulator doesn’t go down as deep and will just simulate the mobile experience. I found a great analogy on stackoverflow:
“If a flight-simulator could transport you from A to B then it would be a flight-emulator.”
The Android emulator will emulate the experience of browsing your site on a wide variety of Android devices. To install it, you’ll need the Android Studio SDK. Note, these tools are free. I won’t go into detail on setting them up here, as it’s quite a lengthy process that does change with new versions, but you can get full instructions on the Android emulator site.
Just like Google for Android, Apple has a simulator for the iOS operating system that runs on iPhones and iPads. To use it you’ll need Xcode, which includes the Simulator app. It’s designed for testing apps but can also be used to run Safari and test your website.
The mobile Opera browser is used on more phones than you might expect. Their classic browser works on older phones and is often the best browser available for them. As web developers, we tend to assume that everyone has the latest mobile phone technology, but that’s not the case. If your site will have a lot of traffic from parts of the world where smartphone take-up is lower, or from sections of the population that prefer simpler phones, then it’s worth testing on Opera.
The Opera mobile emulator lets you test your site in the Opera browser on a variety of devices. It’s the simplest to use of all the emulators which is one of the reasons I love it.
What Can You Test With an Emulator?
Using a desktop emulator or simulator doesn’t add a huge amount to the experience of testing with browser tools, as you still can’t hold your site in your hand and test things like touchable areas.
However, it is a step up from browser tools when it comes to testing interactions and animations, as these will be run in the mobile environment and not the desktop one. So if your site contains code that will run differently on mobile, it’s worth using these tools. And if you’ll have a significant number of visitors using older or more basic phones, then using the Opera mobile emulator is a good idea.
Don’t Forget to Test Your Site for Mobile UX
If you’re like me, you’ll do your development work on a desktop (or laptop) machine. It gives you access to more tools, to code editors and to a local installation using MAMP. But before you launch your site, you mustn’t forget to test it on at least one mobile device, to check that the user experience is smooth and pleasant. Mobile devices show up different UX challenges which you can’t always test in a desktop browser.
You won’t be able to buy every single device your potential visitors might use, so as well as using one or two physical devices, you can use the tools I’ve identified above to test in a wide range of environments and ensure that people visiting your site on any device will get a great experience.