Mobile-First & Mobile Optimization: Responsive Isn’t Enough
April 25, 2018
As Google rolls out their mobile-first approach to indexing, a lot of companies aren’t sure how to respond. The common advice is to make your website mobile-friendly, including a responsive design and following a few mobile usability guidelines. But is that enough? What more should you do to improve your mobile user experience?
Short answer: no, just being responsive and just meeting Google’s basic mobile usability guidelines isn’t enough whatsoever. While there are many areas to dig into, there are three big areas we find incredibly helpful—for SEO, but also for conversion optimization and overall improvements to your website’s mobile user experience.
Content Alterations By Device
Users will often visit a website from multiple devices. For example, people start out researching your product or service on a mobile-device, but as they realize it is more complicated or as they get deeper into the research, they need to return to your website from a larger-screened device. As an example, people might start their travel plans on a phone but end up on a desktop computer to plan the nitty-gritty details. In other cases, people will simply visit a website from whatever device happens to be more convenient at the time of visit. As an example, people may visit a news website from their phone if they are at home but from a desktop computer when at the office.
In this multi-device world, we want to make sure people have a similar experience regardless of what device they use. And that starts with having the same content across devices. That way, as people return to your website from different devices, they can easily locate the information they are seeking. You can lay out the content a bit differently to conform to the screen sizes, but the same content and the same overall features should be accessible and available. It is also important that everything be available and accessible through a similar navigation structure—you don’t want your repeat visitors to be confused or lost. For example, if you return to a travel website, it would be frustrating if that website’s information about hotel rooms suddenly disappeared on a mobile-device and was only offered when visiting from a desktop device.
There is another consideration here, too. Google’s mobile-first indexing means they will start deciding where to rank your website in search results based on the content on the mobile-version of your website. If you hide information on the mobile-version of your website and only show it on the desktop-version of your website, Google might miss that information and your website may not rank for that related queries. Your traffic from organic search could be greatly impacted.
Action item: Attempt to find the same content on your desktop and mobile websites. Can you? And is it just as easy? Is that same information located in basically the same areas and can you navigate to it in basically the same ways? Along with your own experiences, check your analytics account to see what differences exist in the pages people visit by device—if certain pages aren’t visited by users on a desktop or mobile device, is that because those visitors aren’t interested in that information or does it mean those visitors can’t locate that information?
Not all mobile-device experiences are the same. A 320-pixel wide browser size doesn’t offer the same experience as a device with 410-pixel wide browser size. Same goes for height; 620 pixels of height is a very different experience than 450 pixels of height. A vertical orientation is different than a horizontal orientation. Simply having a responsive design that works on mobile devices doesn’t mean you are delivering a good experience for all the different kinds of mobile devices that are available.
Often, you will find that people on different mobile browser sizes interact in different ways. One client we worked with had substantially different conversion rates on small and mid-size mobile screens—the mobile experience at these screen sizes simply wasn’t good enough so people weren’t converting. But people were converting on somewhat larger mobile screens. It turned out, smaller screens didn’t make the steps to convert obvious enough and by altering the design on the smaller screen size, the client was able to improve their conversion rate on these smaller screens to more closely match the conversion on larger mobile screen sizes.
But this can go the other way too. Another client had higher pages/visit on larger mobile screen sizes. At first this might seem like good news—these users are looking at more pages! But, that didn’t really make sense as we dug into it. Why would a larger screen lead to more pages viewed than a smaller screen? The links were just as obvious on both screen sizes and things were located in essentially the same areas of the screen. Instead, upon further investigation, it turned out the people visiting this website on larger-screen mobile devices were accidentally tapping on links. It turned out, the design had pushed lines closer together as the screen size got larger, but the lines were still too close together for a mobile device. This led people using larger-screen mobile to have a bad experience because links were too cramped together.
To be sure, there are a wide variety of mobile device screen sizes available with a variety of browser settings and sizes. But, that is largely the point. With so many different sizes available, you can’t lump everybody into the same mobile bucket and assume your responsive design will do okay. Sure, you can reasonable assume a 410-wide screen and a 420-wide screen can be satisfied with a similar design but a design that works well on a 410 or 420 wide screen won’t work as well on a 350 wide screen. You have to modify your design to work with specific screen sizes, not just specific devices.
Action item: Review your mobile browser sizes and compare the ways users interact on the different devices. What differences do you see on smaller or larger mobile screens? Are those differences positive (more conversions on certain sizes) or negative (accidental behavior)? How can you alter your responsive design to work across different size screens? As well, visit your website on these different size screens and see what kind of experience you have (or, have a sample group of users visit on these sizes and see where they struggle). What is harder or easier to use as the screen size changes and how could that affect conversions or engagement?
Are Mobile Users Mobile?
The word mobile can mean many different things. One way the word is used, and is used most often, is to describe users on a mobile device (a smartphone). But the word “mobile” implies something more: it implies users on the go. This conjures up images of people walking down the street (or driving!) while also browsing the web. Sure, that does happen—perhaps too often in the case of walking or driving while browsing the web—but are all your mobile users really on the go? Not necessarily. Many people browse the web on their smartphone when at home or work, even though a desktop or laptop computer might be readily available.
Depending on the user’s physical location and depending on what else is going on around the user while they are browsing, the reasons for the person’s visit will change and that will alter the kind of experience your visitors have. For example, people on the go and using a mobile device to browse the web might expect to find a specific kind of information more quickly (like an address). Meanwhile, somebody sitting on their couch browsing their web on their phone might be considerably more patient and looking for longer-form content—similar to how they might browse the web from a laptop or desktop computer.
This approach to “mobile” really alters the kind of experience your website needs to deliver. You’ll want to deliver an experience for “on the go” mobile users and an experience for “sedate” mobile users. Of course, if most of your visitors using a mobile device are on the go, like for a local business, perhaps your experience will cater more to one group than another. Here again, you simply can’t lump all of your mobile users into one bucket and assume one mobile experience is enough. You need to dig into your stats and see how engagement patterns shift for your mobile users and, from there, devise content and features that are appropriate for the “on the go” and “sedate” mobile visitors.
Action item: Start by finding out where your visitors are physically located while browsing your website and learn what you can about their surroundings. This might seem tricky, but it doesn’t have to be—for example, survey your mobile visitors and ask them point blank where they are located. Or, if you don’t want to run a survey of visitors, ask your customers what device they used and where they were located while browsing your website (at home, at work, etc.). As well, segment your mobile visitors by engagement metrics—how many of your mobile visitors spend a short or long amount of time, how many look at a lot of pages or very few, and so on. Based on this information, take time to consider how this changes the kind of content and features people want when visiting your website on a mobile device.
Mobile is too broad a category to assume all the people visiting from a mobile device want the same thing during a visit to your website or to assume all mobile visitors will want to interact in similar ways (the same, of course, is true for visitors on a desktop device). Having a responsive website and meeting basic mobile usability standards is a great start—but you need to go deeper to truly optimize your website for mobile devices. If you need help optimizing your mobile website, contact me today.