How to test your mobile site
Many of us now browse the web on the go, not sat at a desk. A recent study in the US revealed that 72% of users expect sites to have a mobile-friendly version and with consumers using their phones and tablets to browse, shop and buy, not having a functioning mobile experience is going to start costing brands business and erode customer’s confidence.
In the developing world smartphone usage is increasing at a staggering rate with Africa one of the fastest growing regions and cheap smartphone/tablet alternatives designed and built in Africa are already hitting the market. Browsing the web on a mobile device is the only option for many in these areas so sites targeting these users must be optimised for whatever screen size or operating system they might appear on. If not, potential sales or conversions will quickly move on to better prepared competitors.
From a development perspective there are several ways for an organization to improve its mobile presence. Either your site is responsive and shrinks and rearranges itself to whatever screen height and width it finds itself on, or you can offer a completely separate mobile site with different content tailored for a mobile audience. Whatever the approach, testing the solution is vital. Once the site is out in the wild it needs to be robust enough to handle a huge variety of display types.
The trouble is testing every possible mobile variation. Web developers primarily work on a desktop machine, possibly with their own personal smartphone or tablet to hand to check how things look. Sure, a developer can resize their web browser to see how things shrink down but this fails to test the actual technology a mobile user might have, or the physical experience of viewing it in the hand and navigating through touch.
Prior to testing, it’s well worth looking at your current site stats to see how the majority of users are actually viewing it. It might be that most mobile users are on an aging Blackberry device, or certain pages are more popular on mobile. This at least gives some direction to the testing phase and determines how in-depth it needs to be.
There are then several avenues to explore when it comes to mobile testing...
Starting simple
The Responsive Testing Tool was set-up by Matt Kersley and allows for a web page to be viewed across several predetermined screen sizes.
While it’s nice to be able to view the different mobile options side-by-side, the tool is limited and doesn’t allow for browsing within the frames so it’s not for testing an entire site. There’s also no option to add your own custom screen sizes which might be needed to support more exotic devices.
Playing with screen sizes
The Viewport Resizer is a javascript bookmarklet that can be added to Chrome or Firefox. Once installed, you can use it to preview the page you’re viewing at various different screen sizes and also create your own custom sizes either by entering pixel sizes or by dragging the window.
It’s a great tool as it’s always available in the browser and allows for browsing through the site being tested. However, it doesn’t allow you to easily rotate the view, which a user might do with their device. An alternative might be to use Screenfly which allows you flip around the views and it comes with a lot more presets to support more diverse Android devices as well as Blackberry and TVs.
An interesting feature of Screenfly is that it can display web pages based on ‘user agents’ - something set by a device which tells the page what it’s being displayed on. So if you have certain CSS styles that kick-in especially for an iPad for example, they can be tested, although it doesn’t mimic the actual behaviour of a device which could depend on the way it’s set-up.
Getting serious with hardware
Nothing beats testing on an actual device. As well as different screen sizes, devices will also have different operating system versions, even their own browsers. The only way to test this is to get your hands on a physical device, or an array of core devices that a site will be targeted at.
Adobe’s Edge Inspect software is very useful when it comes to testing across physical devices. This can be installed on a desktop along with apps for Android and iOS devices. An extension for Chrome then syncs the current web page with whatever Edge Inspect device is also on the network. So a web page can be sent to several devices at the same time and screenshots can be sent back from any of those devices to the desktop.
We’ve found the Edge Inspect set-up a bit fiddly at times - you have to have an Adobe ID and we often have to use specific IP addresses rather than machine names to hook together some mobiles. Testing on multiple devices also requires a subscription of around £10 a month. For just testing single Android mobiles we’ve found the Chrome to Mobile extension much easier for a quick mobile preview.
But what about other devices not supported by Edge Inspect? Blackberry, Kindle or that ageing Palm device some users just can’t let go of? Sadly there’s only so far online resources can go and it’s time to start asking the larger web community for specific hardware. Luckily for us we live next door to our friends at Clearleft and their pretty comprehensive testing lab should we feel the need to try out a site on a NintendoDS - but strangely enough, we’ve not yet had that requirement from a client!
Mobile testing never stops
All of these resources should help to give a site a thorough test run on popular devices, although they will never be able to cater for every case. Once a site is out in the user’s hands then the real testing begins. After a particular site launch we found odd quirks between different versions of Android and the way they handle SSL certificates - something we’d have never discovered unless we tested the site on every device with every possible version of the Android OS.
The key is to launch a site that offers a slick mobile experience for the majority of users - and then watch how they interact with it, responding to the odd niggle that will no doubt come from older devices. Hardware and browsing software is constantly changing and mobile sites can’t be launched and forgotten about, they have to evolve with changing trends.
