Tout savoir sur le responsive design

Depuis quelques années, on entend beaucoup parler de responsive design. Cette nouvelle technologie d’intégration est devenue un nouveau standard pour le Web.

Le responsive design, c’est quoi ?

Le responsive design, également appelé design auto adaptatif, est une technique d’intégration HTML et CSS permettant à un site d’être parfaitement compatible avec les ordinateurs de bureau, les tablettes, et les mobiles. Au lieu d’avoir une version de site mobile et une version de site Desktop, on a un seul site à gérer.

---

Comment ça marche ?

Le responsive design utilise globalement deux technologies du Web : L’Hypertext Markup Language (HTML), et le Cascading Style Sheet (CSS). Le langage dit HTML permet d’afficher les contenus, tandis que le CSS (aussi appelé Feuille de style en cascade) les formate. Il existe ainsi deux versions différentes de responsive design.

Le dynamic serving

Le Dynamic serving, c’est simplement de servir des fichiers CSS spécifiques en fonction de la largeur de l’écran utilisateur. Par exemple, si je suis sur un ordinateur de bureau, mon navigateur téléchargera la feuille de style qui correspond aux grandes largeurs d’écran. Si je suis sur un Smartphone, mon navigateur téléchargera la feuille de style des petits écrans etc. Les fichiers téléchargés sont ainsi relativement légers.

Les media queries

C’est la technique la plus utilisée. Cette méthode d’intégration se traduit par l’utilisation de codes spécifiques sur les fichiers CSS permettant de différencier les éléments du site en fonction de la largeur du terminal utilisateur. On se retrouve ainsi avec un seul fichier CSS à gérer, et il sera par conséquent un peu plus lourd que lors d’un Dynamic serving. Cependant, cette différence de poids est minime, de l’ordre de quelques kilo-octets, et n’aura aucune incidence sur les performances du site.

---

Est-ce que c’est plus intéressant qu’une version mobile ?

Sans aucune hésitation : oui ! Avoir une version mobile pour un site, ça veut dire devoir gérer une deuxième version, donc passer beaucoup plus de temps lors de la création des contenus.

Avoir une version mobile présente en outre un inconvénient majeur au niveau du référencement naturel, car il se pose le problème du « Duplicate content » (il faut déclarer quel est la « bonne » version de la page pour les moteurs de recherche).

Avoir une version mobile, c’est terriblement obsolète, chronophage, et improductif.

---

Est-ce que ça coûte plus cher qu’un site non-responsive ?

Forcément, la création d’un site en design auto adaptatif coûte plus cher qu’un site classique, car il faut travailler à la fois pour les ordinateurs de bureau et pour les mobiles. Cela demande plus de temps à l’intégration, ainsi qu’une plus grande réflexion lors de la création des contenus, car il faut anticiper sur les contraintes de chaque largeur d’écran.

---

Google privilégie les sites compatibles avec les terminaux mobiles

Depuis 2014, Google privilégie les sites en responsive design lors des recherches effectuées sur téléphone mobile. Cela permet de proposer des sites mieux adaptés aux internautes disposant d’un petit écran. Du coup, les sites non-responsive sont pénalisés lors des recherches sur mobile (dont le trafic avoisine aujourd’hui les 50 %).

Il y a donc tout intérêt à faire un site compatible avec les mobiles lors d’une création ou d’une refonte. Le responsive design n’est plus vraiment une option, c’est devenu un nouveau standard sur le Web.

---