Pourquoi vous devez commencer à pratiquer le développement mobile d'abord

Si vous avez essayé de coder un site Web réactif, vous avez rencontré ce problème : vous modifiez une petite propriété CSS simple, et cela modifie la mise en page sur différentes tailles d'écran.

Cela vous oblige à vérifier et revérifier que la valeur de marge la plus récente n'a pas détruit le site pour les tablettes ou les téléphones. Bien sûr, vous pouvez facilement résoudre ce problème avec des remplacements spécifiques pour différentes tailles d'écran. Mais au cours d'un projet, les fichiers CSS se remplissent d'exceptions aux problèmes. Ensuite, il y a des exceptions pour les exceptions, qui ont ensuite une exception pour l'exception de l'exception.

Cela se complique rapidement et vous finissez par combattre votre propre code, consommer beaucoup d'heures de projet et perdre lentement votre raison.

Mais n'ayez crainte ! Le développement mobile first est là pour vous éviter les maux de tête, les exceptions d'exceptions et les chargements de page lents.

Que se passe-t-il avec le développement sur ordinateur ?

Développer initialement pour la version de bureau d'un site Web réactif va à l'encontre du flux naturel d'un document CSS. Les fichiers CSS se lisent de manière linéaire de haut en bas, de sorte que chaque propriété CSS est écrasée par tout nouveau style appliqué plus bas dans le document.

En développant pour les grands écrans puis en ajoutant les styles mobiles plus bas dans le document CSS, deux problèmes apparaissent :

1. Toute modification apportée au style du bureau (plus haut dans le document) modifiera l'apparence du site mobile si le nouveau style n'est pas explicitement remplacé pour le site mobile. Créer des lignes supplémentaires de CSS frivole consomme beaucoup d'heures de projet et va à l'encontre du principe du code DRY.
2. Les appareils mobiles commencent à charger une page en rendant tout le style du bureau. Une fois que la version de bureau lourde a terminé le rendu, le style mobile est appliqué. Cela charge des ressources supplémentaires, ce qui signifie que les appareils mobiles mettent encore plus de temps à fournir une page entièrement chargée.

C'est là que le développement axé sur le mobile entre en jeu pour sauver la situation. Cette méthode encourage l'ordre CSS correct (du mobile au bureau de haut en bas), garantissant qu'un appareil n'applique les informations dont il a besoin que lorsqu'il en a besoin.

Voyons quelques solutions à ces problèmes.

À quoi ressemble le rendu sur appareil mobile

Les images sont facilement les plus gros contributeurs à la taille d'un site Web, prenant une éternité à télécharger si un appareil n'est pas connecté au wifi. Supprimer les images supplémentaires de votre style mobile est la meilleure chose que vous puissiez faire pour améliorer la vitesse d'un site.

Passer au mobile d'abord signifie ne diffuser que quelques petites images sur les appareils mobiles. Dans l'exemple ci-dessous, j'ai créé le même document CSS implémenté avec les méthodes de bureau et mobile d'abord.

Si vous utilisez la méthode du bureau d'abord, les appareils mobiles s'afficheront dans l'ordre suivant :

1. Lisez le premier style.
2. Téléchargez la grande image (bientôt remplacée).
3. Rendre l'élément.
4. Lisez le style mobile.
5. Télécharger la petite image (en remplacement de la grande).
6. Effectuez à nouveau le rendu de l'élément.

Cependant, si la méthode mobile-first est utilisée, l'appareil restitue dans cet ordre :

1. Lisez le premier style.
2. Téléchargez la petite image.
3. Ignorez le style de bureau uniquement (car il ne s'applique pas).
4. Effectuez le rendu de l'élément une fois.

Non seulement le site Web a moins d'étapes à parcourir avant de servir une page finie au navigateur, mais il supprime également les appels supplémentaires aux images frivoles qui ne sont pas utilisées !

Notez que les requêtes multimédias passeront de la largeur maximale à la largeur minimale avec le développement mobile d'abord. Les requêtes de largeur maximale s'appliqueront à tous les appareils de moins de 1 000 px, tandis que les requêtes de largeur minimale s'appliqueront aux appareils de plus de 1 000 px.

Le passage à la largeur minimale crée une barrière qui empêche le nouveau style que nous écrivons pour les appareils plus grands d'affecter l'apparence du site sur les appareils plus petits. Cela augmente la vitesse de chargement de vos sites Web réactifs tout en garantissant que tout ce que vous modifiez dans la requête multimédia de bureau uniquement n'affectera pas votre mise en page mobile. C'est un gagnant-gagnant!

Arrête de te battre

Disons que nous travaillons sur un projet dont le fichier CSS est commenté en trois parties principales : ordinateur de bureau, tablette et mobile.

Malheureusement, nous avons suivi la méthode du bureau d'abord, et le site se charge lentement pour les téléphones. Nous avons essayé de réduire la taille des images, d'ajouter la mise en cache du navigateur et même de réduire le code HTML (brut). Mais le site continue de fonctionner pour les nouveaux visiteurs, et il doit être corrigé.

Puisque nous avons construit notre site avec la méthode desktop-first, notre CSS ressemblerait à ceci pour notre élément .header :

Notre objectif est de réduire la quantité de style envoyé au mobile. Pour commencer, nous devons faire un inventaire de ce qui est appliqué à un élément, en notant quand nous écrasons nos propres styles.

Tout d'abord, passons à une approche mobile d'abord. Nous ferons du mobile notre style par défaut, non médiatisé (remarque : ne le faites pas en production, cela casserait le site et rendrait vos clients grincheux).

Examinons à nouveau nos images, car elles ont le plus grand impact sur la vitesse de notre site.

Comme nous ne chargeons pas d'arrière-plan sur les appareils mobiles, nous pouvons supprimer cette propriété. Nous ajouterons les images pour les appareils plus grands plus tard, lorsque cela sera réellement nécessaire. Il en va de même pour la propriété en bas de la marge, ce qui nous laisse avec seulement deux propriétés qui ont réellement besoin d'être appliquées pour le mobile !

Passant à la section tablette, nous devrons déplacer les attributs d'arrière-plan et le rembourrage du style de bureau vers le style de tablette, car la tablette est la prochaine section qui sera rendue.

N'oubliez pas que notre objectif est d'écraser une propriété uniquement si elle change et d'ajouter de nouvelles propriétés uniquement lorsque la modification doit avoir lieu, comme indiqué dans l'image ci-dessous :

Bien mieux ! En examinant comment un appareil mobile rendrait notre CSS fraîchement optimisé, il devient rapidement évident à quel point le développement mobile a un impact sur les petits appareils par rapport à la méthode de bureau.

Travaillez plus intelligemment, pas plus dur

Développer d'abord le bureau crée plus de problèmes qu'il n'en résout. "Le passage à une méthode de développement axée sur le mobile vous permet de travailler intelligemment, pas dur. ”

Lors du développement de sites réactifs, gardez à l'esprit que par défaut, tout ce qui n'est pas à l'intérieur d'une requête multimédia s'affichera. En adaptant le style par défaut (sans requête multimédia) aux appareils mobiles, nous permettons d'envoyer la plus petite quantité d'informations possible à l'appareil le plus facilement affecté par la taille des sites Web.

Les ordinateurs de bureau et les tablettes sont connectés à une connexion Internet rapide 99,999 % du temps, ce qui permet de transmettre de grandes quantités d'informations à grande vitesse. Les téléphones sont les plus susceptibles de charger des informations via des connexions Internet lentes. L'adaptation de vos feuilles de style aux appareils les plus sensibles vous permet de proposer le meilleur site Web possible aux clients.