Responsive & multi-device best practices

TL;DR checklist

How we got here

What actually changed, year by year. The through-line: design for ranges, not devices.

Device & viewport reference

CSS pixels (what media queries see), not hardware pixels. Phones render at 2–3× DPR — serve 2× imagery and SVG icons; never read screen.width for layout.

Phones (portrait width)

Foldables

Tablets

Laptops & desktops

Breakpoints that work

<!-- The whole responsive-grid story in one line -->
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4">…</div>

<!-- Zero-media-query card reflow -->
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }

Skynet UI's variants map to 640 / 768 / 1024 / 1280 / 1536; .sk-container caps and centers content; .hide-mobile / .hide-desktop split at 768.

Touch & pointer targets

• Design to 44px, comply at 24px: fingers average ~10mm of contact.
• Pad hit areas, not glyphs — a 16px icon inside a 44px padded button is correct.
• Hover can enhance, never gate: everything revealed on :hover needs a tap/focus path; style :focus-visible as deliberately as hover.
• Use @media (pointer: coarse) to widen spacing for touch without penalizing mouse users.
• .sk-btn meets 44px out of the box; keep .sk-btn-sm for mouse-dense toolbars, not primary mobile actions.

Typography & spacing

• 16px body minimum — below 16px, iOS Safari zooms the page when an input gains focus.
• Fluid type with clamp() scales headings smoothly from 320 to 1920 with zero breakpoints.
• Measure: 45–75 characters per line; line-height ~1.5 for body text.
• Use rem for type and spacing so user font-size preferences are honored (this framework's scale is rem-based).
• Never ship maximum-scale=1 or user-scalable=no — pinch zoom is an accessibility right.

h1 { font-size: clamp(1.75rem, 1.2rem + 2.5vw, 3rem); }
p  { max-width: 65ch; line-height: 1.5; }

Layout foundations

• repeat(auto-fit, minmax(16rem, 1fr)) is the most useful responsive pattern of the era: cards reflow at every width with no media queries.
• The 320px test: every page renders without horizontal scroll at 320. Usual offenders: fixed widths, unbroken strings (use overflow-wrap: anywhere on user content), media without max-width: 100%.
• The min-width: auto trap: flex/grid children refuse to shrink below content size until you set min-width: 0 — the #1 cause of mystery overflow.
• Wide content scrolls in its own box: tables, code, diagrams get an overflow-x: auto wrapper (here: .sk-table-wrap); the page never scrolls sideways.
• Logical properties (margin-inline, padding-block) make layouts survive RTL locales for free.

The viewport meta & safe areas

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

• Without this tag phones render a 980px desktop page and shrink it — nothing else in this guide works until it's present.
• viewport-fit=cover lets the page extend into notch / Dynamic Island territory; pad fixed chrome with env(safe-area-inset-top/bottom/left/right).
• 100vh lies on mobile — it measures the largest viewport, so content hides behind collapsing toolbars. Use 100svh for stable shells (never overflows) or 100dvh to track the chrome; Baseline since 2025.
• The on-screen keyboard shrinks the visual viewport, not these units — prefer position: sticky over bottom-fixed for actions that must stay visible while typing.

.app-shell { min-height: 100vh; min-height: 100svh; }  /* fallback + fix */
.sk-navbar { padding-top: env(safe-area-inset-top); }
.footer-bar { padding-bottom: env(safe-area-inset-bottom); }

Media

• srcset + sizes so a 360px phone doesn't download a 1920px hero; <picture> for AVIF/WebP with fallback.
• Reserve space with width/height attributes or CSS aspect-ratio on every image and embed — unreserved media is the top cause of layout shift.
• loading="lazy" below the fold; fetchpriority="high" on the LCP hero; never lazy-load the LCP image.
• Icons and logos as SVG — crisp at every DPR. Skynet UI's 640 icons render inline at 1em in currentColor.
• Background video: compressed, muted, playsinline, and gated on prefers-reduced-motion.

Performance budgets

Core Web Vitals, measured at the 75th percentile on mobile.

• Budget JavaScript hardest: the median phone is a mid-range Android. Test throttled (4× CPU, 4G), not on a dev machine.
• Fonts: system stack or ≤2 families with font-display: swap and preload.
• This framework is one stylesheet + one deferred script, under ~60KB gzipped total, no hydration.

Dark mode, motion & user preferences

• Dark mode is table stakes since 2019: respect prefers-color-scheme; persist manual toggles and set color-scheme so form controls match. Dark gray surfaces over pure black, desaturated accents, AA contrast maintained — Skynet UI's 9 themes (including contrast) follow this, and the MCP make_theme tool auto-derives AA-guarded custom themes.
• prefers-reduced-motion: reduce gates parallax, autoplaying carousels, scroll-triggered animation, large view transitions.
• prefers-contrast: more raises border/text contrast, or switch to a high-contrast theme.
• Set <meta name="theme-color"> per scheme so browser chrome matches the page.

The testing matrix

Beyond widths: both orientations on phone and tablet; a keyboard-only pass (tab order, visible focus, no traps); 200% browser zoom (WCAG 1.4.10 reflow); coarse-pointer emulation; dark and light schemes; reduced motion on; and a real mid-range Android over cellular at least once per release.

Applying this with Skynet UI

For agents: this guide over MCP

curl -s https://skynetui.com/mcp -X POST -H 'Content-Type: application/json' -d '{
  "jsonrpc":"2.0","id":1,"method":"tools/call",
  "params":{"name":"get_best_practices","arguments":{"section":"touch"}}
}'