The Responsiveness Audit
The Responsiveness Audit
Most developers check their site on their laptop and their phone. Maybe a tablet if they're thorough. That's not an audit. That's a spot check.
This is the actual process I use after every major feature. It takes about 2 hours and catches things that would otherwise ship to production and annoy people silently.
The Process
Step 1: Define Your Breakpoints
Not Tailwind breakpoints. Real device widths that people actually use:
| Width | Device |
|---|---|
| 320px | iPhone SE (the one that breaks everything) |
| 375px | iPhone 12/13/14 |
| 414px | iPhone Plus / Android standard |
| 768px | iPad portrait |
| 1024px | iPad landscape / small laptops |
| 1440px | Standard desktop |
| 1920px | Large desktop |
Step 2: Walk Every Page
Open Chrome DevTools. Device toolbar. Set the width. Go through every page in the site. Not just the homepage. Every page.
Step 3: Log Failures
Keep a simple table:
| Page | Breakpoint | Issue |
|---|---|---|
| /about | 320px | Timeline text overflows container |
| /vault | 414px | Card tags wrap to 3 lines |
| /blog | 768px | Grid jumps from 1 to 3 columns (skips 2) |
Step 4: Fix Mobile-First
Start with the smallest breakpoint. Fix 320px first. Then check if the fix broke 375px. Work your way up. Never fix desktop first and hope it works on mobile.
Common Issues I've Found
Text overflow on 320px. Long words or URLs break out of containers. Fix: min-w-0 and truncate on flex children, or break-words on text containers.
Fixed heights on hero sections. They look great on the viewport you designed for and break everywhere else. Fix: replace h-[500px] with min-h-[500px] plus padding.
Navigation that doesn't close. Hamburger menus that open but don't dismiss on route change. Happens every time with client-side routing.
Card grids collapsing too early. Two cards side by side at 768px can work, but most developers default to single column. Fix: use grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 and actually check each breakpoint.
Footer wrapping. Social links, copyright text, and navigation links wrapping at awkward widths. Fix: test at every breakpoint, not just the ones that look good.
The Rule
Schedule a responsiveness audit after every major feature. Not every PR. Every feature. It takes 2 hours. It catches issues that users will never report because they'll just leave instead.