By: Franco Campione
It’s no surprise to anyone that mobile usage is exploding globally – and with that comes increased demands from internal business divisions on IT to develop innovative solutions that allow our sales and marketing staff, as well as external customers, to access information anywhere and on any device. Creating these innovative solutions for mobile devices is actually the easy part! Testing what we create to ensure that they’ll work on multiple operating systems, form factors and device types is another story.
How big of a problem is this? Let’s dig a little deeper.
When it comes to mobile operating systems – it’s basically a duopoly. iOS and Android are far ahead of the rest of the pack with 68% and 18% respectively. That’s in the greater market though – cmegroup.com sees much closer to a 50/50 split between iOS and Android devices accessing our site. That’s not to say that there aren’t other players in the game. Windows Phone is definitely seeing a rise as the new OS gains traction. And we see meaningful traffic from users on Blackberry, Symbian and even Kindles and Nook’s. (And looming on the horizon is a number of up and coming OSs – specifically the very interesting Sailfish OS from Jolla)
Once you get past the various operating systems, developers need to deal with multiple versions. Taking Android for instance – we see traffic from 2.x devices (Gingerbread) all the way up to the latest 4.2. (Jellybean). Each has their own nuances and feature set that they support – including some rather important elements like side scrolling data tables that are styled with CSS3. So developers need to be able to use these advanced features but still degrade gracefully for effective and consistent viewing experiences.
Outside of OSs and their versions, we also need to consider various device form factors. Today there is an avalanche of form factors and screen sizes. Large tablets, small tablets (think iPad minis), large format handhelds, minis, eReaders – the list goes on and on. And they all have various screen sizes and resolution density.
Not that we’re aware of all the form factors, operating systems and device fragmentation – and we’ve started developing our sites using responsive approaches – how do we use this knowledge to test our what we create?
We decided to build a mobile device lab!
I started by researching others who’ve created device labs around the world. Smashing Magazine recently ran an article called “Establishing an Open Device Lab” that covered a lot of the basic topics to help us get started.
My first stop was a quick hop from Belfast, NI to London where I visited the Mozilla Open Space called the London Device Lab. Their philosophy is to provide an open workspace for developers to come and collaborate as well as devices for them to test their applications. Unfortunately – the space was closed that day for some retooling. But a little convincing at the door and we quickly found ourselves inside. We received a quick tour and focused on the mobile device section looking at how they have the space laid out, what devices were present and discussing their pain points (disappearing power cables!).
Back in Belfast and it was off to work on choosing what devices our internal lab would need to represent a good cross section of the user base that accesses our websites. I started with an excellent article from Stephanie Reiger on Strategies for Choosing Test Devices.
Step 1 was to review our existing Google Analytics – which yielded 907 distinct mobile devices over the last 30 days. Wow. A lot of work ahead. I sifted through all the devices – consolidating ones that were slightly different models of the same phone. From there I broke them down into screen resolutions and size and removed the duplicates. I followed Stephanie’s rule of focusing on the 20% of devices that produce 80% of the traffic.
Step 2 was to review regional traffic and make sure that we had devices that represented a good cross section of international usage in Asia, Latin America, South America and Europe. Mobithinking.com has an EXTENSIVE roundup of global mobile stats to look through.
Step’s 3 and 4 was looking at device and project specific factors to make sure we had a representative cross section of sizes and OS versions.
Whew. Exhausting. But well worth the exercise as I learned a LOT about our global mobile community and how mobile users are using our site that I’ll be able to share with numerous internal business teams.
From there the project turned towards location and how to handle these devices. Our office manager graciously donated an extra conference room here in our Belfast office!
I looked at a variety of other hardware lab implementations. From the insanely expensive:
To a bit too small for our needs:
Based on that we drew up plans for our custom hardware – ensuring that we left room for power cables and a deep enough lip to handle thicker devices.
In short order – we had our custom hardware built and in place!
The final step before ordering devices was to determine the software we would use to power this setup. Entering a URL into 20 devices one by one didn’t seem like a viable method when we’d have to surf from link to link during a development project.
Enter Adobe Edge Inspect. This amazing piece of software allows synchronized browsing and refreshing, remote inspection and dynamic multi-display screen-shoting.
How does it all work? Watch Danny Winokur and Paul Trani at ‘Create the Web’ keynote in SF on Sept 24, 2012 give an overview.
Stay tuned for Part II where I’ll walk you through the actual devices we chose, lab setup and our first mobile test!