Ce que signifie « mobile-first »

Fait partie de la section Front-end pratique du Journey HTML de Coddy. Leçon 6 sur 35.

Mobile-first est une stratégie de conception qui consiste à créer votre site web d’abord pour les appareils mobiles, puis à l’améliorer progressivement pour les écrans plus grands.
L’idée principale est qu’aujourd’hui, la plupart des utilisateurs naviguent sur le web avec leur téléphone. Commencer par un petit écran garantit donc 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

Vous disposez d’un fichier HTML contenant un menu de navigation simple. Votre tâche consiste à le mettre en forme en utilisant l’approche mobile d’abord.

1. Styles mobiles en premier

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 display: block afin qu’ils occupent toute la largeur. Le reste de la mise en forme (couleurs, bordures, etc.) dépend de vous. Le résultat peut ressembler à ceci dans l’image d’exemple ci-dessous.

2. Styles pour les écrans plus grands

Une requête média est déjà fournie pour les écrans avec min-width: 768px.
À l’intérieur de celle-ci, modifiez la disposition du menu pour la rendre horizontale en utilisant display: flex pour le .menu.
Ajustez l’espacement entre les éléments du menu afin qu’il corresponde à l’image d’exemple ci-dessous.

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>