Voici trois lettres que les plus vieux d'entre nous ont vues et revues sur leur tape à cassette! Aujourd'hui, ces trois lettres désignent autre chose qu'une touche Rewind d'un appareil né dans les années 30, le magnétophone. Elles désignent le responsive web design, la conception de sites web adaptatifs. C'est une notion de conception de sites web qui regroupe différents principes et technologies dans laquelle un site est conçu pour offrir au visiteur une expérience de consultation optimale facilitant la lecture et la navigation. L'utilisateur peut ainsi consulter le même site web à travers une large gamme d'appareils (moniteurs d'ordinateur, smartphones, tablettes, TV, etc.) avec le même confort visuel et sans avoir recours au défilement horizontal ou au zoom avant/arrière sur les appareils tactiles notamment, manipulations qui dégradent considérablement l'expérience utilisateur.

Le concept de RWD a été décrit pour la première fois par Ethan Marcotte en 2010. Mais est-ce une tendance éphémère ou une solution durable? Avec la diversification des accès à Internet en mobile, face à une baisse constante des desktops et même de l'ordinateur portable, il est clair qu'un site à largeur fixe ne suffit plus du tout. De fait, à cause de cette multiplication des plateformes et des tailles d'écran, un site web classique ne sera pas toujours affiché de façon optimale. Le responsive design est définitivement une des meilleures clés pour maintenir un design fluide dans tous les formats.

Mais pourquoi, me direz-vous, faut-il investir dans ce gizmo encore? Tout simplement parce qu'un site web en responsive design peut s'adapter aux spécificités de tous les appareils. Avec des images et une mise en page flexibles, le contenu et le design du site s'ajustent automatiquement pour maximiser la taille de l'écran. Les images grandissent ou rapetissent selon les besoins, les textes se replacent, les menus changent de comportement pour laisser au visiteur une expérience de navigation consistante, autant sur une tablette, que sur un téléphone intelligent ou un ordinateur. Il est certain que quelques chiffres vont vous faire une image du marché afin de vous montrer l'utilité de l'investissement:

- Le trafic provenant d'un appareil mobile, comme un téléphone ou une tablette, représente 21% sur les sites web de commerce en ligne.

- Aux États-Unis, 28% des gens utilisent leur appareil mobile plutôt que leur PC afin d'avoir accès à internet.
- 67% des clients sont plus susceptibles d'acheter sur un site adapté au mobile ou un site Web responsive.

- 91% des résidents américains ont un appareil mobile à portée de main 24/7.
- En 2010, il y avait 97 tailles de résolution différentes... ce qui est déjà pas mal. Maintenant, nous en sommes à plus de 230!
- Une récente estimation nous montrait que le montant total des achats en ligne à partir d'un appareil mobile devrait tripler.

Il y a donc de nombreux avantages au RWD. Sur le long terme, les sites en responsive design sont moins coûteux à tenir à jour que de nombreux sites optimisés pour s'adapter à des formats différents. Ils sont mieux placés pour répondre aux exigences des appareils de demain et rompent la monotonie de la mise en page unique. Cela a évidemment une grande influence sur l'expérience des utilisateurs, car elle est légèrement différente sur chaque nouveau dispositif. Par là même, cette adaptation procure un autre bénéfice, car elle met l'accent sur le contenu du site et non sur son apparence. D'un point de vue plus technique, cela permet d'universaliser l'affichage d'un site web en utilisant les nouvelles règles et propriétés de CSS 3 (media Queries, micro formats...), acceptées par la grande majorité des navigateurs.

De plus, le RWD est une solution stratégique à long terme, car il permet de répondre à une recherche de manière plus rapide, en n'affichant que les éléments les plus pertinents aux mobinautes. Avec le responsive web Design, plus de souci de redirection de lien. Une fois mis en place, il y a très peu de maintenance à réaliser et le coût de développement est plus intéressant qu'un site mobile spécialisé. Aussi, c'est une option idéale concernant le référencement, car il permet de proposer son site sous différentes versions. L'indexation est même bien meilleure avec le responsive design, ce dernier s'adaptant à tous les supports d'affichage. Et finalement, sachant que chaque page du site à une adresse unique peu importe la version, les liens entrants se dirigent tous vers une même URL facilitant le référencement. Cela permet de réaliser des économies d'échelles considérables puisqu'une seule modification est alors nécessaire dans un site réalisé en RWD.

Si les avantages sont vraiment très nombreux, il y a malgré tout quelques inconvénients... La conception et l'élaboration d'un site adaptatif exigent du temps et, à court terme, ce processus peut s'avérer coûteux, car il faut planifier soigneusement et mettre à l'essai rigoureusement la disposition des pages et la navigation. Certains compromis sur le plan du contenu deviendront nécessaires en raison des limites que nous impose le visionnement sur un écran de petite taille. Enfin, vous devez décider si votre contenu peut être optimisé ou s'il vaut même la peine de rendre le contenu accessible sur certains dispositifs. Il y a aussi le temps de téléchargement. La plupart du temps, les utilisateurs se trouvent dans l'obligation de télécharger de manière inutile un code HTML/CSS. De même, les images sont souvent simplement allongées et non redimensionnées entrainant un impact négatif sur le temps de chargement. Demandez-vous d'abord si l'on souhaiterait visualiser votre contenu sur un appareil mobile.

Le RWD est définitivement une solution efficace afin d'offrir une expérience utilisateur en adéquation avec l'usage souhaité. C'est une évolution majeure du Web design invitant les concepteurs à un nouveau défi ergonomique et assurant aux utilisateurs une expérience enrichie. Pour ce qui est des inconvénients dégagés par cette technique, cela implique plus d'investissement au niveau de la conception et du développement du site. À la différence des sites web non optimisés, les sites Web adaptatifs exigent une planification plus minutieuse au cours des phases de conception et de développement. En prêtant attention à votre contenu et à l'environnement de navigation de votre public cible, vous serez en mesure de décider quelle approche en matière de conception de sites Web répond le mieux aux besoins de votre organisation.

Le responsive design et le courriel

De plus en plus de clients nous demandent de produire les courriels en responsive design, a priori cela va de soi…par contre avant d’investir temps et argent à ce niveau, quelques points doivent être soulevés:

1) Est-ce que le site Internet ou les clics des courriels seront en lien est optimisé pour le mobile?
2) Les courriels lus sur les iPhone et iPad sont faciles à optimiser car Apple contrôle le format d’affichage, au contraire il est très ardu d’optimiser les courriels lus sur les mobiles Android car chaque fabricant impose leurs règles d’affichage… Comme nos statistiques de livraison montrent que 36% (24% téléphones + 12% tablettes) des abonnés de nos clients lisent leurs courriels sur un appareil mobile. Et que, pour les téléphones mobiles 66% des abonnés de nos clients ouvrent leurs courriels sur un mobile Apple…notre plateforme nous permet de produire facilement une version/un gabarit mobile qui est optimisée pour les Apple et par la bande pour les autres marques. Mais pour les appareils Android, il faudrait passer plusieurs heures afin de produire un gabarit spécial qui n’offre aucune garantie d’affichage optimisé.
3) Donc il appartient aux clients de choisir entre prendre un gabarit optimisé pour la majorité des appareils mobiles ou un gabarit en vrai «responsive design» qui impliquera des heures additionnels de codage donc des $$ pour les clients… et ce, pour 12% de leurs clients (33% de 36%) qui consultent leurs courriels sur un mobile autre qu’Apple.