Lorsque nous concevons des sites Web et planifions la manière dont le contenu de ces sites sera affiché, nous le faisons souvent dans une situation idéale. Les titres et les zones de texte sont conçus avec une certaine longueur, tandis que les images qui accompagnent ce texte sont conçues pour afficher des dimensions leur permettant de fonctionner comme prévu dans la conception globale. Même si ces éléments sont quelque peu fluides dans le cadre de la création d'un site Web réactif (ce qu'ils devraient être), il y aura une limite à leur flexibilité.
Si vous déployez un site Web sur un CMS (système de gestion de contenu) et autorisez les clients à gérer ce site et à ajouter du nouveau contenu au fil du temps, les limites que vous avez définies seront impérativement mises à l'épreuve. Ayez confiance dans le fait que vos clients trouveront des moyens de modifier le site Web dont vous n'auriez jamais rêvé. Si vous n’avez pas pris en compte des situations bien en dehors des situations idéales avec lesquelles vous avez travaillé dans votre processus de conception, la mise en page de ce site pourrait être gravement compromise. C'est pourquoi il est particulièrement important que vous testiez avec contrainte le contenu du site Web et les aspects de la mise en page du site avant de lancer ce site. Voici quelques conseils pour vous aider.
Test des tailles d'image
Sans aucun doute, le moyen le plus courant pour casser la mise en page de leur site Web consiste à ajouter des images de taille inappropriée (leur impact négatif sur les performances générales d'un site et la lenteur des téléchargements). Cela inclut les images trop grandes et trop petites pour fonctionner correctement sur votre site Web.
Même si vous utilisez CSS pour forcer la taille de ces images dans votre mise en page, les images très largement hors échelle avec vos spécifications d'origine pour le site poseront des problèmes. Si les dimensions d'une image sont incorrectes, votre CSS peut forcer son affichage en utilisant la largeur et la hauteur appropriées, mais l'image elle-même et son rapport de format peuvent être déformés. Cela aura certainement un effet négatif sur l'apparence de votre site, car une image trop petite sera "agrandie" et perdra de la qualité. Une image trop grande et réduite en CSS permet de conserver son aspect et sa qualité, mais la taille du fichier peut être déraisonnable en raison de son utilisation.
Lorsque vous testez le travail de votre site Web, veillez à ajouter des images ne correspondant pas à votre objectif. Ajoutez à cela les techniques CSS et d'image réactive qui répondent à ces défis en redimensionnant l'image ou, en cas de format d'image incorrect, en envisageant également d'utiliser quelque chose comme la propriété de clip CSS pour rogner l'image au besoin.
Tester d'autres médias
En plus des images, testez également d'autres supports tels que des vidéos sur votre site et voyez comment ces éléments apparaîtront dans votre mise en page en utilisant différentes valeurs de dimensionnement et de format. Une fois encore, prenez en compte le caractère réactif de votre site et son fonctionnement pour différentes tailles d’appareils et d’écrans.
Test des en-têtes de texte
Après les images, les en-têtes de texte constituent le prochain domaine Web qui pose le plus de problèmes avec les sites Web en direct gérés par des professionnels autres que les professionnels de l'internet. Ce sont les lignes de texte (supposées) courtes qui vont souvent commencer le contenu d'une page ou d'une section de cette page. Le texte situé au-dessus de ce paragraphe et intitulé «Test des en-têtes de texte» en est un exemple.
Si vous avez conçu un site pour accueillir une rubrique telle que celle-ci:
"Test des en-têtes de texte"
Mais votre client utilise le CMS pour ajouter un article avec un titre comme celui-ci:
«Test des en-têtes de texte sur une variété de pages Web, toutes avec des exigences de tailles et des besoins d'utilisateurs différents»
Ensuite, votre mise en page ne pourra peut-être pas accueillir correctement tout ce texte supplémentaire. Exactement comme vous devriez tester vos images et vos médias en ajoutant des entrées qui dépassent de loin les tailles pour lesquelles vous aviez initialement conçu, vous devriez le faire avec des en-têtes de texte pour vous assurer qu'ils sont suffisamment souples pour afficher efficacement les lignes les plus longues, comme le un ci-dessus.
Test de la longueur du texte
En ce qui concerne le texte, vous souhaiterez également tester différentes longueurs de texte pour le contenu principal des pages. Cela inclut le texte très très long ainsi que le texte très très court - ce qui peut en fait être le problème qui condamne de nombreuses mises en page.
Étant donné que les pages Web, par nature, s'agrandissent pour s'adapter à la hauteur du texte qu'elles contiennent, les pages contenant beaucoup de texte sont généralement simplement redimensionnées en hauteur, si nécessaire. Sauf si vous avez limité la hauteur de la page (que vous avez ne devrait pas Si vous voulez que votre page soit flexible), le texte supplémentaire ne devrait pas poser de problème. Trop peu de texte est un autre problème - et de nombreux concepteurs oublient de le tester dans leur processus de conception.
Trop peu de texte peut donner l'impression qu'une page est incomplète, voire cassée. Veillez donc à redimensionner le contenu de votre page pour voir ce qui se passe dans ces cas-là et à apporter les ajustements nécessaires au CSS de votre site pour gérer ces situations.
Test de zoom de page
Les personnes ayant des problèmes de vision peuvent utiliser la fonctionnalité de zoom de page d'un navigateur Web pour augmenter la taille de votre page Web. Si une personne effectue un zoom important, votre mise en page peut s’effondrer. C'est l'une des raisons pour lesquelles vous souhaitez peut-être utiliser les ME comme unité de mesure des tailles de police de votre site Web ainsi que de vos requêtes multimédia. Les EM étant une unité de mesure relative (basée sur la taille de texte par défaut de ce navigateur), ils sont plus propices à une présentation fluide et flexible des sites Web.
Testez votre site Web pour le zoom de page et ne vous arrêtez pas à un ou deux niveaux de zoom.Zoomez sur votre site de haut en bas à différents niveaux pour que vos pages réagissent comme prévu.
Ne pas oublier la vitesse de téléchargement et les performances
Lorsque vous testez les implications en termes de mise en page des décisions client, n'oubliez pas de prêter également attention à l'impact de ces décisions sur les performances d'un site. Les images et le contenu que ces clients ajouteront pourraient entraver la vitesse de téléchargement d’un site et compromettre gravement la convivialité du site. Planifiez l'impact de ces ajouts et faites votre part du processus de développement pour minimiser ces effets.
Si votre site Web est construit avec un budget de performances, partagez ces informations avec vos clients et montrez-leur comment tester une page Web pour obtenir des statistiques de performances. Expliquez-leur qu’il est important de maintenir les seuils établis pour la taille de la page et la vitesse de téléchargement, et montrez-leur que les ajouts qu’ils apportent peuvent avoir une incidence sur le site dans son ensemble. Prenez le temps de leur apprendre à garder le site en bon état. Au sujet de la formation…
La formation du client est essentielle
Il est important de soumettre à une contrainte le test des images, du texte et des autres éléments de page de votre site et de créer des styles qui tiennent compte des situations extrêmes, mais cela ne remplace en aucun cas la formation du client. Votre travail de pare-balles sur un site doit s’ajouter au temps que vous passez à former vos clients à l’entretien et à la gestion efficaces de leur site. En fin de compte, un client bien formé qui comprend ses responsabilités et l’impact des décisions qu’il prend sur un site sera un atout précieux pour vos efforts visant à maintenir ce site à son meilleur.
