Smartphones, ordinateurs, tablettes et maintenant TV connectés, les périphériques permettant d’accéder à Internet sont de plus en plus diversifiés et de plus en plus utilisés par les internautes. Selon une étude ARCEP/CREDOC, près de 37% des français accèdent à Internet depuis un téléphone mobile. Face à cette diversification des modes d’accès aux contenus web, les fournisseurs de services en ligne doivent proposer une ergonomie adaptée aux différents terminaux. Un début de réponse, proposé par le W3C dans le cadre de la norme HTML5, est le Responsive Design.
Le Responsive Design, qu’est-ce que c’est ?
Le Responsive Web Design, ou Responsive Design est une fonctionnalité introduite par la version 5 de la norme HTML. Il permet d’optimiser l’affichage d’un portail web selon le terminal utilisé par l’internaute. Cette fonctionnalité est une évolution de la mise en page dite « élastique », utilisant HTML3 et CSS2 pour offrir un rendu adaptatif en fonction de la largeur d’écran sur PC/MAC. Un site développé en Responsive Design est capable d’adapter son affichage pour proposer une ergonomie adaptée à tous les terminaux. Les éléments pouvant être adaptés incluent les menus, la disposition et l’affichage des blocs de contenu ainsi que les visuels affichés sur le portail. Un portail en Responsive Design doit néanmoins être pensé « multidevice » dès les premiers stades de sa conception (il faut par exemple prévoir dès la maquette des emplacements cliquables suffisamment grands pour une utilisation tactile, quel que soit leur niveau de réduction).
Gérer multiplication des devices et budgets de plus en plus restreints : un enjeu majeur pour les DSI
A l’origine, les sites internet étaient conçus exclusivement pour une consultation depuis un ordinateur. Cela rendait le développement des portails simple, tous les terminaux disposant d’une ergonomie similaire.
La part croissante des visites sur mobile a entraîné la nécessité de développer des portails spécifiques : les sites dits « mobiles ». Totalement décorrelées du site web principal, elles nécessitent une double maintenance induisant un surplus de charge des équipes IT et de gestion de contenus.
Avec la multiplication des écrans (tablettes, smart TV), concevoir et développer des sites spécifiques devient de plus en plus compliqué. L’arrivée du Responsive Web Design change la donne et permet sur le papier de réduire coûts de développement et de maintenance… pour le bénéfice des DSI comme des directions de la communication.
Le Responsive Design, une solution miracle ?
Malgré tous ses avantages, le Responsive Design a aussi ses inconvénients. Il ne faut en effet pas négliger le travail de conception en amont. Il faut « penser mobile » dès le début, afin de prioriser l’affichage des contenus. Deux approches concurrentes coexistent :
- L’approche « desktop-first » : elle consiste à concevoir le site comme un portail traditionnel (tout en pensant « mobile » en termes d’ergonomie ») puis à dégrader progressivement les contenus pour définir les versions tablettes et mobiles. Cette approche, si elle permet de travailler de manière traditionnelle en commençant par la version qui sera la plus utilisée (desktop), a l’inconvénient de rendre plus difficile la priorisation des contenus à afficher sur les autres versions.
- L’approche « mobile-first » : elle consiste à concevoir le site d’abord pour le mobile, puis à enrichir progressivement les versions tablettes puis desktop. Cette approche est très impactante pour des équipes métier habituées à valider d’abord des versions desktop, mais elle permet une meilleure priorisation des contenus et des parcours à afficher sur mobile, ce qui aboutira à une expérience client meilleure sur tous les écrans.
Si la première approche est souvent choisie car plus « logique » aux yeux des décideurs, la seconde est à privilégier pour une bonne partie des portails de par les difficultés habituellement rencontrées lors des travaux de simplification d’une version « desktop » : le Responsive Design se gérant par bloc de contenu, il est impossible de masquer seulement une partie d’un bloc sans de lourds développements spécifiques au sein même de ce bloc, ce qui engendre davantage de développements – et donc des coûts plus importants.
Ensuite, il pose des problèmes de compatibilité : en effet, même si l’ensemble des navigateurs modernes supportent les normes HTML5/CSS3, les navigateurs plus anciens, Internet Explorer 7/8/9 en tête, ne le supportent que partiellement voire pas du tout. Avant tout déploiement, il convient donc de s’assurer que ces navigateurs représentent une proportion faible des visiteurs du portail et/ou prévoir une solution de contournement. Ainsi, un site en Responsive Web Design développé sans précautions particulières peut engendrer une expérience dégradée pour 15 à 25% de ses utilisateurs.
Enfin, la charge liée à la recette d’un tel portail est nettement plus élevée que pour un portail classique. Il faut tester le bon fonctionnement du site sur un parc représentatif de terminaux pour s’assurer du bon fonctionnement du site sur les différentes combinaisons navigateurs/résolutions à supporter. Pour simplifier et automatiser cette tâche, des outils tels que Selenium existent. Il reste néanmoins indispensable de tester manuellement les parcours-clés sur tous les devices afin de s’assurer d’une expérience utilisateur optimale en terme d’ergonomie et de performance (les réseaux mobiles, même s’ils ont beaucoup progressé avec l’arrivée de la 4G, restant généralement plus lents qu’une connexion fixe classique).
Un site web en Responsive Design : une alternative au site mobile dédié, en complément d’une application native
Si le Responsive Design permet d’améliorer significativement l’ergonomie du portail sur les différents écrans, il offre une expérience utilisateur limitée comparée à une application mobile/tablette native, qui offre notamment l’avantage de bénéficier d’une ergonomie parfaitement adapté à chaque device, et permet de limiter significativement les échanges de données client/serveur en chargeant par l’application la plupart des composants graphiques lors du téléchargement de l’application.
Un site en Responsive Design doit donc être considéré comme un moyen de substitution à un site mobile dédié, destiné à venir en complément d’une application native souvent dédiée aux clients.
En plus de l’aspect graphique et ergonomique, un portail en Responsive Design doit également adapter son contenu au device sur lequel il est affiché. Dans ce contexte et afin d’alléger les développements, il est possible de prioriser les parcours client à développer prioritairement en Responsive. Dans ce scénario, le reste du site est accessible depuis tout terminal, mais seuls certains parcours dits prioritaires bénéficient d’une ergonomie spécifiquement adaptée. Ces parcours doivent être choisis avec soin, en se focalisant sur les parcours à forte valeur ajoutée et les plus susceptibles d’être visualisés sur mobile.
Le Responsive Web Design est donc une approche innovante destinée à apporter davantage de flexibilité aux entreprises en leur permettant d’adresser l’ensemble des nouveaux écrans de manière optimale tout en simplifiant la mise à jour de leurs portails web. Il faudra néanmoins faire avec quelques limitations ergonomiques qui rendent souhaitable le maintien d’une application mobile native pour les services destinés aux clients et à usage fréquent.
