Clarity

How to Check if Your Website Is Mobile Friendly

Summary: To check if your website is mobile friendly, use Google's Mobile-Friendly Test, PageSpeed Insights, or a free tool like Clarity SEO's Report Card to scan for viewport meta tag issues, touch target sizing, and responsive layout problems. Since Google uses mobile-first indexing for 100% of websites, a site that isn't mobile friendly will rank lower across all devices — not just on phones.

Google uses mobile-first indexing — meaning it crawls and ranks your site based on how it looks and performs on a mobile device, not on desktop. If your site isn't mobile friendly, you're not just losing mobile visitors. You're losing rankings across the board, on every device.

According to Statista's 2024 data, mobile devices generate approximately 59% of all global website traffic. That number has been climbing steadily since 2015 and shows no signs of slowing. If your website doesn't work well on a phone, you're alienating the majority of your potential audience before they even read a single word.

What Does "Mobile Friendly" Mean?

A mobile-friendly website adjusts its layout, font sizes, and interactive elements to work correctly on small screens. There are three key approaches:

Responsive design (recommended): The same HTML is served to all devices, but CSS adjusts the layout using media queries. This is what Google officially recommends.

Adaptive design: Different HTML is served to mobile vs desktop based on device detection. This approach works but is harder to maintain and more prone to Googlebot rendering issues because the bot may see different content depending on its user agent.

Separate mobile site: A dedicated m. subdomain (e.g., m.example.com) serves mobile users. This is outdated and harder to maintain for SEO. Google has to crawl and index two separate URLs for the same content, and link equity gets split between the two versions.

The technical foundation of mobile-friendliness is the viewport meta tag, which tells mobile browsers how to scale the page:

<meta name="viewport" content="width=device-width, initial-scale=1">

Without this tag, mobile browsers render your site at desktop width and scale it down — making text tiny and forcing users to pinch-zoom. Google detects this absence and downgrades your mobile-friendliness score.

Why Mobile Friendliness Is Critical for SEO in 2024

Mobile friendliness isn't a nice-to-have — it's a ranking requirement. Here's why it matters so much:

  • Mobile-first indexing: Since 2023, Google indexes all sites mobile-first. The mobile version of your site determines your rankings — even for desktop searchers. According to Google's official announcement, 100% of sites in their index are now crawled with the mobile Googlebot.
  • Core Web Vitals: Mobile page experience metrics (LCP, CLS, INP) are ranking factors. Slow or jumpy mobile layouts directly hurt rankings. A Backlinko study found that pages passing all three Core Web Vitals had 24% fewer bounces compared to pages that failed.
  • Bounce rate: Mobile users who hit a non-mobile-friendly page leave almost immediately. Google's research shows that 53% of mobile site visitors leave a page that takes longer than 3 seconds to load. High bounce rate signals poor content relevance or experience to Google.
  • Google's mobile usability signals: Google Search Console explicitly reports "Mobile Usability" issues — clickable elements too close together, content wider than screen, text too small to read — and these affect rankings.
  • AI search citations: Google's AI Overviews and ChatGPT increasingly prefer citing mobile-optimised content. If your page renders poorly on mobile, AI systems may skip it entirely when generating responses, even if your content is topically relevant.
  • Conversion rate impact: According to Google, every additional second of mobile load time can reduce conversions by up to 20%. For e-commerce sites, this translates directly to lost revenue — a site doing $100K/month in sales could be leaving $20K on the table with a slow mobile experience.
  • How to Check Your Website's Mobile Friendliness

    Clarity SEO's free Report Card checks for the viewport meta tag, assesses mobile layout signals, and grades your site's mobile readiness — all in one scan.

    → Check your mobile friendliness free with Clarity SEO

    You can also use Google's official tools:

  • Google's Mobile-Friendly Test — simple pass/fail with screenshot
  • Google Search Console → Mobile Usability report — lists specific pages with mobile usability errors
  • PageSpeed Insights — full Core Web Vitals breakdown for mobile vs desktop
  • For a comprehensive view, run all three tools. The Mobile-Friendly Test gives you a quick pass/fail, Search Console identifies site-wide issues across all pages, and PageSpeed Insights provides the performance metrics that affect Core Web Vitals scoring.

    The Mobile Friendliness Checklist

    Before diving into platform-specific fixes, here's a comprehensive checklist of what "mobile friendly" means in practice. Use this as a self-audit:

  • ✅ Viewport meta tag present on every page
  • ✅ Text is readable without zooming (minimum 16px body font)
  • ✅ No horizontal scrolling required
  • ✅ Touch targets (buttons, links) are at least 48×48px with 8px spacing
  • ✅ Images are responsive (max-width: 100%)
  • ✅ No Flash content (unsupported on all modern mobile browsers)
  • ✅ Forms are usable on mobile (appropriate input types, large fields)
  • ✅ Pop-ups don't block content on mobile (Google penalises intrusive interstitials)
  • ✅ Navigation menu collapses to hamburger or similar mobile pattern
  • ✅ Videos are embedded responsively (not fixed-width iframes)
  • ✅ Tables either scroll horizontally or reformat for narrow screens
  • ✅ Page loads in under 3 seconds on a 4G connection
  • How to Fix Mobile Friendliness Issues

    For HTML/Generic

    Step 1: Add the viewport meta tag.

    This is the single most important mobile fix. Add it to the <head> of every page:

    <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Your Page Title</title> </head>

    Step 2: Use responsive CSS with media queries.

    The mobile-first approach means writing your base styles for mobile, then adding complexity for larger screens. This is more efficient than writing desktop styles and overriding them:

    /* Mobile-first base styles */ .container { width: 100%; padding: 0 16px; } /* Tablet and above */ @media (min-width: 768px) { .container { max-width: 768px; margin: 0 auto; } } /* Desktop */ @media (min-width: 1200px) { .container { max-width: 1200px; } }

    Step 3: Ensure touch targets are large enough.

    Google requires interactive elements (buttons, links) to be at least 48×48 CSS pixels with 8px of space between them. Tiny links that require pinpoint tapping are a common mobile usability error. According to web.dev's guidelines, tap targets should ideally be at least 48×48px to accommodate the average adult fingertip size.

    /* Minimum touch target size */ a, button { min-height: 48px; min-width: 48px; display: inline-flex; align-items: center; }

    Step 4: Set readable base font size.

    body { font-size: 16px; /* Never below 16px for body text on mobile */ line-height: 1.6; }

    Step 5: Avoid horizontal overflow.

    * { box-sizing: border-box; } img, video, iframe { max-width: 100%; height: auto; }

    Step 6: Handle mobile navigation properly.

    Desktop navigation with horizontal links breaks on mobile. Implement a hamburger menu or collapsible navigation pattern. The key is ensuring all navigation items remain accessible without requiring horizontal scrolling:

    /* Hide desktop nav on mobile, show hamburger */ @media (max-width: 767px) { .desktop-nav { display: none; } .mobile-nav-toggle { display: block; } }

    Step 7: Optimise images for mobile.

    Large, unoptimised images are the single biggest cause of slow mobile load times. Use modern formats and responsive sizing:

    <picture> <source srcset="image-400w.webp 400w, image-800w.webp 800w" type="image/webp"> <source srcset="image-400w.jpg 400w, image-800w.jpg 800w" type="image/jpeg"> <img src="image-800w.jpg" alt="Description" loading="lazy" width="800" height="600"> </picture>

    For WordPress

    Modern WordPress themes (2020 and newer) are responsive by default. Check yours:

  • Go to Appearance → Themes.
  • Click Theme Details on your active theme.
  • Look for "Responsive" in the description.
  • If your theme is outdated (pre-2015), switch to a modern responsive theme.
  • Common WordPress mobile issues:

  • Wide tables: Tables that overflow on mobile. Use a plugin like **TablePress** with responsive settings, or add overflow-x: auto to table wrappers via **Appearance → Customize → Additional CSS**.
  • Large images: Install **ShortPixel** or **Imagify** to compress images and enable WebP format. Use lazy loading (loading="lazy" on <img> tags) — WordPress adds this automatically since version 5.5.
  • Slow mobile load: Install **WP Super Cache** or **LiteSpeed Cache** and enable mobile caching rules.
  • Intrusive pop-ups: Google's interstitial penalty specifically targets pop-ups that block mobile content. If you use pop-ups for email signups or promotions, ensure they're easily dismissible and don't cover more than a small portion of the screen.
  • Unoptimised plugins: Some WordPress plugins inject heavy JavaScript or CSS that dramatically slows mobile performance. Use the Query Monitor plugin to identify slow plugins and consider alternatives.
  • For Shopify

    All Shopify themes are responsive by default. If your theme is custom or very old:

  • Go to Online Store → Themes.
  • Preview your theme on mobile using the mobile device icon in the theme preview.
  • If layout is broken, update to a newer theme version or contact your theme developer.
  • Common Shopify mobile issues:

  • Custom sections with fixed widths: Avoid setting fixed pixel widths in custom CSS. Use % or vw units instead.
  • Third-party app widgets: Apps that inject HTML can break mobile layouts. Test each app by disabling them one at a time.
  • Heavy product images: Shopify automatically generates responsive image sizes, but if you're using custom Liquid code, make sure you're using the image_url filter with size parameters to serve appropriately sized images.
  • For Wix / Squarespace / Webflow

    Wix: Has a separate mobile editor. Go to Editor → Mobile View to preview and customise the mobile layout. Elements hidden on mobile won't affect SEO negatively, but content should be present. Wix recently improved their mobile rendering engine, but always preview every page individually — automatic mobile layouts sometimes stack elements in unintuitive orders.

    Squarespace: Fully responsive by design. Use the Mobile Preview toggle in the editor. If content is misaligned, adjust section padding and image sizes in the Design panel. Squarespace 7.1 templates are significantly better at mobile rendering than older 7.0 templates — consider migrating if you're still on 7.0.

    Webflow: Design with breakpoints. Click the responsive icons in the top toolbar (Desktop → Tablet → Mobile Landscape → Mobile Portrait) and adjust layouts per breakpoint. Webflow's responsive system is highly capable but requires manual adjustment at each breakpoint.

    Testing on Real Devices vs Emulators

    While browser DevTools (F12 → Toggle device toolbar) are convenient, they don't perfectly replicate the mobile experience. Real device testing catches issues that emulators miss:

  • Touch behaviour: Hover states, touch target spacing, and swipe interactions only surface on real touchscreens.
  • Real network conditions: Emulators simulate slow connections, but real-world 4G/5G performance varies significantly by location and carrier.
  • Browser differences: Safari on iOS renders differently from Chrome on Android. Test on both platforms if your audience uses both.
  • Hardware limitations: Budget Android devices with limited RAM will expose performance issues that don't appear on powerful desktops running emulators.
  • For a quick test, simply open your website on your own phone. Scroll through every page, tap every link, fill out every form. If anything frustrates you, it's frustrating your visitors too.

    Mobile Page Speed: The Silent Ranking Killer

    Mobile friendliness isn't just about layout — it's about speed. Google's research shows that as page load time goes from 1 second to 5 seconds, the probability of bounce increases by 90%. Here are the key mobile speed metrics to monitor:

  • Largest Contentful Paint (LCP): Should be under 2.5 seconds. This measures when the largest visible element (hero image, heading) finishes loading.
  • Cumulative Layout Shift (CLS): Should be under 0.1. This measures visual stability — how much content jumps around while loading.
  • Interaction to Next Paint (INP): Should be under 200ms. This replaced FID and measures how quickly the page responds to user interactions.
  • According to a Google/SOASTA study, the average mobile page takes 15.3 seconds to fully load. Sites that load in under 5 seconds have 70% longer mobile sessions and 35% lower bounce rates compared to the average.

    Common Mistakes to Avoid

  • Missing viewport meta tag: The single most common mobile SEO failure. Check every page template.
  • Using maximum-scale=1 in the viewport tag: content="width=device-width, initial-scale=1, maximum-scale=1" disables user zoom — this is a mobile usability violation per Google's guidelines and an accessibility issue.
  • Tiny text: Body font below 16px is flagged as a mobile usability issue by Google Search Console.
  • Buttons too close together: Mobile navigation menus with links less than 48px apart trigger "Clickable elements too close together" errors.
  • Blocking CSS or JS in robots.txt: If Googlebot can't load your stylesheets, it can't assess your mobile layout. Never block CSS or JS from crawlers. See our guide on how to create a robots.txt file for best practices.
  • Relying only on desktop testing: Always test on a real device or use browser developer tools (F12 → Toggle device toolbar) in addition to automated tools.
  • Ignoring intrusive interstitials: Full-screen pop-ups on mobile trigger Google's interstitial penalty. Use banners or slide-ins instead.
  • Not testing after every deploy: A CSS change that looks fine on desktop might break mobile layout. Include mobile testing in your deployment checklist.
  • How Mobile Friendliness Connects to Other SEO Factors

    Mobile friendliness doesn't exist in isolation. It's interconnected with many other SEO elements that Clarity SEO checks:

  • Title tags and meta descriptions: These appear differently on mobile SERPs — titles are truncated earlier (approximately 50-60 characters visible on mobile vs 60-70 on desktop). See our guide on how to write the perfect title tag.
  • Image alt text: Screen readers on mobile rely on alt text. Missing alt text hurts both accessibility and SEO. Learn more in our guide on how to fix missing alt text.
  • Structured data: Schema markup helps Google understand your content for both desktop and mobile rich results. Check our guide on how to add structured data.
  • Readability: Mobile screens demand even simpler language and shorter paragraphs than desktop. Our readability improvement guide covers this in depth.
  • FAQ

    Q: How do I know if my website is mobile friendly?

    Use Google's Mobile-Friendly Test (search.google.com/test/mobile-friendly) or run a free scan with Clarity SEO. Both tools show a mobile preview of your site and list specific usability issues. You can also check your Google Search Console account under the "Mobile Usability" section, which provides page-by-page analysis across your entire site.

    Q: Does mobile-friendliness affect Google rankings?

    Yes — significantly. Google uses mobile-first indexing, which means it evaluates the mobile version of your site for ranking purposes. A site that isn't mobile friendly will rank lower than an equivalent mobile-optimised competitor. Since Google completed its transition to mobile-first indexing for 100% of sites in 2023, there is no separate "desktop index" — your mobile experience IS your Google presence.

    Q: What is the viewport meta tag?

    The viewport meta tag (<meta name="viewport" content="width=device-width, initial-scale=1">) tells mobile browsers how to scale and display the page. Without it, browsers render the desktop layout on mobile screens, forcing users to zoom and scroll sideways. This is the single most common mobile SEO issue and the easiest to fix — one line of HTML in your <head> section.

    Q: What is the minimum font size for mobile SEO?

    Google recommends a minimum font size of 16px for body text on mobile. Smaller text is flagged as a mobile usability issue in Google Search Console. Note that this applies to the rendered font size — if you set font-size: 14px but the viewport tag is missing, the text renders even smaller because the browser scales everything down.

    Q: Is my WordPress site automatically mobile friendly?

    Most modern WordPress themes (released after 2016) are responsive. However, custom CSS, plugins that inject content, or embedded iframes can break mobile layout. Always verify with a mobile usability test. The most common WordPress mobile issues are caused by page builder plugins with poorly optimised mobile output, oversized images, and third-party widgets that don't respect responsive breakpoints.

    Q: How does mobile-first indexing work?

    Mobile-first indexing means Google's crawler (Googlebot) uses the mobile version of your page for indexing and ranking. When Googlebot visits your site, it identifies itself as a mobile user agent. The content, links, and structured data it sees on the mobile version are what get indexed. If content only appears on your desktop version but not mobile, Google won't index it — even for desktop search results.

    Q: Can intrusive pop-ups hurt my mobile SEO?

    Yes. Google introduced the "intrusive interstitial" penalty in 2017, specifically targeting pages that show pop-ups covering the main content on mobile devices. Acceptable interstitials include legally required notices (cookie consent, age verification) and small banners that use a reasonable amount of screen space. Full-screen pop-ups that appear immediately on page load are the most penalised.

    Summary

    Mobile-friendliness is no longer optional — it's how Google decides who ranks. With 59% of global web traffic coming from mobile devices and 100% of Google's index now mobile-first, a site that doesn't work on phones is a site that doesn't rank. Start with the viewport meta tag, use responsive CSS, ensure touch targets are large enough, and verify with a real device or emulator.

    Check your site's mobile readiness right now with a free Clarity SEO scan.

    → Get your free SEO Report Card

    Related Tools