320px Is a Trap: Why You Should Design for Reflow, Not a Phone Width

Wait, you're telling me 320px is NOT the magic number?

You've heard it a thousand times: "Design for 320px, that's the smallest iPhone." But here's the contrarian truth: the 320px-wide viewport is a myth that's been holding your responsive design back. WCAG 2.1's Reflow criterion doesn't even mention a specific device width. It says content must not require two-dimensional scrolling at a width equivalent to 320 CSS pixels (or 256 for horizontal content) — that's a test condition, not a design target (W3C WCAG 2.1 Understanding Reflow). When you obsess over a single pixel width, you're designing for a test, not for people.

So what should I actually focus on instead?

Fluid grids, flexible images, and media queries that respond to content, not devices. That's the core of responsive design (MDN Web Docs). Stop picking breakpoints at "iPhone 15" or "Galaxy S24." Instead, add a breakpoint when your layout starts to break — when text overflows, when images get squished, when the nav becomes unusable. MDN suggests common reference values like 375px, 768px, 1024px, and 1440px, but those are starting points, not commandments. The real inspiration comes from watching your design reflow gracefully at any width.

But what about the 320px reflow test? Isn't that a legal requirement?

Yes, it's a test, but not a design spec. The WCAG 2.1 Reflow requirement is about ensuring content is usable at 400% zoom on a 1280x1024 viewport, which gives you roughly 320px of width. But you don't need to design a separate 320px layout. You need a fluid layout that reflows at any viewport. If your content is in a single column, text wraps, and no horizontal scrolling occurs, you pass. That's the goal. So stop treating 320px as a target and start treating it as a checkpoint.

How do I make my images and text fluid without losing performance?

Use CSS that scales with the viewport. For images, `img { max-width: 100%; height: auto; }` is your friend (MDN Web Docs). For typography, use `clamp()` to set a fluid font size that scales between a minimum and maximum, like `font-size: clamp(1rem, 2.5vw, 2rem)` (MDN Web Docs). But don't use viewport units alone for font sizing — that prevents zooming. Combine them with fixed units, like `calc(1.5rem + 4vw)` (MDN Web Docs). And always set `width` and `height` attributes on images to reserve space and avoid layout shift, which hurts your Core Web Vitals (web.dev).

What about touch targets? Does 320px force me to shrink buttons?

No. Touch targets are about physical size, not viewport width. WCAG 2.2 requires a minimum of 24x24 CSS pixels, but that's a bare minimum — Apple recommends 44x44 points, and Android suggests 48x48 dp (Apple Human Interface Guidelines; Android Developers). So even on a 320px-wide screen, your buttons should be at least 44px tall. That means your layout must accommodate comfortable tap sizes, not squeeze them down. If you're designing for reflow, you'll naturally give interactive elements enough room.

Is color contrast really that important for inspiration?

Absolutely. About 1 in 12 men have color vision deficiency (NEI). So if you're using color alone to convey meaning, you're failing a large chunk of your audience. WCAG 2.1 AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text, and 3:1 for UI components (WCAG 2.1 AA). Low-contrast text is the most common accessibility error, present on 83.9% of home pages (WebAIM Million). So when you're designing, let contrast be your guide. Use labels, icons, and patterns in addition to color. That's not just accessible — it's better design.

So what's the real "inspiration" for responsive design?

It's not a device width. It's the user's ability to read, understand, and interact with your content, regardless of screen size. It's building with a mobile-first mindset, where you start with a single column and add complexity as space allows (MDN Web Docs). It's ensuring your content reflows without loss of information at any width, so you pass the 320px test without ever designing for it. That's the inspiration that matters.

What I'd actually do

Here's my blunt advice: stop designing for 320px. Design for reflow. Use a fluid grid with `fr` units and `clamp()` for typography. Add breakpoints only when content demands it. Test at 320px, sure, but also at 375px, 768px, and 1440px. And while you're at it, check contrast, touch targets, and keyboard navigation. Because in the end, a site that reflows beautifully and works for everyone is more inspiring than any pixel-perfect mockup. Start there.

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
• WCAG 2.1 (AA) - https://www.w3.org/WAI/WCAG21/quickref/
• WebAIM Million - https://webaim.org/projects/million/
• Apple Human Interface Guidelines - https://developer.apple.com/design/human-interface-guidelines/accessibility
• Android Developers - https://developer.android.com/guide/topics/ui/accessibility/apps