Now that we can access the internet on our phones as well as computers, Sarah Dobbs looks at how the web has had to evolve
The way we use the internet has changed. Over the past few years, we’ve stopped heading to our desks to check something online: we just pull out a smartphone or maybe a tablet. Just as laptops came to outnumber desktop PCs, now mobile devices are starting to take over from laptops (at least as far as surfing the web is concerned).
Stats vary depending on who you’re talking to, but it looks like approximately a third of traffic to websites now comes from mobile devices – and that number is going up all the time. What does that mean for web developers?
Well, it means their job just got a bit harder. One of the trickiest things to figure out, as a developer, is how to create a website that’ll work well on a range of different devices. It was bad enough when you just had to consider an array of different browsers when designing a website – because something that looks great in Firefox might not look as swish in Internet Explorer or Safari, for example – but now that so much traffic is coming from mobile devices, developers have a whole new level of complexity to consider.
For starters, while laptop and desktop monitors tend to be landscape-oriented, mobile screens are usually held portrait-style. That might be good news, in a way, since sometimes content ‘below the fold’ (i.e. anything you need to scroll down to see) can be ignored, but on the other hand, sites with wider designs might end up with text that’s too small to read. And the definition of ‘too small to read’ is ever-shifting too, since some people might be looking at your site on a 4.7” HTC One screen, while others are using a 9.7” iPad screen. And things only get trickier from there on in.
But anyone who’s decided designing for mobile devices is too tricky to be worth bothering with is about to get a wake-up call, because Google has decided mobile friendliness is an important consideration in web design. It’s so important, in fact, that next time Google rejigs its search algorithms, later this month, mobile friendliness is on the list of important criteria. If your site doesn’t cater to the mobile design principles Google reckons it should, you’re going to find your search ranking plummeting. And since most people don’t click past the first page of Google search results (or even scroll past the first three or four results), that could be a serious problem.
Making sure your website is mobile-friendly is pretty important, then. But what does ‘mobile-friendly’ mean, anyway? And how will this new focus on mobile friendliness affect our experience of surfing the web – from any device?
Principles Of Mobile Friendliness
If you’ve tried accessing mobile-unfriendly sites on your phone or tablet, you’ll know all too well how annoying they can be. Sites that are perfectly easy to navigate on a big screen with a mouse are suddenly ridiculously fiddly when you’re restricted to a smaller screen and your fingertip. Suddenly, many sites seem unreasonably rambly, with vital information tucked away on pages that require three, four or five clicks to get to, when all you wanted to know was the opening times of your local cinema or whether that coat you’d had your eye on is in stock in your nearest store.
Based on our own experiences with badly designed websites, mobile friendliness can be summed up pretty quickly: mobile-friendly sites should be simple, quick to load and easy to navigate.
There’s more to it than that, of course. Helpfully, Google has spent lots of time thinking about it, even going so far as to carry out an extensive study on mobile site design: through 119 hour-long sessions with volunteers, Google came up with 25 design principles that add up to a pretty thorough how-to (see onward for a summary!).
One particularly interesting thing the Google study turned up was that there are certain things we’ve come to expect from mobile websites. We’ve been trained to expect things to work in a certain way, and we’re annoyed when they don’t work. Here’s an example: rather than looking for a ‘Home’ button to take us back to a website’s home page, we tend to tap the logo – which should be in the top left hand corner of every page – and expect it to take us there. That holds true for sites or apps that involve a lot of scrolling down too, like Tumblr or Instagram. If a logo on a web page doesn’t return the user to the beginning, Google noticed people got annoyed. And since the last thing most people want is irritated customers, it looks like most sites will end up incorporating this functionality. It’s a small thing, maybe, but as mobile devices become even more popular, we’re going to see more of these sorts of design defaults popping up.
What Will This Mean For The Future Of The Web?
At the moment, the mobile web is still a fairly new beast, and some websites deliver content to mobile devices more effectively than others. There are even sites that end up serving a mixture of mobile and desktop content to users, switching in and out of optimised pages as the user clicks around, which is probably the most annoying experience of them all. But with so many different devices on the market, running different operating systems and different browsers, it’s perhaps not surprising that there hasn’t been a set of standards universally adopted yet.
It’s likely that things will get more cohesive in the future, though, as we’ve already seen. And although there’s no real reason for the design of desktop sites to really change, we’re already seeing some of the emerging trends and principles from the mobile web bleed into the existing desktop version of the web.
Take a look at Apple’s website, for example. The page elements are laid out in simple, large panels, with clear delineations between them, and short, snappy titles and captions. You can imagine looking at it on a much smaller screen or navigating it on a touchscreen. There are plenty of other examples out there too; the newly designed Spotify website is a good one, as is Microsoft’s current website. They all use colour and pictures to draw the visitor through, rather than relying on large blocks of text; they’re all easily scalable; they all, if we’re honest, kind of remind us of the much-hated Start screen Tiles in Windows 8, which was itself designed to be used on touchscreen devices.
If this is the way the web’s going, it’s actually pretty good news, not just for those of us who don’t enjoy squinting at small screens or getting lost in badly laid out websites. The principles of mobile web design tend to map fairly neatly onto the principles of accessible design, with text at adjustable and easily readable sizes, buttons made big enough and spaced far enough apart that users don’t need to be super accurate with their clicks – and straightforward, easily navigable sitemaps. Sounds pretty good to us.
There’s one other thing that might end up going the way of the dodo as mobile-friendly design takes over too: downloadable PDFs embedded in websites. No one wants to have to download a PDF ever, but especially not when they’re using their smartphone and it’s eating up their data allowance. While still retaining a certain amount of scepticism in our cold little hearts, it looks like mobile devices might be a really good thing for the future of web design – for users, at any rate.
Google’s Mobile Site Design Principles
After hours of research, Google published a white paper on the best principles for mobile website design. Since it includes 25 principles, divided into five sections, we can’t print the whole thing here, but here’s a summary:
• Home Page And Site Navigation
Mobile sites should have short and clear navigation links, with an easy way to get back to the home page, and any important ‘calls to action’ (i.e. the thing you want people to do on your site, like signing up for an account) should be featured prominently.
• Site Search
A search function should be available and placed somewhere obvious, ideally at the top of the home page. And people are even less likely to go through pages of search results on mobile devices than they would be on a desktop, so search results should be relevant.
• Commerce And Conversions
This is the most important bit for most websites: you want to make sure it’s easy for people to spend their money. Most of us hate signing up for things on our mobiles, so the ability to check out as a guest is useful, as is the ability to use third-party payment systems like PayPal that we’ve already signed into on our phones. And the ability to save things for later or email them to ourselves to buy when we’re back on our main computer is also pretty essential.
• Form Entry
Google found people liked it when forms were easy to fill in, so things like number fields that automatically bring up a numerical keypad are handy, as are pop-up calendars for things like date entry. For mobile users, forms should be as simple as possible, asking only for essential info.
• Usability And Form Factor
People hate having to use pinch-to-zoom to see details, but at the same time love to be able to see high-res images of things they’re considering buying. Also, calling the desktop version the ‘full’ version confuses people, so call it the desktop or PC version and people are more likely to use the most appropriate version.
(You can download the full thing here: bit.ly/1BJ6zaE; think of this as the cut-out-and-keep version!)
How Can You Check Your Site For Mobile Friendliness?
Reckon your website meets all the necessary criteria? You can check how well your site performs with Google’s handy mobile-friendly checker, here: bit.ly/1EVi9R3.
Just type in your website’s URL, and Googlebot will try it out, returning either a verdict of ‘awesome’ if your site is mobile-friendly, or the less enthusiastic ‘not mobile-friendly’ if not. If not, it also provides a tick list of things to fix; for example, it might tell you that there are links too close together to be easily navigated by someone using a touchscreen or that your text is too small to be read on a mobile-sized screen.
There’s another checker that’s worth trying too, and that’s Google’s PageSpeed Insights, here: bit.ly/18oQqhi. Again, you just put in your website’s address to get a user experience report. This test gives feedback for users accessing your site via a mobile device or a desktop computer, so if there’s a huge gulf between the two, you can see exactly what needs sorting out.