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.
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.
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).
ID: pre-launch.user-facing.mobile-responsive
Severity: high
What to look for: Count all viewport meta tags and responsive CSS patterns (media queries, flexbox, grid). Enumerate whether the layout adapts to mobile screen widths (under 768px). Check that a responsive viewport meta tag is present (<meta name="viewport" content="width=device-width, initial-scale=1">). Check that CSS uses responsive techniques: Tailwind responsive prefixes (sm:, md:, lg:), CSS media queries, or a responsive UI framework. Check that layouts do not use fixed-width containers without responsive breakpoints. Look for evidence of mobile-specific layout handling (flex-col on mobile, flex-row on desktop patterns).
Pass criteria: Viewport meta tag is present, and the CSS/layout approach demonstrates responsive design intent (responsive framework or media queries present). At least 1 viewport meta tag and at least 3 responsive CSS patterns must be present.
Fail criteria: No viewport meta tag found, or all layout components use fixed-width containers with no responsive breakpoints.
Skip (N/A) when: Skip for API-only projects with no HTML pages. Signal: project type is api with no frontend pages.
Cross-reference: For cross-browser testing, see cross-browser.
Detail on fail: "No viewport meta tag found" or "All layout containers use fixed pixel widths with no responsive breakpoints — site will not render correctly on mobile devices"
Remediation: Over 60% of web traffic comes from mobile devices. A non-responsive layout loses the majority of potential users:
// app/layout.tsx — viewport meta
export const metadata = { viewport: { width: 'device-width', initialScale: 1 } }
<head>: <meta name="viewport" content="width=device-width, initial-scale=1">.app/layout.tsx via the metadata object or directly in the head.flex-col sm:flex-row, w-full md:w-1/2, etc.For a thorough analysis of mobile responsiveness across your entire codebase, the Mobile Responsiveness Audit covers this in depth.