Sites for sore eyes: designing for the mobile web

Designing for mobile v designing for desktops: what challenges does the mobile web throw up for designers?

Research has shown some 40 per cent of the UK’s top 100 brands now have a mobile optimised web presence. Meanwhile, through the unfaltering march of smartphones and tablets, 45 per cent of internet traffic is now through mobile devices. It’s inevitable then that all brands will need to get to grips with the mobile web, but they cannot afford to be complacent when it comes to its design. Designing for mobile is almost unrecognisable from common web design. What works on the massive screens of our desktops is unlikely to translate to a screen small enough to fit in our pockets, and a completely different approach and mentality is required. So what should we be mindful of when designing for the mobile web? The Drum caught up with some experts to find out. Tim Ash, creative partner, MovementThe main challenge when designing for mobile is the number of devices you have to take into consideration, compared to the desktop web. With mobile you have a vast number of different devices and capabilities – throw in tablets too and there are additional variables to consider. You end up doing multiple UX, IA and layout variants just for one web page. There’s also the resolution to consider – in contrast to the web where the majority of desktop monitors have the same resolution, allowing more control and consistency, on mobile everything has to be a percentage of screen width, making it difficult to manage a reliable design experience. And the size of the screen in itself is a challenge – how do you fit everything into a confined space? On the flip side, this can lead to a more streamlined site as brands are forced to de-clutter and provide only the most relevant information. Designing for mobile does hold a lot of challenges, but if you take these in your stride and get it right, you can offer consumers sites that are relevant, to the point and useful, allowing interaction in the moment for an extended experience. Joe Robinson, lead UX designer, MadeByPiWe all know consumption of the web on mobile devices is commonplace and increasing as the penetration of smart devices grows. In recent years mobile devices have evolved to support colours, browsers and screen resolutions that come very close to desktop. From a design and UX perspective, the following need to be considered: Physical size: Look at where a user’s fingers rest on a device when it is held in either the left or the right hand. Ensure clickable elements are large enough for a finger to press (Apple recommends at least 44x44pts). Input type: Users tap, pinch and swipe rather than click. Rollover behaviour won’t work, so tool tips or drop-down navigation can’t be relied upon. Size is everything: Screen space is still at a premium. Reserve as much of it as you can for relevant content, don’t make users scroll past large navigation or adverts. Clearly communicated extra ‘clicks’ to access navigation or ‘return to the previous level’ are sensible and expected solutions for mobile sites. Optimise content: Break up pages into smaller chunks, displaying the most common and important tasks. Allow other content to be accessed as a secondary action or a via clear link to the desktop version. Simplify the design to reduce images andw therefore loading times; a lot of users will be browsing using 3G, certainly until faster networks are more widespread. Tim Bichara, managing partner, Nimble MobileThink taps and gestures, not clicks. Even with up to 45 per cent of internet traffic through mobile devices, it’s amazing how many designers are still creating mobile products with a desktop mentality. Nobody uses a mouse with a mobile device. Think creatively about how you can present your content in a non-linear, gesture orientated way. Only ask the user to do one thing at a time. This is one of the most important rules in mobile design, particularly important with smartphones. You’re dealing with a small screen so don’t try to cram too much into it. Mobile design works best when the user is certain at every point what they should be doing and there is no conflicting information. Frontload your copy – and keep it short! This is true on the desktop too, but it’s especially important on mobile. Users will often be using your app or mobile website while they are doing something else. It’s important that the most salient points you want to transmit are right up there above the fold in easy to read format. Grab them while you can with short punchy copy because their minds will be wandering quick enough. If they are interested they will always go on to read more. Al Taylor, founder and creative director, CollectiveThere are of course differences between designing for different devices. But the most important thing is that, these days, mobile (or device) should be the start point. Of course, ‘mobile’ is far more than a phone or smartphone. Mobile can be your tablet or netbook while you’re on the move. And if you’re going to provide value for your clients you also need to future proof where possible and consider web and media on consoles and portable consoles, web built into TV, etc. This brings the challenge of multiple interface types to manage and cater for. So how do we cater for different interfaces and screen size? It’s about being relevant and appropriate. Everyone, regardless of device should be able to achieve the same goals. The UX must start from the smallest screen to determine what components are necessary to deliver the experience or utility required. Using adaptive design we can then progressively enhance the experience with anything from location services if GPS is available to richer/ fuller content to make most use of the available screen real estate. The other critical factor is time. Mobile users are impatient and won’t tolerate the cost or inconvenience of long loads. So we need to be smart with technology and design to provide an experience that minimises load time. All of this places even greater importance on technologists and designers working closely together to ensure the optimisation of experiences to meet all user needs across all user devices.