Responsive web design

Le responsive web design, aussi appelé en français design web adaptable, est une page web qui est différemment présentée selon la taille de l’écran et/ou de l’appareil utilisé. L’objectif est de garantir une expérience utilisateur de qualité. Il a été mis en place pour les petits écrans des appareils mobiles, pour lesquels une autre présentation des pages web est très utile, voire nécessaire.

Contexte

La plupart des sites web sont conçus pour un usage avec un ordinateur, comme pour une utilisation dans le monde du travail. Au cours des années précédentes s’est cependant développé un autre usage avec les appareils mobiles, qui possèdent des écrans nettement plus petits : on entend par là les netbooks, les tablettes, les smartphones. Un site web s’affiche de façon différente sur les petits écrans, et l’accessibilité peut en être sérieusement affectée. Le responsive web design est là pour réagir de façon flexible pour chaque appareil mobile. L’expérience utilisateur sur des appareils mobiles est garantie grâce à un design adapté aux petits écrans. On appelle cela l’expérience utilisateur mobile, ou encore la compatibilité mobile. Si un site web mobile est mis en place en tout premier lieu et sera ensuite prolongé vers les ordinateurs, on parlera alors du concept "tout mobile" (mobile first).

Motivation

Le nombre d’appareils mobile et donc le nombre d’utilisateur qui par ce biais surfent sur Internet sont en augmentation constante. Afin de procurer une utilisation optimale du site web à ses visiteurs, la mise en action du design web responsive est toute indiquée. Une expérience utilisateur inconfortable sur des petits écrans est une des raisons principales de perte de conversions. L’utilisation du responsive web design se veut aussi futuriste, car il présente les offres aux utilisateurs sous forme d’un design agréable et ergonomique. La communication entre le webmaster et le visiteur ne souffre donc pas de cette évolution des pratiques web.

Mise en place

La mise en place d’un responsive web design se réalise à l’aide d’un format HTML5 ou CSS3. Les medias queries sont requises : elles fournissent les informations demandées par un appareil mobile. Elles possèdent les propriétés suivantes : taille de l’écran, résolution et format, ainsi que des capacités comme par exemple les entrées possibles (clavier, touché, langue, etc.). Le contenu et la disposition d’une page doivent être strictement séparés, afin que le responsive web design fonctionne de manière optimale.

Que sont les media queries ?

Dans les formats CSS sont employées les media queries. Elles permettent la distinction entre la fonction « screen » ou « print » ainsi que la transmissions de nombreuses propriétés.

<link rel="stylesheet" media="screen and (orientation:portrait)" href="example.css" />

Cet exemple illustre la mise en place de lien entre un document HTML et un Stylesheet (feuilles de style). Le media query contient, au sein de la fonction « screen », beaucoup d’autres paramètres, notamment s’il s’agit d’un format portrait. Dans une donnée de type CSS « exemple.css », cette section se visualise comme ci-dessous :

@media all and (orientation:portrait) { … }

Optique

Grâce à l’utilisation du responsive web design, le même contenu sera mis en place de manière allégée et adaptée aux appareils mobiles. La réduction des éléments est toute à fait sensée sur les petits écrans. La quintessence de ce processus est que les éléments existants seront différemment structurés. Un exemple très représentatif est le changement entre le format portrait et paysage. La proportion des pages se retrouve restructurée, ainsi que les éléments inhérents, sans que leurs fonctions n’en soient affectées. Le code HTML reste inchangé, seulement un autre stylesheet sera employé.

Dans la restructuration de la page, la priorisation des éléments existants joue un rôle important. Il est essentiel de considérer de manière approfondie quels éléments doivent être renvoyés vers le bas et quels aspects moins importants peuvent être coupés. Ce développement est relativement long et prend une grande place dans les mesures SEO.

Pertinence pour le référencement

Le développement d’un responsive web design est nécessaire selon la taille du site web. Le développement est réalisé une seule fois et est facilement gérable, car les contenus ne doivent être érigés qu’une seule fois et sont ensuite disponibles pour chaque design. Ce développement vaut aussi la peine d’un point de vue SEO, car il améliore l’expérience des utilisateurs qui utilisent un appareil mobile. La durée de visite s’en retrouve augmentée, ce qui est aussi positif pour le classement d’une page. Le taux de rebond se voit diminué, car une bonne compatibilité mobile est toujours appréciée. Le responsive web design ne diminue aucunement l’utilisation d’appareils mobiles. Si un site web est pensé pour fonctionner avec une fonction de relaunch, il y a de bonnes probabilités qu’il propose prochainement des solutions de responsive web design.

Il n’est pas recommandé d’employer les mêmes solutions d’optimisation pour le site web, mises en place pour contrer des chiffres stagnants, et pour les appareils mobiles. Ce domaine doit être en effet optimisé et soigné de façon particulière, ou sinon il sera mal classé : peu relayé, peu de link juice et il présentera en plus du duplicate content. Avec cela, un utilisateur ne trouvera pas la page adaptée à son usage mobile au sein des SERP, et donc ne l’utilisera pas.

Le responsive web design est aussi pertinent pour des questions d’optimisation des mots-clés. Quand on utilise un appareil mobile, on a tendance à raccourcir les requêtes et les descriptions ou à les formuler différemment qu’au moyen d’un clavier physique. La compatibilité mobile entraîne donc aussi une mutation des mots-clés.

Google recommande et soutient le responsive web design. Parmi d’autres avantages, les ressources du Googlebot s’en voient économisées et plus de contenus du site web peuvent être indexés. Il est de plus prérequis que le crawler ait un accès illimité aux données externes, comme c’est le cas du CSS et du Javascript.