Voilà près de deux ans que je vous parle de Responsive Web Design. Largement plébiscité par la profession, le RWD est néanmoins petit à petit en train de se transformer en buzz word de l’année. Comprenez par là qu’au même titre que les Big Data ou qu’Ajax à son époque, on nous sort le Responsive Web Design en toutes circonstances comme LA solution miraculeuse à tous les problèmes liés à la mobilité. Or, la mobilité n’est pas un problème, c’est une évolution majeure dans les usages, une tendance forte que l’on peut subir ou exploiter. Bref, il est grand temps de démystifier ce terme et de faire preuve de réalisme.
Le Responsive Web Design est donc un terme générique qui désigne une façon de coder une page web pour qu’elle s’adapte à tous les écrans. Cette technique à largement été popularisée par des sites de journaux prestigieux comme le précurseur Boston Globe ou dernièrement le Time Magazine.
Le problème du Responsive Web Design est que c’est une technique permettant d’optimiser l’affichage d’un site web conçu pour ordinateurs sur des terminaux mobiles, mais pas de répondre aux besoins spécifiques des utilisateurs en situation de mobilité. Le passage d’un ordinateur avec un grand écran, une souris et clavier à un petit écran tactile n’est pas une mince affaire. Il ne suffit pas de masquer des éléments sur le page ou d’en revoir l’ordre pour satisfaire les mobinautes. C’est un peu comme si vous me disiez qu’il suffit de réduire le nombre de rayons d’un hypermarché pour en faire une supérette de centre-ville. Réduire leur nombre ne suffit pas, il faut tout revoir : les zones de circulation, l’achalandage, la signalétique… Pour un site web, c’est la même chose : si le RWD fonctionne très bien pour un blog et plutôt bien pour un site éditorial, cette technique est par contre perfectible pour un site institutionnel ou une boutique en ligne. La version mobile du site du Vertbaudet est pour moi un très bon exemple : ils ont créé deux versions séparées pour maximiser l’expérience.
Plusieurs voix commencent à s’élever pour remettre en question la pertinence de certaines implémentations du RWD : Not All Responsive Web Design Is Created Equal. Pour résumer les propos de cet article : l’étroitisation de la mise en page pose de gros problèmes ergonomiques que des astuces de code ne peuvent pas forcément gérer (cf. Des mises en page adaptives aux systèmes de navigation adaptatifs).
Outre les problèmes ergonomiques, le RWD pose également quelques soucis en terme de référencement : When Responsive Web Design Is Bad For SEO. Le point de départ de cet article est l’outil mis à disposition récemment par Google pour consolider les URLs de version mobiles. Cet outil met un terme à la pénalisation de l’éparpillement des versions d’un site par rapport à l’utilisation d’une URL unique. Plusieurs arguments particulièrement pertinents sont avancés par l’auteur de cet article pour remettre en cause le choix du RWD :
- Les internautes en situation de mobilité utilisent des termes et équations de recherche très différentes de celles utilisées depuis un ordinateur fixe ;
- Les mises en page adaptives ne permettent pas de diminuer les temps de chargement (les éléments de la page sont chargés, mais pas affichés) ;
- La mise en page ne s’adapte qu’aux smartphones, les utilisateurs de feature phones sont donc mis de côté ;
- Cela limite la créativité et les possibilités offertes par le rich media.
En résumé : le Responsive Web Design est un compromis très intéressant pour toucher un maximum de mobinautes en limitant les coûts de développement, mais ce n’est pas une solution universelle, loin de là. Vous noterez d’ailleurs que les grands acteurs ne se limitent pas à un site en RWD (Amazon, Ebay…), ils éditent différentes versions pour maximiser l’expérience. Les investissements sont certes plus élevés, mais l’excellence à un prix.
J’ai publié récemment un article sur la façon de remédier aux problèmes de temps de chargement (Améliorez la performance de vos interfaces mobiles avec RESS), aussi je vous propose une piste de réflexion pour maximiser le référencement : utiliser des landing pages mobiles pour répondre aux besoins des internautes en situation de mobilité. Ces landing pages mobiles seraient spécifiquement référencées en fonction des recherches utilisées en situation de mobile, et proposeraient les contenus et/ou fonctionnalités les plus pertinentes pour les mobinautes.
Tout ceci renforce le besoin des marques avec un minimum d’ambitions de nommer un Chief Mobile Officer pour bien appréhender les besoins des mobinautes et définir une feuille de route cohérente (cf. Pourquoi lancer une application mobile ne sert à rien).
Une consultation depuis un terminal mobile ne signifie pas que c’est une consultation en situation de mobilité.
Le RWD répond à la problématique du multi-screen mais pas ceux liés au contexte d’utilisation.
Et c’est de toute façon une mauvaise pratique de cacher/afficher des éléments selon une taille d’écran
Merci pour cet article bien nommé. On pourrait rajouter à cette synthèse que la navigation en situation de mobilité implique parfois des baisses de débit, du coup le rwd ne suffit pas il faut aussi conditionner le chargement des ressources.
Perso j’aime pas du tout le responsive, impossible de zoomer sur une photo ou un texte et pourtant certains ne jurent que par ça, alors qu’on peut le désactiver de son Smartphone…
Le mieux reste vraiment d’optimiser le poids des photos et pas juste sa taille d’affichage comme font certains
Pour moi, définir le responsive design comme “une technique permettant d’optimiser l’affichage d’un site web conçu pour ordinateurs sur des terminaux mobiles” est une erreur. Pour bien concevoir un site en RWD, il faut commencer par le mobile, pour ne pas cacher des contenus mais bel et bien en ajouter ou les afficher de manière différente sur un affichage type bureau.
Je pense qu’il y a là une confusion entre le responsive design et l’utilisation des media queries CSS, qui ne sont qu’une partie du travail sur un site en responsive design.
Encore une excellente analyse. On parle de plus en plus d’adaptative design, qui porte davantage la notion de contenu et de services servis en fonction du “device”, alors que le responsive design joue essentiellement sur la technique et l’affichage.
Salut Fred. Je partage ton analyse.
Dans notre équipe, nous avons adopté un mixte adaptive design et RWD, pour les raisons suivantes (que tu évoques en grande partie):
#1- Améliorer la performance
#2- Offrir une interface utilisateur spécifique à chaque device
#3- Proposer une stratégie de contenu adapter aux usages de chacune des devices
#4- SEO
Nous avons donc une approche adaptive combinée à du RWD.
Autrement dit, nous créons, dans la majorité des cas, trois templates séparées : web, tablette, smartphone. Chacune de ces templates offrant une expérience et un contenu organisé spécifiquement pour chaque device. C’est la partie adaptive.
Mais chacune de ces templates est en RWD pour s’adapter aux différentes résolutions d’écrans.
@ Pitchart > CE que tu me décris me semble plus proche de la conception “Mobile First”. Dans tous les cas de figure, je pense que nous sommes tous d’accord pour dire que afficher/cacher des éléments ne suffit pas.
Tout a fait d’accord avec Frédéric C.
Le “mobile-first” ici exposé n’est qu’une partie, au même niveau que le server-side profiling, conditionnal loading, features detection, progressive enhancement, … la liste est longue, et aucunes des pièces du puzzle n’est à négliger.
Le site web mobile dédié, c’est très bien, encore faut-il savoir faire la frontière entre mobile et desktop: un Note2 ou un iPad Mini sont ils “mobile” ou “desktop” ?! Un Acer Transformer est une tablette ou un desktop ?
Séparer les deux expériences, pourquoi pas … mais où mettre la limite entre les deux mondes ? Optimiser l’expérience pour les 3 périphériques générant 80% des visites, évidemment, mais toujours “on-top” du RWD.
Moi j’utilise WOPE pour mes développements mobile et ça fait du RWD server side! C’est ça l’avenir!
pour info : http://www.wope-framework.com/fr/
ca fait plaisir de lire ce genre d’article, de toute façon on voit bien que le mot responsive est collé a toutes les sauces.
Ce que j’aimerai c’est que les acteurs (surtout les direction tech) comprennent que le responsive c’est avant tout : délivrer le contenu adapter au support, pas juste du bricolage pour redimensionner un site.
Ca veut dire quoi donner les bons contenus ?
Des images lights pour le mobiles, des applis souris/clavier pour le desktop -donc aucun souci avec Flash- au contraire le responsive est là aussi pour delivrer du contenu desktop !
o/
complètement d’accord avec les notions développées dans ton article.
je suis en charge du responsive design dans ma boîte et effectivement, caché des éléments pour contourner le problème de créer un contenu spécifique a différents supports , c’est crade !
ça a un coût c vrai , mais faut savoir ce que on veut …et je suis d’accord avec la technique de Pitchard !
merci pour l’article.
Merci Frédéric pour cet article intéressant qui permet d’infirmer ou confirmer ses orientations.
Dans ce type d’ article d’expert on évoque souvent de manière directe ou indirecte des sites Internet grand public (sites institutionnels, sites marchands, sites de jeux…) et peu ou pas les applications métier sur technologies web.
Elles sont pourtant nombreuses et elles aussi sont confrontées à la problématique de mobilité.
Dans ces cas là je me permets de crier haut et fort que le responsive design ou le components server side responsible design bien que très intéressant sont tout simplement impossibles.
Car il est indispensable de repenser toute l’ergonomie tout en essayant de conserver les principes généraux de la version PC ainsi que la charte graphique.
Chose comolexe aussi bien pour l’ergonomie que pour l’aspect graphique.
La mobilité bien que facilitant l’accès a l’information complexifie la réalisation et le maintien des applications. I
La quête de rationalisation des coûts ne peut se faire à coups de responsive design et doit être remplacée par la quête de l’expérience utilisateur sous peine de perte de la satisfaction utilisateur.
J avoue que la notion de mixer l’adaptive design et le responsive design est intérespsante car elle permet nettement de limiter le responsive a des devices de meme typologie mais de résolution differentes. Car n’oublions pas qu’une des plus grandes difficultés des développeurs d’applications mobiles (surtout sur android) est de valider l’application sur un maximum de support.
Qu’est ce qui définit un périphérique mobile ? Je ne veux pas jouer les trolls, c’est une question sérieuse. La multitude de terminaux et de caractéristiques techniques brouillent les frontières entre smartphone, tablette, PC etc… Mon téléphone est en 1280×800 soit la résolution de petits laptops ou netbook. La densité de pixels n’est pas un critère non plus. Le débit ? Des lignes ADSL sont souvent autour du méga contre 7 pour la 3G (sans parler de la 4G). Le touch ? Les PC de bureau le sont aussi. La puissance processeur ? On a des quad-cores dans nos téléphones… Et le Galaxy Note 2 : Est-ce un smartphone ou une tablette 3G ?
Si quelqu’un a un critère discriminant.
Le problème est pris à l’envers, du coup je ne suis pas persuadé par l’article.
“Think mobile first”.
Je partage totalement cette idée de compromis, qu’il ne s’agit en aucun cas d’une solution miraculeuse. A ce sujet, j’ai d’ailleurs publié cet article évoquant certains inconvénients du RWD : http://goo.gl/UL5rt
Le but du Responsive Web Design est de servir le même contenu web aux smartphones, tablettes et ordinateurs. Or, bien souvent, un site passe au Responsive Design, non pas à partir d’une feuille blanche, mais depuis un site initialement pensé pour des ordinateurs “Desktop” classiques… qui ont une bien meilleure connexion Internet qu’un smartphone.
Plusieurs concepts intéressants dans cet article. Merci de ce point de vue.
Je pense que le “Responsive Design” est une méthode ergonomique plus qu’une technologie ou une solution.
Comme toute méthode, elle a ses avantages & ses inconvénients.
Elle mets en avant la capacité d’une plateforme internet a délivré un service le plus équivalent indépendamment du support de connexion à celle-ci; que ce soit un service de contenu, un service transactionnel ou un service communication….
Les résolutions et écrans des terminaux mobiles évoluent très rapidement. Et les certitudes de cette année vont changer l’année prochaine…
Enfin, je pense qu’il ne faut pas parler de “Mobile first” mais ajouter la notion de “Tactile” à cette méthode de Design. Enfin, ce n’est que mon humble avis ^^
C’est toute la différence entre le “content design” et le “layout design”. Pour moi, le responsive web design est un moyen de valoriser le contenu à l’ensemble des terminaux, alors que bien souvent on préfère valoriser la mise en forme, la disposition, l’apparence au détriment du contenu.
Enfin on parle de RESS ! Il était temps. Merci pour cet article. Au passage, le RWD a un coût très élevé tant à la conception, à l’intégration et en maintenance.
Je pense également que 2 verions séparée valent mieux qu’une optimisation. L’experience utlisateur est prioritaire. Maintenant, c’est aussi au cas par cas, mais je reste persuadé qu’une version dédié repond plus au besoin d’un utilisateur nomade.