# Onboarding flow is functional on mobile devices

- **Pattern:** `ab-002335` (`saas-onboarding.activation.mobile-onboarding-functional`)
- **Severity:** medium
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-002335
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-002335)

## Why it matters

More than half of web traffic is mobile. A signup or onboarding flow that overflows on a 375px screen doesn't just frustrate users — it locks out a majority of potential customers before they ever see the product. WCAG 2.2 SC 2.5.5 sets a 44px minimum touch target to prevent mis-taps; Section 508 §502.3.3 requires platform accessibility. A fixed-width onboarding form isn't a cosmetic issue: it's a conversion failure that compounds every day it ships.

## Severity rationale

Medium because broken mobile onboarding blocks a significant portion of users from completing signup, directly cutting conversion without creating a security exposure.

## Remediation

In `src/app/(auth)/layout.tsx`, replace fixed-width containers with responsive fluid layouts:

```tsx
<div className="flex min-h-screen items-center justify-center p-4">
  <Card className="w-full max-w-md">
    {children}
  </Card>
</div>
```

All buttons must use `h-11` (44px) or taller. Audit every form input with `className` containing a fixed `w-[N]px` value and replace with `w-full`. Test at 375px viewport width — if anything scrolls horizontally, it fails.

## Detection

- **ID:** `mobile-onboarding-functional`
- **Severity:** `medium`
- **What to look for:** Count all signup and onboarding screens. For each, check responsive CSS usage: Tailwind responsive prefixes, CSS media queries, fluid layouts. Measure touch target sizes — minimum 44px required. Count any fixed-width containers.
- **Pass criteria:** All signup and onboarding screens use responsive layout patterns. Form inputs, buttons, and interactive elements have touch-target sizes of at least 44 pixels height. No UI element overflows the viewport horizontally at 375px width.
- **Fail criteria:** Signup or onboarding screens use fixed pixel widths that overflow on small screens; form inputs or buttons are too small to tap reliably (under 32px height); modal dialogs overflow the viewport on mobile; horizontal scrolling is required on any onboarding screen.
- **Skip (N/A) when:** The application is explicitly desktop-only (documented in README or marketing copy as requiring a desktop browser, and no mobile-responsive CSS is present anywhere in the project).
- **Detail on fail:** `"Signup form uses fixed 600px width container with no responsive breakpoint. Onboarding modal exceeds viewport on screens narrower than 768px. Submit button height is 28px — below touch target minimum."`
- **Remediation:** In your auth layout at `src/app/(auth)/layout.tsx`, use responsive containers:

  ```tsx
  <div className="flex min-h-screen items-center justify-center p-4">
    <Card className="w-full max-w-md">
      {children}
    </Card>
  </div>
  ```

  Ensure all buttons use `h-11` (44px minimum).
- **Cross-reference:** For a deeper review of mobile responsiveness across the full application, the Mobile Responsiveness Audit covers this in detail.

---

## External references

- wcag 2.5.5
- wcag 1.3.4
- section-508 502.3.3

Taxons: user-experience, accessibility

HTML version: https://auditbuffet.com/patterns/ab-002335