Responsive Design
Design

Responsive design.
Ou comment faire entrer une girafe dans une Twingo en trois temps

 Yann Walkowiak 0 commentaire

Admettons que votre site web soit une girafe. Que l’écran d’ordinateur soit un véhicule. Et que, pour une raison bizarre, vous souhaitiez faire entrer la girafe dans la voiture. C’est la question à laquelle nous allons tenter de répondre ici.

La girafe et la Twingo

A ses débuts, Internet s’est répandu dans les foyers grâce aux ordinateurs fixes. Afficher un site sur un écran de pc était alors une entreprise facile : cela revenait à faire entrer une girafe dans un bus londonien. Les sites étaient conçus pour apparaître sur ce format d’écran.

Mais Internet s’invite maintenant dans la rue et devient mobile : netbooks, tablettes, smartphones… Les supports se multiplient, et sans la moindre norme. A chaque marque, chaque modèle, chaque support, correspondent des tailles d’écran et des formats spécifiques. On en arrive au final à ça : il existe actuellement plus de 4500 résolutions d’écran différentes sur le marché !

Or, si afficher un site web sur un écran 19 pouces est aisé, afficher le même site sur un écran 3,5 pouces représente un challenge de taille : c’est vouloir faire entrer une girafe dans une Twingo.
Les développeurs ont donc imaginé des techniques de sioux pour répondre à ce challenge.

Zoom sur la girafe

La première initiative est venue des concepteurs de smartphones et de tablettes. Plutôt que de modifier les girafes, ils ont donné à ceux qui voulaient les observer une paire de jumelles réglables : des outils de zoom pour pouvoir naviguer plus facilement dans la page. L’internaute pouvait ainsi, soit regarder la girafe en entier (mais miniaturisée), soit la voir à la bonne taille (mais n’en voir qu’un petit fragment). La solution était temporaire et loin d’être ergonomique, mais elle suffisait tant que l’utilisation de l’Internet mobile restait marginale. Ce qui n’est plus le cas aujourd’hui : les smartphones sont maintenant majoritaires aux Etats-Unis, et les experts prévoient une montée en puissance de l’internet mobile en 2013. Au point que certains prédisent la disparition du pc.

La mini-girafe

La solution suivante vint des développeurs de sites. Elle consista à concevoir des versions alternatives de sites web : plus légères, moins riches en images, et amputées de certaines fonctionnalités. Après le docteur Denfer et son Mini-Moi, la girafe avait elle aussi sa version miniature.

Cette solution est encore souvent privilégiée. Mais si elle est satisfaisante à certains égards, elle présente tout de même quelques inconvénients :

  • elle nécessite de développer une version du site pour chaque type de support. Mais quid de ceux qui n’existent pas encore ? Si de nouveaux formats apparaissent par la suite, tout le travail sera à refaire.
  • chaque site existant doit dans cette logique “pondre” une version allégée de lui-même pour être optimisé sur chaque support. Cela conduit au final à une multitude de webs, un pour chaque type de support : un web riche (le vrai), et ses versions pauvres. Or, si les consommateurs apprécient assez qu’il y ait un Coca normal, un Light, et un Zéro, les internautes acceptent beaucoup moins l’idée d’un web Light (et encore moins d’un web Zéro O_o’).

Les sites mobiles peuvent être une source de contrariété : les internautes mobiles veulent avoir accès à la même information que sur leur pc : ils souhaitent accéder à toutes les données et ne pas être cantonnés à un web du pauvre. Le plus souvent, ils finissent par accéder à la version normale pour trouver une information qui n’était pas disponible sur la version allégée ; et parce que cette version desktop n’est pas optimisée pour les mobiles, l’expérience utilisateur devient alors très désagréable. Le chemin conduisant à l’information est donc doublé inutilement, au détriment de l’expérience utilisateur.

D’un point de vue économique, la solution est assez peu rentable, car elle multiplie le travail des développeurs pour un même site. D’autre part, l’Internet étant destiné à devenir de plus en plus mobile (38 millions d’internautes français en 2011, et déjà 18,3 millions de mobinautes), c’est également risquer que le web appauvri devienne le plus consulté.
La solution est, une fois de plus, temporaire.

Le responsive design, ou la girafe contorsionniste

Puis vint une idée très différente : plutôt que de dupliquer son site, pourquoi ne pas en créer un seul qui puisse apparaître de manière optimisée, quelle que soit la taille et le format de l’écran ? Une sorte de girafe contorsionniste, capable d’entrer dans n’importe quel véhicule. Le concept de responsive design était lancé.

Le responsive design pourrait se traduire littéralement par “design réactif” ou “adaptatif” : nous le traduirons plutôt ici par design champignon, ou champidesign (en référence à un monde où un plombier change de taille avec un champignon, ou à un autre où les filles parlent aux vers à soie). Et s’il faut justifier le terme, disons que c’est un acronyme pour : Conception Hautement Adaptable Multi-Plateforme Innovante.

L’idée consiste à détecter le format de l’écran et la nature du support, pour proposer un design différent en fonction de ces informations. Chaque page du site est découpée en modules, qui s’agencent différemment selon la taille disponible : sur trois colonnes pour un grand écran par exemple, puis sur deux colonnes pour une tablette et sur une seule pour un smartphone (le cas de figure le plus fréquent à l’heure actuelle). Certaines informations secondaires ou images décoratives sont également supprimées pour alléger au maximum la page. Le contenu n’est quant à lui pas allégé, mais s’affiche différemment. Tous les éléments sont rendus flexibles : images et typographie ne sont plus fixes, mais exprimés en pourcentage par rapport à la taille totale de l’écran : l’image devient plus petite à mesure que l’écran rétrécit, tandis que la typographie grandit dans le même temps, de manière à être lisible, même sur petit écran.

Le champidesign peut modifier profondément la manière de réaliser un site web. S’il est toujours possible de préférer la technique de dégradation élégante (concevoir un site grand format pour desktop, puis l’adapter au mobile avec une version miniature), il est également possible de travailler en sens inverse : concevoir d’abord le site pour la version mobile, de manière à ce qu’il soit pleinement opérationnel et se suffise à lui-même ; puis l’améliorer pour des formats plus grands et prenant en charge davantage de fonctionnalités. C’est là que le terme de champidesign prend tout son sens : on conçoit d’abord une girafe miniaturisée (mais fidèle) pour la Twingo, avant de la faire grandir pour le bus londonien !

Ce changement de paradigme requiert des compétences supplémentaires. Si le webdesigner pouvait faire tout son travail sur Photoshop pour un site traditionnel, il doit avec le champidesign acquérir des compétences techniques, imaginer comment son design va évoluer en fonction des supports. La tâche de l’intégrateur ou du développeur front-end devient également plus délicate : si un site aux dimensions fixes est une promenade de santé, un site flexible est un parcours du combattant. Au-delà du design, c’est tout l’agencement de l’information qui doit être repensé : quelles parties doivent disparaître, lesquelles doivent rester, dans quel ordre, comment agencer les menus pour conserver une navigation efficace…

Contorsions et torticolis

Le risque pour une girafe contorsionniste, c’est évidemment d’attraper un torticolis. Et c’est ce à quoi conduit le responsive design pour le moment. Le champidesign est parfait d’un point de vue théorique. Dans la pratique, c’est une toute autre affaire.

  • La tâche est complexe à réaliser, parce qu’elle demande à chaque membre de l’équipe de dépasser ses attributions habituelles. On ne construit pas un site de la même manière en fonction de la taille de l’écran : cela nécessite donc un important travail en amont pour répartir et hiérarchiser l’information, déterminer celle qui doit toujours rester disponible, les éléments qui peuvent disparaître, dans quel ordre doit s’agencer le tout.
  • Quel que soit l’effort entrepris, un site en responsive design ne pourra jamais être aussi léger qu’un site pour mobile, conçu pour un usage plus spécifique : plus léger, plus pauvre peut-être, mais optimisé et donc bien plus rapide au chargement qu’un site champidesigné.

Le responsive design est encore long au chargement : les images sont d’abord chargées avant d’être redimensionnées pour s’adapter à la taille de l’écran. Ce phénomène est extrêmement gourmand en ressources CPU. Et les smartphones ne sont pas encore assez performants pour être rapides sur ce point. S’il existe des solutions alternatives, aucune n’est à ce jour optimale.

  • Pour qu’un site s’adapte sur un écran géant comme sur un format de poche, il doit être extrêmement flexible. Ce qui est à la fois une force et une faiblesse. Dans la pratique, il est constitué d’éléments au positionnement relatif, qui se disposent différemment en fonction de l’espace disponible. Si le champidesign propose donc un site fluide et adaptatif, il conduit au découpage des pages en petites unités repositionnables. Difficile de concevoir dans ces conditions un site au design original où chaque élément aurait une place précise dans une image globale, par exemple : au moindre redimensionnement de la page, l’ensemble s’écroulera comme un château de cartes.

Si le champidesign est de manière générale la réponse à la multiplication des supports, il reste donc des cas où le site mobile constituera tout de même une alternative plus avantageuse :

  • pour un site souhaitant proposer des informations pratiques épurées, sans contenu rédactionnel : les horaires de transports pour une compagnie de transports en commun, par exemple.
  • quand les deux sites (mobile et pc) sont conçus pour avoir des activités différentes et remplir des objectifs distincts.
  • si le commanditaire souhaite proposer une expérience de navigation ou de design original, pour l’un et/ou l’autre site.

Conclusion

Le champidesign permet donc effectivement de faire entrer une girafe dans une Twingo… mais lui fait perdre un peu de sa grandeur au passage.
Qu’importe : le champidesign n’en est qu’à ses débuts. Nul doute que des équipes créatives proposeront de nouvelles solutions en matière d’ergonomie et de design, et le côté modulaire un peu limité au niveau créativité disparaîtra progressivement. Les outils en place sont déjà nombreux pour faciliter cette transition vers le web contorsionniste.

Si les sites mobiles ont encore leur utilité dans certains cas, les sites réactifs vont davantage dans le sens de l’évolution du web : un seul web adaptatif, standardisé, s’affichant correctement (quel que soit le support ou le navigateur), plutôt qu’une pléthore de contenus dupliqués et anarchiques.

Vous avez un projet de site internet. Nous sommes une agence web.

Nous étions faits pour nous rencontrer.
Prenons donc rendez-vous.


Contactez-nous par téléphone au 03 20 26 96 25 ou via notre formulaire de contact

Cet article vous a plu ?

Laissez-nous votre adresse mail et nous vous enverrons chaque mois
un récapitulatif des articles publiés sur le blog.

0 commentaire Déposez le votre
Donnez-nous votre avis