--- title: "Design mobile-first pages that Google indexes in full and users can tap without errors" description: "Mobile-first design patterns for SEO: content parity, min-width CSS, responsive images, touch targets, mobile Core Web Vitals, and progressive enhancement." canonical: "https://scalewithsearch.com/articles/mobile-first-design-seo" date: "2026-03-20" modified: "2026-09-25" --- ## Site navigation - [Scale With Search](https://scalewithsearch.com/) - Real estate - Real estate - [Real estate](https://scalewithsearch.com/for/real-estate) - Work - Start here - [Send your brief](https://scalewithsearch.com/work#send-your-brief) - [Prepare your six-question brief](https://scalewithsearch.com/work#prepare-your-six-question-brief) - Build - [Site build, content library with SEO, signal desk](https://scalewithsearch.com/work) - For your business - Trades and home services - [Auto body and collision shops](https://scalewithsearch.com/for/auto-body-and-collision-shops) - [Foundation and home repair contractors](https://scalewithsearch.com/for/foundation-and-home-repair) - [Garage door and fencing contractors](https://scalewithsearch.com/for/garage-door-and-fencing-contractors) - [HVAC contractors](https://scalewithsearch.com/for/hvac-contractors) - [Janitorial and commercial cleaning companies](https://scalewithsearch.com/for/janitorial-and-commercial-cleaning) - [Locksmiths](https://scalewithsearch.com/for/locksmiths) - [Moving companies](https://scalewithsearch.com/for/moving-companies) - [Pest control companies](https://scalewithsearch.com/for/pest-control-companies) - [Plumbing and electrical contractors](https://scalewithsearch.com/for/plumbing-and-electrical-contractors) - [Restoration and water or fire damage companies](https://scalewithsearch.com/for/restoration-and-water-fire-damage) - [Roofing companies](https://scalewithsearch.com/for/roofing-companies) - [Towing companies](https://scalewithsearch.com/for/towing-companies) - [Tree services and landscaping companies](https://scalewithsearch.com/for/tree-services-and-landscaping) - [Solar installers](https://scalewithsearch.com/for/solar-installation) - [General contractors](https://scalewithsearch.com/for/general-contractors-and-construction) - [Paving, concrete, and flooring contractors](https://scalewithsearch.com/for/paving) - Practices and professional services - [Bookkeeping and tax practices](https://scalewithsearch.com/for/bookkeeping-and-tax-practices) - [Dental practices](https://scalewithsearch.com/for/dental-practices) - [Family and criminal defense law firms](https://scalewithsearch.com/for/family-and-criminal-defense-law-firms) - [Med spas and aesthetics practices](https://scalewithsearch.com/for/med-spas-and-aesthetics) - [Personal injury law firms](https://scalewithsearch.com/for/personal-injury-law-firms) - [Veterinary clinics](https://scalewithsearch.com/for/veterinary-clinics) - [Gyms and fitness studios](https://scalewithsearch.com/for/fitness) - [Therapy and outpatient health practices](https://scalewithsearch.com/for/therapy-and-outpatient-health) - [Medical billing companies](https://scalewithsearch.com/for/medical-billing) - [Insurance agencies](https://scalewithsearch.com/for/insurance-agencies) - [Financial advisors](https://scalewithsearch.com/for/financial-advisors) - [Property management companies](https://scalewithsearch.com/for/property-management) - [Recruiting and staffing agencies](https://scalewithsearch.com/for/recruiting-and-staffing) - [Architects and interior designers](https://scalewithsearch.com/for/architects-and-interior-designers) - [Logistics and supply chain companies](https://scalewithsearch.com/for/logistics-and-supply-chain) - Agencies, MSPs, and manufacturing - [IT and managed service providers](https://scalewithsearch.com/for/it-and-managed-service-providers) - [Machine shops and precision manufacturers](https://scalewithsearch.com/for/machine-shops-and-precision-manufacturing) - [Marketing agencies and freelancers](https://scalewithsearch.com/for/marketing-agencies-and-freelancers) - [SEO agencies and consultants](https://scalewithsearch.com/for/seo-agencies-and-consultants) - [Small manufacturers and fabricators](https://scalewithsearch.com/for/small-manufacturers-and-fabricators) - Restaurants, shops, studios, and nonprofits - [Restaurants and hospitality businesses](https://scalewithsearch.com/for/restaurants-and-hospitality) - [Retail stores and ecommerce sellers](https://scalewithsearch.com/for/retail-and-ecommerce) - [Photographers, event planners, and travel agents](https://scalewithsearch.com/for/photographers) - [Churches and nonprofits](https://scalewithsearch.com/for/churches-and-nonprofits) - [All industries](https://scalewithsearch.com/for/) - Learn - For your office - [Office job guides](https://scalewithsearch.com/guides/) - [Browser calculators](https://scalewithsearch.com/tools/) - Start here - [How it works](https://scalewithsearch.com/how-it-works) - [Free Starter Kit](https://scalewithsearch.com/kit/business-memory-starter-kit.zip) - [Synthetic specimen](https://scalewithsearch.com/specimen/working-session-specimen.zip) - Guides - [The Complete Guide to Business Memory for AI Agents](https://scalewithsearch.com/articles/business-memory-for-ai-agents-guide) - [The Complete Small-Business Guide to AI Agent Governance](https://scalewithsearch.com/articles/ai-agent-governance-guide-small-business) - [The Complete Guide to Leaving Vendor AI Memory](https://scalewithsearch.com/articles/leaving-vendor-ai-memory-guide) - Articles by cluster - [Business memory](https://scalewithsearch.com/articles/business-memory-for-ai-agents-guide) - [Agent governance](https://scalewithsearch.com/articles/ai-agent-governance-guide-small-business) - [Migration and ownership](https://scalewithsearch.com/articles/leaving-vendor-ai-memory-guide) - For machines - [llms.txt](https://scalewithsearch.com/llms.txt) - [llms-full.txt](https://scalewithsearch.com/llms-full.txt) - [Machine view](https://scalewithsearch.com/?view=machine) - Company - Evidence - [Proof](https://scalewithsearch.com/proof) - Company - [About](https://scalewithsearch.com/about) # Design mobile-first pages that Google indexes in full and users can tap without errors. Google ranks your site from its mobile version, even for desktop searches. If the mobile page lacks content that the desktop page has, Google does not see that content. If mobile navigation reaches deep category pages only through a script, the crawler may never find them. If a 3,000-pixel hero image loads on a 375-pixel screen, mobile Core Web Vitals fail. Many "mobile-first" designs are desktop designs squeezed into a narrow viewport. Text shrinks, buttons crowd together, and hero images inflate the page. Users pinch, zoom, and leave. This guide covers design patterns that help rankings because they help users: responsive layout, touch target sizes, mobile Core Web Vitals, and progressive enhancement. They work for a new build and for a retrofit of a desktop-first site. ## Know what mobile-first indexing changed Google began mobile-first indexing in 2018 and made it the default for new sites in July 2019. It finished the move for nearly all sites in October 2023. Before the change, Google crawled the desktop page. A mobile page could be a stripped-down copy, and rankings did not suffer. Now Googlebot crawls as a smartphone. Three consequences follow: - Content that the server or a script removes for mobile users does not get indexed. - Google follows the links in the mobile page, so mobile navigation defines your crawl paths. - Mobile performance drives your Core Web Vitals, which Google uses as a page experience signal. Three problems show up most often. **Content fetched on tap.** Mobile layouts often collapse text into accordions or "Read more" sections. If the text is in the HTML and CSS only collapses it, Google indexes it. If a script fetches the text only after a tap, Google does not see it. Keep all content in the initial HTML, even when it is styled to look collapsed. **Navigation built on tap.** Desktop sites show multi-level menus on hover. Mobile sites put menus behind a hamburger icon. Googlebot does not tap icons. If the menu links exist in the HTML, Google follows them. If a script builds the menu only on tap, deep pages lose their links. Put key category links in the HTML, and add footer links or breadcrumb navigation as a second crawlable path. The [navigation design guide](/articles/navigation-design-seo) covers menu structure in detail. **Oversized images.** Desktop pages serve high-resolution images. Mobile pages need smaller ones through `srcset`. Many sites skip that step. A 2 MB hero image ruins Largest Contentful Paint (LCP) on a mobile connection. Treat mobile as the primary design. Build the mobile layout first, then enhance it for desktop. ## Use responsive patterns that keep content intact Responsive design uses CSS media queries to adapt one HTML document to every screen size. Done well, every device gets the same content. Done badly, the layout hides content, blocks crawlers, or breaks internal links. ### Pattern 1: serve the same content to every device The mobile HTML must contain the same content as the desktop HTML. Change layout with CSS. Do not drop content on the server. This template sends a paragraph to desktop users only: ```html {% if not is_mobile %}

This paragraph only reaches desktop users.

{% endif %} ``` Googlebot crawls as a mobile device, so that paragraph never ranks. Send the same HTML to all devices and let CSS change the spacing: ```html

This paragraph appears on all devices.

``` ```css .content-block { padding: 20px; /* mobile default */ } @media (min-width: 768px) { .content-block { padding: 40px; /* desktop enhancement */ } } ``` ### Pattern 2: write mobile styles first Write the base CSS for small screens. Add `min-width` media queries for larger screens. Avoid the reverse: ```css /* Desktop first: mobile overrides every rule */ .hero { font-size: 48px; } @media (max-width: 768px) { .hero { font-size: 24px; } } ``` ```css /* Mobile first: desktop adds to the base */ .hero { font-size: 24px; } @media (min-width: 768px) { .hero { font-size: 48px; } } ``` With mobile-first CSS, the phone applies the base rules and skips the enhancements. The stylesheet stays simpler, and desktop rules apply only where they match. ### Pattern 3: responsive images with srcset Offer several sizes of each image. The browser downloads the smallest one that fits. ```html Product hero image ``` A phone might download the 400-pixel file at about 100 KB. A desktop might download the 1,200-pixel file at about 400 KB. Mobile LCP improves. The [image optimization guide](/articles/image-optimization-ux-seo) covers formats and compression. ### Pattern 4: inline critical CSS Each request adds latency, and mobile connections are slower. Inline the CSS the first screen needs directly in the `head`, and load the rest later. The `critical` npm package automates the extraction. First Contentful Paint (FCP) improves on mobile. ### Pattern 5: lazy-load images below the fold Defer images the reader has not reached: ```html Product image ``` The browser loads the image when it nears the viewport, so critical resources load first. The `width` and `height` attributes reserve space and protect Cumulative Layout Shift (CLS). Never lazy-load the LCP image. The [lazy-loading guide](/articles/lazy-loading-seo-implementation) covers the crawl risks. ## Size touch targets for fingers A mis-tap sends the user to the wrong page, and many users leave. Several standards set minimum target sizes: | Standard | Minimum target | |---|---| | Material Design (Google) | 48 by 48 dp, about 9 mm | | Apple Human Interface Guidelines | 44 by 44 points | | WCAG 2.2, criterion 2.5.8 (level AA) | 24 by 24 CSS pixels, or enough spacing | Google's older mobile tools used 48 by 48 CSS pixels with at least 8 pixels between targets. Use that as your working minimum. A CSS pixel is not a device pixel. On a high-density screen, one CSS pixel covers several device pixels, so 48 CSS pixels is about the width of an adult fingertip. **Spacing.** Adjacent buttons need room: ```html ``` **Navigation links.** Pipe-separated text links are a desktop pattern. On mobile, each link is 10 to 15 pixels tall and hard to hit: ```html ``` Make each link a block with padding: ```html ``` **Form inputs.** Give each input a visible label and a height of at least 44 pixels: ```html ``` A font size of 16 pixels stops iOS Safari from zooming in when the field gets focus. The `type="email"` attribute opens the email keyboard. ## Tune Core Web Vitals on mobile Core Web Vitals are three metrics: Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), and Interaction to Next Paint (INP). Mobile scores matter most, because Google indexes the mobile page. The [Core Web Vitals developer guide](/articles/core-web-vitals-developer-guide) covers measurement. ### LCP: under 2.5 seconds LCP measures when the largest element in the first screen renders, usually a hero image or heading. 1. **Optimize images.** Use WebP or AVIF. Compress with a tool such as Squoosh or TinyPNG. Resize to display dimensions; a 3,000-pixel hero on a 375-pixel screen is eight times larger than needed. 2. **Preload the LCP resource.** Tell the browser to fetch it first: ```html ``` 3. **Remove render-blocking resources.** CSS and JavaScript in the `head` block rendering. Inline critical CSS. Load other scripts with `defer` or `async`. 4. **Use a CDN.** Servers closer to the user deliver images faster. 5. **Improve hosting.** Shared hosting is often slow. A VPS or managed WordPress host, such as Kinsta or WP Engine, improves server response time. ### CLS: under 0.1 CLS measures visual stability. Ads that push content, images without dimensions, and late fonts that reflow text all cause it. 1. **Reserve space for images.** Always set `width` and `height`: ```html Product ``` 2. **Reserve space for ads.** Give each ad container fixed dimensions in CSS. 3. **Do not insert content above existing content.** A banner that appears after load pushes the page down, and the user loses their place. 4. **Use `font-display: swap`.** Text renders at once in a fallback font and swaps when the web font loads. Pick a fallback with similar metrics to limit the shift. ### INP: under 200 milliseconds INP replaced First Input Delay (FID) as a Core Web Vital in March 2024. INP measures responsiveness to every interaction during the visit, not only the first. Long JavaScript tasks delay the response. 1. **Cut JavaScript.** Analytics, ads, and chat widgets run heavy scripts. Profile them in the Chrome DevTools Performance panel. Remove or defer what is not critical. 2. **Split bundles.** On a React or Vue site, split code so each page loads only its own JavaScript. 3. **Use web workers.** Move heavy computation off the main thread. 4. **Tune event handlers.** Debounce scroll and resize handlers. Do not run expensive work on every event. ## Build with progressive enhancement Two approaches handle device diversity. Progressive enhancement builds for basic devices and adds features for capable ones. Graceful degradation builds for capable devices and accepts reduced function on the rest. SEO favors progressive enhancement. With progressive enhancement, core content and functions work on every device, including screen readers and Googlebot. Styles and interactions layer on top. If JavaScript fails, the content stays reachable. Take a mobile menu as the example. | Layer | Progressive enhancement | Graceful degradation | |---|---|---| | HTML | A full list of links, visible by default | The menu is hidden by default | | CSS | Styles the menu for mobile | Styles the menu for mobile | | JavaScript | Adds a hamburger toggle and animation | Reveals the menu on tap | | If JavaScript fails | The menu stays visible and works | The menu stays hidden; users and Google cannot navigate | Googlebot runs JavaScript, but rendering can fail. Network failures, render timeouts, and script errors can stop it. Critical content and navigation must not depend on JavaScript. Use scripts to enhance, not to gate. ## Settle the common design choices **Separate mobile domain (m.example.com).** It is not a penalty, but it doubles the work. You maintain two codebases, content parity is hard, and the canonical and alternate annotations must be exact. Google recommends responsive design on one URL. **Accordions.** Use them when the content is in the HTML and the accordion only changes presentation. Google indexes collapsed content in the HTML. Watch usability: if users must open five accordions to find an answer, engagement drops. **Pop-ups.** Google demotes intrusive interstitials that cover the main content right after a visitor arrives from search. Legal notices, such as age checks and cookie banners, and login walls for paid content are exceptions. Delay pop-ups until the user engages, or use a small banner. The [interstitials and pop-ups guide](/articles/interstitials-popups-seo-impact) lists the patterns Google accepts. **Testing.** URL Inspection in Search Console shows the page as Googlebot Smartphone rendered it. Compare the rendered HTML with your desktop page. Missing content, missing links, or a slower load on mobile point to a mobile-first problem. Google retired the Mobile-Friendly Test in December 2023. Use Lighthouse with mobile emulation and PageSpeed Insights in mobile mode instead. **App or mobile site.** Apps do not rank in Google web results, except in app-specific results. If search brings your traffic, put the mobile site first. Many businesses use both: the site for acquisition, the app for retention. SEO helps only the site. **AMP.** Accelerated Mobile Pages no longer bring a ranking benefit. Google dropped AMP as a Top Stories requirement in June 2021. A well-built regular page reaches the same speed. ---- ```text .|########||. .|########||. .|########||. |##||. .||##|. |##||. .||##|. |##||. .||##|. |#|. .|#|. |#|. .|#|. |#|. .|#|. |#| |#| |#| |#| |#| |#| .#| |#. .#| |#. .#| |#. .#. .#| .#. .#| .#. .#| |#. .#| |#. .#| |#. .#| |# ...... #| |# ...... #| |# ...... #| .# ||#########| #| .# ||#########| #| .# ||#########| #| .#. |######||######|. .#. .#. |######||######|. .#. .#. |######||######|. .#. #. .##|###|##|#|######| .# #. .##|###|##|#|######| .# #. .##|###|##|#|######| .# || |##|#||||||||||||#||#| || || |##|#||||||||||||#||#| || || |##|#||||||||||||#||#| || # |#||||||||||||||||||||#| #. # |#||||||||||||||||||||#| #. # |#||||||||||||||||||||#| #. || |#||||||||||||||||||||||#| || || |#||||||||||||||||||||||#| || || |#||||||||||||||||||||||#| || # .#||||||||||||||||||||||||#| # # .#||||||||||||||||||||||||#| # # .#||||||||||||||||||||||||#| # || ....|||#||||||##|#|||#|#||##||||....|. || || ....|||#||||||##|#|||#|#||##||||....|. || || ....|||#||||||##|#|||#|#||##||||....|. || #. . ....|# ....#||| ||| .#||| ....#. .# #. . ....|# ....#||| ||| .#||| ....#. .# #. . ....|# ....#||| ||| .#||| ....#. .# # . ||||#| .#####|| . .#| .#||| ||||# #. # . ||||#| .#####|| . .#| .#||| ||||# #. # . ||||#| .#####|| . .#| .#||| ||||# #. .| ||||| #. |#|||||. || #. |#||. .||||| || .| ||||| #. |#|||||. || #. |#||. .||||| || .| ||||| #. |#|||||. || #. |#||. .||||| || || |.... #. ....|#. |. ...|. ....|| || || |.... #. ....|#. |. ...|. ....|| || || |.... #. ....|#. |. ...|. ....|| || #. .||||||##||||||##||####|||||||#||||||#| .# #. .||||||##||||||##||####|||||||#||||||#| .# #. .||||||##||||||##||####|||||||#||||||#| .# # .||####|###########################|. # # .||####|###########################|. # # .||####|###########################|. # # .#||||||.#.|| # |. ..# #| #|||||#| # # .#||||||.#.|| # |. ..# #| #|||||#| # # .#||||||.#.|| # |. ..# #| #|||||#| # # .#|||||| .. |# ## |#| ...#|#|||#| # # .#|||||| .. |# ## |#| ...#|#|||#| # # .#|||||| .. |# ## |#| ...#|#|||#| # # .#|||#|# .# .#| #| ##|.#..#|||||#| # # .#|||#|# .# .#| #| ##|.#..#|||||#| # # .#|||#|# .# .#| #| ##|.#..#|||||#| # # .#||||||############|######|||||#| # # .#||||||############|######|||||#| # # .#||||||############|######|||||#| # # |...||#||||||#||||#|#||||||#|||||#||| |.| # # |...||#||||||#||||#|#||||||#|||||#||| |.| # # |...||#||||||#||||#|#||||||#|||||#||| |.| # #. .. ||||# .|||##|. |#| .|| || .|||#. #| # .# #. .. ||||# .|||##|. |#| .|| || .|||#. #| # .# #. .. ||||# .|||##|. |#| .|| || .|||#. #| # .# || | ...|| ...##| | #| .|. |. ##### .. .| || || | ...|| ...##| | #| .|. |. ##### .. .| || || | ...|| ...##| | #| .|. |. ##### .. .| || || ||||| || ||||#| . |. |. |#. ||||| |#| || || || ||||| || ||||#| . |. |. |#. ||||| |#| || || || ||||| || ||||#| . |. |. |#. ||||| |#| || || .# |.....#|....|#.||||.|||##.|#|....||.#||.#. #. .# |.....#|....|#.||||.|||##.|#|....||.#||.#. #. .# |.....#|....|#.||||.|||##.|#|....||.#||.#. #. #.|||||||#############################| ||| .# #.|||||||#############################| ||| .# #.|||||||#############################| ||| .# || ##||#||#||||||#||#||#||#||##. || || ##||#||#||||||#||#||#||#||##. || || ##||#||#||||||#||#||#||#||##. || # .#|||||||||#||#|||||||||||#| # # .#|||||||||#||#|||||||||||#| # # .#|||||||||#||#|||||||||||#| # || |#||||||||||||||||||||||#| || || |#||||||||||||||||||||||#| || || |#||||||||||||||||||||||#| || .# |#||||||||||||||||||||#| #. .# |#||||||||||||||||||||#| #. .# |#||||||||||||||||||||#| #. || |#||||||||||||||||||#| || || |#||||||||||||||||||#| || || |#||||||||||||||||||#| || #. .######|#|#########| .# #. .######|#|#########| .# #. .######|#|#########| .# .#. |#####||||#####| .#. .#. |#####||||#####| .#. .#. |#####||||#####| .#. |# ||########|| #. |# ||########|| #. |# ||########|| #. |# ...... #| |# ...... #| |# ...... #| |#. .#| |#. .#| |#. .#| |#. .#. |#. .#. |#. .#. .#| |#. .#| |#. .#| |#. |#| |#| |#| |#| |#| |#| .|#|. .|#|. .|#|. .|#|. .|#|. .|#|. |##||. .||##| |##||. .||##| |##||. .||##| .||########||. .||########||. .||########||. Scale With Search 2026 [scalewithsearch.com](https://scalewithsearch.com) ```