Discussion :

[Gordon Fowler]

Le Responsive Design est-il une si bonne idée ?
Pas vraiment, répond un spécialiste du Design Web lors de la conférence AgoraCMS

Lors d'AgoraCMS, l’évènement sur les CMS co-organisé par Cyril PIERRE de GEYER qui se déroule aujourd’hui, une session très intéressante sur « les tendances actuelles du design et des nouveaux usages » est revenue sur une pratique de plus en plus populaire dans la réalisation de sites : le Responsive Design.

Cette technique consiste à adapter l'affichage d'une page en fonction de la taille de l'écran. Intégrée de plus en plus en natif aux principaux CMS du marché, elle permet de répondre simplement à la diversification des terminaux (écrans de smartphones de diagonales et de ratios différents, tablettes 7 et 10 pouces, laptops ou écran large de bureau) en modifiant le nombre de colonnes, l'emplacement et les grandeurs des éléments.

Un parfait exemple en est le site du Boston Globe, un des premiers à avoir franchi le pas depuis plusieurs mois.

Boston Globe, version « PC » :



Boston Globe, version « tablette » :

Boston Globe, version « smartphone » :

Une manière simple de faire du multicanal. Trop simple ?

Un peu trop, au goût de Patrick MARUEJOULS, créateur de l’agence de design global Think Think et professeur à HEC, qui analyse que la limite - et donc la grosse faiblesse du Responsive Design quand il est utilisé de manière « brute » - est qu'il ne modifie pas les contenus affichés, mais comment ils sont affichés. Ce qui ne serait pas cohérent au regard des usages.

Les besoins auxquels répond un site mobile ne sont en effet pas les mêmes que ceux d’un site Web « pour bureau ». « Mettre les même contenus dans les deux, c’est une belle connerie », résume franchement Patrick MARUEJOULS.

Il synthétise cette idée en une formule, plutôt bien trouvée : Convergence (développer une fois pour plusieurs plateformes pour économiser les coûts) mais aussi Divergences.

Lors de sa session à AgoraCMS, le designer a pris l'exemple de Nike pour illustrer cette Convergence/Divergence.

Les visiteurs du site web « classique » de la marque de chaussures sont une infime minorité à consulter la rubrique « Trouvez un magasin » (en ordre de grandeur ils sont environ 2 %).

La fonctionnalité est donc presque cachée.

À l’inverse, un utilisateur nomade qui consulte le site mobile (m.nike.com) aura une propension beaucoup plus grande à rechercher un magasin à proximité. Ce ne sera pas nécessairement son premier besoin, mais l’importance de cette possibilité augmente.

Fort logiquement, Nike a donc amélioré l’exposition de cette fonctionnalité sur son site mobile. D’une part en augmentant sa taille, mais aussi en épurant la page pour n’y garder que quelques éléments pertinents.

Là où le Responsive Design « de base » ne fait que modifier l’agencement, une véritable stratégie multi-écran se devrait donc, d’après l’expert, de repenser l’architecture entière des sites en fonction des besoins identifiés - et contextualisés - de l’utilisateur.

Patrick MARUEJOULS ne jette toutefois pas le bébé avec l’eau du bain. Le plus important est, pour lui, de toujours centrer la réflexion de la construction d'un site autour de l’utilisateur final. Le Responsive Design inclus en natif dans les CMS pourrait donc dans bien des cas parfaitement convenir. Mais pas toujours. Voir pas souvent. L'adapter et le personnaliser resterait une étape quasi-indispensable pour arriver à un vrai sites web 100 % adaptatif. À du vrai Responsive Design donc.

Reste à savoir le pourcentage de sites où les versions mobiles et desktops doivent différer radicalement pour coller aux attentes de l’utilisateur en toute circonstance. Et donc, en creux, combien de fois cette technique dans sa version simplifiée et intégrée aux CMS reste une solution tout terrain et très économique.

Patrick MARUEJOULS

N.B. : Pour ceux et celles qui n’ont pas eu la chance de pouvoir venir à AgoraCMS, les slides des présentations de toutes les sessions seront mis en ligne prochainement.

Et vous ?

Le Responsive Design est-il adapté à la majorité des sites ? Et pourquoi ?

[Jaujon]

Le Responsive Design permet de jongler entre plusieurs contenus différents: il est possible, grâce aux media queries, de dissimuler ou d'afficher des contenus différents en fonction de la nature du terminal, de sa taille et même de la densité de pixels.
Cet article repose donc sur du vent, puisqu'il est tout à fait possible de proposer du contenu adapté pour un affichage donné grâce à la souplesse fournie par la méthodologie Responsive Design.
Évidemment, on n'est conscient de cela que lorsqu'on est allé au fond des choses, et pas après être allé consulter deux-trois sites et jeté un oeil distrait sur quelques CMS.

[Gordon Fowler]

Bonjour Jaujon,

Le propos de Patrick MARUEJOULS était bien de dire que le Responsive Design "automatisé" dans les CMS ne suffisait pas et qu'il fallait aller modifier plusieurs choses pour le rendre plus pertinent.

Je pense également que cette mise en garde répond à toute une industrie qui présente le Responsive Design comme une solution miracle. Lui dit, comme vous, qu'il faut aller voir un peu plus loin.

En gros Patrick MARUEJOULS et vous êtes d'accord. Désolé que cet article ne l'ait pas bien fait ressortir (je viens d'essayer de préciser ces éléments).

Cordialement,

[Invité]

Pour ma part je n'aime pas le responsive design car il y a trop de contrainte graphique ou autres (je vais pas les énumérer).
Dernièrement j'ai longuement hésité pour un nouveau site mais j'ai fini par choisir de faire un site en 1024px en largeur pour qu'il puisse s'adapter aussi bien sur PC que sur tablette, et pour les portables je préfère faire une application (beaucoup plus professionnel)

[camus3]

Si les boites ont le temps et le budget de présenter un site avec 15 contenus différents pour 15 médiums différents ,juste parce que le responsive design, "c'est pas optimal",tant mieux.

[thelvin]

Je n'ai qu'à peine touché au responsive design.

Si je comprends bien, l'intérêt, c'est de ne pas se traîner les 15 versions de documents possibles, et notamment ne pas leur donner 15 URLs ou de la différence de présentation par paramètre de l'URL, chose pas géniale vis-à-vis du référencement ?

Parce que bon, se traîner 15 versions dans la génération du HTML, ou dans les CSS, ça me semble plutôt au désavantage du CSS. La génération automatique, elle au moins, elle se farcit pas de garnir le document de tout ce qui pourrait possiblement servir à un terminal de la planète.

[JérémieL]

Le Responsive Design consiste à adapter un même site web à différents supports, en modifiant la façon d'afficher les contenus mais aussi en masquant/affichant tel ou tel contenu selon le support.

Ce n'est pas parce que certains thèmes "responsive design" fournis de base avec certains CMS ne sont pas adaptés à tous les contenus (ce qui est évident), que le Responsive Design est une mauvaise méthodologie pour autant.

[thelvin]

Oui ok c'est ce que ça fait. Mais en quoi c'est intéressant de faire ça au lieu de juste générer le format adapté ? (En admettant quand même qu'on sache quel format générer. Si c'est pas le cas je le vois, l'intérêt)

Je veux bien entendre une réponse du genre "c'est pas spécialement plus intéressant, les deux se valent, suivant le cas rencontré."

[CapFlow]

Le Responsive Design permet de jongler entre plusieurs contenus différents: il est possible, grâce aux media queries, de dissimuler ou d'afficher des contenus différents en fonction de la nature du terminal, de sa taille et même de la densité de pixels.
Cet article repose donc sur du vent, puisqu'il est tout à fait possible de proposer du contenu adapté pour un affichage donné grâce à la souplesse fournie par la méthodologie Responsive Design.

Cacher c'est sympathique, mais faire télécharger du contenu inutile (puisque tu vas le cacher par la suite), surtout sur mobile où ce n'est pas encore la folie niveau puissance, je trouve ça plutôt très mauvais.

alors oui, actuellement il vaut mieux faire deux versions. (Limite, faire du responsive design pour PC - tablette, mais faire une autre version pour mobile).

[roche.jul]

@CapFlow: en effet, cacher des éléments n'est pas une solution en soit (à utiliser pour l'aspect desktop, mais pas pour l'aspect mobile).

Mais il ne faut pas se cantonner au responsive design et aller plus loin: appliquer le responsive ! Notamment un sous-ensemble du responsive étant le RESS: REsponsive Server-Side.

Le principe: générer un contenu adapté au média (potentiellement aussi au navigateur). Ainsi, rien nous empêche d'utiliser des librairies RESS qui permettent de détecter le média (et ses capacités) et de générer une page / style / javascript adapté.

Ainsi, nous pourrions utiliser le CSS de base avec ses règles responsives et de ne pas injecter le contenu de certaines zones qui ne s'afficheront pas (je n'ai pas encore trouvé comment agrandir les fenêtres sous smartphones / tablettes).

Cordialement

[CapFlow]

Mais il ne faut pas se cantonner au responsive design et aller plus loin: appliquer le responsive ! Notamment un sous-ensemble du responsive étant le RESS: REsponsive Server-Side.

Le principe: générer un contenu adapté au média (potentiellement aussi au navigateur). Ainsi, rien nous empêche d'utiliser des librairies RESS qui permettent de détecter le média (et ses capacités) et de générer une page / style / javascript adapté.

De ce côté-là je suis d'accord. Je ne connaissait pas le RESS, merci de l'information.
A vrai dire je me suis demandé si on pouvait gérer facilement côté serveur les media, (oui, du coup) mais j'ai préféré aller au bout de ma pensé.

Donc responsive oui, mais pas que en CSS (et éventuellement JS), il faut le faire des deux côtés (serveur - client)

[camus3]

Mais il ne faut pas se cantonner au responsive design et aller plus loin: appliquer le responsive ! Notamment un sous-ensemble du responsive étant le RESS: REsponsive Server-Side.

lol , le responsive server-side , antinomique par définition, à moins d'y rajouter un bonne couche d'ajax , et encore , ça ne fait qu'alourdir et la page et l’expérience utilisateur...

Et tu fais comment quand l'utilisateur redimensionne l'écran , tu recharges le tout coté serveur ? Il vaut mieux un contenu existant mais caché , plutôt qu'une couche framework X-Yqui va encore alourdir les traitements cotés serveurs ainsi que coté client via javascript surtout quand CSS est suffisant.

[ulspider]

Dans 90% des cas, le Responsive Design est intéressant et répond correctement au besoin, à savoir faire du multicanal à moindre frais. Les CMS s'y prête donc bien et c'est une bonne idée d'offrir cette possibilité.

Par contre pour des sites importants, on ne peut se permettre cela. J'ai travaillé sur un site gros e-commerce et il faut vraiment que le site soit différent sur mobile et sur un ordinateur pour que l'expérience client soit maximale afin de retenir le client. On a pas les mêmes besoins et l'on ne vend/affiche pas les mêmes produits selon le canal.

L'exemple de Nike explique bien cela et le mien peut être encore mieux : Le site desktop est en flash si l'utilisateur dispose de Flash (on se doute que pour Ipad c'est mort), on prévoit donc un site en XHTML/CSS/JS (Jquery UI). Et si l'utilisateur n'a pas JS d'activé, on a encore un site de replit HTML/CSS (bon pour ce dernier l'expérience client est "très allégé"). Pour le site mobile, c'est du XHTML/CSS/JS sur lequel on aura du Jquery UI Mobile pour améliorer le rendu.

Et ce n'est pas parce que l'on a X canaux de distribution que l'on va avoir X fois plus de boulot. Dans le cas du site e-commerce, toute l'intelligence est gérée par un énorme service web et chaque fois que l'on veut ouvrir un nouveau canal (faire un nouveau site pour ipad, iphone...), on plug la nouvelle interface à ce service web. Bref le client à l'impression d'avoir un site spécial Ipad, spécial Android... alors que pas du tout. Mais bon comme je l'ai dit, ce besoin n'est pas forcément majoritaire

[LSMetag]

Tiens, je ne savais pas que ça s'appellait "Responsive Design"...

Ca fait plusieurs années que je code tous mes sites en design "adaptif".
Et donc quand je tombe sur des sites qui ne prennent que la moitié de l'écran, avec un gros vide à droite et à gauche, ça me choque toujours...

Donc oui, je suis très favorable au "Responsive Design", même si c'est plus compliqué à faire.

[Muchos]

Et tu fais comment quand l'utilisateur redimensionne l'écran , tu recharges le tout coté serveur ? Il vaut mieux un contenu existant mais caché , plutôt qu'une couche framework X-Yqui va encore alourdir les traitements cotés serveurs ainsi que coté client via javascript surtout quand CSS est suffisant.

Encore faut-il que l'utilisateur redimensionne son écran

Et non, CSS n'est pas forcément suffisant : entre une navigation desktop sous fibre et une navigation mobile sous hotspot wifi public, c'est bien que le contenu distribué soit adapté.

Donc, bien que le responsive design "CSS" est fondamental, l'approche RESS a également tout son intérêt — et c'est évidemment vers ça que Patrick Maruejouls nous demande de regarder.

[Jaujon]

Mais il ne faut pas se cantonner au responsive design et aller plus loin: appliquer le responsive ! Notamment un sous-ensemble du responsive étant le RESS: REsponsive Server-Side.

On appelle cela aussi le design distribué (entre autres).
Cela peut être intéressant, mais le vice caché de la méthode est que l'on n'est plus indépendant du terminal et que l'on se base sur les données fournies par le client (l'en-tête User_Agent), ce qui va à l'encontre du Responsive Design, qui lui s'adapte au statut et aux capacités du navigateur.

Le vrai défaut du RD est qu'un site ne sera jamais optimal pour tous les terminaux.

[mmbpeople]

(pour les smartphones)Autant pour certains sites je trouve ça super(genre pour lire les news aux toilettes), autant dès fois ça me gave car il manque des fonctionnalités, on ne s'y retrouve pas, alors qu'il suffit de zoomer sur le site normal et on s'en sort très bien.

Je ne nie pas que le responsive design apporte qqch, et a un impact en terme de fréquentation(je préfère un site de news responsive qu'un truc ou il faut faire que zoomer), mais l'utilisateur qui a besoin de consulter une information fera l'effort même si le site n'est pas responsive.

En fait je pense que ça dépend de l'audience du site. Un site commercial devra être en responsive, par contre le site d'une association de pêche par exemple pourra s'en passer.

Du point de vue de l'utilisateur basique, ça peut être pertubant d'avoir deux sites différents du pc au téléphone/tablette, l'utilisateur risque de ne pas s'y retrouver. Dès fois ça me gave tellement sur mon tel que je change l'user agent en desktop.

Enfin cela nécessite un niveau de compétences plus élevé pour le concepteur, prend plus de temps, limite les choix au niveau design et complexifie encore plus la mise à jour pour le rédacteur.

Bref je pense qu'il faut vraiment voir si le jeu en vaut la chandelle avant de se lancer.

[jason42]

Dès fois ça me gave tellement sur mon tel que je change l'user agent en desktop.

justement c'est pas du responsive design ça:
ce dont tu parles c'est une version differente en fonction du user-agent, une version mobile en plus de la classique quoi.
Mais le responsive design, c'est juste en fonction de la taille de ton navigateur.
si tu vas sur un site responsive avec ton navigateur sur pc, et que tu redimenssionne la fenetre du navigateur tu verras le contenu s'adapter automatiquement.

[Jean-Georges]

Il part déjà d'un postulat faux.
Les utilisateurs de devices mobiles ne sont pas forcément nomades mais sont pour beaucoup dans leur lit ou leur canapé.

Le réel problème du responsive design et qu'il n'encourage pas les constructeurs à plancher sur de nouveaux appareils qui offriront une prise en main ainsi qu'une surface d'affichage réellement satisfaisante. Un écran tactile, même sur un logiciel bien optimisé, est pénible à utiliser. La généralisation de ces salopries est un énorme pas en arrière dans la technologie et j'espère qu'ils disparaîtront rapidement, d'autant plus qu'ils rendent leurs utilisateurs stupides en se limitant à la consultation de contenu là où un ordinateur au contraire favorise la créativité.

Les google glass par exemple me paraissent déjà bien plus intéressantes. Mais il faut arrêter de déconner, un smartphone ou une tablette est un jouet pratique pour dépanner quand il n'y a pas d'ordinateur à portée mais n'aurait jamais du remplacer celui-ci.

[marcha]

En fait je pense que ça dépend de l'audience du site. Un site commercial devra être en responsive, par contre le site d'une association de pêche par exemple pourra s'en passer.

+1

Je pense qu'on a trop souvent tendance à vouloir généraliser des règles que l'on veut appliquer à tout types de sites.

Pour moi, qui ne fait que des sites corporate pour petites entreprises (genre 3000 visiteurs par mois par site). Je cherche plutôt à réaliser des sites "Mobile Friendly". Car il n'y a pas beaucoup de budget.

Par exemple en espaçant suffisamment les boutons des navigations. En conservant un nombre de mots par ligne juste lisible sans zoomer. En évitant la dépendance à la souris (pas de mouseover indispensable) etc...

Si les sites étaient pas bloquant et pas trop lourds quand on les visites sur un mobile, ça serait déjà un énorme progrès.