There was a time not too long ago when designing a mobile-friendly website wasn’t a given. In 2018, however, that’s a different story.
In March of this year, Google officially rolled out mobile-first indexing across the web. And the logic behind it was simple. As Google explains:
To recap, our crawling, indexing, and ranking systems have typically used the desktop version of a page’s content, which may cause issues for mobile searchers when that version is vastly different from the mobile version.
Once mobile searches surpassed those on desktop – at least from the perspective of Google – mobile became top priority for anyone in the business of building, designing, and optimizing websites.
In Monetate’s latest Ecommerce Quarterly Report, they broke down the evolution of mobile-to-desktop visitors from 2016 to 2017:
You can see that, as desktop steadily declined, smartphones began to rise.
Unfortunately, the year-over-year trend for conversion rates on desktop versus mobile hasn’t followed the same steady upward mobility:
Smartphone users (the bottom row in this table) just can’t seem to break through the 4% conversion rate barrier, nor have they been able to surpass desktop users.
Because of this, it’s absolutely critical that web designers and developers familiarize themselves with the key differences between how users interact with mobile websites and how they interact with desktop. If you’ve found that websites you’ve built for clients in recent years just aren’t cutting it with mobile users, then your process may need to be reconfigured in favor of mobile.
If you want to nail mobile UX, and get your clients more conversions, followers, or readers in the process, here’s what you need to know.
1. Get the Facts First
First, it’s important to understand what your client’s audience does with mobile. You can use Google Analytics for insights on mobile users.
For many websites, mobile is the place where research begins, and this may very well be why conversion rates are low. Where to eat. What to do. Comparing prices. Looking up product specs. These kinds of searches might be the gateway to purchases made in person or at a later time on desktop.
If that’s what your client’s data confirms, then that’s fine. You now know how to properly shape the mobile UX to cater to that experience.
If your client’s data instead is telling you that users spend a lot of time on mobile, but are failing to pull the trigger to convert, then you need to address that in the experience.
2. Use Responsive Design
With data in hand, the next thing to do is verify the responsiveness of your design.
This requires a review with Google’s Mobile-Friendly Test (to make sure Google has no qualms with your design).
Once the test is complete, Google will give you a “yes” or “no” answer regarding the mobile-friendliness of your site:
From here, you can inspect details regarding page loading issues on mobile. You can also go to the Mobile Usability report located in Google Search Console, which will clue you into more reasons why Google made such an assessment of your client’s site.
Once you’ve sifted through Google’s feedback, visit the live site and do a hands-on test using your mobile device. As you experience it as a visitor, do you notice anything that seems off in the experience? If so, it may be time to tackle a redesign or find a completely new template or theme that’s built responsive from the start.
3. Develop a Progressive Web App
Building a native mobile app isn’t going to be a sound investment for many of your clients. There are just some business models that don’t work well in app form.
Take, for instance, a law firm website. The chances that a law firm would have clients who want to install an app to their phone would be quite slim. When you ask users to visit the app store and download your app, it has to be a worthwhile and regularly engaging experience.
Native mobile apps do best with users who are easily motivated to log in. News apps with frequently published content. Social networking apps with a constant flurry of notifications. Hospitality loyalty apps advertising upcoming specials. These types of business models make sense in the native app format.
That said, there are other websites that might benefit from creating an app-like counterpart. After all, more and more users are engaging with the web through mobile – and apps handle mobile better than traditional web interfaces.
Now, a progressive web app is a completely different beast altogether.
- Take a standard mobile website.
- Place it within an app-like wrapper (e.g. sticky navigation bars on the top and bottom).
- Integrate telephony functionality into it.
- Allow users to save the app to their home screen (just like a native app).
- Apply speed enhancements and offline access through a caching mechanism.
…And there you have a progressive web app.
There are added benefits that come from the underlying technology of the progressive web app. As you can see here, progressive web apps (as opposed to native mobile apps) utilize something called a “service worker”:
It’s essentially a JavaScript file that dictates how the app will work. And, because it’s completely independent of the browser, this means progressive web apps have the to work much more quickly and efficiently than websites. Thanks to these service workers, progressive web apps:
- Run faster
- Work offline
- Use background synchronization so the most up-to-date information is always served to users when connected to the internet
- Utilize app-like UX and functionality
- Allow for the sending of push notifications
- Integrate with advanced smartphone features like the GPS and camera
Businesses that have been able to develop these even more user-friendly versions of their mobile sites have seen huge results in terms of engagement and conversions, too.
People who use Twitter in Chrome for iOS, for example, are on a progressive web app, whether they know it or not. Originally rolled out as the Twitter Lite mobile web app, the product team quickly noticed that by implementing “service workers,” they’d created a stickier experience. Today, it’s the default mobile web version of Twitter, and the people who use kit consume 65% more pages and send 75% more tweets than they did using the previous mobile website.
Duda now offers a progressive web app feature for all users, so long as your website currently resides on HTTPS. With the Duda PWA, you can build super-fast mobile websites for your clients and do it in a matter of seconds. All it takes is one click, and there’s no extra cost.
4. Clean up the Header
With much less screen to view your clients’ websites from, mobile users need a way to get information they’re looking for right away. It shouldn’t require two or three times more scrolling or hunting around a deep navigation to locate what could easily be found on the desktop site in a few seconds.
As such, pay close attention to the header. As Google’s Micro-Moments guide explains, the mobile journey tends to be driven by four motivators:
With such a sense of urgency driving users to pick up their smart devices, your web designs should deliver instantaneous answers. This means paying attention to the header.
Here are some tips for cleaning up the navigation to make it more mobile-friendly for users:
- Place the navigation under a recognizable hamburger menu symbol.
- Simplify the navigation so that only essential top-level pages are in it.
- Make the navigation sticky (this will be even easier if you develop a PWA).
- Keep depth of the navigation to no more than two or three steps.
Don’t forget about the header itself. Within this section, you have an opportunity to place shortcuts for the mobile user’s journey. Click-to-call phone numbers. Shopping cart icons. Physical store addresses. Reservation portals. And so on.
5. Tighten the Rest of the UX
As you can imagine, elements that look great on a traditional desktop website might not perform that well with mobile users. Things like video backgrounds, oversized sectional images with text splashed across them, and so on likely need to be ditched.
By including exclusively essential design elements for mobile users, you’ll not only create a clearer space to conversion, but you’ll also speed up the time it takes the mobile website to load.
An Akamai case study from 2015 demonstrates why this is so important:
It showed that 2.4 seconds was the threshold in terms of conversion rate optimization. Anything longer than that led to a dropoff in the numbers of conversions on mobile.
Bounce rate was greatly affected by the slow-loading mobile site, too:
As such, it would be wise to do what you can to keep only the essentials on your clients’ mobile sites, for the sake of preserving the UX.
6. Use Mobile-fied Elements
Now, trimming away the fat on the mobile UX doesn’t mean your websites need to be devoid of life. There are certain mobile-specific elements and design techniques you can use to optimize the experience.
For starters, pay attention to the “thumb zone”, as depicted by Smashing Magazine:
It’s a strategy for design that falls within safe, reachable zones for users’ thumbs. That doesn’t mean you shouldn’t design anything within the four corners of the site, but the engageable elements should be within easy reach.
Also, pay attention to size and shape. If there’s something on the site you want mobile users to engage with, those elements need to be big enough to click and look clickable. This doesn’t mean betraying your client’s preference for flat design with embossed buttons, but some brighter colors would help.
One other thing to keep in mind is typography choices. Text obviously needs to be big enough to read, but you also should use fonts that are compatible with users’ devices. This guide from tinytype will help you find the perfect typeface for your mobile site.
7. Be Careful with Pop-ups
Pop-ups were a big deal for a few years, as they enabled businesses to generate more leads and recover potentially lost sales from distracted or on-the-fence visitors. However, as mobile has taken over as the dominant device through which consumers access the web, we’ve slowly seen pop-ups fall by the wayside. And there’s good reason for that.
In 2016, Google pushed a new penalty through its algorithm. This one was targeted at mobile pop-ups. However, it wasn’t all mobile pop-ups it didn’t like. Just ones that disrupted the mobile users’ experience.
Basically, the penalty hits mobile websites that use pop-ups in the following manner:
- Pop-ups that comprise more than 25% of the screen.
- Pop-ups that appear immediately upon entering the website.
- Interstitial (full-screen) pop-ups that require an active exiting of the pop-up before the website can be seen.
- “Fake” interstitials that can’t be exited because they aren’t pop-ups at all.
Since Google has been so kind as to lay out these rules, using pop-ups on mobile has become a lot easier. But, in all honesty, the safest way to do this is to use bottom- or top-aligned banners, or in-line promotional banners that don’t pop out at all. You can still get the same message across, but in a much more mobile-friendly manner.
Sumo is always a good choice if you’re looking to design mobile-friendly pop-ups that play by the rules. This tool comes with desktop-friendly pop-up options too (like modal pop-ups and welcome mats), so it’s a highly versatile tool you can use on all iterations of your website to convert more visitors.
Summary
Whether you design content-driven news sites, B2B service sites, or ones in the business of ecommerce, there’s an audience that wants to visit these websites on mobile. As you approach your next web design project for a client, be sure to take these mobile-first tips into consideration. In doing so, you’ll enable your clients to demonstrate to users and search engines alike that they truly care about the user experience.