If you’re SEO savvy, you probably also noticed the switch Google made several months ago, to a mobile-first indexing scheme. This means that as Googlebot crawls the internet, they’re scoring your pages based on how they render and appear to a mobile user agent.
Do me a favor. Go into your analytics tool of choice and take a look at your desktop conversion rate. Now take a look at your mobile conversion rate. Is mobile lower? If you’re like virtually everyone I’ve ever asked, yes, it probably is. Now go and take a look at what percentage mobile is of your overall traffic. Most will find that it’s the lion’s share.
What this means is that your business has a certain level of existential risk associated with not taking mobile seriously. If mobile continues to eat the desktop share of traffic, your sales will continue to fall.
Yes, that’s a simplification — you could always ramp up on traffic to curb the attrition rate. For many businesses, this issue is currently offset by mobile traffic being significantly cheaper to acquire than desktop traffic. This means that while you convert fewer visitors, you can buy more of them for the same amount of money.
In some cases this can mean that mobile is even more profitable for you (in terms of return-on-ad-spend) than desktop, but not for long. I posit that desktop will continue to command a premium over mobile prices, but as mobile advertising matures (and combats accidental clicks, fraud, etc.) the cost will again become commensurate with the attention.
In this issue I want to enumerate a handful of the most common pitfalls associated with mobile and how we might overcome them to create a high-performing site in the mobile era.
Mobile changes the context
When users visit your site from a desktop device, you can make a few guesses as to what’s going on, physically, in that person’s space. They’re probably sitting in front of a desk, or table. Maybe they’ve got their laptop on their legs, while seated on the couch.
Since desktop/laptop devices are so large, it’s difficult to imagine your customers using them while driving, or while cooking dinner in a house full of screaming children.
For mobile devices though, anything goes. Users on mobile devices could be doing almost anything while also trying to complete a task on your website.
This means that you’re almost always dealing with fragmented attention. Your site needs to be more focused and simpler to use in a mobile environment than it needs to be in a desktop environment.
Users will find the eject button a lot faster when they’re trying to complete tasks quickly, in between bites of takeout with friends. Often the eject button leads back to a set of results featuring your competitors.
Distractions are built into the device
Not only are you fighting with a variety of real world distractions, you’re also fighting with whatever other apps the user has installed that can fire off a notification and take focus at any point in the session.
This results in fragmented sessions. A user might begin a session on your website by clicking an ad. A page or two in and they’re interested in what you’re offering. Then a text arrives from a family member, which turns into checking a few social media apps, responding to an email or two, and finally a phone call.
Thirty minutes later, they return to their browser and remember they had been browsing your site. Suddenly, a calendar notification alerts them that they need to leave immediately for a coffee date.
They arrive to their date early and jump back into your site, browsing a few more products before their date arrives.
It’s now 4 hours after their initial visit and they’re in bed and drifting off to sleep as they flick through their notifications and arrive back in their browser, remembering their interest from earlier in the day.
This strongly suggests that we should build pages and experiences that can survive this lack of context. At all times, a user should be able to jump back into the flow of things, picking up where they left off, and not need to be “refreshed” on non-standard, confusing, or complex journey progress.
Stick to the basics. Build websites according to UI/UX and design best practices. Pay attention to usage patterns on mobile devices and iterate based on what you find. If there are key drop-off points in your conversion funnel, consider that they lack the context to support the next action based on this fragmented session path.
Mobile real estate is at a premium
Mobile devices have much smaller viewports than desktops or laptops. You’ve really got to focus on and prioritize certain pieces of information in order to deliver an optimized mobile experience.
If you remember back to Issue #2 of Conversion Gold, “Size, Color, Location,” these passages merit repetition:
“Content that users encounter first typically gets read more often. Use this to your advantage. The higher something is on the page, the more important it appears, and the more likely it is to be read or engaged with.”
”Aside from top and bottom, we’ve also got proximity. This is one of those sneaky tips that people never seem to consider. The brain views things that are close together as related and of the same group. Take a look at your pages and make sure that your implied groupings make sense.“
”The goal is to look at a page and be able to discern immediately which information is important and essential, and which information is supplemental. “
Build your mobile pages with this in mind. Consider that everything you add to the viewport has a cost, equal to that which you cannot include.
Pro tip: Mobile priority will not be the same as desktop. You’ll change the order, prominence, color — pretty much everything is up for consideration. Be careful not to treat mobile and desktop as the same project based on the same learnings.
Mobile sites are often frustrating or hard to use
Popups are far more intrusive on mobile. It seems like most of the major SaaS providers of popups/email opt-ins have opted to make their responsive popovers take up 100% of the viewport on mobile devices. I hate this trend.
Anytime you’re injecting an un-requested piece of content into my journey, you’ve altered the deal. I think it’s entirely fair that users bounce when hit with a full-screen popup. It communicates that this is a website built for the business behind it, not for me, the visitor. This hits ten-fold when the popup happens on my initial visit. You’ve just hijacked my session and shown me an offer that I have no idea if I’m interested in.
Also of note are all of those sites that feature tiny little buttons and icons that you need to be able to tap on.
The way to fix all of this is to test your website extensively on mobile. Test each popup, test each piece of functionality, and every page.
I get it — this is a task of Herculean effort. There are dozens of different device and browser configurations, all with different screen sizes, and capabilities. It’s work that’s worth the effort.
It’s not all doom and gloom
Mobile isn’t the end of the digital world as we know it. People will still buy things online. It’s actually true that more people will buy more things online than in the pure desktop era.
It’s just that the patterns of commerce change. The expectations change. The web and its best practices, and the mental models of the users that use it, were developed to suit a desktop environment. We’re living through a paradigm shift in that model. Pay attention, keep your ear to the ground, and consider it carefully — because mobile isn’t going anywhere :)
Is having a mobile-specific site better than a responsive site?
In recent years, it has kind of fallen out of fashion to have a dedicated mobile site. At the larger publishers, almost everything is either responsive or adaptive. This, as far as I can tell, is also true at the smaller publisher level. Most of the developers and marketers that I know leverage responsive frameworks, such as Bootstrap, and simply configure content to re-arrange or hide on mobile devices.
One of the advantages of having a mobile specific site, say, m.domain.com, is that you can build it while aiming at one target, that is, the mobile device. You’ll start from scratch and only include the features, functionality, and media that are required for mobile sessions. In most cases the end result will be a much more optimized experience than a responsive site (and probably require fewer tradeoffs to accomplish).
With a responsive website, you’re building for multiple device targets (desktop, mobile, tablet) at once, and typically delivering all of the content, but hiding or re-arranging it. It would certainly be better for site speed to include what is needed, and not multiple versions of each file, as is sometimes required in responsive designs.
The downside of building device specific sites is that you’ll have multiple codebases to maintain. If you make changes to the desktop version, you’ll need to update any other variants to reflect them.
These are just the initial considerations that come to mind. There are much more exhaustive lists that compare and contrast the options.
As for my opinion: neither option is better or worse, it all depends on the implementation and execution. Based on my experience, your organization (or you) will have a preference or technical requirement and you’ll have the choice made for you.
Is page speed more important on mobile? Are there mobile specific guidelines or recommendations?
The general idea is that mobile users are far more sensitive to page speed. Mobile devices, especially while active on cellular networks (and not wifi) have much less bandwidth than their typical desktop or laptop counterpart. This means that most things on your site take longer to load.
The optimization process is much the same as desktop, especially for those utilizing responsive designs.
If I had to choose one place to start, I’d recommend optimizing your images. I like offloading the images to a CDN, such as Imgix.net. I like Imgix because they have some pretty nifty on-the-fly operations and are quite affordable for most users. If you want to use another CDN, I’d recommend that you choose one with:
- Numerous locations in the geographic area that you serve
- Clear, upfront pricing
- Image operations (crop, compress, webp support)
- If you’re not a developer, look for one with great support for your CMS or platform. It’s nice to be able to upload directly to the CDN from your admin panel.
Are mobile shopping apps a good idea?
I think that it depends. I tend to only think about having a mobile shopping app if you’re a brand that customers engage with often.
It wouldn’t make sense to me to build out an app for a product that you purchase only once every 5 or 6 years unless the app has a utility that significantly assists in that process.
However, for Amazon.com it makes a lot of sense.
The advantages are that you can remove a lot of the friction (and side quests) associated with pulling up your site in the browser of a mobile device. Additionally, you can deliver notifications, and in many ways, a more personalized and native experience to shoppers.
The largest advantage is that if you live on their device, you’ve probably secured a spot (and will continue to) in the evoked set. You can maintain this spot through compelling features that aren’t available as part of the regular web experience.
If you’re a company that seems to be a good candidate for this, you’ll also need to evaluate the costs of deployment. Is it just iOS that you’re looking at, or Android too? App development (and maintenance) isn’t cheap. If you’d like to test the waters, there are services that can bundle up your site and deploy them as mobile apps. Easy and quick as these services may be, they sometimes lack a lot of the pizazz that makes mobile apps worth it to begin with.
What are your favorite tools for testing sites on mobile?
My favorite way to do this is with Sizzy. It’s a cross-platform app that shows you what your site looks like on a ton of different device in real-time. I don’t have any affiliation with them, I just like and use the product. I recommend a thorough dive into the documentation so that you can take advantage of cool features like the page navigator and the scroll sync.