Mobile responsiveness is verified
Why it matters
Over 60% of web traffic globally originates from mobile devices. A non-responsive layout — fixed-width containers with no breakpoints — renders unreadably small on phones, forcing users to pinch-zoom or abandon entirely. WCAG 2.2 SC 1.4.4 (Resize Text) and 1.3.4 (Orientation) mandate that content reflows at different viewport sizes. Beyond accessibility compliance, a broken mobile experience means most of your launch-day traffic lands on an unusable product, suppressing conversion and retention from day one.
Severity rationale
High because a non-responsive layout makes the application unusable for the majority of mobile visitors, violating WCAG 2.2 SC 1.4.4 and directly suppressing conversion at launch.
Remediation
Confirm the viewport meta tag is present and that layout components use responsive CSS techniques — Tailwind responsive prefixes, CSS media queries, or a responsive UI framework.
// app/layout.tsx — viewport meta (Next.js App Router)
export const metadata = {
viewport: { width: 'device-width', initialScale: 1 },
}
If using Tailwind, apply responsive prefixes: flex-col sm:flex-row, w-full md:w-1/2. Avoid fixed pixel widths on containers — use max-w-* with w-full. Test at 375px (iPhone SE) and 390px (iPhone 14) in browser dev tools. Pay special attention to navigation menus (must collapse), forms (must remain tappable), and tables (must scroll horizontally, not overflow).
DetectionPro
The detection method for this pattern is part of AuditBuffet Pro.
The full method (what to look for, pass and fail conditions, and how results get reported) ships inside the Pre-Launch Checklist Audit. The pattern definition, severity rationale, and remediation remain openly licensed under CC-BY-4.0.
External references
- wcag:2.2 · 1.4.4 — Resize text — text can be resized without assistive technology up to 200% without loss of content or functionality
- wcag:2.2 · 1.3.4 — Orientation — content does not restrict its view and operation to a single display orientation
- section-508:2018-refresh · 502.3.1 — Object Information — supports responsive/zoom
Taxons
History
- 2026-04-18·v1.0.0·Initial import from pre-launch·automated