Le Responsive Web Design (RWD), ou conception web adaptative, regroupe une série de techniques de conception graphique et de développement permettant de créer un site qui pourra s'auto-adapter en fonction de la taille d'un écran. Ordinateur de bureau, tablette, smartphone, télévision connectée... Son objectif consiste à prévoir tous les formats de moniteur, et proposer des modes de lecture et de navigation pour chacun d'eux.

Tristan Balozian (Pixmania) : "Le Responsive Web Design permet de faire simple et efficace"

C'est imminent : le ténor français du e-commercePixmania  va passer au Responsive Web Design. La technique continue donc de séduire, et vient aujourd'hui de convertir un acteur de poids dans l'e-commerce en France.

La version 2 de Pixmania, une nécessité ?

Pilotant la partie web technique de Pixmania, Tristan Balozian dirige aussi le développement d'E-merchant, une agence digitale qui propose et rassemble l'ensemble des solutions technologiques du groupe Dixons Retail. C'est-à-dire, en plus de Pixmania, celles des sites anglais currys.co.uk et pcworld.co.uk notamment, soit deux sites d'e-commerce, et tous les deux déjà en Responsive Web Design.

Or, de son côté, le site de Pixmania n'a pas encore développé son offre taillée pour le mobile. L'e-commerçant ne dispose pas d'une déclinaison mobile de son site, ni d'une application Android, mais juste d'une application iOS. Depuis un smartphone, le site classique s'affiche, les pages servies ne sont donc pas optimisées pour le terminal. "Pixmania commence à être un site un peu vieillissant. Passer au Responsive Web Design nous permet aussi de le rendre plus SEO friendly, et de profiter de notre expérience acquise sur les sites anglais", explique Tristan Balozian, qui évoque aussi des raisons opérationnelles : "Je pense que le Responsive Design  va nous faire gagner en efficacité. Il permet en effet de ne pas disperser ses ressources pour gérer et maintenir plusieurs déclinaisons du site, sur mobile, sur Desktop, sur applications.... Cela permet aussi de mieux se focaliser sur le contenu", pense le DT.

"Mieux se focaliser sur ce qu'attend l'utilisateur"

Mais, pourtant, vérifier que les évolutions du site, son contenu et ses fonctionnalités, s'affichent bien depuis la même URL sur tous les types d'écran peut aussi compliquer la maintenance des développements en Responsive Web Design. Cela n'inquiète pas Tristan Barbozian. "Nous avons toujours beaucoup d'idées, et même trop, quand il s'agit d'ajouter de nouvelles fonctionnalités. Le Responsive Web Design va nous permettre de mieux choisir les meilleures, et surtout de nous poser les bonnes questions, en se focalisant mieux sur ce qu'attend réellement l'utilisateur sur les différents terminaux. Le Responsive Web Design va nous permettre de faire simple et efficace", souligne le responsable technique.
 

Les problèmes rencontrés lors de la migration 

Choisir les meilleures fonctionnalités, et la bonne mise en page, auront d'ailleurs été, selon le DT, finalement les défis les plus compliqués rencontrés pour migrer vers le Responsive Web Design. "La plus grande difficulté aura été de bien mettre le contenu en avant. C'est donc l'ergonomie qui aura été le principal challenge". Divers essais d'A/B Testing auront dû être réalisés pour une migration qui aura mobilisé entre 4 et 6 personnes pendant 6 mois.

La recette aura aussi été semée d'embûches : "l'une des phases des plus ardues" même, admet Tristan Barbozian, notamment car "les simulateurs ne sont pas toujours fiables, et il vaut mieux vérifier depuis de vrais devices. Heureusement pour Pixmania, ces smartphones et tablettes aux différentes résolutions ne sont pas trop difficile d'accès...".

Le ROI du Responsive Web Design

Le responsable technique est un peu plus vague sur la mise en production "imminente" et les ROI attendus. Mais il dipose tout de même d'un recul sur les projets réalisés sur les sites anglais. Vise-t-il une meilleure performance et un affichage plus rapide ? "Sur les sites anglais, nous avions de bons temps de réponse, et nous ne les avons pas perdus".

Le taux de conversion, bien souvent nettement moins bon sur les sites mobiles, devra-t-il progresser sensiblement ? "Je ne crois pas me souvenir que le taux de transformation ait été amélioré de manière significative sur mobile avec le Responsive Web Design", répond le DT. Enfin, s'attend-il à un bond en termes de SEO ? "Google accorde-t-il une prime SEO aux sites qui ont adopté le Responsive Design ? Je voudrais bien qu'on me le prouve. Ce n'est pas si sûr que cela soit si simple...", conclut-il.

Justin Ziegler (PriceMinister) : "Le Responsive Design n'est pas envisageable chez nous"

Sur PriceMinister, la part des visiteurs depuis un mobile ou une tablette est de 16%. Une proportion qui a presque doublé en un an. Le site dispose d'applications mobiles, mais pour les navigateurs des smartphones, PriceMinister sert un site optimisé pour les mobiles. Ce dernier est bien différent de celui pour les PC classiques, mais l'URL est la même que depuis un Desktop. Malgré les apparences, ce n'est pourtant pas du Responsive Web Design : un rapide test avec un outil en ligne le montre. C'est un peu une "troisième voie", qui n'est ni Responsive, ni la déclinaison d'un site de type 'm.monsite.com'.

La déclinaison mobile a été écartée, notamment pour des raisons de SEO. "Le crawl de Google aurait été moins bon, et les robots auraient indexé du contenu finalement dupliqué, puisqu'il aurait été presque identique sur le site et sa déclinaison mobile, ce que Google n'apprécie pas", estime Justin Ziegler, directeur technique de PriceMinister.

Un affichage dynamique en fonction du user agent

Avec la technique retenue, l'user agent du mobinaute détermine que le site qui va être servi sera optimisé pour le mobile. Mais ce sera depuis la même URL. "Les bénéfices en termes de SEO sont donc exactement les mêmes que pour un site responsive", fait remarquer le directeur technique. Ne pas multiplier les URL à crawler est en effet l'un des avantages souvent cités du Responsive Web Design en matière de référencement, mais le site de PriceMinister en profite aussi avec cette technique d'affichage dynamique.

Pourquoi ne pas avoir choisi le Responsive Web Design ? "Lorsque nous avons lancé notre site pour mobile, il y a deux ans, le Responsive Web Design était encore balbutiant. Mais aujourd'hui je ne choisirais toujours pas le Responsive Web Design pour PriceMinister", lance le Justin Ziegler.

Problème de maintenance avec le Responsive Web Design

Le directeur technique évoque plusieurs raisons. La première est la maintenance. "Un site comme PriceMinister évolue souvent et s'enrichit régulièrement de nouvelles fonctionnalités. Or, le Responsive Web Design rend la maintenance plus complexe, car il faut tester toutes les évolutions et modifications sur tous les devices. Aujourd'hui PriceMinister est doté d'une équipe de développement dédiée au site, et d'une autre dédiée au mobile, avec chacune leur cycle, et je trouve que c'est très efficace ainsi", estime Justin Ziegler.

Et faire plus simple, plus épuré, quitte à supprimer des fonctionnalités du site ? Repartir d'une page blanche est parfois recommandé avant de migrer vers le Responsive Web Design. Ce qui n'est pas imaginable pour Justin Ziegler. "Cela demanderait de supprimer certaines fonctionnalités qui peuvent être très appréciées par les vendeurs et la communauté de notre marketplace, ce qui n'est tout simplement pas envisageable", tranche-t-il. Il admet cependant que le taux de conversion est moins élevé depuis les mobiles que depuis le site classique. Mais les applications mobiles, qui offrent moins de fonctionnalités, affichent de leur côté un taux de conversion aussi bon que le site classique, servi aux internautes derrière leur PC.

Au-delà des problématiques particulières de PriceMinister, Justin Ziegler convient tout à fait que certains sites d'e-commerce se prêtent mieux que d'autres au Responsive Web Design. "Des sites plus simples, avec moins de modèle de page à redessiner, notamment, sont sans doute plus adaptés à un design responsive. Cela dépend aussi de la fréquence d'évolution : les sites évoluant moins pourront aussi être plus intéressés", estime le co-fondateur de PriceMinister. Les sites d'e-commerce vont-ils selon lui majoritairement adopter cette technique ? Réponse de Justin Ziegler : ce n'est en tout pas la voie choisie par Amazon.

Antoine Roustan (TopAchat) : "Le taux de conversion a doublé sur mobile avec le Responsive Design"

TopAchat a fait le choix du Responsive Web Design. Ce site d'e-commerce, lancé en 1999 s'est fait racheter par RueDuCommerce en 2007. Le site était alors, de l'aveu même de son président, bâti sur des technologies commençant à être vieillissantes.

Refonte du site

En 2010, le projet de refonte commence. A cette date, seul 5% du trafic se fait depuis un mobile, et le Responsive Web Design n'est pas connu. "Ce qui apparaissait à cette époque dans les statistiques, c'est la hausse marquée des visites réalisées depuis des écrans full HD. Pour la refonte, l'une des idées directrices était donc déjà de créer un site qui sache s'adapter aux différents écrans. J'ai commencé à entendre parler du Responsive Web Design en 2011/2012, alors que le trafic issu des mobiles augmentait fortement", se souvient Antoine Roustan, le directeur de TopAchat.com. Ce trafic mobile atteint alors 10%.

L'ancien site n'était pas parfaitement optimisé et adapté à ces visites. Par rapport à celui des visites réalisées depuis les PC classiques, le taux de transformation était alors inférieur de 40% depuis les terminaux mobiles. Pourquoi ne pas avoir lancé une application mobile ou un site dédié ? "Nous devions de toutes façons refaire le site, nous nous sommes donc lancés dans le Responsive Web Design", répond Antoine Roustan.

Peu de mises en page à refaire

Le site s'y prêtait aussi bien. "Le site a certes un catalogue de quelque 15 000 références, mais en fait il n'y avait qu'une dizaine de mises en page à refaire. Comme beaucoup de sites marchands, la page d'accueil, les catégories, les sous-catégories et des fiches produits représentaient la majorité des différentes mises en pages qu'il fallait refaire", détaille le directeur.

Trois personnes, deux développeurs et Antoine Roustan, seront mobilisées sur le projet, qui durera 3 mois en tout - depuis son lancement jusqu'à la mise en production. "HTML5, CSS3... : des technologies récentes sont utilisées par deux développeurs à la pointe", tient à préciser Antoine Roustan.

Trois semaines de bêta auront été nécessaires, "avec assez peu de bugs découverts". Objectif : une mise en production mi-novembre en vue d'être prêt pour les achats de Noël 2012. "Le plus gros problème rencontré, finalement, fut lié aux émulateurs, pas assez fiables pour tester le site en responsive. Je me suis vite retrouvé avec tous les devices sur mon bureau. Heureusement que le site est spécialisé dans ces produits !", sourit son directeur.

Repartir de zéro pour faire un site épuré

La volonté était aussi clairement de faire un site épuré. "Repartir de zéro nous a permis de mieux déterminer ce dont nous avions réellement besoin, notamment en termes de fonctionnalités, pour qu'il y ait le minimum réellement nécessaire, et que le site soit clair. Les fonctions superflues, tel que le bouton permettant d'envoyer un mail ou d'imprimer une fiche produit, ont été supprimées. Le but étant aussi d'améliorer les performances du site, les techniques de lazy loading et les minifications sont utilisées au maximum. La gestion des images a aussi pu largement être améliorée grâce au CSS et JS.

Responsive Design : des résultats bénéfiques sensibles pour TopAchat

Résultat : un gain de 15% du taux de conversion, et un taux qui a surtout doublé sur mobile, là où il était le plus faible. Les taux de rebond des visites depuis les mobiles sont désormais quasi identiques à ceux observés pour les internautes sur Desktop classique. Le temps de chargement est de 40% plus rapide. En revanche le directeur n'a pas remarqué d'impact significatif sur le trafic ou les pages vues. Quant au problème d'affichage des publicités que peut soulever parfois le Responsive Web Design sur les smartphones surtout, "il ne s'est pas posé, puisque nous n'affichons pas de pub sur mobile", a tranché le directeur du site.

Quant au SEO, le site a pu garder les mêmes URLs, et n'a pas eu besoin de mettre en place des redirections. "Nous n'avons pas observé de gains SEO liés au Responsive Web Design. L'indexation est bonne, mais le Responsive Design  ne fait pas tout : le SEO, ce n'est pas que ça, il y a tant de facteurs.... ", rappelle le directeur de TopAchat.com qui ajoute : "le Responsive Web Design n'handicape pas le SEO du site. Cela permet de mettre toutes les chances de son côté, mais cela ne suffit pas non plus !"