Réaliser l'audit d'un site web

Vérifier le comportement fonctionnel du design responsif

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Apprenez à tester les breakpoints ou points de rupture. Ainsi, vérifiez le comportement réactif du design du site.
04:48

Transcription

Nous allons maintenant nous intéresser aux fonctionnalités responsive design du site audité. Pour cela, nous allons commencer par utiliser les outils locaux, proposés par notre navigateur en mode inspection. Puis nous allons utiliser des outils distants, et nous allons mesurer et qualifier la capacité du site à s'afficher en responsive design sur différents types de périphérique. Nous allons commencer par vérifier l'affichage sur ordinateur de bureau. sur tablette et mobile, et comparer les trois. Et nous allons nous intéresser à la notion de « break point », qui est une propriété CSS qui permet d'afficher de manière conditionnelle des éléments, selon la taille de l'écran. Ensuite, nous allons réaliser des screenshot comparatifs bureau-tablette, bureau-mobile. Puis, nous allons affiner encore cette analyse en regardant la capacité du site à gérer les images de manière responsive, et les contenus de manière responsive. Allons-y, commençons à analyser notre site grâce à l'outil local de notre navigateur. Clic droit sur la page sur la petite icône qui représente un périphérique mobile, je réduis la vue de ma console pour laisser de la place à ma prévisualisation, et je vais lui demander de s'adapter à la taille de ma fenêtre. J'ai maintenant une simulation de ce que rend mon site sur un iPad. Il y a quelques changements. Comme nous l'avions déjà remarqué, la navigation passe dans un mode burger menu, et s'ouvre sur le côté. Le titre est centré. Mon moteur de recherche a disparu du header. Ce n'est plus une vidéo mais une photo qui est maintenant affichée. Et les accès rapides sont présentés à la manière d'un menu de navigation, et linéarisés. Ensuite, mes contenus sont aussi linéarisés et j'ai un focus sur les services de la ville, qui est mis en avant. Le reste de mes contenus est assez similaire à la version normale, desktop. mais linéarisé, donc les uns au dessus des autres. Je peux dire que l'exercice de responsive design sur tablette, au format vertical, est plutôt réussi car le focus est mis sur les contenus qui sont importants. Et le traitement des blocs a été retravaillé de manière à optimiser l'affichage. Si je passe en mode horizontal, je retrouve un affichage très proche du mode desktop, avec exactement la même disposition, et uniquement un changement du côté du burger menu, et la vidéo qui est aussi remplacée par une photo. Maintenant, je vais passer sur un périphérique mobile, par exemple un Galaxy S5. Et là, même principe que la tablette au format vertical, avec une transformation homothétique puisqu'une réduction des proportions de chaque bloc, mais l'ordre reste le même, et tout le contenu est linéarisé. Le menu reste menu burger, même fonctionnement. Si je passe sur iPhone, même chose, à part un léger changement de dimensions. Rien ne vous empêche, et c'est même conseillé, de tester sur votre device mobile le comportement du site. Vous pouvez même, via des outils, réaliser une capture vidéo de ce qui est affiché sur votre mobile. Il existe des adaptateurs, par exemple, que vous pouvez brancher sur la prise de votre téléphone et qui vous permettent d'afficher la vidéo de votre écran sur un ordinateur, et donc d'en faire une capture. Il existe aussi des émulateurs de smartphone et tablette, qui vous permettent d'être très fidèle au rendu de votre périphérique mobile. Passons maintenant sur un outil externe. Je vais aller sur le site ami.responsivedesign, et je rentre l'URL de notre site. Et là, d'un coup, le site me propose une prévisualisation de tous mes périphériques, dans un contexte graphique assez joli. Cependant, nous pouvons remarquer une différence de traitement, entre ce que nous avons vu via notre simulation navigateur, et ce que le site propose, puisque, par exemple, la vue iPad, ici, semble être plus large. Et les accès rapides ne sont pas linéarisés, mais bien comme dans la version horizontale de l'iPad. Donc méfions-nous, tout de même, de cet outil qui, certes, offre un rendu assez intéressant et sexy à ajouter dans un audit, mais qui ne semble pas avoir les mêmes réglages que notre simulation. Peut-être qu'il se base sur un iPad de taille plus grande, un écran plus important. Mais il nous faut pour cela aller plus loin, et vérifier comment sont configurés les break points des media queries du site.

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 !