L'origine du «mobile d'abord»
L'idée de «mobile first» en ce qui concerne le Responsive Design vient d'une époque où les navigateurs pour appareils mobiles étaient beaucoup moins performants que ce que vous trouveriez sur un appareil de bureau. Beaucoup d'entre eux ne prennent pas du tout en charge les requêtes multimédias, donc l'idée de créer un design de bureau sophistiqué, puis de coller des styles à l'aide de requêtes multimédias pour une fenêtre étroite, tombe à plat sur le visage.
L'absence de prise en charge des requêtes média est en fait la première requête média.
- Bryan Rieger
Le mobile d'abord est-il toujours pertinent?
Malgré le fait que les navigateurs pour appareils mobiles ont rattrapé leurs homologues de bureau, "mobile first" est toujours le moyen le plus logique d'écrire vos styles.
Je préfère penser en termes "éviter d'annuler les déclarations de style précédentes". Une approche additive, plutôt que d'écrire des styles et de les remplacer plus tard, conduira presque toujours à une feuille de style plus compacte. Les styles appropriés pour la plupart / tous les appareils doivent être trouvés en dehors des requêtes multimédias, tandis que les styles qui ne s'appliquent qu'à une fenêtre spécifique doivent être derrière une requête multimédia.
Comparez une approche «bureau d'abord»:
.column {
float: left;
width: 50%;
}
@media all and (max-width: 50em) {
.column {
float: none;
width: auto;
}
}
Vers une approche "mobile first":
@media all and (min-width: 50em) {
.column {
float: left;
width: 50%;
}
}
Les résultats sont les mêmes, mais le dernier est plus compact. Exemples de styles copiés sans vergogne à partir des 7 habitudes de requêtes médiatiques hautement efficaces de Brad Frost .
Il y a quelques rares exceptions où "le bureau d'abord" est plus approprié que l'inverse. Le plus notable d'entre eux est lorsque vous faites des choses comme des tableaux réactifs. Les fenêtres plus larges voudront les styles par défaut pour les tableaux, mais une fenêtre étroite voudra remplacer tout cela afin que le contenu puisse être empilé verticalement.
Ne cassez pas vos feuilles de style
Une chose que vous ne devez absolument pas faire est de diviser vos styles réactifs en fichiers CSS individuels et d'utiliser l'attribut media sur l'élément de lien. Cela a pour conséquence indésirable que l'UA télécharge toutes les feuilles de style liées (c'est-à-dire qu'il n'y a pas d'amélioration de la vitesse pour le faire).
<!-- this is bad, don't do this -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
Le code doit donc d'abord être mobile, mais qu'en est-il de l'approche de la conception?
Je suis d'avis que cela n'a pas d'importance. Les dispositions pour toutes les fenêtres pertinentes pour la conception doivent être effectuées (cela peut impliquer aussi peu que 2 ou autant que 5 une fois que vous avez pris en compte les points d'arrêt mineurs dont vous pourriez avoir besoin!), L'ordre n'a pas d'importance à la fin. De nombreux concepteurs manquent de discipline pour commencer avec une disposition de bureau et trouvent que partir d'une disposition mobile est plus facile.
Si vous souhaitez commencer à partir d'une disposition de bureau, vous devez éviter la tentation de remplir tous ces magnifiques espaces blancs avec un encombrement qui n'améliore pas le contenu de cette page. Avez-vous vraiment besoin de cette photo 800x600 d'une femme souriante tenant un téléphone? Cela coûte simplement de l'argent supplémentaire à l'utilisateur mobile pour télécharger des vidéos inutiles, et n'est qu'une distraction visuelle qu'un utilisateur de bureau peut ignorer.