Pourquoi un site doit être « responsive »

/ / Le digital
blog site responsive, refonte de site

Vous avez certainement entendu parler de site internet « responsive ». Mais quelle est cette chose ? c’est un anglicisme qui vient de ‘Responsive web design’ que l’on peut traduire par ‘Site internet adaptatif’. Nous allons détailler maintenant pourquoi un site doit être responsive et comment faire.

 

 

Responsive, cela signifie que le même site peut être regardé sur un grand écran de PC de bureau aussi bien que sur un smartphone, avec une lisibilité correcte. Ni trop gros sur le grand écran, ni minuscule sur le téléphone. Évidemment, sur un écran de smartphone, on ne peut pas mettre autant d’informations que sur un écran de PC. L’ergonomie responsive privilégie alors le défilement vertical et élimine le défilement horizontal : on doit ‘scroller’ (défilement vers le bas) mais tout la largeur de l’écran est utilisée et rien ne dépasse à gauche ou à droite. Au contraire, les écran d’ordinateurs de bureau étant larges et de plus en plus précis, c’est cette largeur qui est exploitée pour mettre le maximum d’informations sur l’écran sans avoir besoin de descendre en dessous de la ‘ligne de flottaison’ (ce qui est invisible en bas de page et qu’il faut remonter pour voir)

Comment ça marche ?

Il y a quelques années, les sites pour smartphones étaient des versions spéciales différentes de la version pour ordinateur. C’était simple, mais devenait un casse-tête pour les mises à jour : cela doublait le travail et parfois, les deux versions n’étaient pas mes mêmes… Maintenant, c’est le même programme qui fait tout : lorsque vous demandez une page avec votre navigateur préféré (Firefox, Chrome, Safari …), quel que soit votre appareil, c’est le même code qui est envoyé sur internet et c’est votre navigateur qui adapte la page à l’écran selon les instructions contenues dans le code. Cette adaptation se fait par tout un jeu d’instructions spéciales, appelée media queries que l’on trouve dans les fichiers CSS qui servent à la mise en forme du code HTML, le langage des sites web. Une autre notion importante est le viewport, qui permet aux smartphone de simuler une taille d’écran plus grande et oblige à zoomer pour que le contenu soit visible. Un site responsive bien fait tient compte de ce facteur et l’utilisateur n’a pas à zoomer pour lire le texte de la page.

L’approche adaptation aux smartphones

Aujourd’hui, la démarche générale est encore de faire un site d’abord en version PC, puis de l’adapter au mieux en version smartphone. Cela marche pas mal lorsque la version Pc est bien conçue, et que les blocs s’enchainent correctement au fur et à mesure que l’écran diminue. Généralement, les blocs à droite passent en dessous quand la place manque pour garder la lisibilité. Mais dans certain cas, l’ergonomie n’est pas terrible. Prenons un exemple courant : un blog avec une colonne sur le côté pour faciliter la navigation. Si on retrouve cette colonne tout en dessous du bloc principal, cela ne sert pas à grand-chose pour faciliter la navigation ! C’est pourquoi il est important que le site soit conçu en ayant toujours en tête la version la plus étroite. Et que dire des tableaux, qui sont souvent un casse-tête pour les programmeurs : un tableau avec une colonne de rubriques et les autres colonnes en dessous ne veut plus rien dire.

L’approche mobile first

On ne le répètera jamais assez, aujourd’hui, plus de moitié des recherches sur internet se font à partir d’un smartphone. Et cela continue à augmenter … D’où le réflexe actuel de privilégier le smartphone d’abord, en développant le site pour lui. L’ergonomie sera alors parfaitement adaptée à ce format, au détriment de l’ordinateur. On obtient ainsi des sites un peu déroutants, avec un menu ‘hamburger’ (le pictogramme avec les 3 traits horizontaux), même sur PC, avec une occupation de l’écran entièrement centrée et pensée pour le ‘scrolling’ afin que l’expérience utilisateur soit optimale sur petit écran et acceptable sur ordinateur.

Les autres avantages du responsive

On a vu précédemment qu’un site adaptatif permettait de n’avoir qu’une seule version, avec l’avantage de simplifier les mises à jour. Un autre avantage est que les moteurs de recherche verront une seule version de votre site. Ils se moquent un peu de la façon dont c’est affiché : c’est le contenu qui est important pour que la réponse à une question posée à Google soit pertinente. Une seule adresse web et un contenu unique, c’est bon pour le référencement naturel auprès des moteurs de recherche. Sachant que ceux-ci font la guerre au contenu dupliqué sur internet, se dupliquer soi-même n’est plus très judicieux.

Comment tester votre site ?

Voici 2 outils vous permettant de vérifier sur un ordinateur si un site est responsive et adapté aux principaux formats rencontrés aujourd’hui (smartphone, tablette, Pc portable, Pc de bureau). Les résultats peuvent différer un peu d’un programme à l’autre, comme ils peuvent aussi différer d’un navigateur à l’autre.

http://app.xrespond.com/  affiche en même temps 5 écrans différents et vous pouvez choisir les tailles.

http://ami.responsivedesign.is/  vous donne une image esthétique du résultat sur 4 écrans, mais moins précise.

J’espère que cette petite mise au point vous a éclairé sur un sujet un peu technique, mais important pour votre site. Et si votre site n’est pas véritablement responsive, n’oubliez pas que plus de moitié de vos visiteurs sont sur smartphone et qu’il serait dommage de les négliger.

Voilà, à vous la parole, si vous avez une expérience à partager ou des questions à poser …