Plusieurs postes sont disponibles chez Nmédia!Amène ton talent, on fournit le plaisir!
Responsive design : une impérative à la multiplicité des supports

Responsive design : une impérative à la multiplicité des supports

8 février 2016Par Marc-André Morin
Catégorie :

La réalité des internautes et des travailleurs du Web évolue rapidement. Avec la popularité grandissante des téléphones et des tablettes et l’évolution de ceux-ci, il faut désormais adapter les sites Web non seulement aux différents navigateurs, mais aussi aux différentes plateformes et tailles d’écrans. Les statistiques le prouvent bien : l’utilisation d’un ordinateur a diminué de plus de 20 % depuis 20081 tandis que le Web mobile a enregistré une progression de 600 %, seulement entre 2010 et 20112. Sachant qu’un écran de téléphone est environ 80 % plus petit qu’un écran d’ordinateur, il faut prendre soin de procurer à l’utilisateur une expérience adaptée à son terminal.

Le Responsive Web Design amène une solution pratique et économique à cette situation. En effet, il permet de créer une seule et unique interface, fluide, qui affiche le site sous sa meilleure forme, et ce, peu importe la taille de l’écran. Cette technique permet d’adapter le contenu à l’environnement par lequel il est trouvé, en utilisant toujours une même source de données. Ceci fait que le texte et les images sont gérés à un seul endroit plutôt que de créer et entretenir une copie du contenu pour chaque plateforme supportée. C’est une technique presque universelle puisque tous les navigateurs mobiles intelligents supportent maintenant le CSS3, qui est la technologie à la base de cette technique. Le Responsive Web Design saura donc gérer certaines problématiques d’ergonomie multiplateforme.

Une page d’accueil qui réagit au contexte d’utilisation

La page d’accueil est sans contredit la plus importante page d’un site Internet; comme elle est le point d’entrée le plus fréquent, elle se trouve à être la plus visitée. Lorsqu’un utilisateur effectue une recherche et qu’il tombe sur votre site, il établira une confiance en quelques secondes au regard du visuel, mais il doit également y trouver ce qu’il cherche! Si le contenu de votre page d’accueil n’explique pas clairement la nature de vos services, l’utilisateur sera déjà en train de naviguer ailleurs. Chaque seconde compte! D’ailleurs, je vous invite à consulter l’article de mon collègue Marc-Olivier sur l’impact de l’esthétisme sur la crédibilité d’un site Web.

Considérant l’espace restreint qu’offre l’appareil mobile, le Responsive Web Design saura rendre le contenu facilement accessible en fonction de l’espace disponible en déplaçant ou supprimant les éléments de la grille graphique, comme des colonnes ou du texte. Par exemple, pour certains sites, il serait préférable d’afficher une description de l’entreprise et de ses services plutôt que d’afficher les dernières nouvelles.

Aussi, il est déconseillé d’y avoir un discours trop élaboré ou d’utiliser un langage qui pourrait s’avérer lourd pour l’utilisateur : il est préférable de donner à l’utilisateur ce qu’il veut en toute simplicité. C’est d’ailleurs ce que nous enseigne le Responsive Web Design : penser à l’utilisateur en premier.

La disposition du contenu est différente selon la taille de l'écran

Que faire des images et des bannières animées?

Sans enlever toutes les images et tous les éléments graphiques, il est important d’en réduire la taille lorsqu’on traite du visuel pour petit écran. Visuellement, une bannière animée peut prendre beaucoup d’espace sur un petit écran de téléphone et obliger la personne à « faire défiler » l’image pour accéder au contenu. De plus, les images sont souvent lourdes et impacteront ainsi le temps d’affichage du site et la quantité de données que l’utilisateur consommera et paiera dans son forfait téléphonique (ou son forfait Internet, s’il est connecté à un réseau sans-fil).

Avec le Responsive Web Design, il est également possible de modifier le comportement des bannières animées. En remplacement d’un défilement automatique, par exemple, il existe des librairies qui imitent le comportement des écrans tactiles, permettant ainsi de passer d’image en image en glissant le doigt sur l’écran. Au final, tout dépend du site puisque le Responsive Web Design est différent selon le mandat.

Un menu facile d'accès et efficace

Sur tous les supports (ordinateur, tablette ou téléphone mobile), le menu de navigation constitue une composante capitale de votre site Internet. Son comportement et sa structure doivent être pensés et adéquatement adaptés afin de permettre à l’internaute d’accéder rapidement et efficacement au contenu désiré et ainsi maximiser l’impact du site Internet ou, autrement dit, augmenter le taux de conversion du site.

Structure du menu

Pour qu’un menu soit efficace, il est impératif qu’il présente un schéma de navigation simple qui sera compris du public cible. Les attentes en termes de navigation risquent de changer en fonction de l’endroit à partir duquel l’utilisateur accède à votre site.

Petite mise en situation : assis à son bureau, l’utilisateur accède au site de son festival préféré. Il voudra avoir accès à la programmation, connaître l’emplacement des activités, voir des images ou vidéos des éditions précédentes et même acheter son laissez-passer en ligne! S’il a du temps, il pourra aussi lire le témoignage de l’organisateur du festival ou encore y consulter le blogue officiel. Cependant, rendu sur les lieux du festival, s’il accède au site à partir de son téléphone, ça pourrait alors être pour savoir à quelle heure son artiste préféré donnera sa prestation ou encore pour savoir qui sont les artistes qui sont présents cette journée-là.

C’est ainsi qu’avec le Responsive Web Design, nous pourrons adapter la navigation aux besoins de l’utilisateur.

Une question d'espace

En plus de l’interactivité qui est différente avec un écran tactile, l’espace disponible joue beaucoup sur la disposition des éléments à l’écran. Tel que mentionné plus haut, le Responsive Web Design a pour but de rendre un site accessible à tous sans développer un visuel spécifique à chaque type de support ou à chaque grandeur d’écran.

Le cas le plus typique est celui du menu horizontal. Celui-ci trouve sa place dans un site standard utilisant jusqu’à 1000 pixels (px) de large. Cependant, lorsque ces 1000 px devront être ramenés à moins de la moitié, soit un maigre 320 px pour l’écran d’un iPhone, le menu horizontal perd tout son intérêt.

Heureusement, le Responsive Web Design permet d’ajouter une condition de formatage pour passer rapidement d’un menu horizontal à un menu vertical. Cette technique peut être appliquée à tout élément disposé horizontalement tel une galerie d’images ou une mise en page en colonne.

C’est donc en prenant en considération les changements de comportement de l’utilisateur et en combinant le remplacement de contenu et la mise en page fluide qu’on obtient un site facilement navigable sur tous les supports!

Optimisation : une méthode contre la montre

Puisque le temps ne s’achète pas, il est important d’en donner le plus possible à nos utilisateurs. Chaque temps mort occasionné par le chargement d’un élément du site est une chance de plus que l’internaute quitte la page. La quantité et la qualité des images vont impacter de beaucoup le temps de chargement des pages… mais puisqu’une image vaut mille mots, il ne faut pas les retirer complètement de votre site non plus!

Responsive image

Une maquette visuelle d’un site est créée à partir d’une grille statique qui sera transformée en grille fluide avec le Responsive Web Design. Les images qui sont ajoutées dans le site doivent suivre cette grille, avec la flexibilité qui vient avec ladite grille.

Pour tenter de respecter tous les cas de figure, certains penseront qu’il est préférable que les images soient grandes et qu’elles s’ajusteront par la suite à la largeur désirée dans le site. La logique de cette histoire est que la page va contenir l’image à sa grandeur réelle et qu’ensuite, elle sera réduite, donc elle sera chargée à sa pleine grandeur.

C’est donc important de bien établir son maximum de largeur et de hauteur et d’importer les images dans ces tailles. Au bout de la ligne, si on sauve une demi-seconde par image sur 200 images, ça fait beaucoup!

Personnellement, j’espère ne jamais voir un site mobile avec trop d’images, car ma facture de téléphone risque d’être élevée ce mois-là!

En conclusion

En conclusion, le Responsive Web Design pourrait rendre un site accessible sur toutes les plateformes en adaptant le contenu et la navigation du site. Bien sûr, il existe d’autres méthodes pour rejoindre le public cible sur leur mobile et certaines pourraient s’avérer plus avantageuses et adéquates selon le projet… mais dans tous les cas, en mettant l’emphase sur l’accessibilité et sur l’ergonomie, vous serez assuré de répondre aux besoins de l’utilisateur, peu importe le contexte de sa visite.

Avec la popularité grandissante du mobile, il est important d’y penser dès maintenant, car le mobile est la voie rapide pour accéder à de l’information, n’importe où et n’importe quand!

Bibliographie

  1. YAROW, Jay. « Is the smartphone killing the PC? », Business Insider, [En ligne], 15 février 2011 http://www.businessinsider.com/chart-of-the-day-pc-usage-2011-2, (page consultée le 16 avril 2012).
  2. DALY, Vanessa. « Smartphone market drives 600 % growth in mobile web usage », bango, [En ligne], 16 février 2010,http://news.bango.com/2010/02/16/600-percent-growth-in-mobile-web-usage/, (Page consultée le 16 avril 2010).