Ce que signifie « mobile-first »

Fait partie de la section Practical Frontend du Journey HTML de Coddy — leçon 6 sur 35.

Mobile-first est une stratégie de conception où vous construisez votre site web pour les appareils mobiles en premier, puis vous l'améliorez progressivement pour les écrans plus grands.
L'idée principale est que la plupart des utilisateurs naviguent désormais sur le web sur leurs téléphones, donc commencer petit garantit que votre site fonctionne bien pour la majorité des visiteurs.

Commencez par écrire les styles mobiles :

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

Utilisez ensuite des requêtes média pour adapter votre conception aux écrans plus grands :

/* Styles pour les appareils de plus de 768px de large */
@media (min-width: 768px) {
  body {
    font-size: 18px;
    padding: 20px;
  }
}

Cette approche garantit que votre site fonctionne d'abord bien sur les petits écrans, puis améliore l'expérience pour les utilisateurs sur des appareils plus grands.

Défi

Facile

On vous donne un code HTML avec un menu de navigation simple. Votre tâche est de le styliser en utilisant l'approche mobile-first.

1. Styles mobiles d'abord

Faites en sorte que chaque élément du menu occupe toute la largeur du conteneur (empilés verticalement).
Faites en sorte que les liens soient en display: block pour qu'ils occupent toute la largeur. Le reste du style (couleurs, bordures, etc.) dépend de vous. Cela peut ressembler à l'image d'exemple ci-dessous.

2. Styles pour écrans plus larges

Une media query est déjà fournie pour les écrans de min-width: 768px.
À l'intérieur de celle-ci, changez la disposition du menu en horizontal en utilisant display: flex pour la classe .menu.
Ajustez l'espacement entre les éléments du menu pour qu'il corresponde à l'image d'exemple ci-dessous.

Aide-mémoire

Le "Mobile-first" est une stratégie de conception où vous construisez votre site web d'abord pour les appareils mobiles, puis vous l'améliorez progressivement pour les écrans plus grands.

Commencez par écrire les styles mobiles :

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

Ensuite, utilisez des requêtes média (media queries) pour adapter votre conception aux écrans plus grands :

/* Styles for devices wider than 768px */
@media (min-width: 768px) {
  body {
    font-size: 18px;
    padding: 20px;
  }
}

Cette approche garantit que votre site fonctionne bien sur les petits écrans en priorité, puis améliore l'expérience pour les utilisateurs sur des appareils plus grands.

Essayez vous-même

<!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>