Avez-vous un "site web responsive"? Il s’agit d’un site dont la disposition change en fonction du périphérique et de la taille de l’écran du visiteur. La conception Web réactive est maintenant une pratique exemplaire de l'industrie. Il est recommandé par Google et trouvé sur des millions de sites sur le Web. Il existe toutefois une grande différence entre un site Web qui s'adapte simplement à différentes tailles d'écran et un site réellement réactif.
Je vois régulièrement des entreprises remodeler leur site Web et publier un communiqué de presse dans lequel elles vantent les vertus de leur nouveau design convivial pour les mobiles. Lorsque je visite ces sites, ce que je trouve souvent, c’est une mise en page qui s’adapte et se modifie pour s’adapter à différents écrans, mais c’est dans la mesure où ils prennent l’idée de réactivité. Ce n'est pas assez. Un site Web vraiment réactif fait plus que simplement évoluer pour s'adapter à un écran plus petit ou plus grand. Vous trouverez également sur ces sites les traits importants suivants.
1. Performance optimisée
Personne n'aime attendre le chargement d'un site Web. Lorsqu'une personne utilise un appareil mobile avec une connexion qui n'est peut-être pas idéale, la nécessité de charger rapidement un site est encore plus importante.
Alors, comment optimisez-vous les performances de votre site? Si vous démarrez avec un nouveau site dans le cadre d'une refonte, vous devez créer un budget de performances dans le cadre de ce projet. Si vous travaillez avec un site existant et ne partez pas à zéro, la première étape consiste à tester les performances de votre site pour voir où vous en êtes aujourd'hui.
Une fois que vous avez défini les performances de votre site, vous pouvez commencer à apporter les améliorations nécessaires pour augmenter la vitesse de téléchargement. Un bon endroit pour commencer est probablement avec les images de votre site. Les images trop grandes sont le principal responsable en ce qui concerne le ralentissement du chargement des sites. L'optimisation de vos images pour la diffusion Web peut donc réellement aider votre site sur le plan des performances.
La réalité est que l'amélioration des performances du site Web et des vitesses de téléchargement rapides constituent un avantage que tous les visiteurs apprécieront. Après tout, personne ne s'est jamais plaint qu'un site chargé «trop vite», mais si un site prend trop de temps à se charger, il sera absolument impossible de réprimer les personnes, qu'il le fasse «correctement» sur leur écran ou non.
2. Hiérarchie de contenu intelligente
Lorsqu'un site Web est affiché sur un grand écran, vous êtes en mesure de présenter le contenu de différentes façons en raison de la taille considérable de l'écran disponible. Vous pouvez souvent afficher des messages et des images importants, des mises à jour d'actualités, des informations sur les événements et la navigation sur le site à la fois. Cela permet au visiteur de numériser facilement et rapidement le contenu de la page entière et de décider de ce qui est important pour eux.
Ce scénario change radicalement lorsque vous modifiez la conception de votre site pour le transformer en appareils à petit écran, comme un téléphone portable. Soudain, vous travaillez avec une fraction de l’écran que vous aviez auparavant. Cela signifie que vous devez décider de ce qui apparaîtra en premier sur le site, de ce qui va suivre, etc. Au lieu de tout voir en même temps, vous n’avez probablement que l’espace pour montrer une ou deux choses (dont l’une est la navigation). Cela signifie que les décisions de la hiérarchie doivent être prises. Malheureusement, ce qui détermine souvent ce qui apparaît en premier à l'écran, puis en second lieu, etc. est la manière dont la page elle-même est codée. Il est plus facile, lors de la création d'un site responsive, d'afficher tout ce qui est en premier dans le code en premier à l'écran, suivi du deuxième élément dans le code, etc. Malheureusement, ce qui peut être le plus important sur un périphérique peut ne pas être aussi critique sur un autre. Un site véritablement réactif comprend que la hiérarchie du contenu doit changer en fonction de la situation et qu'il doit être intelligent en ce qui concerne l'affichage.
Les améliorations apportées aux techniques de mise en forme CSS, notamment CSS Grid Layout, Flexbox, etc., offrent aux concepteurs et aux développeurs Web davantage d’options pour la présentation intelligente du contenu, au lieu d’être gênés par l’ordre exact des zones de contenu du code HTML. Tirer parti de ces nouvelles techniques de mise en page deviendra encore plus important à mesure que le paysage des appareils et les besoins des utilisateurs de notre site continuent d’évoluer.
3. Expériences qui prennent en compte les forces et les faiblesses d’un appareil
Rester sur le sujet des appareils - chaque appareil que quelqu'un peut utiliser pour visiter votre site a à la fois des forces et des faiblesses inhérentes à cette plate-forme. Un excellent site réactif comprend les capacités et les limitations de différents appareils et les utilise pour créer des expériences personnalisées qui conviennent le mieux à l’appareil que le visiteur peut utiliser à ce moment-là.
Par exemple, un téléphone cellulaire comprend un certain nombre de fonctionnalités que vous ne retrouveriez pas sur un ordinateur de bureau traditionnel. Le GPS est un exemple de fonction centrée sur le mobile (oui, vous pouvez également obtenir des informations de localisation générales sur les ordinateurs de bureau, mais le GPS de l'appareil est beaucoup plus précis). Votre site peut utiliser les informations GPS pour envoyer intelligemment à une personne des informations de direction pas à pas très détaillées et spécifiques, ou des offres spéciales en fonction de leur emplacement actuel.
Un autre exemple pratique de ce principe serait un site qui comprend le type d’affichage que vous utilisez et envoie les images les mieux adaptées à cet affichage. Si vous avez un écran avec une densité de pixels élevée, vous pouvez décider d’envoyer des images de meilleure qualité à cet écran. Cependant, ces mêmes images seraient inutiles sur un écran moins performant, et la qualité supplémentaire serait perdue tandis que la taille du fichier supplémentaire serait téléchargée sans raison réelle.
Les sites vraiment réactifs prennent en compte l'expérience utilisateur dans son ensemble et travaillent à l'adapter en fonction non seulement du type de périphérique ou de la taille de son écran, mais également d'autres aspects importants du matériel.
4. Contenu avec contexte
Au départ, responsive web design a reçu son nom en raison de l’idée que la mise en page d’un site répond à différentes tailles d’écran, mais vous pouvez répondre à bien plus que la simple taille d’écran. En vous appuyant sur l’exemple précédent d’utilisation des forces et des faiblesses d’un appareil, vous pouvez les utiliser, ainsi que d’autres données telles que la date et l’heure, pour personnaliser réellement l’expérience d’un site Web.
Imaginez un site Web pour un grand salon. Bien qu'un site Web sensible modifie la disposition des pages du site pour l'adapter à différents écrans, vous pouvez également utiliser la date pour déterminer le contenu le plus important à afficher. S'il s'agit de la période précédant l'événement, vous souhaiterez probablement afficher en évidence les informations d'inscription. Si, toutefois, l'événement se produit réellement à ce moment-là, l'enregistrement ne sera peut-être pas le contenu le plus important. Au lieu de cela, vous pouvez décider que le calendrier des événements de la journée est plus critique car il est plus pertinent pour les besoins immédiats de cet utilisateur.
Pour aller un peu plus loin, vous pouvez utiliser le GPS d’un appareil pour déterminer où il se trouve réellement au salon. Vous pouvez leur donner un contenu interactif en fonction de leur emplacement, leur montrant des stands à proximité ou des sessions sur le point de commencer.
5. Accessibilité
Le dernier exemple que nous allons examiner pour déterminer comment un site peut véritablement répondre aux besoins d’un visiteur est de penser à l’accessibilité du site. Les sites Web devraient pouvoir être utilisés par le plus grand nombre de personnes possible, y compris les personnes handicapées. Votre site Web devrait pouvoir être utilisé par quelqu'un qui a besoin d'un lecteur d'écran ou d'un autre logiciel assisté pour accéder à son contenu. De cette manière, votre site répond à leurs besoins car vous vous êtes assuré que l'expérience, bien que différente pour les visiteurs handicapés, soit toujours appropriée.
En répondant à autant de points de données que possible, et pas seulement à la taille de l'écran, un site Web peut être beaucoup plus que simplement «adapté aux mobiles». Il peut devenir une expérience réellement réactive dans tous les sens du terme.
