Design for constraints first. Start at 360–400px widths and prioritize the single most important CTA per view. Use a fluid grid with consistent spacing (4 or 8px) and avoid nesting grids deeply. Define breakpoints based on content, not devices, and test common pairs: 390px, 768px, 1280px.
Typography and touch: keep body text 16–18px, line-height 1.5–1.6, and minimum touch targets of 44px. Leave breathing room around CTAs; avoid edge-to-edge taps without padding. Use sticky but unobtrusive CTAs when flows are long.
Navigation: for marketing, keep top-level nav minimal and expose the primary action in the header. For apps, prefer bottom nav with 3–5 slots; hide secondary items behind a kebab menu, not hamburger overload. Preserve scroll position on tab switches to reduce frustration.
Media and performance: serve responsive images with srcset/sizes, lazy-load below-the-fold media, and compress aggressively. Avoid autoplaying heavy video on mobile data. Use CSS for simple effects; limit JS-driven layout shifts. Respect prefers-reduced-motion.
Forms: reduce fields ruthlessly, choose appropriate input types, and provide inline validation. Group related fields and keep labels visible. For multi-step flows, show progress and allow going back without data loss.
Testing: exercise on real devices and throttled networks. Verify keyboard overlays do not block inputs. Run Lighthouse mobile and fix tap targets, contrast, and blocking resources. Mobile-first is successful when the smallest screen feels fast, legible, and focused—desktop then becomes easy.
