Responsive design: On ne nous dit pas tout !

Définition (tentative) du responsive design

Si comme nous pour Wooster, vous décidez de vous lancer pour votre prochain site dans du responsive design, vous serez alors vite confrontés à quelques limitations ou imprécisions quant à la définition de ce qu’est le responsive design.

L’idée de base, qui n’a échappée à personne, est de pouvoir adapter le contenu d’une page à la définition de l’écran utilisé pour la lire. Or cette définition fonctionne également très bien pour des techniques utilisées bien avant le responsive design comme:

Adaptive design: Permet d’ajuster la disposition du contenu d’une page par étape (par pas ou cran) à un certain nombre de tailles prédéfinies.
Liquid ou Fluid design: Permet d’ajuster la disposition du contenu d’une page en continu pour n’importe quel taille d’écran.

Comme le montre le diagramme ci-dessous pris dans cet excellent article, l’adaptive design serait en fait la véritable clé d’entrée vers la possibilité de gérer depuis le même code différents types de terminaux dont le responsive design n’est qu’une des parties.

La notion d’améliorations progressives ne me semble pas assez mise en avant dans la réflexion autour du responsive design. Car en dehors des changement des résolutions d’écrans, les possibilités même des différents terminaux peuvent varier du tout au tout. Ils sont plus ou moins performants, certains utilisent une souris, d’autres sont tactiles…

Tout n’est pas donc pas si simple que ce que la simple expression responsive design laisserait à penser. La majorité des frameworks disponibles portant cette appellation (Bootstrap, Gumby, Zurb…) ne traitent qu’un des aspects qui permettent à un site web d’être réellement responsive, voir adaptative !

Layout

C’est la part du lion dans cette affaire. La partie disposition du contenu sur une page est l’aspect le mieux traité aujourd’hui et hérite des travaux qui ont depuis des années été mené sur les systèmes de composition (grilles) et sur le « fluid design ». Rappelez-vous pour mémoire les Blueprint CSS et autres 960.gs. 960.gs qui a désormais son successeur; je vous le donne en mille… Il est responsive !

Cet aspect des choses est donc plutôt simple à prendre en main et bien géré. Sur Twitter Bootstrap par exemple (mais pas seulement), il est d’usage d’utiliser des classes et des utilitaires spécifiques au responsive design.

Vous pouvez ainsi facilement :

Afficher, masquer du contenu en fonction du type d’appareils affichant la page.
Réorganiser l’affichage de ce contenu.

Cependant, ce n’est pas parce qu’il est possible de disposer des blocs comme bon vous semble en fonction des écrans que cela suffit à rendre la chose simple d’un point de vue design. Ça reste un vrai casse tête !

Typographie

Là ça commence à se gâter. Il est difficile par exemple, voir non souhaitable de conserver un design 100% fluide dès lors que le contenu de la page ou du site est composé majoritairement de texte.

En effet, Lisibilité et design fluid ne font pas bon ménage. Si vous souhaitez pouvoir conserver une lecture optimale, fixée depuis belle lurette aux alentours de 65-80 caractères par ligne, avez-vous d’autres choix que de fixer la largeur de la colonne contenant votre texte, largeur variant en fonction de la taille de l’écran, de la police utilisée, de la taille de caractères ?

Certains s’interrogent sur la taille des polices à utiliser, non pas en fonction de la taille de l’écran, mais en fonction de la distance du lecteur face à l’écran.

Certains pensent même qu’il faut penser à ajuster la luminosité d’une police de caractères en fonction du terminal utilisé.

Si ce sujet, passionnant au demeurant vous intéresse, vous pouvez commencer par cette liste d’articles sur le sujet.

Médias

Ici encore pas évident du tout car il faut gérer les différentes tailles d’écran mais aussi de résolutions. Merci à Apple pour ses écrans Retina !

En attendant une standardistion des pratiques en ce domaine, tout le monde semble s’accorder à utiliser la technique consistant à déclarer quelle image sera affichée en fonction des tailles et résolutions d’écran. Regardez cet exemple de code pour vous faire une idée du travail à accomplir pour chaque image.

<span data-picture data-alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
  <span data-src="small.jpg"></span>
  <span data-src="medium.jpg"     data-media="(min-width: 400px)"></span>
  <span data-src="large.jpg"      data-media="(min-width: 800px)"></span>
  <span data-src="extralarge.jpg" data-media="(min-width: 1000px)"></span>

  <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
  <noscript>
  <img src="small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
  </noscript>
</span>

Ce code HTML imite ce qui est proposé dans la spécification « picture element » du W3C. Il est fourni comme exemple avec PictureFill, la librairie Javascript qui permet d’implémenter des images dites « adaptatives ».

Responsive design: Y aller ou pas ?

Le choix vous appartient bien sûr et il dépend certainement du type de projets que vous avez à gérer. Il paraît pourtant difficile de faire l’impasse sur le concept dans les années à venir. L’idée de cet article était de mettre en lumière les zones d’ombre ou mal exposées du concept de responsive design et surtout de vous fournir, des débuts de piste, des liens pour vous permettre de relever les « défis » auxquels vous allez devoir faire face si vous vous embarquez dans l’aventure. Un homme averti en vaut deux dit-on, qu’il en soit ainsi !