Cosa significa «mobile-first»

Fa parte della sezione Frontend pratico del percorso HTML di Coddy. Lezione 6 di 35.

Mobile-first è una strategia di progettazione in cui realizzi prima il tuo sito web per i dispositivi mobili, poi lo migliori progressivamente per gli schermi più grandi.
L’idea principale è che oggi la maggior parte degli utenti naviga sul web con il proprio telefono, quindi partire dagli schermi più piccoli garantisce che il tuo sito funzioni bene per la maggioranza dei visitatori.

Inizia scrivendo gli stili per dispositivi mobili:

body {
  font-size: 16px;
  padding: 10px;
}

Quindi usa le media query per adattare il tuo design agli schermi più grandi:

/* Stili per dispositivi più larghi di 768px */
@media (min-width: 768px) {
  body {
    font-size: 18px;
    padding: 20px;
  }
}

Questo approccio garantisce che il tuo sito funzioni bene prima sugli schermi piccoli, poi migliora l’esperienza per gli utenti sui dispositivi più grandi.

Sfida

Facile

Ti viene fornito del codice HTML con un semplice menu di navigazione. Il tuo compito è applicare uno stile usando l’approccio mobile-first.

1. Prima gli stili per dispositivi mobili

Fai in modo che ogni voce del menu occupi tutta la larghezza del contenitore (disposte verticalmente).
Imposta i link con display: block in modo che occupino tutta la larghezza. Il resto dello stile (colori, bordi ecc.) è a tua scelta. Può avere un aspetto simile a quello mostrato nell’immagine qui sotto.

2. Stili per schermi più grandi

È già fornita una media query per gli schermi min-width: 768px.
Al suo interno, cambia il layout del menu in orizzontale usando display: flex per .menu.
Regola la spaziatura tra le voci del menu in modo che corrisponda all’immagine di esempio qui sotto.

Provalo tu

<!DOCTYPE html>
<html>
<head>
  <title>What “mobile-first” means</title>
  <style>
    /* Write your mobile-first CSS here */
    .menu {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    
    .menu li {
      margin-bottom: 10px;
    }
    
    .menu a {
      
    }
    
    /* Bigger screen styles */
    @media (min-width: 768px) {
      .menu {
       
      }
      
      .menu li {
      
      }
    }
  </style>
</head>
<body>
  <nav>
    <ul class="menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</body>
</html>