Google now ranks your website based on its mobile version, even for desktop searches. If your site looks great on a laptop but is hard to use on a phone, Google will judge the mobile version. Making your site mobile-friendly can boost both your rankings and sales, since most visitors use their phones. Many improvements are affordable and quick to make.
What makes a mobile-friendly website?
A mobile-friendly website is easy to read and use on a phone, without zooming in or squinting. At the very least, you need: text you can read at its default size, buttons and links big enough to tap accurately, no sideways scrolling to see the whole page & pages that load quickly on mobile data.
Why mobile SEO matters to Google
With mobile-first indexing, Google uses your mobile site to decide how to rank your content. If something is absent from your mobile pages, it likely won’t count for search. Google recommends having the same content on both mobile and desktop, including structured data and image alt text.
Back in 2015, Google’s “Mobilegeddon” update made mobile-friendliness a ranking factor for the first time. Now, Google prioritises the mobile site over the desktop version.
Start with responsive web design.
Google suggests using responsive web design, so everyone gets identical page layouts that adjust to their screen. This is easier to manage than having a separate mobile site, since you only need to update one version. If you still use a separate mobile site like m.example.com, consider switching to responsive design. Treat this as a migration and check our website migration guide first.
Every responsive page should include a viewport meta tag in its head. This tells browsers to fit the page to the screen width. Without it, phones will show a tiny desktop page, forcing visitors to zoom in to navigate.
Design mobile-first
Mobile-first design starts with the smallest screen and adds features as screens get larger. This helps you decide early what matters most on each page, instead of trying to fit a desktop layout onto a phone later. Otherwise, you might end up with crowded menus and a tiny search bar.
How to make a website mobile-friendly
Make text readable without zooming.
Start with body text at about 16 pixels and keep line lengths comfortable for narrow screens. Make sure there is strong contrast between text and background, especially since people often read on their phones outdoors. Light grey text on a white background can be hard to see.
Give fingers room
Google’s web devs suggest making tap targets about 48 pixels wide, with 8 pixels of space between them. Smaller targets can cause people to tap the wrong link, which is frustrating in menus and can lead to checkout mistakes.
Go easy on pop-ups
Google recommends avoiding pop-ups and interstitials that cover your main content, since they make pages harder to use and understand. A small banner can usually do the same job without annoying visitors. Google handles required pop-ups, like age checks, differently.
Don’t hide content behind taps.
Google doesn’t load content that only appears after a tap or swipe. Tabs and accordions are okay if the content is already in the page’s HTML. If content loads only after a tap, Google will not see it.
Make it fast on mobile data.
People often visit your site on slower connections and less powerful phones than you might test with. Compressing images and reducing scripts can help a lot. Google measures Core Web Vitals separately for mobile and desktop, and our guide explains why that matters.
How to test if your site is mobile-friendly
Google stopped offering its Mobile-Friendly Test tool and the Mobile Usability report in Search Console at the end of 2023. Many guides still mention them, which means they may be outdated. Lighthouse in Chrome DevTools and PageSpeed Insights can handle most testing. You can also use Device mode in Chrome DevTools to preview your site at different screen sizes from your computer.
Check mobile and desktop match.
If your mobile pages are different from your desktop ones, check your site twice: once as Googlebot Smartphone and once as a desktop browser. Compare the results and look for anything that shows up on desktop but not on mobile, like structured data or image alt text. Responsive sites usually avoid this issue, which is another reason to use them.
Test on the phones people use
No online test can replace mobile usability testing on real devices. Ask a few people to try a task on their own phones, like finding a product and checking out, and see where they have trouble. This is the fastest way to find issues that automated tools might miss, such as a menu that works but is hard to find.
Treat mobile as the main version.
Google indexes your mobile site, and for many businesses, it’s also what customers see first. Begin with responsive design and a viewport tag, then focus on readability and tap targets before improving speed. Test your site on real phones as well as with tools, since the issues that hurt sales aren’t often the ones reports show.
If you want a clear list of what is holding your mobile site back, get in touch for an SEO audit. We will review your site as Google does and show you which changes will have the most impact.
