mobile-responsive

# 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**.