Mobile-First

Cos'è il Mobile-First

Mobile-First è un approccio dove si inizia progettando per i dispositivi più piccoli, poi si espande progressivamente verso schermi più grandi. In pratica: gli stili CSS di base sono per il mobile (senza media query), e le media query con min-width aggiungono complessità per schermi più ampi.

Perché Mobile-First

Cinque ragioni concrete per adottare l'approccio mobile-first:

• 📱Traffico mobile: oltre il 60% del traffico web mondiale arriva da dispositivi mobili.
• ⚡Performance: partire dal minimo e aggiungere è più efficiente che partire dal massimo e ridurre.
• 🎯Priorità dei contenuti: lo schermo piccolo costringe a identificare cosa è veramente importante.
• 🔼Progressive Enhancement: ogni utente vede la versione base funzionante, poi progressivamente di più.
• 🔍SEO: Google usa il mobile-first indexing — valuta il tuo sito prima sulla versione mobile.

Confronto Pratico

La stessa griglia di card, nei due approcci. Il risultato visivo è identico, ma il codice mobile-first è più diretto e facile da mantenere.

/* parte dal desktop, poi sovrascrive */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 1024px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .card-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* parte dal mobile, poi espande */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 640px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}

Come Implementarlo

Un processo pratico in 5 passi:

• 1️⃣Scrivi prima gli stili base senza media query. Questa versione deve funzionare su tutti i dispositivi.
• 2️⃣Usa solo min-width nelle media query — mai max-width nell'approccio mobile-first.
• 3️⃣Aggiungi complessità progressivamente — ogni breakpoint deve aggiungere stili, non correggerli.
• 4️⃣Testa partendo dal mobile — rimpicciolisci il browser prima di allargarlo, non il contrario.
• 5️⃣Ottimizza le immagini — usa srcset e sizes per caricare la dimensione corretta per ogni schermo.

/* Passo 1: base = mobile */
.hero { padding: 32px 16px; }
.hero h1 { font-size: 1.75rem; }

/* Passo 2: tablet */
@media (min-width: 640px) {
  .hero { padding: 48px 24px; }
  .hero h1 { font-size: 2.25rem; }
}

/* Passo 3: desktop */
@media (min-width: 1024px) {
  .hero { padding: 80px 48px; }
  .hero h1 { font-size: 3rem; }
}

Pattern Comuni

Cinque pattern che si ripetono in quasi ogni progetto mobile-first:

Tipografia Fluida

La funzione CSS clamp() permette font che scalano fluidamente tra un minimo e un massimo senza media query. Tre valori: minimo, valore fluido (in vw), massimo.

/* clamp(minimum, fluid-value, maximum) */

h1 {
  /* Almeno 1.75rem, cresce con il viewport, mai più di 3.5rem */
  font-size: clamp(1.75rem, 4vw + 1rem, 3.5rem);
}

h2 {
  font-size: clamp(1.375rem, 3vw + 0.75rem, 2.25rem);
}

p {
  font-size: clamp(1rem, 1.5vw + 0.75rem, 1.125rem);
}

.hero-title {
  font-size: clamp(2rem, 5vw + 1rem, 4.5rem);
  line-height: 1.1;
}

Editor Interattivo

Un layout mobile-first completo: header, griglia di card che si espande con la larghezza. Prova a modificare i breakpoint e osserva il comportamento ridimensionando la preview.

<div class="page">
  <header class="site-header">
    <span class="logo">🌐 MyApp</span>
    <nav class="nav">
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Contact</a>
    </nav>
  </header>

  <main class="main">
    <div class="card-grid">
      <div class="card">Card 1</div>
      <div class="card">Card 2</div>
      <div class="card">Card 3</div>
    </div>
  </main>
</div>

Esercizi