Stop Designing for 320px: The Reflow Myth and the Real UI/UX Fix

Imagine you're a designer at your desk, and a client calls: “Our site breaks on my phone.” You open it, resize the browser window to 320px, and sure enough, the layout collapses. You spend a week tweaking breakpoints, adding media queries, and testing at 320px. But here's the thing: 320px is a distraction. It's not the target. The real enemy is reflow failure at 400% zoom.

The 320px Myth

We've all been taught to test at 320px. It's a common reference value—MDN lists it as a typical breakpoint. But it's just a number. Your users don't have a fixed 320px viewport. They zoom. They use screen readers. They rotate their phones. The problem isn't a narrow viewport; it's content that doesn't reflow when the viewport is scaled. WCAG 2.1 SC 1.4.10 Reflow (Level AA) doesn't say “fit in 320px.” It says content must be presented without loss of information and without requiring scrolling in two dimensions at a width equivalent to 320 CSS pixels—that's a 1280x1024 viewport at 400% zoom (W3C WCAG 2.1 Understanding Reflow). So when you zoom in 400%, a site that only works at 320px will still break. You're solving the wrong problem.

Reflow Is a Feature, Not a Breakpoint

Reflow isn't just about fitting more pixels. It's about the layout adapting to the available space. Fluid grids, flexible images, and media queries are the foundation (MDN Web Docs). But the key is to build with relative units—percentages, fr, em, rem—not fixed pixels. When you use fixed pixels, you're locking yourself into a specific viewport. When you use relative units, the layout can flow naturally. For example, a three-column grid using fr units will collapse into a single column at 400% zoom without breaking. That's reflow. And it's not just a nice-to-have; it's a requirement. Ignore it, and you're failing WCAG AA.

The Real Culprit: Low Contrast

Now, let's talk about the elephant in the room. WebAIM's Million study of the top 1,000,000 home pages found that 95.9% had detected WCAG 2 failures (WebAIM Million). And the most common issue? Low-contrast text. It's present on 83.9% of home pages (WebAIM Million). That's not a 320px problem. That's a design problem. You can have the most responsive layout in the world, but if your text is light gray on white, it's unusable for millions of people. WCAG 2.1 AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (WCAG 2.1). So stop obsessing over breakpoints and start checking your color contrast.

The 400% Zoom Test

Here's my recommendation: test your site at 400% zoom on a 1280x1024 viewport. That's the WCAG benchmark. If your content reflows into a single column without horizontal scrolling, you pass. If not, you fail. This is more rigorous than testing at 320px because it simulates a real user zooming in. And it's not just about text—it applies to all content, including images and video. So, before you add another media query, run the 400% zoom test. You'll find issues you never saw at 320px.

But What About Touch Targets?

You might argue: “Touch targets are a mobile issue, not a zoom issue.” True. But they're part of the same accessibility puzzle. WCAG 2.2 SC 2.5.8 requires pointer targets to be at least 24 by 24 CSS pixels (W3C WCAG 2.2 Understanding Target Size). Apple recommends 44x44 points, and Android recommends 48x48 dp. So, if you're designing for 320px, you might shrink touch targets to fit—and fail those guidelines. The solution isn't to make everything smaller; it's to design for reflow so targets stay large even when zoomed.

The Bottom Line: Design for Reflow, Not 320px

Stop treating 320px as your design target. It's a myth. The real requirement is reflow at 400% zoom, and the real failure is low contrast. So, here's your action plan:

• Test at 400% zoom on a 1280x1024 viewport.
• Use relative units and flexible layouts.
• Check contrast against WCAG 2.1 AA thresholds.
• Keep touch targets at least 24x24 CSS pixels.

If you do this, you'll build a site that works for everyone, not just the person with a 320px phone.

Sources

• MDN Web Docs - https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Responsive_Design
• W3C WCAG 2.1 Understanding Reflow - https://www.w3.org/WAI/WCAG21/Understanding/reflow.html
• WebAIM Million - https://webaim.org/projects/million/
• WCAG 2.1 (AA) - https://www.w3.org/WAI/WCAG21/quickref/
• W3C WCAG 2.2 Understanding Target Size (Minimum) - https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html