« Responsive design », « site liquide » et mise en page

responsive Design

Les moyens d’accéder au web se sont multipliés, smartphones, tablettes, ordinateurs portables, ultra portables, écrans larges de bureau 24′, 32’…. en même temps que les tailles des écrans ainsi que leurs résolutions d’affichages ne cessaient de croître. Pour les concepteurs multimédia, ergonomes, web designers, cette multiplication des formats n’a fait qu’ajouter à la problématique du format optimum et de la mise en page pour un site web.

Le « responsive design », un format idéal ?

Face à cette surenchère des formats – et le mot n’est pas trop fort, car aujourd’hui sont proposés aux consommateurs, des smartphones-tablettes, sorte d’hybrides entre les deux terminaux – et donc face à la problématique de la taille/résolution d’un site web par rapport à tous ces formats; une solution « idéale » est apparue : le responsive design.
Mais, précisons davantage notre objectif, nous souhaitons obtenir une sorte de format universel, autrement dit, que notre site internet soit accessible, lisible, et que sa mise en page/composition s’adapte parfaitement, quelle que soit le format du terminal (du smartphone à un écran large 32′), et cela, sans être obligé d’utiliser des fonctionnalités de type « zoom » sur son écran.

Pour répondre à cette problématique, nous pouvions proposer d’une part un site basé sur des résolutions standards, avec une mise en page fixe (un nombre de colonnes déterminé, des tailles fixes en largeur)  et qui conviendraient à la plupart des écrans standards (portables et ordinateur de bureau). Et d’autre part, en complément, proposer un site mobile, beaucoup plus simple, léger avec un affichage optimisé, sur une colonne par exemple. Mais voilà qu’une autre possibilité est apparue, un solution « miraculeuse » qui permettrait au « design » de s’adapter à n’importe quel écran/résolution : « Le responsive design« .

Le « responsive design » représente une technique de programmation et de conception qui permet à un site internet de s’adapter aux différentes tailles d’écran et aux différents terminaux (navigateur, tablette, mobile, télé connectée, …). Ainsi, les utilisateurs pourront avoir une expérience adaptée à leur terminal sans devoir utiliser les fonctionnalités de zoom (ou un autre type de redimensionnement). Ils pourront consulter la même information, mais avec une mise en forme différente selon le type de terminal utilisé. Il ne s’agit plus de concevoir autant de mises en forme qu’il y a de familles de terminaux mais de concevoir une seule interface auto-adaptable.
Dans les faits cela donne l’exemple ci-dessous, le même site s’affiche successivement  sur trois terminaux différents, avec des mises en pages (colonnes) qui  changent automatiquement en fonction des résolutions:

  • Un smartphone avec un affichage sur une colonne
  • Un ordinateur portable compact avec un affichage sur deux colonnes
  • Un écran large d’ordinateur de bureau avec un affichage sur quatre colonnes
responsive design

Exemple de responsive design, http://colly.com/

Cela paraît très séduisant, mais ce format « universel » est-il réellement pertinent ?
Le fait de proposer une sorte de mise en page/ergonomie dynamique, avec entre autre, un nombre de colonnes qui varie selon le terminal et sa résolution est-il la solution idéale ?
Qu’en est-il des contraintes ? Du coût ? De l’ergonomie et de la mise en page ?

Les limites du « responsive design »

Plus long, plus complexe, plus technique et donc… plus cher.

Il faut traiter beaucoup plus de cas de figure autant sur le plan de l’information et du contenu à afficher que sur la mise en page, la mise en forme ( typos, images, etc… ).
Pour bien maîtriser le « responsive design, » il y a beaucoup d’éléments techniques à connaître et pas simplement les media-queries CSS3. On est largement confronté aux spécificités de certaines plate formes. Et les choses ne semblent pas aller en se simplifiant.

Moins de créativité et de liberté dans la composition des interfaces

Étant donné le nombre important de contraintes techniques et ergonomiques, cela réduit naturellement les possibilités de mise en page et la créativité. Et il apparaît clairement avec les « designs responsive » que les sites sont très proches les un des autres, peu originaux, et avec un style « grille/colonne » très marqué.

Une gestion des images plus complexe

Sachant que le site et la mise en page s’adaptent aux différents terminaux, il faut aussi faire un travail plus complexe sur les images qu’il est nécessaire soit de cacher, soit de redimensionner.
Travail toujours plus délicat, car il faut aussi gérer les temps de chargement (plus longs) et la consommation CPU toujours sensible sur les smartphones.

Plus de différences entre navigateurs et supports

Le « responsive design » s’appuie essentiellement sur l’HTML/CSS , langage qui est interprété différemment selon les navigateurs, avec souvent une couche comportementale en supplément.  Et cela se traduit parfois par des solutions assez (trop) complexes.

La question fondamentale de la mise en page et de l’ergonomie.

Le web a fait une avancée essentielle en matière de conception, puisqu’il a repris les fameuses grilles de mise en page utilisées dans le « print » (Voir le site 360.gs), pour structurer le contenu de nos interfaces web et apporter ainsi cohérence et unité à l’ensemble des pages d’un site.

La grille, appelée également grille de conception permet d’organiser et de structurer sa
surface de composition. Elle participe de la composition d’une maquette claire et cohérente dont on appréhendera plus facilement la continuité et la logique de lecture.
La modularité de la grille  peut être exploitée de manière invisible pour structurer la relation existant entre des éléments parfaitement disparates dont certains peuvent s’étendre sur plusieurs colonnes. Il est particulièrement recommandé de s’appuyer sur une grille de mise en forme pour concevoir les différents modèles de pages d’un site (exemple de grille appliquée à notre blog, voir image ci-dessous).

grille blog66

Grille>Blog66

Cette grille est donc un élément fondamental de la conception qui est fixé en amont, et avec un nombre de colonnes précis. Mais que se passe-t-il si précisément ce nombre de colonnes devient plus ou moins aléatoire selon les formats ? Que se passe-t-il si notre site n’observe pas la même mise en page en fonction des terminaux ? Et bien nous risquons fortement de perdre notre mise en page ! C’est-à-dire notre hiérarchisation de l’information, notre unité et notre cohérence au niveau de la « forme ».
En effet,  le résultat du « responsive design » peut nous amener pour un même contenu à plus de 5 mises en forme différentes ! Si vous consultez via un smartphone vous êtes sur une colonne, et si vous êtes bien confortablement assis derrière votre écran large 29′ le même site s’ouvrira peut-être sur 5 colonnes ! Difficile donc de rester cohérent sur la hiérarchisation, sur la cohérence et la pertinence de notre mise en page.

Nous distinguons donc ici une autre limite et pas des moindres, du « responsive design ».
Un grand nombre de sites ne peuvent pas s’affranchir d’une mise en page clairement définie, s’appuyant sur une grille avec un nombre de colonnes précis et non aléatoire… C’est à partir de là qu’ils installent une cohérence éditoriale au niveau de la forme, qu’ils maintiennent une unité et qu’ils guident clairement et volontairement l’œil de l’internaute à travers les différentes pages de leur site.

Conclusion :

Nous attendions beaucoup du « responsive design »; il se présentait comme une solution innovante et pertinente, permettant enfin de résoudre le problème lié à la résolution des sites web.  Mais après un accueil très enthousiaste, nous avons en réalité distingué un grand nombre de contraintes et parfois même des défauts majeurs de cette approche du design web. Cela ne signifie pas qu’il faille complètement écarter cette solution, mais nous devons bien en mesurer les conséquences en terme de complexité, de coût, de compatibilité… Enfin, sachons apprécier que les sites web ne soient plus conçus uniquement par des développeurs, mais aussi par des concepteurs, des web designers, qui  s’appuient sur les grands principes du design graphique (typographie, couleurs, formes,…) et plus précisément sur les fondamentaux de la composition et de la mise en forme (grille de composition, hiérarchisation de l’information, charte éditoriale…).
Or, le « responsive design » qui implique par nature, une composition adaptable et donc variable – selon les terminaux, parfois 1 parfois 5 colonnes pour un contenu quasi identique – nous éloigne des principes de la composition qui exigent au contraire de respecter un format, de suivre et de composer avec une grille… pour maintenir l’unité, la cohérence, et ainsi toujours mieux guider l’internaute.
En conséquence, plutôt que de passer beaucoup de temps à développer une solution « responsive » avec toutes les contraintes et donc les limites que cela implique,  il sera souvent plus rapide, plus efficace, plus juste, plus original et moins coûteux, de concevoir une version mobile en complément d’un site web au format standard.

Ce contenu a été publié dans Composition & mise en page, Webdesign, avec comme mot(s)-clef(s) , , , . Vous pouvez le mettre en favoris avec ce permalien.

2 réponses à « Responsive design », « site liquide » et mise en page

  1. raraNidaovedy dit :

    Merci pour cette information interessante

  2. Sans entrer dans le sujet même, il est effectivement intéressant de voir qu’on assiste avec le responsive design à un mécanisme bien courant dans les nouvelles technologies : premier stade, accueil enthousiaste. Deuxième stade, emploi massif sans questionnement (aussi en raison d’une demande croissante de la part du client). Troisième stade, recul et analyse. Puis, quatrième stade, rééquilibrage et utilisation juste et judicieuse. A découvrir quelle sera la place réelle du responsive design d’ici quelques années…

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *