Réaliser l'audit d'un site web

Comprendre le fonctionnement des media queries

Testez gratuitement nos 1270 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Cyril Wolfangel vous explique le fonctionnement des media queries. Ensemble, analysez ces media queries dans le cadre du site audité.
08:34

Transcription

Nous allons maintenant nous intéresser aux media queries et essayer de comprendre comment fonctionne cette propriété CSS qui permet d'afficher selon des conditions certains éléments. Il faut savoir que ce sont les media queries qui permettent de faire du responsive design notamment en modifiant la largeur de certains éléments en fonction de la dimension de l'écran. Le fait de pouvoir jouer sur la dimension de l'écran permet de changer l'affichage du site selon les périphériques utilisés. Il est possible d'aller, en réalité, plus loin encore que juste s'adapter à la dimension de l'écran. Nous verrons cela après la démonstration. Ici, nous avons un exemple de code CSS très simple, des colonnes dont la largeur est déterminée de manière standard pour les écrans standard, et ensuite, une modification de la largeur de ces colonnes pour les écrans qui font maximum 768 pixels donc, 768 et en dessous. Dans ce cas, chaque colonne va passer à une largeur de 100%, ce qui va avoir pour effet de linéariser le contenu et d'empiler les contenus les uns au dessus des autres. Nous allons pouvoir tester cet effet avec l'exemple suivant. Nous allons utiliser le site CSSDesk, dans lequel j'ai copié du code HTML et du code CSS. Le code HTML affiche un site simple, avec un header, un menu de gauche, une zone de contenu, une colonne de droite et un footer. J'ai créé des media queries, en bas dans mon CSS. Ici, nous avons le même code que celui que je viens de vous montrer précédemment. En dessous, j'ai rajouté une condition pour tous les écrans en dessous de 1024 pixels, et j'ai changé la couleur du header en rouge. Et puis, en dessous encore, nous avons la condition dont nous avons parlé précédemment, en dessous de 768 pixels, les colonnes passent sur une largeur de 100%, et le header devient vert. Le changement de couleur est juste un exemple de ce que l'on peut faire et nous permet visuellement de bien comprendre quand le déclencheur est activé. Le déclencheur s'appelle un break point. Donc ici, je suis au dessus de 1024. Là, je déclenche le break point 1024. Et maintenant je vais chercher le break point 768. Voilà. Donc je passe en vert, et mes colonnes font toutes 100% de large, donc sont linéarisées et passent les unes au dessus des autres. Nous allons maintenant nous intéresser aux media queries du site audité. et essayer de les identifier et de les retrouver. Allons-y, inspectons le code ! J'annule mon affichage responsive. Clic droit Inspecter. Je rétablis la hauteur de ma console, et je vais maintenant essayer de trouver des CSS. Pour cela, je me concentre sur le code source de ma page, et je cherche, dans le header, le chargement des CSS. Et je vais cliquer sur paris.css. Clic droit. Ouvrir dans une nouvelle tab. Et maintenant, je vais copier tout le code et le coller dans mon éditeur de texte. Coller. Pour ceux qui ont installé un plugin qui permet de réindenter le CSS, il est relativement simple de remettre en forme le CSS pour pouvoir l'analyser plus simplement. Nous allons maintenant essayer de retrouver nos media queries dans le CSS du site audité. Pour cela, soit je recherche visuellement, et là je vois assez facilement cette fameuse balise média, soit je fais une recherche Control-F et je recherche « @media ». Et je peux maintenant facilement identifier les media queries grâce à la petite marque ici dans la colonne de droite. J'ai maintenant mes media queries, et donc je peux facilement les lister. Ici donc, max-width 600 pixels, max-width 1160 pixels. Ici 601 et 1160. Largeur minimum de 1161. Je me rends compte qu'il y a énormément de media queries sur ce site. Je vais maintenant les isoler, afin de pouvoir les lister et les comprendre. J'ai effectué un travail de sélection coupé-collé dans tout le document CSS, afin de ne garder que les media queries. J'ai remarqué que, dans ce site, les CSS utilisaient massivement les media queries et ce de manière successive, c'est à dire que on va décrire un bloc et ses fonctionnalités dans un état normal, et en dessous le décliner avec des media queries. Donc pour chaque bloc, il y a, à chaque fois, plusieurs media queries, ce qui fait qu'il y a énormément de media queries et qu'il est assez difficile de comprendre la manière dont le site est construit. Après analyse, il en ressort qu'il y a deux principaux break points : 768 et 1160. Je vous ai noté les media queries principales et leurs déclinaisons. Donc là je pense qu'il s'agit tout simplement, pour certains sous-blocs, de décliner le break point principal avec un pixel de moins, et en dessous donc, 1160, plutôt pour les grandes tablettes et les ordinateurs. Il y a deux autres media queries : 650 et 1350, qui ne semblent concerner que le footer et le header. Elles sont pour moi donc minimes et peu intéressante à analyser. On remarque qu'il y a des contenus qui vont disparaitre lorsqu'on sera sur des petits devices. Par exemple ici, hidden-on-small, hidden-on-mobile. Donc c'est une classe qui fait disparaitre un bloc lorsqu'on est sur un petit périphérique, type mobile. En dessous, on voit only-on-small. Donc là une classe qui, à l'inverse, fait s'afficher le bloc qui contient cette classe uniquement sur mobile. On remarque donc qu'il y a un travail sur ce site audité de réflection, pour mettre en avant ou cacher des contenus selon le type de périphérique. Dans le reste du fichier, il s'agit principalement de blocs dont le positionnement ou la dimension change selon le media query sélectionné. Nous avons aussi des changements de taille de police, par exemple, des changements de positionnement, des changements d'espacement. Nous n'allons pas pouvoir analyser, bien entendu, l'intégralité du fichier CSS mais vous avez compris le principe. Le site est donc conçu pour être responsive design. Il utilise peu de media queries, puisqu'il y en a peu de break points. Plutôt, puisque il y a beaucoup de media queries, mais uniquement sur deux dimensions principales. Et la construction est assez complexe, puisque les media queries ne sont pas regroupées par break point. mais plutôt traitées après chaque bloc. Si je reviens sur mon document d'audit, je peux remarquer donc que je n'ai pas trois break points, mais uniquement deux, que tablette et mobile sont regroupés, ce qui concorde avec l'analyse que nous avons fait à l'étape précédente, puisque l'apparence selon les devices est bien la même lorsqu'on passe donc de tablette à mobile, et uniquement un rapport homothétique est appliqué. Je vais maintenant compléter les slides suivantes en ajoutant des screenshot qui vont me permettre de conserver l'apparence du site sur tablette, bureau et mobile. Pour cela, je retourne sur mon site, je vais ouvrir un nouvel onglet, je vais aller sur le site ismysiteresponsive.com qui est un autre site intéressant qui me permet de faire des captures de mon site en responsive design. Et je vais utiliser l'extension de mon navigateur qui va me permettre aussi de réaliser des captures. Ensuite, je vais enregistrer en tant qu'image et ajouter dans mon document d'audit. Et voilà le résultat dans mon document d'audit. J'ai bien un point de comparaison entre l'ordinateur de bureau et la tablette. Puis, ordinateur de bureau et mobile. L'objectif étant bien de montrer que le site est différent lorsqu'il est sur mobile, et qu'il est quasiment à l'identique lorsqu'il est sur tablette.

Réaliser l'audit d'un site web

Évaluez la qualité du travail de développement et d'intégration de votre site Internet. Détectez les éventuels problèmes de performance, de compatibilité, etc.

1h47 (24 vidéos)
Aucun commentaire n´est disponible actuellement
 

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !