Mobile-friendly

Mobile-friendly means a page renders and works on a phone: readable text without zooming, tap targets far enough apart, no horizontal scrolling, no content wider than the screen, and no software the phone lacks.

Google uses mobile-first indexing, so the mobile version is what gets indexed. Mobile usability also feeds into page experience. As of 2026, the old Mobile-Friendly Test and the Mobile Usability report in Search Console are retired. Use Lighthouse audits and the Core Web Vitals report by device to cover the same ground.

Responsive design is the recommended setup. One codebase adapts to screen size with media queries, fluid layout, and flexible images.

Most of your visitors arrive on a phone. If /pricing needs pinching, they bounce and your support queue grows. You will also bury key content if the mobile version hides it or uses different copy than desktop.

You do not need perfection. You do need no horizontal scroll, readable body text, buttons you can tap, and fast Core Web Vitals on mobile: LCP under 2.5 seconds, CLS under 0.1, INP under 200 ms.

• Open your page on a real phone. Check text size, tap targets, forms, and whether you can read and complete the main task without zooming.
• Run PageSpeed Insights on your URL and switch to the mobile tab. Read Lighthouse audits for “Viewport not set”, “Content wider than screen”, “Tap targets not sized properly”, and font sizes.
• In Search Console, open the Core Web Vitals report and filter for Mobile. Spot slow templates, like /blog/* or /product/*.
• Test key pages behind login with an emulator or your device. Sign up, change a setting, and try your checkout. Bugs hide in flows, not just in the homepage.
• Rotate the device and try an older small screen as well as a large one. Responsive breakpoints often miss the extremes.

1. 1

   Set the viewport

   Add a responsive viewport meta tag: width=device-width, initial-scale=1. This lets the layout scale to the screen.

2. 2

   Make the layout fluid

   Use percentage widths and max-width. Avoid fixed pixel containers that force horizontal scrolling on small devices.

3. 3

   Size text and tap targets

   Use a base font size that is readable on small screens. Space interactive elements so fingers do not hit two at once.

4. 4

   Use responsive images

   Serve correct sizes with srcset and sizes. Constrain images and embeds so they never overflow the container.

5. 5

   Keep mobile content complete

   Do not hide key copy or links on mobile. The mobile version is what Google indexes and users see first.

6. 6

   Ship fast mobile vitals

   Optimise LCP elements on mobile, reduce render blocking, lazy load below the fold, and keep CLS stable as content loads.

A fixed /guides/getting-started might change from a squeezed two-column layout to a single column with body text that reads well on small screens, larger buttons, and images that scale within the grid.

• Using desktop-only popups that cover the screen on phones.
• Shipping navigation that only works on hover, leaving no way to open submenus on touch.
• Serving different content to mobile and desktop that changes meaning, which can confuse users and search.
• Embedding third-party widgets that set fixed widths or inject styles that break the layout.
• Relying on software a phone does not have, like legacy plugins, for critical content or controls.