With buzzwords like 'responsive design' (What is a 'responsive' web site) and 'mobile first' dominating web talk, many of our clients are asking about how they can optimize their site for mobile devices. A year or two ago most of their users would likely have been accessing their site on a standard 1024x768 resolution desktop screen but now it's very difficult to second-guess what type of device they might be using.
Here are a few considerations when planning out how to get the best out of a web site on a mobile...
1) Check the stats
A quick look at the usage stats for a site should be the first port of call. Google Analytics is a powerful tool when it comes to breaking down how users are getting to a web site, from which device they're using to the version number of the operating system it's running. This is invaluable when it comes to deciding which mobile devices the site should be tailored for, and shows what areas of the site are particularly key to a mobile audience.
2) Make sure content is still king
A mobile user behaves differently to someone sat at a computer. They're on the move and usually just want information quickly and efficiently so a site's content has to be presented accordingly. This might mean stripping out everything to the barebones; simply latest offers, contact details and social links for example. Or it could mean reordering content into a single column with a less obtrusive navigation. Either way, a phase of wireframing and planning is essential to ensure the best experience for the user.
3) You're not going to catch 'em all
There are a myriad of devices out there and each has a different screen size and ratio so it's impossible to cater for them all. Android and iOS touchscreen devices have a distinct rectangular display, but Blackberrys are squarer to allow for a physical keyboard making it even more important to get key content at the very top of the page. As we can't create a site especially for each device and operating system, it's best practice to set a series of screen size benchmarks – sizes at which certain CSS styles are defined. For example, less than 600px wide uses styles to suit a mobile device, less than 1024px for tablets such as an iPad and then more CSS rules for anything over 1024px.
4) Get ready for ongoing testing
A good web agency will have plenty of devices to test on but with the number of operating system out there a site would never get released if every platform needed testing and debugging, especially with Google releasing a new version of Android every few months. A sensible plan is to test on the latest versions of iOS, Android and Blackberry OS and rope in as many other employees, friends and family to try out the site on their phone. Once the site is up and running listen to user feedback, and keep an eye on any exotic devices cropping up in the stats. After launching The Gym Group site, a user discovered a niggling problem with Android 2.2.2 and its lack of support for certain security certificates. Get ready for similar weird and wonderful bugs once a site is out in the wild.
Hopefully these considerations give a broad introduction to the constantly evolving world of mobile web site design. If you have any points to add to the list then please let us know.