The Mobile Experience Checklist for Your Website

“This will be the year of mobile.”

We’ve heard this prediction statement for about a decade, with an even bigger focus since 2010 thanks to the rise of tablets, phablets and other portable devices.
In that time, I’ve seen brands upgrade their websites and newsletters with the mobile experience in mind: from Argos to Tesco, from Papa John’s to Starbucks – the list is endless, yet not all of these brands have done a great job at providing a great mobile experience.
Why? A lot of websites focus on mobile devices, not mobile users. The question isn’t “can my website be viewed on a mobile device?” but “can people go through a decent, functional and plesant experience while using my website on a mobile device?”. Creating a mobile-compatible website is easier than focusing on the mobile experience, and that crucial detail that makes a big difference.
I can easily tell if a website isn’t built for a mobile experience just by checking 10 points, which I’ll share in a second. While you go through these points, have your own website open and go through this 10-point checklist. By the end of the list you’ll know if your website is built for a mobile experience or not.
(Disclaimer: although this post mentions websites, these points apply to newsletters and apps too.)

1. Back and forth between mobile and desktop

There are websites that get you started on a mobile layout, then suddenly move you to a desktop layout after clicking on a link, with no warning. That happens when your site is not fully optimised for mobile, while the rest is just ignored and left for desktop consumption. Perhaps you forgot about those pages, perhaps you assumed that people wouldn’t visit them anyway. Either way, people may go through them and see that as sloppy, unfinished work, which will inevitably reflect negatively on you. The same applies to apps too, especially if your mobile apps contain links to pages that aren’t optimised for mobile.
One last note on this: if you are using QR codes, don’t point people to desktop sites. QR codes are supposed to be scanned by smartphones, so make sure that you’re taking people on a mobile-optimised journey, starting from the landing page. Otherwise, don’t use QR codes.

2. Ads, popups and other features

I understand, you need to monetise your site somehow, and that’s fine. However, your mobile experience does not exclude ads and popups. Imagine mobile-optimised sites with ads and popups that aren’t optimised for mobile: why present me with features I have no control over on a mobile?
You may see it as a way to monetise on mobile, but I see it as a “stop sign” that I can’t dismiss on my mobile, hence forcing me to exit your site and forcing me to be one of the reasons why you have a high bounce rate on mobile – me and all the other people who can’t get past your ads on mobile.
Look at the other features on your site too, like your cookie policy pop-up/sign. Does it hinder my user experience, or can I easily agree (or disagree) to the cookie notice and get past it? Do your ads take too much space on the page, more than the content I’m here to consume? Can I use your carousel on a mobile, swiping back and forth between items? If so, does that delay my mobile experience?
Don’t have fancy features on your site if they impact negatively on user experience, and don’t prioritise mobile monetisation over mobile experience – trust me, you’ll make more money with a pleasant mobile experience that prompts return visits rather than an abysmal mobile experience that prompts exits within the first 15 seconds, with few or no returns.

3. Videos

Videos and mobile go hand in hand, yet some websites will only let you watch videos if you’re on a desktop. Sure, they are valid reasons why that’s not always possible. For instance, not all videos are viewable on the YouTube mobile application, and there are various reasons why that sometimes happens. However, if people can’t watch your videos on a mobile device due to technical oversights, you should either fix it or remove the video from a mobile view altogether. Don’t give people videos they can’t watch, don’t give people options they can’t take.

4. Maps

This is a feature that is often overlooked and rarely taken care of. Maps are incredibly useful to have on your site, especially if you want people to know where you are or where else they can find your stores (e.g. store finder). However, don’t just dump a map on your site just for the sake of it. Do people struggle to use your maps? Can people find all the information they need about your location, such as full address and opening hours? Do you also provide deep links to mobile navigation app to get directions straight to the store?
You may choose not to add extra features to your map, and that’s fine, but if you do add a map on your site make sure it works, and make sure you’re adding it for the right reason.

5. Menus

Whether you use a custom-built theme or a theme you bought yourself, you might find some theme features that don’t work across devices or features that lose compatibility when WordPress updates. One of those features is often the menu. Can I interact with your menu without pulling my hair out? A menu that looks good is useless if I can’t use it when I need it. Before you apply a theme to your site, check that it’s fully functional on desktop, mobile and tablet too, in portrait and landscape mode.
When it comes to menus, there are only three things you need to cater for to begin with: opening the menu, using the options in the menu, closing the menu. Everything else is secondary.

6. Design

Are you trying to cram your desktop into a mobile? If so, please go back to the drawing board. Don’t cram so much of your design in one screen – let your design breathe.
Is your design responsive? Does it work on multiple platforms, or will I have difficulties with plugins and other features like Adobe Flash? What about the pictures: are they blurry or are they optimised for modern screen resolutions, including retina? This isn’t limited to pictures in your homepage, but all the pictures on your site, including favicons, for people who decide to bookmark your site on their homescreen or bookmark folder, or just for people who may find your site’s favicon in their recently visited websites list. Is the font legible? Just because you’re viewing your site on a smaller device doesn’t mean that the font needs to be painfully small. Have you accounted for accessibility too? How about links: are they difficult to tap, or are the links so close together that it’s easy to tap the incorrect link?
Think of what you’d like your users to do, then ask yourself, “does my design make it easy for users, or does it stand in the way?”.

7. Plugins

Plugins are the seasoning to your website: none is fine, a little bit is fine too, but too much spoilts the whole experience. Sure, some plugins can be useful, others can be fancy, but don’t be tempted to overdo it.
When I first started using WordPress, I had over 20 plugins installed, all of them with a specific purpose. I ended up having a bloated website with a really high bounce rate and high loading time. It was until I cut out all the unnecessary plugins that I was finally happy with my site: the average load time decreased (a lot), and so did the bounce rate. I use a very simple theme that puts the content at the forefront, the design is just a simple vehicle towards my content, and not the other way around.
This applies to websites on WordPress, Tumblr, Ghost, Drupal, or your own CMS. Go and review the plugins you’re using, and delete the ones you really don’t need.
While we’re on the subject, let’s talk about sharing plugins…

8. Mobile sharing

Sharing plugins are great because they help your viewers share your content. Unfortunately, not all sharing plugins are great at doing this. Some sharing plugins only work best on desktop. Floating sharing plugins are some of the worst culprits, not only because they can distract the user who’s interested in going through your content, but because the animations use so much resource that they can be detrimental to your page performance.
Then we have sharing menus that work well on mobile, yet they have a needlessly long list of platforms your users can share to. Do you really need to give people the option to Plurk and Surfingbird if you don’t even have any traffic coming from those sites? Here’s one suggestion: check the main sources of social referral and cater to those. Then add email and, if you can, add Whatsapp too. Traffic from Whatsapp and other chat apps are what blogs refer to as “dark traffic”: as traffic from chat and messaging apps don’t leave a referrer, tools like Google Analytics will classify that as “direct traffic”. (You can read more on the increasing power of “dark social” here.)

9. eCommerce

A lot of people enjoy mobile shopping, but when it comes to finishing a transaction they’ll move to a desktop. While that is often due to personal preference, oftentimes it’s because the checkout process is subpar on a lot of mobile sites: everything’s fine when you’re adding your items to your basket, but then things get awry when you tap on the checkout link.
Even worse, when you save your items to your mobile basket, then you move to a desktop to avoid any issues and then… You no longer have access to your basket, because somehow there’s no link between your mobile experience and your desktop experience.
So, what about your eCommerce site? Are people dropping out at the checkout stage because you’re not providing an easy mobile checkout process? This includes having friendly checkout options, e.g. PayPal. Don’t have more fields than necessary. Make sure that you account for inevitable interstitials like 3D secure transactions (which is often a default for Visa, MasterCard and American Express payments) or PayPal transactions, which usually open a new page taking you to the Paypal site, before taking you back to your site to complete the transaction.
Additionally, offer a great experience to those on mobile who still prefer checking out on desktop: make sure that their basket or saved items can sync with their account so they can then retrieve their items on a desktop.
Last but not least, keep your mobile shoppers on a mobile journey throughout their checkout process, and that includes the final “confirmation” screen too.

10. I want your desktop site too

I know, this may sound like I’m contradicting myself. Switching to a mobile-optimised site takes time, especially if you want to give a great mobile experience, and I understand that. However, while you sort your website out to make it mobile-optimised, give your visitors the option to view your desktop site. That’s better than leaving them with no other option than to just get off your site and go elsewhere.

Mobile Feedback

Nothing will sink your mobile site faster than an awful user experience. Sure, bugs afflict the biggest of apps and operating systems, yet you can easily tell a sloppy user experience from just a bug that fell through the cracks before a release. So, how do you overcome this?
Be your mobile site’s first user. You know what the new changes are before they hit the public, so don’t just work around assumptions of what users might look for, but put yourself in the shoes of the user: become the user yourself. Get others involved too, ask people to use the beta site for a while. Go through the various user journeys with them, pay close attention to the steps they take (not the steps you expect them to take) and see where they find any issues, or where they get stuck. Ask them why they took those steps, and you’ll soon see that it’s not about lines, frames and taps on the screens – it’s about behaviour and intent. Don’t rely solely on developers to capture all of that insight – often they’re closer to the app than they are to the user.
What other feedback can you use towards the development of your mobile site?

• Direct feedback: emails coming in, calls coming through the call centre, complaints or praises on your Facebook page, direct mentions on Twitter… These count, but they’re just “passive”, as you’re simply waiting for that feedback to come. Be proactive and reach out for that feedback: a clear sign that you’re looking for feedback is putting in a visible link (that’s not buried in text and links) asking people if they like the design and what could make their mobile experience even better. That link can be as simple as a “Click here to send your feedback”;
• Indirect feedback: use social listening to monitor mentions of your mobile site or newsletter and see what people say. Some things may be out of your control, while others are totally feasable. Don’t focus solely on what doesn’t work but also monitor things you’ve fixed in your recent updates or any design/functionality changes that people really enjoy. Doing so you’ll get a snapshot of what people really think when viewing and using your website.

Mobile-First or Mobile-Only?

While being mobile-first is often the anthem in several blog posts and events, it can sometimes lead to one pitfall: becoming mobile-only.
Don’t aim to be just mobile-first but rather focus on delivering a device-agnostic experience: whether I access your site from a desktop or mobile, regardless of operating system or device, your users will expect to have a seamless experience. Be ubiquitous, responsive and cross-platform. While doing so, check what devices, browsers, operating systems etc. your users are accessing your website from, and monitor how that changes over time. Be driven by that data, those insights, and not by the latest trends in digital marketing.
Once you adapt that thinking, your users will benefit from that seamless experience across their devices, and so will you.