Mobile-First Responsive Design

Mobile-First Responsive Design

🎯 Mission

Implémenter une approche Mobile-First avec Tailwind CSS pour une expérience optimale sur tous les écrans.

📱 Philosophie Mobile-First

Mobile-First = Concevoir d'abord pour mobile, puis améliorer progressivement pour écrans plus grands.

Pourquoi Mobile-First ?

1. ✅ Performance: Charge le minimum nécessaire pour mobile
2. ✅ Priorité au contenu: Force à identifier l'essentiel
3. ✅ Progressive Enhancement: Ajoute des fonctionnalités pour écrans plus grands
4. ✅ Touch-First: Conçu pour le tactile, fonctionne au clavier/souris

Workflow Mobile-First

1. Design mobile (320-768px)
   ↓
2. Test sur mobile (iPhone, Android)
   ↓
3. Ajouter breakpoints tablet (md:)
   ↓
4. Ajouter breakpoints desktop (lg:, xl:)
   ↓
5. Test sur tous écrans

📐 Breakpoints Tailwind

// tailwind.config.ts

export default {
  theme: {
    screens: {
      // Mobile-first approach
      'sm': '640px',   // @media (min-width: 640px)
      'md': '768px',   // Tablet
      'lg': '1024px',  // Desktop
      'xl': '1280px',  // Large desktop
      '2xl': '1536px', // Extra large
    },
  },
};

Utilisation :

{/* Mobile par défaut (320-639px) */}
<div className="text-sm p-4 flex-col">

{/* Tablet (640px+) */}
<div className="sm:text-base sm:p-6">

{/* Desktop (1024px+) */}
<div className="lg:text-lg lg:p-8 lg:flex-row">

🎨 Patterns Mobile-First

Layout: Stack → Grid

// Mobile: Stack vertical
// Desktop: Grid 2 colonnes
<div className="flex flex-col gap-4 lg:grid lg:grid-cols-2 lg:gap-8">
  <div>Column 1</div>
  <div>Column 2</div>
</div>

Navigation: Burger → Horizontal

// components/Navigation.tsx
'use client';

import { useState } from 'react';
import { Menu, X } from 'lucide-react';

export function Navigation() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <nav className="relative">
      {/* Mobile: Burger button */}
      <button
        => setIsOpen(!isOpen)}
        className="lg:hidden p-2"
        aria-label="Toggle menu"
      >
        {isOpen ? <X /> : <Menu />}
      </button>

      {/* Mobile: Full-screen menu */}
      {isOpen && (
        <div className="fixed inset-0 z-50 bg-background lg:hidden">
          <div className="flex flex-col gap-4 p-6">
            <a href="/dashboard" className="text-lg">Dashboard</a>
            <a href="/teams" className="text-lg">Teams</a>
            <a href="/matches" className="text-lg">Matches</a>
          </div>
        </div>
      )}

      {/* Desktop: Horizontal menu (always visible) */}
      <div className="hidden lg:flex lg:gap-6">
        <a href="/dashboard">Dashboard</a>
        <a href="/teams">Teams</a>
        <a href="/matches">Matches</a>
      </div>
    </nav>
  );
}

Typography: Responsive Scales

<h1 className="text-2xl font-bold md:text-3xl lg:text-4xl">
  Responsive Heading
</h1>

<p className="text-sm md:text-base lg:text-lg">
  Responsive paragraph text.
</p>

Spacing: Progressive Enhancement

<div className="p-4 md:p-6 lg:p-8">
  {/* Padding: 16px mobile → 24px tablet → 32px desktop */}
</div>

<div className="gap-2 md:gap-4 lg:gap-6">
  {/* Gap: 8px → 16px → 24px */}
</div>

Images: Responsive & Optimized

import Image from 'next/image';

<div className="relative aspect-video w-full">
  <Image
    src="/club-photo.jpg"
    alt="Club photo"
    fill
    className="object-cover"
    sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
  />
</div>

Cards: Stack → Grid

// Mobile: 1 card full width
// Tablet: 2 cards per row
// Desktop: 3 cards per row
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
  <ClubCard />
  <ClubCard />
  <ClubCard />
</div>

Sidebar: Hidden → Visible

// Mobile: Sidebar hidden, toggle avec button
// Desktop: Sidebar always visible
<div className="flex">
  {/* Sidebar */}
  <aside className="hidden w-64 border-r lg:block">
    <nav className="p-6">
      <a href="/settings">Settings</a>
      <a href="/profile">Profile</a>
    </nav>
  </aside>

  {/* Main content */}
  <main className="flex-1 p-4 md:p-6 lg:p-8">
    {/* Content */}
  </main>
</div>

🖱️ Touch-Friendly Design

Hit Areas: Min 44x44px

// ❌ MAUVAIS - Trop petit pour tactile
<button className="p-1 text-xs">
  Click
</button>

// ✅ BON - Min 44x44px
<button className="min-h-[44px] min-w-[44px] p-3">
  Click
</button>

Spacing: Éviter zones trop proches

// ❌ MAUVAIS - Boutons trop proches
<div className="flex gap-1">
  <button>Edit</button>
  <button>Delete</button>
</div>

// ✅ BON - Spacing confortable
<div className="flex gap-4">
  <button>Edit</button>
  <button>Delete</button>
</div>

Hover: Utiliser @media (hover: hover)

// CSS avec hover conditionnel
<button className="bg-primary text-white hover:bg-primary/90 lg:hover:bg-primary/80">
  Click
</button>

/* globals.css */

/* Hover uniquement sur devices avec souris */
@media (hover: hover) {
  .hover\:bg-primary\/90:hover {
    background-color: hsl(var(--primary) / 0.9);
  }
}

📋 Patterns Complets

Dashboard Layout

// app/(dashboard)/coach/page.tsx

export default function CoachDashboard() {
  return (
    <div className="min-h-screen">
      {/* Header */}
      <header className="border-b p-4 md:p-6">
        <h1 className="text-xl font-bold md:text-2xl lg:text-3xl">
          Dashboard Coach
        </h1>
      </header>

      {/* Main content */}
      <main className="p-4 md:p-6 lg:p-8">
        {/* Stats grid: 1 col mobile → 2 cols tablet → 4 cols desktop */}
        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
          <StatCard title="Membres" value={42} />
          <StatCard title="Équipes" value={3} />
          <StatCard title="Matchs" value={12} />
          <StatCard title="Victoires" value={8} />
        </div>

        {/* Content sections: Stack mobile → Side-by-side desktop */}
        <div className="mt-8 flex flex-col gap-6 lg:flex-row lg:gap-8">
          {/* Recent activity */}
          <section className="flex-1">
            <h2 className="mb-4 text-lg font-semibold md:text-xl">
              Activité récente
            </h2>
            <ActivityList />
          </section>

          {/* Quick actions */}
          <aside className="lg:w-80">
            <h2 className="mb-4 text-lg font-semibold md:text-xl">
              Actions rapides
            </h2>
            <QuickActions />
          </aside>
        </div>
      </main>
    </div>
  );
}

Form Layout

// features/club-management/components/ClubCreationForm.tsx
'use client';

export function ClubCreationForm() {
  return (
    <form className="space-y-6">
      {/* Form sections: Stack mobile → 2 cols desktop */}
      <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
        {/* Club info */}
        <div className="space-y-4">
          <h3 className="text-base font-semibold md:text-lg">
            Informations du club
          </h3>

          <div>
            <label className="text-sm font-medium">Nom du club</label>
            <input
              type="text"
              className="mt-1 w-full rounded-md border p-3"
            />
          </div>

          <div>
            <label className="text-sm font-medium">Description</label>
            <textarea
              rows={4}
              className="mt-1 w-full rounded-md border p-3"
            />
          </div>
        </div>

        {/* Contact info */}
        <div className="space-y-4">
          <h3 className="text-base font-semibold md:text-lg">
            Contact
          </h3>

          <div>
            <label className="text-sm font-medium">Email</label>
            <input
              type="email"
              className="mt-1 w-full rounded-md border p-3"
            />
          </div>

          <div>
            <label className="text-sm font-medium">Téléphone</label>
            <input
              type="tel"
              className="mt-1 w-full rounded-md border p-3"
            />
          </div>
        </div>
      </div>

      {/* Actions: Stack mobile → Row desktop */}
      <div className="flex flex-col gap-3 sm:flex-row sm:justify-end">
        <button
          type="button"
          className="min-h-[44px] rounded-md border px-6 py-2"
        >
          Annuler
        </button>
        <button
          type="submit"
          className="min-h-[44px] rounded-md bg-primary px-6 py-2 text-white"
        >
          Créer le club
        </button>
      </div>
    </form>
  );
}

Modal: Full-screen mobile → Centered desktop

// components/ui/modal.tsx
'use client';

import { X } from 'lucide-react';

export function Modal({ children, onClose }: Props) {
  return (
    <div className="fixed inset-0 z-50 flex items-end justify-center bg-black/50 sm:items-center">
      {/* Modal content */}
      <div className="relative w-full rounded-t-2xl bg-white sm:max-w-lg sm:rounded-2xl">
        {/* Close button */}
        <button
         
          className="absolute right-4 top-4 min-h-[44px] min-w-[44px] p-2"
          aria-label="Close"
        >
          <X />
        </button>

        {/* Content with responsive padding */}
        <div className="p-6 sm:p-8">
          {children}
        </div>
      </div>
    </div>
  );
}

Table: Responsive avec horizontal scroll

// components/MembersTable.tsx

export function MembersTable({ members }: Props) {
  return (
    <div className="overflow-x-auto">
      <table className="w-full min-w-[600px]">
        <thead>
          <tr className="border-b">
            <th className="p-3 text-left text-sm font-medium">Nom</th>
            <th className="p-3 text-left text-sm font-medium">Email</th>
            <th className="p-3 text-left text-sm font-medium">Rôle</th>
            <th className="p-3 text-right text-sm font-medium">Actions</th>
          </tr>
        </thead>
        <tbody>
          {members.map((member) => (
            <tr key={member.id} className="border-b">
              <td className="p-3 text-sm">{member.name}</td>
              <td className="p-3 text-sm">{member.email}</td>
              <td className="p-3 text-sm">{member.role}</td>
              <td className="p-3 text-right">
                <button className="min-h-[44px] min-w-[44px] p-2">
                  Edit
                </button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

🔍 Testing Responsive

Breakpoints à tester

📱 Mobile:  320px (iPhone SE), 375px (iPhone 12), 414px (iPhone 14 Pro Max)
📱 Tablet:  768px (iPad), 820px (iPad Air), 1024px (iPad Pro)
💻 Desktop: 1280px, 1440px, 1920px

Chrome DevTools

1. F12 → Toggle device toolbar
2. Tester chaque breakpoint
3. Vérifier touch targets (Show rulers)
4. Tester orientation portrait/landscape

Browser Testing

# Mobile
- Safari iOS (iPhone)
- Chrome Android

# Desktop
- Chrome, Firefox, Safari, Edge

✅ Checklist Mobile-First

• Design mobile AVANT desktop
• Classes Tailwind sans préfixe = mobile (base)
• Breakpoints progressifs (sm:, md:, lg:)
• Typography responsive (text-sm → text-base → text-lg)
• Spacing responsive (p-4 → p-6 → p-8)
• Images avec sizes attribute
• Touch targets min 44x44px
• Navigation: Burger mobile → Horizontal desktop
• Modals: Full-screen mobile → Centered desktop
• Tables: Horizontal scroll ou cards sur mobile
• Forms: Stack mobile → Grid desktop
• Testé sur vrais devices (iPhone, Android)

🚨 Erreurs Courantes

1. Desktop-First (MAUVAIS)

// ❌ MAUVAIS - Desktop par défaut, puis mobile
<div className="grid grid-cols-3 gap-8 md:grid-cols-1 md:gap-4">

// ✅ BON - Mobile par défaut, puis desktop
<div className="grid grid-cols-1 gap-4 lg:grid-cols-3 lg:gap-8">

2. Touch Targets Trop Petits

// ❌ MAUVAIS - 24x24px (trop petit)
<button className="p-1">
  <Icon size={16} />
</button>

// ✅ BON - Min 44x44px
<button className="min-h-[44px] min-w-[44px] p-3">
  <Icon size={20} />
</button>

3. Texte Trop Petit sur Mobile

// ❌ MAUVAIS
<p className="text-xs">Long paragraph...</p>

// ✅ BON - Lisible sur mobile
<p className="text-sm md:text-base">Long paragraph...</p>

4. Hover sur Mobile (Inutile)

// ❌ MAUVAIS - Hover sur mobile = pas d'effet
<button className="hover:bg-blue-500">Click</button>

// ✅ BON - Active pour tactile, Hover pour souris
<button className="active:bg-blue-500 lg:hover:bg-blue-500">
  Click
</button>

5. Layout Cassé sur Petits Écrans

// ❌ MAUVAIS - Fixed width
<div className="w-[600px]">Content</div>

// ✅ BON - Responsive width
<div className="w-full max-w-2xl">Content</div>

📚 Skills Complémentaires

• atomic-component : Composants responsive
• suspense-streaming : Skeleton responsive
• view-transitions : Transitions smooth sur mobile

Rappel : TOUJOURS design mobile AVANT desktop = Meilleure UX et performance.