How To Make a Website Mobile-Friendly

How to Make a Website Mobile Friendly

Having a mobile-friendly website is the cost of an online presence. Without one, you’re simply not reaching your audience, and potential customers are turning elsewhere to find what they want. As each year goes by, people become 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

Mobile traffic currently 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 to pit mobile against desktop, since most people use both devices when doing things online. After all, each device has its 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 your customers, clients, or patients will rely on their mobile devices to reach your website at some point in the process. But what will they find when they get there? The answer will majorly impact 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, so each algorithm update further prioritizes mobile performance and user experience. For Google to continue providing value for its 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
  • 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 the greatest keywords onto a page without considering 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 online existence.

If you’re getting 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 far 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

You can’t call yourself a modern brand if your mobile website is garbage. But mobile technology is not cutting-edge these days — 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 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 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 having a website that can load fast is critical 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 and 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 an optimized way for the new size.

These days, frameworks like Bootstrap make responsive design more accessible than ever, providing an out-of-the-box, mobile-first, and responsive solution. 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 for interacting with desktop devices, fingers rule — or more specifically, thumbs — when it comes to mobile. Thumbs obviously don’t have the same precision as a mouse pointer, so buttons and other interactive UI elements must be large enough for most thumbs to tap accurately. Apple’s User Interface Guidelines define 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, translating 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 can 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 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 anytime and 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 easily access the most common features (e.g., search, shopping cart, user account). Sticky navigation can be useful, but you should always consider the screen space it takes up and how the features interact with the built-in features of the mobile OS.

5. Use Readable Fonts

Typography is as much an art as 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. 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 — to learn about your business, schedule an appointment/service, or purchase products. Perhaps the most essential aspect of a mobile-friendly website is to ensure users can 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 between the user and their goals on your website. With that in mind, audit your website on mobile and ensure users can perform all the actions necessary to achieve their goals on your site.