Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

Réaliser l'audit d'un site web

Analyser le contenu réactif

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Vérifiez si le site propose des contenus responsifs. Ainsi, vous allez comprendre comment fonctionne un contenu web réactif.
04:49

Transcription

Nous allons maintenant nous concentrer sur des fonctionnalités responsive un peu plus fines, avec la notion d'image responsive et de contenu responsive. On va commencer par la partie contenu. Alors, les contenus responsive, ce n'est pas vraiment un terme que l'on retrouve sur internet, on parle plutôt de site adaptatif. Et d'ailleurs souvent, cette notion est confrontée à celle de site responsive design. En réalité, les deux sont parfaitement compatibles. Pour faire simple, un contenu responsif, comme je l'appelle, est un contenu qui s'affiche différemment lorsqu'il est affiché sur un périphérique différent ou dans un contexte différent. Je vais tenter de vous montrer un exemple. Je pourrais avoir ce texte sur un ordinateur de bureau. Donc c'est un texte disons de taille moyenne, de 555 caractères, qui peut s'afficher tout à fait correctement sur un écran d'ordinateur de bureau, par exemple en dessous d'une photo d'actualité. Et en dessous, le même texte tel qu'il s'afficherait sur mobile. La différence est essentielle, le texte pour mobile est réécrit. Ce n'est pas une version raccourcie du texte du dessus, mais bien une version réécrite, qui affiche l'essentiel du contenu du texte au dessus. Alors, bien entendu, le fait de proposer du contenu adaptatif requiert une double saisie. Donc c'est un travail important, qui doit être bien entendu validé par votre client, ou qui doit être validé par une méthodologie de saisie de contenu adaptée. Nous allons maintenant vérifier si notre site contient des contenus adaptatifs, ou si il utilise tout simplement des fonctionnalités de responsive design pour réduire ou modifier l'apparence des contenus. Pour cela, je vais me baser sur deux choses. Je vais d'abord aller consulter mon site, et comparer certains articles en version desktop bureau et en version mobile. Puis je vais retourner voir mes media queries pour voir quel comportement est prévu pour mes zones de contenu. On commence sur le site. Je vais aller consulter une actualité, pour voir si son contenu s'affiche différemment sur ordinateur de bureau ou sur mobile. Voilà mon article. Je redimensionne ma fenêtre. Et je vais recharger la page. Et là, je peux constater que mon contenu ne change pas. Je vais essayer sur une taille encore plus petite. Alors, je recharge ma page, c'est très important, car le contenu adaptatif, en principe, doit être généré par la solution logicielle qui gère les contenus, donc par le CMS, en fonction du device. Donc, logiquement, ce n'est pas un déclenchement via une media queries, mais bien de la programmation, qui va détecter la taille de l'écran et charger le contenu adapté. Les deux solutions sont utilisables, soit les media queries, soit un chargement via de la programmation, mais la technique des media queries pour le contenu adaptatif est un peu moins bonne, puisqu'elle charge en mémoire toutes les données. Elle charge les données à la fois mobiles et les données bureau. Quand il ne s'agit que de texte, ce n'est pas très grave, car le texte ne pèse pas très lourd à charger, mais si il y a des images, la technique de media queries n'est pas optimisée du tout. On a pas envie de charger plusieurs images, surtout si on s'affiche sur un mobile, par exemple. Je reviens sur mon document d'audit. Est-ce que du texte différent est chargé ? Non. Est-ce que des contenus changent d'apparence selon le contexte ? Oui, nous l'avons vu, notamment lors des tests sur mobile. Pour rappel, je repasse sur le site. Sur la page d'accueil. Et nous avons bien un changement d'apparence pour certains contenus. Pareil pour les contenus accès aux services et infos pratiques, tous ces blocs disparaissent et sont affichés via ce raccourci qui ensuite affiche un menu qui donne un accès aux services. Donc j'ai bien des contenus qui changent d'apparence selon le contexte. Quelle méthode, media queries ou développement spécifique ? Nous l'avons vu dans le chapitre sur les media queries, il y a bien des media queries, qui affichent ou cachent des blocs. Pour rappel, j'ai bien les classes hidden-on-small, hidden-on-mobile, avec un display: none qui cache un bloc. Et ici j'ai l'inverse, only-on-small, only-on-mobile, avec un display:block qui affiche, justement, des blocs lorsqu'on est sur mobile. Je vais maintenant passer à la notation.

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 !