Respond Or Die: Designing For Google’s Focus On Mobile

From April 21 Google’s algorithm adds weight to mobile-friendly sites in search results, making the principles of responsive design even more important. Sam Court, UX director at full-service agency, The White Agency has some tips for companies on how to manage the change.

Responsive Design is about crafting websites to provide an optimal experience across a wide range of devices with various resolutions – from desktop computer monitors, to tablets, and right down to mobile phones.

When we search there are millions of webpages with information. Google’s algorithm relies on more than 200 signals to interpret what you might really be looking for. These signals include things like the words on the site, the freshness of its content, your device and region, and PageRank.

More information about Google’s update can be found on their blog.

But first, some context…

The first phase of the web was about openness – anyone could build a site and have it found. Phase two has been about mobile, allowing entire nations to skip the desktop. If the next phase of the Internet is about connecting the dots to automate human-centred experiences, then we better ensure that the web is properly indexed for mobile usage!

Since 2011, digital media consumption has grown 394% on smartphones and 1721% on tablets (Comscore). In addition, 31% of traffic to the top 10 digital properties was mobile-only. So with the changes to Google’s algorithm, there are really no excuses for not concentrating on mobile.

Five Tips for Optimisation

In order to best capitalise on Google’s mobile prioritisation, here’s five principles to help optimise your mobile experience.

1. Usability, not aesthetics

Mobile screens are small, so more than ever, the interface needs to be easy rather than pretty. It also means that leveraging established design patterns is more important than ever.

The Nielsen Norman Group has some great advice on mobile usability:

• Use Mini-IAs (like a Table of Contents) to help with long pages
• Layer content so a reader can quickly get the gist
• Optimise the IA’s depth to reduce the steps needed to get to relevant content

2. Optimise for speed

There’s no doubt our smartphones are crazy-powerful – even smarter than the computers that got NASA to the moon. Despite this, and despite 4G’s speed, it’s still important to cater for inferior connections. Web geriatrics like me will remember the days when websites had self-indulgent Flash introductions, which were so big, they needed a preloader.

Users on the run will not wait for lagging sites. Test and optimise your site using a lower-spec mobile with a slower than 4G connection. Keep the load times to a minimum and make the experience feel “snappy”.

3. Prioritise navigation

Consider whether every navigation item is necessary on smaller screens. Prioritise the vital elements, giving them absolute prominence.

Many product-based sites have complex navigation systems allowing inventory filtering. Clear sign-posting provides context and guides choices. The Iconic does a pretty good job at simplication for smaller screens.

Another key concern is revising your main navigation – often triggered using a ‘hamburger’ fly-out. Minimise items around what the stakeholders and users need most. And don’t forget the users’ mobile contexts – What are they most likely to need when on the go?

4. Fingers are fat

We human folk are clumsy and imprecise. Especially when you think about the poor accuracy of a finger on a touchscreen, compared to the pixel precision of a mouse cursor on a desktop.

It’s best to keep in mind real mobile contexts for use too. Lend Lease is one of our clients, and I like to imagine a construction worker using his smartphone to check a building material specification whilst on a building site.

Most importantly, give your clickable elements sufficient breathing room. Google’s Material Design Specification is a great reference and offers scalable visual guidelines to ensure all elements of your interface are clear and usable on every size screen.

5. Don’t forget iPhone’s high-resolution screens

Including both ‘high’ and ‘standard’ resolutions for images ensures your site will look sharp on high-spec screens like Apple’s Retina. Obviously with additional fidelity comes increased file size, so ensure your load times are still manageable and you’re only using high-res when you really need it.

Another way to optimise with icons and logos is to make them in SVG format. Because they’re vectors, they’re small file sizes and they stay crisp at all resolutions.