In 2020, having a mobile-friendly website is the cost of having a presence online. Without one, you’re simply not reaching your audience, and potential customers are turning elsewhere to find what they’re looking for. As each year goes by, people are becoming more comfortable making complex decisions and purchases on their mobile devices, shrinking the lead desktop once had in conversion rates. But, what makes a website mobile friendly, and how can you know if your website measures up?
Why It’s Important to Have a Mobile-Friendly Website
You Will Miss Leads Otherwise
At present, mobile traffic makes up over half of the total sessions on the internet. In the last year alone, mobile usage share vs desktop has increased by almost 10%. It would be misleading, however, to pit mobile against desktop, since most people use both devices when doing things online. After all, each device has its own benefits. For instance, desktop has a much larger screen size, whereas mobile can be carried practically anywhere.
No matter how you slice the data, however, it’s clear that at some point in the process, your customers, clients, or patients will rely on their mobile devices to reach your website. But, what will they find when they get there? The answer will have a major impact on whether they decide to engage with your business or look elsewhere.
It Allows Search Engines to Find You
Search engines like Google are very aware of the mobile-forward trend, which is why each algorithm update further prioritizes mobile performance and user experience. This is because in order for Google to continue providing value for its own users, their search results must be useful.
What Google says about the importance of mobile:
- Mobile-friendly sites show up higher in search results
- Mobile searches make up more than half of searches on Google.com
- For many advertisers, the majority of traffic comes from people on their mobile phones
- If your site isn’t mobile-friendly, visitors are five times more likely to leave
Their focus, therefore, is not simply to find and rank keywords on a website, but to connect users to web pages that are the most relevant and valuable to their search queries. Packing all of the greatest keywords onto a page with no thought towards user experience won’t get you anywhere these days. And even if you have a medical blog written by Johns Hopkins researchers, Google will show you no favor if your website is completely unusable on mobile. In other words, having a mobile-friendly website is increasingly becoming a prerequisite for existence online.
If you’re starting to get nervous about your website, have no fear! Google provides a free tool to measure its mobile friendliness. This test will not grade how enjoyable your website is on mobile, but can serve as a baseline metric for mobile usability. In other words, if your website passes, it’s no time to pat yourself on the back. It simply means that Google (and presumably other search engines) are not penalizing you for your mobile website. You may still be a far cry from delighting users or reaching your conversion potential. On the other hand, if your website fails the test, it is definitely time to start sweating.
Brand Integrity and Relevance
It goes without saying that you can’t call yourself a modern brand if your mobile website is garbage. But these days, mobile technology is not cutting edge — it’s the norm. Your 98-year-old grandmother and your 9-year-old niece are both probably spending five hours or more on their phone every day. This means that having a mobile-friendly website is not a luxury but a requirement for engaging with customers and clients. A poor user experience on mobile is like a giant megaphone to customers, screaming that you don’t care about them and aren’t committed to meeting their needs.
7 Ways to Make Your Website More Mobile-Friendly
By now it should be painfully obvious why you need a mobile-friendly website. But how do you know if your website is mobile friendly? And what are some actionable ways to improve the mobile experience?
1. Improve Pagespeed
Along with the overall usability of your website, Google has started considering pagespeed as one of the primary factors in ranking a website. According to one of their own studies across several industries, almost half of all users will abandon a website if it takes longer than three seconds to load. At five seconds, that number jumps to 90%. This means that having a website that can load fast is key to being mobile friendly. Using tools like Google’s Pagespeed Insights can give you a quick look at your website’s performance. It also offers a more detailed analysis of where your performance could be improved.
2. Use Responsive Design (Don’t M-Dot Your Website)
Before adaptive and responsive design became popular, m-dotting was the primary way to create a quality mobile website. M-dot websites, however, are a discrete entity from their desktop versions and exist on a separate subdomain. This means double the work for content publication, website updates, bug fixes, etc. M-dot sites also run into SEO problems since there is no direct linkage between the mobile and desktop versions. This not only creates the need for burdensome redirects but also — as more browsers are saving sessions across devices — can lead to a completely broken user experience.
Responsive design, on the other hand, uses the same URL and HTML code as the desktop site, which is a major benefit for Google rankings as well as for maintaining your website in the long run. Instead of creating separate websites (m-dot) or separate versions of the same one (adaptive design), responsive design creates a single website that responds to the size and parameters of the current device. As the viewport shrinks or expands, responsively designed web pages will reshuffle and organize the content in a way that is optimized for the new size.
These days, frameworks like Bootstrap make responsive design easier than ever, providing an out-of-the-box solution that is already mobile-first and responsive in nature. Using a responsive framework ensures that your desktop site won’t break when it’s resized for mobile, and that none of the hard SEO work you’ve done is lost as users navigate between devices.
3. Follow the Rule of Thumbs
While mouse pointers and keyboards are the primary tools of interacting with desktop devices, when it comes to mobile, fingers rule — or more specifically, thumbs. Thumbs obviously don’t have the same precision as a mouse pointer, so buttons and other interactive UI elements need to be large enough for most thumbs to tap with accuracy. Apple’s User Interface Guidelines defines this as at least 44pt by 44pt for all controls, whereas Google’s Material Design suggests a minimum of 48px by 48px. These are certainly lower limits, which translate roughly to 7mm to 10mm (1cm) of square space for tap targets.
While data on thumb zones and hand positioning is often misused, the truth is that people hold, touch, and interact with their mobile devices in many different ways. What’s important, then, is to place the most important features of your website in places that are the most accessible for all types of users. Often this means that the middle and bottom of the device are easiest to reach, whereas the top corners are the farthest away, regardless of hand preference or phone position.
4. Simplify Navigation
One of the most important things to consider when creating a mobile-friendly website is how navigation will work. On a desktop device, for instance, you’re able to use the wide horizontal space in the header for a full navigation menu. For e-commerce sites, the header may even include a shopping cart, search bar, user account, and more. On mobile, this is simply not possible. The most common way that designers account for the reduced real estate is to collapse the navigation menu and other header features into an expandable menu (usually represented by a “hamburger” icon). This allows users to access the main navigation items and tools at any time, and to collapse the menu when not in use.
Some mobile websites also use sticky navigation, which involves attaching a toolbar to the top or bottom of the screen to allow the user to access the most common features easily (e.g. search, shopping cart, user account). Sticky navigation can be useful but should always consider the screen space it takes up as well as how the features interact with the built-in features of the mobile OS.
5. Use Readable Fonts
Typography is as much an art as it is a science, but one thing is clear: people need to be able to read it. Oh, and don’t use Papyrus. What makes a font readable will vary between styles, families, kernings, and more. But a general guideline is that anything less than 16px is too difficult to read on a mobile device.
Likewise, highly decorative fonts may be great for logos and wedding invitations, but are poorly suited for headlines or paragraph copy. Also, consider how large headlines or lengthy paragraph text will display on mobile, since the horizontal space is severely truncated from the desktop version. Both Apple and Google have published user interface guidelines specifically for typography, but it’s just as essential to test how your website copy displays on real mobile devices.
6. Remove Visual Interference
The reduced screen size of mobile means that elements that display well on desktop or are marginal features can become overwhelming. Some items can be repurposed for a mobile experience (e.g. chat widgets or sticky banners), whereas others should be discarded completely (such as pop-ups).
7. Test Workflow and Functionality
Users come to websites to do something — whether it’s simply to learn about your business or to schedule an appointment/service or to purchase products. Perhaps the most important aspect of a mobile-friendly website is to make sure users can actually do what they came to do without becoming frustrated or feeling like they are struggling against the website.
The key to a great mobile experience is to remove any friction that gets in between the user and their goals on your website. With that in mind, audit your website on mobile and make sure users can perform all of the actions necessary to achieving their goals on your site.