Definition

Mobile-friendly describes a page that adapts its layout, text size and tap targets so that it is readable and operable on a small touchscreen, typically achieved through responsive design and a correctly configured viewport meta tag.

Google's mobile-site guidance lists three approved configurations — responsive design, dynamic serving and separate mobile URLs — that can each produce a mobile-friendly result. Because Google now indexes the mobile version of a site's content by default (mobile-first indexing), a page that is not mobile-friendly may have less content available to the index than its desktop equivalent.

Examples

• Responsive layout on a news site

  A news article uses fluid CSS and a viewport meta tag, so its single column reflows on a phone and its tap targets stay above 48 CSS pixels. Search Console's mobile usability report shows no issues for the URL.

• Non-responsive desktop page

  A legacy product page is fixed at 1200px width with no viewport tag. On a phone the text is unreadable without pinch-zoom and Lighthouse marks the page as not mobile-friendly.

Sources

• Google Search Central — Mobile site and mobile-first indexing best practices

Related terms

• Mobile-First Indexing
  Google's practice of using the mobile version of a site as the primary basis for indexing and ranking.
• Responsive Design
  A design approach that uses flexible layouts, media queries, and a viewport meta tag so a single HTML page adapts to any screen size.
• Viewport Meta Tag
  An HTML meta element that tells mobile browsers how to size the visible area of a page, typically with content="width=device-width, initial-scale=1".
• Core Web Vitals
  A set of three Google metrics that measure real-world page experience: loading speed, interactivity and visual stability.
• Page Experience
  Google's umbrella term for signals describing how users perceive a page — Core Web Vitals, HTTPS, mobile usability, and absence of intrusive interstitials.

Where QueryCatch uses this

• SEO Audit
• Page Optimisation