Design & UX

Mobile-first design checklist for production

Practical, implementation-ready checklist to build or audit mobile-first pages for frontend developers, designers, PMs and site owners. Last reviewed…

Emma Collins October 17, 2026 Updated September 27, 2026 8 min read

Practical, implementation-ready checklist to audit or build a mobile-first page for production: audience—frontend developers, product designers, PMs, and site owners; last reviewed and sources consulted September 27, 2026.

Summary checklist

Quick audit list. Each item below links to a detailed section further down.

Viewport meta present: <meta name=”viewport” content=”width=device-width,initial-scale=1″> — see MDN. (consulted September 27, 2026)

Mobile HTML contains same main content, structured data and meta tags as desktop — verify with URL inspection. (consulted September 27, 2026)

Core Web Vitals targets: LCP ≤ 2.5s; INP ≤ 200ms; CLS < 0.10 — measure 75th percentile mobile. (consulted September 27, 2026)

Tap targets at least 48×48 dp or equivalent guidance. (consulted September 27, 2026)

Responsive images with srcset/picture and modern formats (WebP/AVIF). (consulted September 27, 2026)

Inline critical CSS; defer noncritical JS; font-display: swap for web fonts. (consulted September 27, 2026)

Accessibility basics: semantic HTML, labels, skip links, keyboard order. (consulted September 27, 2026)

Use Lighthouse / PSI and CrUX to audit field and lab data. (consulted September 27, 2026)

Mobile-first index & content parity

Mobile-first indexing means the mobile version of a page is the baseline for indexing and ranking. Verify that the mobile HTML includes the same primary content, structured data and meta tags as the desktop HTML. Reference: Google mobile-first indexing documentation. (source : Google)

Checks to run:

Fetch the page as Googlebot‑smartphone using Search Console’s URL Inspection and compare rendered HTML to the desktop render.

Confirm structured data markup appears in the mobile render and that canonical tags are identical between versions.

Use the Mobile-Friendly Test to detect display issues or blocked resources that alter mobile rendering.

How to test: open Search Console → Inspect URL → Test Live URL (mobile). Document differences and resolve any missing blocks or resources that prevent parity. (consulted September 27, 2026)

Viewport & responsive layout rules

Include an explicit viewport meta tag to trigger responsive layouts. Example: <meta name=”viewport” content=”width=device-width,initial-scale=1″>. See MDN for details. (source : Mozilla)

Layout strategy:

Design mobile-first: define styles for the narrowest screen then add media queries for larger breakpoints.

Avoid desktop-first patterns where large assets or hidden content are removed from mobile HTML.

Keep breakpoints semantic (content-driven) rather than device-driven.

How to test: use device emulation in Chrome DevTools. Resize the viewport and verify media queries cover key components, navigation and modals. Confirm no layout shifts when fonts or images load.

Performance targets (Core Web Vitals)

Target thresholds for audits and monitoring:

Largest Contentful Paint (LCP) — “good” ≤ 2.5s, “poor” > 4.0s. (source : Web)

Interaction to Next Paint (INP) — “good” ≤ 200 ms, “poor” > 500 ms; measure at the 75th percentile per device class. (source : Web)

Assess metrics at the 75th percentile of page loads for mobile. (source : Web)

Actions to improve metrics:

Reduce render-blocking resources and critical path length by inlining critical CSS and deferring noncritical JS. (source : Web)

Minimize main-thread work and split heavy scripts into async/chunks.

Prioritize LCP resource delivery: preload hero image or font when appropriate.

How to test: run Lighthouse or PageSpeed Insights for lab diagnostics and check CrUX / Search Console field data for 75th percentile mobile measurements. (source : Web)

Render-critical resources (CSS, JS, fonts)

Checklist:

Extract and inline critical CSS for above-the-fold content.

Defer or async noncritical JavaScript and prefer code-splitting for third-party bundles.

Use font-display: swap and preload only essential fonts to avoid FOIT.

How to test: use Chrome DevTools Performance and Coverage panels. Look for long tasks, unused CSS bytes and large blocking scripts. Run Lighthouse diagnostics for render-blocking resources. (source : Web)

Images & media (size, format, responsive)

Best practices:

Serve responsive images via <picture> and srcset to match device DPR and viewport.

Prefer modern formats (WebP, AVIF) where supported and provide fallbacks. (source : Web)

Compress and size images to the display size; lazy-load offscreen images.

How to test: throttle network in DevTools to mobile speeds and measure bytes transferred. Use Lighthouse image diagnostics for opportunities. (source : Web)

Touch targets & spacing

Follow platform guidance for tappable areas. Material Design recommends at least 48×48 dp; Apple guidance references 44×44 px as a minimum. Spacing between targets is as important as target size. (source : Google)

How to test: run Lighthouse accessibility “tap targets” audit and perform manual finger-reach checks on representative devices.

Typography & readable sizes

Recommendation: use a mobile baseline for body text that preserves readability and prevents forced zoom. Ensure line-height and contrast meet WCAG recommendations. When citing numerical font baselines, attach a source; otherwise treat a baseline as a recommended starting point to validate visually on devices.

How to test: sample pages on multiple viewport widths and perform contrast checks with automated tools.

Accessibility essentials

Checklist:

Prefer semantic HTML; use ARIA only where native elements do not suffice.

Ensure forms have associated labels and accessible names for interactive controls.

Provide skip links and maintain logical focus order for keyboard and screen reader users.

How to test: run Lighthouse accessibility, axe-core and manual screen reader checks on mobile devices or device emulators.

Interaction & input patterns (forms, inputs, modals)

Mobile-friendly input patterns:

Use appropriate input types (tel, email, numeric) to trigger proper mobile keyboards.

Avoid full-screen modal traps; ensure close controls are reachable and announced to assistive tech.

Validate focus management after dynamic content updates.

How to test: manual form entry on device and keyboard behavior checks in emulation.

Network & caching (reduce payload on mobile)

Key points:

Enable compression and caching headers to reduce repeated payloads.

Consider service workers for progressive caching strategies where appropriate.

Audit third-party scripts and remove or defer those that block main-thread work.

How to test: simulate slow networks in DevTools and observe resource load times and cache hits.

SEO & structured data for mobile content

Ensure structured data is present in the mobile render and that canonical and meta robots tags are consistent between mobile and desktop. Use URL Inspection to confirm the mobile crawl sees the same data. (source : Google)

How to test: inspect live URL (mobile) and verify visible structured data and canonical links.

Testing & monitoring (tools & process)

Recommended toolset: Lighthouse, PageSpeed Insights, Chrome DevTools, Search Console, Mobile-Friendly Test and CrUX field data. Use Lighthouse CI for automated checks in CI. (source : Web)

Monitoring checklist:

Collect field CrUX metrics and evaluate the 75th percentile for mobile segments.

Set alert thresholds tied to the Core Web Vitals “good” thresholds noted above. (source : Web)

Schedule periodic re-audits and include real-device sampling.

Anti-patterns & pitfalls

Common faults to avoid:

Hiding main content on mobile or serving a reduced HTML payload for mobile bots.

Relying exclusively on heavy client-side rendering without SSR or hydration strategies for primary content.

Allowing unoptimized third-party scripts to block the main thread on mobile.

Quick implementation checklist (printable)

Compact items for a one-page printout:

Viewport meta present

Mobile HTML parity with desktop

LCP ≤ 2.5s target; INP ≤ 200ms target (measure 75th mobile)

Responsive images (srcset/picture) and modern formats

Tap targets ≥ 48×48 dp

Inline critical CSS; defer JS

Semantic HTML and form labels

Monitor via Lighthouse/PSI and CrUX

Annexes / How to measure

Sample Lighthouse CLI command: run Lighthouse against a URL in CI to gather lab metrics and diagnostics. Use PageSpeed Insights for lab + origin field data. Extract field CrUX metrics for the origin to analyze the 75th percentile for mobile. Refer to the Core Web Vitals tools guide for workflows. (source : Web)

FAQ

Does mobile-first mean no desktop design?

No. Mobile-first is a design approach that starts with mobile constraints and scales up. Desktop design remains essential but should not drive what the mobile HTML contains.

Are AMP pages required?

No. AMP is optional. Focus on fast mobile delivery and field metrics instead.

How often to re-audit?

Re-audit after significant UI changes and on a scheduled cadence to capture regressions. Use field data to prioritize fixes.

Which image format to choose (WebP vs AVIF)?

Prefer the most efficient format supported by the target browsers; provide fallbacks. Use automatic format negotiation where possible. See image format guidance. (source : Web)

Method of this checklist

This checklist synthesizes public guidance from Google, web.dev, MDN and platform design guidelines; sources were consulted on September 27, 2026. The checklist aggregates documentation and tooling recommendations and maps each audit item to a concrete test or tool.

Disclaimer

This guide summarizes implementation best practices as of September 27, 2026. It does not guarantee search ranking or legal compliance.

What this page does not know

No traffic or search-volume figures are included. This checklist does not include primary usability lab results or site-specific performance baselines unless those are supplied separately.

References & dates

Google — Mobile-first Indexing documentation. https://developers.google.com/search/docs/crawling-indexing/mobile/mobile-sites-mobile-first-indexing — consulted September 27, 2026.

Google Search Central — “Mobile-first is here” blog. https://developers.google.com/search/blog/2023/10/mobile-first-is-here — consulted September 27, 2026.

web.dev — Largest Contentful Paint (LCP) guidance. https://web.dev/articles/lcp — consulted September 27, 2026.

web.dev — Optimize Interaction to Next Paint (INP) guidance. https://web.dev/articles/optimize-inp — consulted September 27, 2026.

web.dev — Defining Core Web Vitals thresholds. https://web.dev/articles/defining-core-web-vitals-thresholds — consulted September 27, 2026.

MDN — meta name=”viewport” reference. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/viewport — consulted September 27, 2026.

web.dev — Choose the right image format. https://web.dev/articles/choose-the-right-image-format — consulted September 27, 2026.

web.dev — Image performance guidance. https://web.dev/learn/performance/image-performance — consulted September 27, 2026.

Google (Android accessibility) — touch target guidance (Material). https://support.google.com/accessibility/android/answer/7101858 — consulted September 27, 2026.

web.dev — Optimize resource loading. https://web.dev/learn/performance/optimize-resource-loading — consulted September 27, 2026.

web.dev — Core Web Vitals tools & workflows. https://web.dev/articles/vitals-tools — consulted September 27, 2026.

Related guides

Emma Collins

Emma covers e-commerce, website builders, design and AI tools. She compares platforms on the criteria a small business actually feels: setup time, running costs and lock-in.

Updated on September 27, 2026