Responsive mobile-first : la discipline qui évite 80% des bugs UI

Responsive mobile-first : la discipline qui évite 80% des bugs UI

70% du trafic SaaS B2B est mobile en 2026. Designer desktop puis "adapter mobile" = 80% de bugs. La règle : mobile-first ou rien.

Le pattern Tailwind mobile-first

Les classes sans préfixe s'appliquent à mobile. Les breakpoints (sm:, md:, lg:) ajoutent à partir d'une largeur.

<div className="px-4 md:px-8 lg:px-16">

Padding mobile = 16px, tablette = 32px, desktop = 64px. Jamais l'inverse.

Breakpoints Next Generation

| Breakpoint | Largeur | Cible |

|---|---|---|

| (default) | 0-639px | Mobile portrait |

| sm: | 640px+ | Mobile landscape |

| md: | 768px+ | Tablette |

| lg: | 1024px+ | Desktop |

| xl: | 1280px+ | Desktop large |

Patterns critiques

• Touch targets ≥ 44×44px (WCAG). Sur mobile, jamais de bouton 24×24.
• Pas de hover-only. Toute action hover doit avoir un équivalent tap.
• Pas de viewport horizontal. overflow-x: hidden sur body + tester avec DevTools mobile.
• Désactiver les effets coûteux (WebGL, GSAP complexes) sur mobile. Détection window.innerWidth < 768 ou matchMedia.

Anti-pattern : composant qui casse en < 360px

iPhone SE = 375px. Galaxy Fold fermé = 280px. Tester sur 320px minimum. Sinon : layout cassé pour 5-10% des users.

Audit responsive

Chrome DevTools → Device Toolbar → tester 320 / 375 / 768 / 1024 / 1440. Tout layout doit fonctionner sur ces 5 tailles sans scroll horizontal.