Why Your Mobile-First Site Fails: The 320px Reflow Test You're Skipping

95.9% of home pages fail WCAG 2.1, according to the WebAIM Million study of the top 1,000,000 sites. That's up from 94.8% the year before. So if you're a web designer, the odds are overwhelmingly against you. And the worst part? Most of those failures are preventable—they're not about exotic accessibility features. They're about basic responsive design that respects a 320px viewport.

I'm talking about WCAG's Reflow success criterion (1.4.10). It's the one that says your content must not require two-dimensional scrolling when the viewport is 320 CSS pixels wide. That's roughly the width of an iPhone SE in portrait mode. If your layout forces users to scroll sideways, you're failing. And you're probably failing right now.

The 320px Test: Your New Best Friend

Here's the thing: most of us test responsive designs at 375px, 768px, and 1024px. Those are the common breakpoints MDN mentions. But WCAG's Reflow requirement is stricter: your content must be usable at 320px. That's a 55-pixel difference from the smallest common breakpoint, and it can make or break your layout. A 320px test forces you to confront every fixed-width element, every horizontal overflow, every stubborn flexbox row.

Try it right now on your latest project. Open Chrome DevTools, set the viewport to 320px, and scroll horizontally. If you see anything cut off or a scrollbar, you've got work to do. The fix isn't always easy, but it's necessary—not just for accessibility, but for real-world usability. Plenty of people browse on small, cheap phones, and they deserve a site that doesn't require pinching and panning.

Fluid Grids: The Only Way to Pass

The solution is what MDN calls fluid grids: using relative units like percentages, fr units, em/rem, and vh/vw instead of fixed pixels. But here's the catch—you can't just convert your px to % and call it a day. You need to think about how elements reflow when space shrinks. Flexbox and Grid are your allies, but they only work if you let them wrap and resize.

I've seen designers use flex-wrap: nowrap to keep a row of cards tidy on desktop, then wonder why it overflows at 320px. The answer is simple: you're fighting the viewport. Instead, embrace flexibility. Use minmax() in Grid, set flex-wrap: wrap, and let your images shrink with max-width: 100%; height: auto; (MDN). Those are the building blocks of a reflow-friendly layout.

The Counter-Argument: "But My Client's Audience Is Desktop-Only"

I hear this one all the time. "My client's users are all on desktop, so why bother with 320px?" It's a tempting rationalization, but it's wrong for two reasons. First, Google's mobile-first indexing means your mobile page is the one that gets indexed and ranked (Google Search Central). If your mobile version is broken, your SEO suffers. Second, accessibility isn't a niche concern—it's a legal one. The DOJ's ADA Title II rule now requires state and local governments to meet WCAG 2.1 AA, and the deadline for larger entities is April 24, 2026 (Federal Register). That's not far away, and it's only the beginning.

But even if you're not a government agency, accessibility is good business. The WebAIM Million study found that low-contrast text alone affects 83.9% of home pages. That's a huge chunk of users who can't read your content. And if they can't read it, they'll leave. So the "desktop-only" argument falls apart when you realize that accessibility and SEO are both tied to a well-structured, responsive site.

Beyond 320px: The Other Reflow Requirements

Reflow isn't just about width. WCAG also requires that text can be resized up to 200% without loss of content or functionality (WCAG 2.1 SC 1.4.4). That means your layout should still work when users zoom in on their browsers. And it means you should never use viewport units alone for font sizing, because that prevents zooming (MDN). Instead, use a fluid type approach like font-size: calc(1.5rem + 4vw) or clamp().

Another related criterion: your touch targets need to be big enough. WCAG 2.2 recommends a minimum of 24x24 CSS pixels (Target Size Minimum), but Apple and Android both push for 44x44 or 48x48. If your buttons are too small, you're failing both accessibility and usability. So when you're testing at 320px, make sure your buttons are still tappable. A 320px viewport often means you have to stack elements vertically, which actually gives you more room for bigger targets.

How to Bake 320px Into Your Workflow

Here's my advice: stop treating 320px as a nice-to-have and start treating it as a hard requirement. Add it to your breakpoint list. Test it early and often. Use the loading="lazy" attribute for off-screen images, but also set width and height attributes to prevent layout shift (MDN). And consider using srcset and sizes for responsive images—they're not just about performance; they help ensure images don't overflow.

• Start with a mobile-first approach: design for 320px first, then enhance for larger screens.
• Use relative units for all sizing, and avoid fixed-width containers.
• Test at 320px, 375px, 768px, and 1024px at minimum.

This isn't just about passing a checklist. It's about respecting your users, whether they're on a $100 Android phone or using a screen reader. And it's about future-proofing your site as more people access the web from small devices. The WebAIM Million study shows that 56.1 errors per home page is the norm—you can be better than that.

One more thing: don't forget the viewport meta tag. It's the first step to making your site responsive (MDN). If you don't have <meta name="viewport" content="width=device-width, initial-scale=1.0"> in your head, you're already behind.

Quick tip: When you're testing at 320px, also check that your focus states are visible and not obscured. Keyboard users rely on them, and it's part of the same accessibility package.

Bottom line: The single best move you can make today is to add 320px to your responsive design testing process. If your site passes the 320px reflow test, you'll be ahead of 95.9% of the web. And that's a position worth taking.

Sources

• MDN Web Docs - https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Responsive_Design
• WCAG 2.1 (AA) - https://www.w3.org/WAI/WCAG21/quickref/
• W3C WCAG 2.1 Understanding Reflow - https://www.w3.org/WAI/WCAG21/Understanding/reflow.html
• WebAIM Million - https://webaim.org/projects/million/
• Google Search Central - https://developers.google.com/search/docs/crawling-indexing/mobile/mobile-sites-mobile-first-indexing
• Federal Register (DOJ ADA Title II rule) - https://www.federalregister.gov/documents/2024/04/24/2024-07758/nondiscrimination-on-the-basis-of-disability-in-accessible-web-information-and-technology