LLM Best Practices

Mobile usability: viewport, touch targets, and text

3 min read

View markdown source

Overview

Mobile-first indexing decides which version of a page Google reads; mobile usability decides whether a person on a phone can actually use it. Google retired its Mobile-Friendly Test and the Search Console Mobile Usability report in December 2023, so these rules come from accessibility standards and design-system guidance rather than a Search score. For responsive architecture, content parity, and AMP, see mobile-first.

Declare the viewport meta tag on every page

Without the viewport meta tag, mobile browsers render the page at desktop width and zoom out. Text is unreadable; touch targets are pixel-sized.

<meta name="viewport" content="width=device-width, initial-scale=1" />
  • width=device-width matches the browser viewport to the physical screen.
  • initial-scale=1 prevents the auto-zoom-out behavior.
  • Avoid user-scalable=no and maximum-scale=1. They break accessibility and trigger WCAG failures.
  • Place the tag early in <head> and ship exactly one; duplicate viewport tags make the result depend on browser parsing.

Size touch targets at 48 pixels minimum

Use 48 by 48 CSS pixels as the design target from Material and Lighthouse guidance; WCAG 2.2 sets 24 by 24 as the AA minimum.

  • Buttons, links in nav, and form controls: minimum 48x48 pixels.
  • Spacing between adjacent targets: leave a gap (8 pixels is a common Material guideline) so users do not hit the wrong one.
  • Inline text links inside paragraphs are exempt from the WCAG 2.2 target-size minimum; keep line height generous so adjacent links are still easy to hit.
  • Inputs in forms: 48 pixels tall minimum. Use min-height: 48px plus padding: 12px. See forms.

Set readable font sizes by default

Tiny text on phones forces readers to zoom, and a page that is hard to use on mobile makes a poor page experience.

  • Body text: 16 pixels as the practical default. Smaller body text often forces zoom, and iOS Safari zooms into form inputs under 16 pixels.
  • Use font-size: 1rem (which equals 16 pixels by browser default) and let users scale up.
  • Line height: 1.5 minimum for body text. Tight leading on small screens hurts readability.
  • Never set font-size in pixels on the <html> element; it overrides user font-size preferences.

Kill tap delay with touch-action

Mobile browsers historically added a 300-millisecond delay after touchstart to detect double-tap-zoom. Modern browsers skip the delay when the viewport meta is set, but touch-action makes it explicit.

  • touch-action: manipulation on buttons and links removes the delay without disabling gestures.
  • touch-action: none on elements that should not respond to gestures (drag handles, canvases).
  • Avoid 300ms-removal libraries; they were a 2014 hack and now interfere with native gesture handling.

Backlinks