As more and more people use their phones and tablets to browse the internet, it’s more important than ever to make sure your website is suitable for them. At Mercurytide we recently found that six out of ten (59%) visitors to the sites we’ve built are viewing them on mobile devices. To keep these visitors coming back, you need to make sure that your site is responsive, engaging and usable on phones and tablets.
It can be tempting to test your site for mobile by viewing it on your PC at the same width and height as an iPad or phone screen. Is this a valid test? Unfortunately not.
Testing your site on the wrong environment can hide a huge number of issues (which your visitors will find and tell you about later). We’ve put together a quick strategy on deciding which technology to test your site on and the types of issues you may encounter.
Know your visitors
Start by checking Google Analytics to find out which devices people are looking at your site on. It sounds tricky, but actually it’s really simple to find this basic information on device usage. Here’s a quick walkthrough:
Log into Google Analytics and select ‘Audience’
Open ‘Mobile’ and select ‘Devices’
You’ll find an overview of mobile and tablet device visits for your site on the right
If you don’t have access to Google Analytics, play it safe. It’s impractical to test against every screen size, operating system and brand on the market, so just use the devices your visitors are likely to own. We recommend testing your website on the current market leading phones and tablets.
Attempting to emulate the performance of a mobile or tablet on a PC is impossible. An older PC will generally be a lot more powerful that even the latest version of a phone. The most common issue I’ve seen is an animation stuttering across a mobile screen while moving smoothly on the PC.
Interaction & layout
The whole user experience is vastly different on a PC than on a mobile device. When you use a PC you use a mouse, a keyboard, a large monitor and 10 fingers. If you view your site on a mobile, you only use the phone, two thumbs and your fourth finger.
Interactive bugs you wouldn’t notice on a PC might be centred around pinching, swiping and scrolling, as those interactions are considerably different between a mobile device and a PC. The most common layout issue is PC browsers adding scrollbars to pages which wouldn’t have them on a mobile device.
E.g. This screenshot is a good example how a desktop screen size simulator adds a scroll bar. It gives different results.
On any mobile or tablet there would be no scrollbar in the expanded menu
You can’t simulate the finger stroke to move the menu up and down
The standard expectation with menus on mobiles and tablets is that you can swipe them closed: this is an action that isn’t possible on a PC
Your thought process is instantly altered just by holding a phone or tablet. You start to think differently and ask yourself questions like “is the experience the same for all visitors?”, “can a mobile visitor do everything a PC user can?” and even “does a mobile visitor really need to see the same as content as PC visitor?” Sitting at your PC won’t necessarily make you think of these points, but they’re questions which need answers.
The initial capital required for purchasing popular devices to test on may seem like a lot, however the benefits outweigh the risk of owning a site that mobile or tablet users cannot use. Remember, mobile and tablet users are one small part of the bigger picture. While some companies say they test your site across 30 different devices and browsers, all they do is emulate or simulate your results. You won’t get a true reflection on your site performance from them.