Mobile Responsive (Deep Workflow)
Responsive design is not “three fixed widths”—it is fluid layouts, touch-first interaction, readable typography, and performance under real constraints.
When to Offer This Workflow
Trigger conditions:
- Layout breaks on small screens; horizontal scroll
- Touch targets too small; hover-only patterns
- CLS or LCP issues on mobile
Initial offer:
Use six stages: (1) viewport & breakpoints, (2) content priority, (3) layout & grids, (4) touch & gestures, (5) typography & readability, (6) performance & verification. Confirm design system tokens if any.
Stage 1: Viewport & Breakpoints
Goal: Breakpoint strategy matches content not only devices.
Practices
- Content-first min-width media queries where possible
- Test real ranges (320–428+ px common phones)
- Safe area insets for notch devices
Exit condition: Breakpoint table with what changes per tier.
Stage 2: Content Priority
Goal: Mobile shows what matters first—not shrunk desktop.
Practices
- Reorder stack for primary CTA above fold when appropriate
- Hide non-essential via progressive disclosure not
display:nonewithout a11y plan
Exit condition: Priority annotated wireframe for key templates.
Stage 3: Layout & Grids
Goal: Fluid grid; no overflow surprises.
Practices
- Max-width containers; images with dimensions or aspect ratio
- Flex / grid gap consistent; avoid fixed px widths for main columns
Stage 4: Touch & Gestures
Goal: WCAG 2.5 target size (≥44×44 px approx) and spacing.
Practices
- No hover-only tooltips; tap to reveal
- Swipe only when discoverable or documented
Stage 5: Typography & Readability
Goal: Min font size ~16px body to prevent iOS zoom; line-height comfortable.
Practices
- Contrast ratios for small text outdoors
Stage 6: Performance & Verification
Goal: LCP images optimized; JS budget for mobile CPU.
Verification
- Chrome device mode insufficient alone—real devices or BrowserStack
- RUM by device class
Final Review Checklist
- Breakpoints and content priority defined
- No critical horizontal scroll; images stable
- Touch targets and focus order work
- Typography readable; contrast OK
- Performance validated on mobile networks
Tips for Effective Guidance
100vwoften causes overflow with scrollbar—use100%ormincarefully.- Sticky headers and virtual keyboard interactions need test on device.
- Dark mode and contrast are part of responsive readability.
Handling Deviations
- Native app vs web: same touch and priority principles; platform patterns differ.
- Desktop-only internal tool: still minimum 1280 and zoom to 200% for a11y.