Un contexte favorable au Responsive Design

Si dans les années 2000, la très grande majorité des internautes utilisaient un ordinateur de bureau ou un PC portable, la donne a radicalement changé. Depuis déjà près de 5 ans, le trafic mobile dépasse celui en provenance des ordinateurs selon Médiamétrie.

D’après le Baromètre annuel 2018 du Marketing Mobile, on totalise près de 42 millions de mobinautes de 11 ans et plus dans l’Hexagone et plus de français sur 10 étaient des mobinautes. Par ailleurs, près de 9 mobinautes sur 10 se servent de l’internet mobile au quotidien.

La multiplication des tailles d’écran et l’augmentation de ce trafic mobile contraignent les éditeurs de sites internet à présenter leurs ressources sous diverses formes. En effet, ils se sont rendus compte qu’ils doivent composer avec les comportements différenciés qu’adoptent les mobinautes vis à vis des autres internautes. L’implémentation du Responsive Design a sans doute contribué à accélérer les ventes du commerce mobile.

Une réponse à la multiplication des écrans

Le principe du Responsive Web Design

Le responsive design désigne une technique de conception d’interface digitale. Elle permet de présenter à l’internaute un contenu adapté au terminal dont il se sert. Il n’a aucune action à accomplir, la page web sur laquelle il se connecte via un navigateur web s’optimise automatiquement en fonction de la résolution de son écran. Le Responsive Design apporte une réponse à plusieurs problématiques que rencontraient initialement beaucoup de mobinautes.

Il permet tout d’abord de remédier à la variation peu ergonomique entre l’affichage en paysage et en portrait. De même, le Responsive Design prévient l’éventuelle déperdition de visibilité organique qui se manifeste quand deux versions d’un même site internet coexistent dans les moteurs.

Plus généralement, cette technique répond pleinement à la diversité des résolutions d’affichage des nombreux supports connectés : ordinateurs portables, tablettes tactiles, smartphones…

Les caractéristiques du Responsive Web Design

Concrètement, cela se traduit par la mise à l’échelle et la réorganisation des blocs de contenus en fonction de l’espace disponible sur l’écran. Le développement du Responsive Design a été permis par l’arrivée des Media Queries de CSS3 (gestion dynamique des feuilles de style). Parmi les dénominateurs communs des sites internet qui bénéficient de cette technique, on trouve :

• Une seule base de code HTML identique pour tous les appareil
• Des illustrations dont la taille/résolution s’ajuste automatiquement
• Le recours des CSS3 Media Queries pour l’application de la feuille de style appropriée

Les avantages du Responsive Design

Moins de travail et une expérience utilisateur renforcée

Forcément, l’affichage proposé aux détenteurs d’une tablette ou d’un smartphone favorise une bonne expérience utilisateur. Les textes sont agréables à parcourir, les photos et autres illustrations s’intègrent naturellement au sein des blocs de contenus, les mobinautes n’ont pas à zoomer et dézoomer constamment pour appréhender correctement l’information.

De plus, l’utilisation d’un thème Responsive diminue la charge de travail en cas de mise à jour. Il n’y a pas de site mobile à optimiser en parallèle de la version classique d’un site. Conséquence directe : les coûts sont réduits pour l’éditeur !

Un gain de visibilité

Une plateforme qui tire parti du Responsible Web Design exploite également tout son potentiel de visibilité organique. Google a d’ailleurs officiellement communiqué à ce sujet en 2016. L’entreprise de Mountain View a en effet indiqué qu’elle allait mettre en avant les sites “Mobile Friendly”, c’est à dire faciles à utiliser sur les terminaux mobiles. Comment cela se traduit dans les faits ? Lorsque les mobinautes émettent une requête, le moteur californien favorise dans ses résultats les pages de sites web Responsible Design. Juste après le déploiement du fameux algorithme Mobile Friendly, le service en ligne Yooda a observé un déclin de la visibilité de l’ordre de 6,2% pour les sites non mobiles. L’un des cadres du moteur dominant affirme même à l’époque que la mise à jour aurait un impact plus important que Panda ou Penguin.

La différence entre le responsive design et le design adaptative

Nous venons de l’expliquer dans une première partie, le site Web répond à la largeur de l’écran de l’utilisateur et s’ajuste selon ce paramètre dans le cadre du Responsive Design. C’est légèrement différent dans le cadre d’un Adaptative Design, le site internet affiché s’adapte alors à des largeurs spécifiques, définies en amont. Le développeur en charge de la conception d’un site web adaptatif code généralement 3 à 6 gabarits de pages parmi les résolutions suivantes :

• 320 pixels pour les smartphones
• 480 pixels pour les smartphones et tablettes de petite taille
• 760 pixels pour les tablettes
• 960 pixels pour les grandes tablettes et les ordinateurs de bureau
• 1 200 pixels pour les ordinateurs de bureau et grands écrans
• 1 600 pixels pour les grand écrans