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:none without 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

• - 100vw often causes overflow with scrollbar—use 100% or min carefully.
• 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.