Le site donne dès à présent envie de manger des nouilles en grande quantité ! Bravo !
Cependant, nous n’avons pas tout à fait fini. Les personnes consultant ce site sur mobile n’ont pour l’instant pas le droit de manger des nouilles, et c’est un problème de taille !
Voyons ensemble comment y remédier.
Apprenez-en plus sur le responsive
Comme vous avez pu le constater, la maquette qui vous a été fournie contient une version adaptée pour la navigation mobile.
Cette version du site est une vue “Responsive” adaptée pour le mobile.
Le Responsive Design est une approche de la conception Web qui garantit que la mise en page, les images et les autres éléments d'un site Web s'adaptent automatiquement à la taille et à l'orientation de l'écran de l'utilisateur.
Cette approche permet une expérience de visualisation optimale, une navigation facile et une meilleure lisibilité sur divers appareils, tels que les ordinateurs de bureau, les tablettes et les smartphones.
La norme en matière de Responsive Design de nos jours est de travailler en “Mobile First”, ce qui veut dire que l’on construit d’abord l’expérience du site en mobile, pour aller vers le Desktop.
J’ai du mal à saisir l’intérêt de faire d’abord le site en mobile, ça marche aussi de faire l’inverse, non ?
Effectivement, il est également possible de construire d’abord l’expérience Desktop et d’aller vers le mobile. La subtilité réside dans l’expérience utilisateur proposée.
Lorsque vous construisez un site en Desktop, vous avez beaucoup de place, vous ajoutez donc tout ce qui est bon pour l’utilisation optimale de votre site. Le problème intervient quand vous passez en mobile : il va falloir retirer des éléments pour que ça rentre, et vous risquez de brouiller la lisibilité de votre expérience utilisateur en retirant des éléments importants.
Ce problème n’apparaît pas de cette façon en “Mobile First”, puisque si l’expérience est propre et lisible en mobile, elle devrait aussi l’être avec plus de place à l’écran.
Pourquoi je vous dis tout ça alors que la maquette Yummy Nouilles est en “Desktop First”, et que nous n’allons prévoir qu’un Breakpoint ?
Pour que vous le sachiez, et pour ajouter une corde à votre arc professionnel !
Choisissez votre premier Breakpoint
La maquette de Yummy Nouilles comprend deux vues clairement identifiées :
Une première vue en Desktop ;
Une seconde en mobile.
En principe, la norme veut que l’on définisse 3 tailles d’écran :
Mobile – 0 à <768px ;
Tablet – 768px à <1024px ;
Desktop – les tailles au-dessus.
Parfois, la définition des Breakpoints peut varier en fonction de l'expérience utilisateur souhaitée. Il est possible d'avoir des Breakpoints supplémentaires pour répondre aux besoins spécifiques du projet.
Il est important de noter qu'une taille maximale de 1440 px est très souvent utilisée. En effet, avec des écrans très larges, le fait de choisir une taille max permet de préserver l’expérience utilisateur.
Nous avons utilisé des rem partout sur le site, pourquoi ne pas en utiliser ici aussi ?
Rem est une unité relative, ce qui sous-entend que sa valeur peut changer. Il serait possible en théorie d’utiliser des rem pour gérer ses Breakpoints, mais en pratique cela rendrait le comportement responsive variable, et ce n’est pas souhaitable. Lorsque l’on a un écran de tablette et que l’on zoome, on n’a pas envie d’avoir la version Desktop du site !
Lorsque l’on développe, on utilise cette grille de largeur pour définir ses Breakpoints, et y appliquer du code CSS spécifique s’ils sont touchés.
En réalité, il n’y a pas une seule manière de configurer ses Breakpoints et pour le bien de ce cours, nous allons nous contenter de choisir un Breakpoint descendant à 768 px.
À la fin du fichier main.css (juste après le sélecteur :root , donc), ajoutez la Media Query suivante :
@media (max-width: 768px) {
}Ici, toutes les règles CSS qui seront écrites dans la Media Query seront appliquées si et seulement si la taille de l’écran est inférieure à 768 px.
À noter qu’il est important de placer la Media Query à la fin du fichier CSS pour que les règles qu’elle contient puissent “écraser” les règles précédentes si nécessaire. En effet, en CSS, lorsque deux règles identiques sont définies, c'est la dernière règle qui prend le dessus sur la précédente. On parle alors de “surcharge”.
Maintenant que notre Media Query est en place, nous allons donc ajouter les règles qui surchargeront celles de :root une fois en mobile.
Pour récupérer les valeurs à appliquer, reportez-vous directement sur le Figma comme dans le chapitre précédent.
@media (max-width: 768px) {
:root {
/* Mobile Variables */
--body-font-size: 1rem;
--body-highlight-font-size: 1rem;
--header-font-size: 2.5rem;
--title-font-size: 1.25rem;
--body-line-height: 1.25rem;
--body-highlight-line-height: 1.25rem;
--header-line-height: 3rem;
--title-line-height: 1.5rem;
}
}Maintenant que les textes ont la bonne forme, il est l’heure de s’attaquer au reste du site !
Dans le fichier appBar.css , nous allons créer ensemble la version mobile, et vous pourrez ensuite vous occuper du reste du site.
Comme nous l’avons vu plus tôt, appliquez la Media Query à la suite dans le fichier appBar.css :
@media (max-width: 768px) {
.appBar {
padding-left: 0;
padding-right: 0;
justify-content: center;
}
.appBar__icon {
width: 3rem;
height: 3rem;
}
.appBar__nav {
padding-left: 1rem;
}
}Maintenant que vous pouvez naviguer dans votre site en mobile, appliquez le style mobile à chaque élément en respectant les designs fournis !
Vous pouvez retrouver la version corrigée et finale du code ici.
En résumé
Un Responsive Design permet une navigation fluide quelle que soit la taille d’écran.
Il est préférable de penser l’expérience en mobile avant de remonter vers le Desktop.
Les Media Queries permettent d’appliquer du code CSS au passage d’un Breakpoint.
On n’utilise pas de rem pour les Breakpoints. Pixels only !🤘
Et voilà, vous avez maintenant les clés pour aborder la suite de votre parcours de développeur Web plus sereinement. Pour ma part, j’ai dû apprendre tout ça au fur et à mesure de mes premiers jobs, et au prix de beaucoup de temps passé à faire et défaire des composants…
C’est vrai que toutes ces notions et ces bonnes pratiques peuvent dérouter ou donner l’impression d’être superflues, mais faites-moi confiance, elles vous seront toujours utiles. Vous verrez qu’avec l’expérience, elles deviennent des automatismes inconscients qui font gagner de précieuses heures et ravissent vos clients !
Merci d’avoir suivi ce cours en ma compagnie. 🥷
