Pour certains projets à la mise en pages complexe, nous aimerions beaucoup qu’EPUB 3 soit massivement supporté. La raison est assez simple : EPUB 3 intègre les media queries.
Pour ceux qui ne le sauraient pas, les media queries permettent d’utiliser des règles CSS différentes en fonction des caractéristiques de l’appareil utilisé par le lecteur — la largeur de l’écran le plus souvent. L’idée est de créer des points de rupture afin de modifier la mise en pages et de garantir un confort de lecture suffisant.
Dans le domaine du design web, où ils sont utilisés depuis un certain temps, les media queries sont à considérer comme un élément technique du Responsive Web Design. Certains vont même jusqu’à dire qu’ils en sont l’élément technique principal. Mais pour nous, que sont les media queries ?
Je pense vraiment important de faire la distinction entre les pratiques web et livre numérique. En effet, les designers web ont longtemps pensé pour l’écran d’ordinateur, ils se mettent maintenant peu à peu au design mobile. Or, l’ebook designer a toujours pensé — logiquement — pour le mobile d’abord (tablette, liseuse et smartphone). De plus, nous ne disposons pas du contrôle total de la mise en pages de nos livres numériques, nous devons faire dans un environnement de design partiellement imposé1. Il ne faut pas non plus oublier les réglages utilisateur, dont l’utilisation est bien plus fréquente pour le livre numérique. Enfin, ils n’ont pas à prendre en compte une notion de pseudo-page. Pour toutes ces raisons, il me semble que l’intérêt des media queries est un peu moindre pour l’ebook designer.
D’ailleurs, il est déjà possible d’utiliser des media queries avec EPUB 2 puisqu’ils sont supportés par iBooks. Combien ont utilisé cette possibilité ? Très peu à ma connaissance. Il faut dire que le but du « jeu » ici est de les utiliser sans faire sauter toute la mise en pages sur le moteur de rendu Adobe, qui ne les apprécie guère et se révèle très tatillon lorsqu’il parcoure la feuille de styles…
Le design web est en train de changer
Je suis récemment tombé sur un article intitulé The Responsive Web Will be 99.9% Typography. Cet article me semble intéressant dans notre cas puisqu’un designer web exprime l’idée que la mode « Minimaliste + Typographique » n’est pas réellement une mode mais une nécessité logique. Citons quelques passages intéressants…
Je suis sûr que comme moi, beaucoup de designers commencent à être fatigués de tester sur X appareils. J’ai pu penser que de tester sur le maximum d’appareils possible était la bonne manière de faire. Maintenant, je considère que c’est une pure perte de temps.
Je confirme que cela peut-être une perte de temps monstrueuse. Il vaut largement mieux établir un panel très précis d’appareils et s’y tenir. Tant pis pour les autres… qui ne nous facilitent de toute manière pas la tâche puisqu’ils ne fournissent ni documentation, ni émulateur2. Et puis, très franchement, il est financièrement impossible de suivre et de tout acheter.
Nous en sommes au point où il y a déjà plus de bidouilles, artifices et crimes contre le design d’interface utilisateur qu’il n’y en a jamais eu, afin de faire fonctionner un site sur un tout petit panel d’appareils. Dans un an, nous, les designers de ces sites devront maintenir des modèles et des surcouches de media queries de plus en plus nombreuses afin de gérer les différentes tailles d’écrans, résolutions Retina/HD et tout ce qui apparaîtra sur le marché entre-temps.
En jetant un œil sur les feuilles de styles de certains thèmes WordPress par exemple, on peut se rendre compte qu’effectivement, le tout devient compliqué à gérer…
Il n’y a aucun autre type de design que celui basé sur la typographie qui fonctionnera correctement partout — vous finirez simplement par faire des compromis sur les points de rupture et les changements de mise en pages. Le design deviendra bien trop cassant, voire fragile.
Notre chance, finalement, c’est que le design du livre est principalement typographique.
Le risque
Dans ma vision des choses, un livre numérique bien pensé ne nécessite pas de media queries. Même certaines mises en pages complexes peuvent être adaptées sans forcément simplifier à l’extrême. Bien évidemment, il reste des publications pour lesquelles il serait idiot de se priver des media queries. Se pose ici la question de la nécessité.
L’important, me semble-t-il, est de bien comprendre que leur usage ne doit pas devenir automatique. Le risque est de faire dépendre le design du livre numérique sur des « dégradations contrôlées ». Puisque le livre est typographique, il est suffisamment aisé d’en adapter la composition sans devoir en passer par des media queries. Mais pour ce faire, il faut bien évidemment comprendre les contraintes du numérique et correctement les intégrer pour s’adapter au mieux. Bonjour la pseudo-grille et les valeurs relatives (% ou em). Pas inutile non plus de faire participer les propriétés page-break et display à l’organisation du contenu — elles vont en quelque sorte compenser, sinon compléter.
Ce qui risque de se passer, à en juger les feuilles de styles de certains livres numériques3, est une fragmentation du design, l’expérience de lecture dépendant de l’appareil utilisé par le lecteur parce qu’il y aura également différentiation. Les media queries ne seront alors à considérer que comme des signaux qui indiquent que la mise en pages a été mal pensée ou que quelque chose est cassé. Autrement dit, les media queries seront la solution de facilité. Cela compromettra la pérennité et l’interopérabilité des fichiers puisqu’il faudra sans cesse les maintenir, la base n’étant pas saine.
Tout n’est pas bon à jeter
Si nous consultons la documentation W3C sur les media queries, on peut tout de même trouver des choses très intéressantes. J’en retiens quatre importantes :
- resolution ;
- aspect Ratio ;
- orientation ;
- monochrome.
Inutile de disserter, présentons plutôt des cas concrets.
Monochrome, pour peu qu’elle soit supportée par les moteurs de rendu des liseuses, pourrait par exemple permettre de différencier des polices de caractères. Les écrans eInk n’affichent pas les caractères comme un écran LCD HD. Il serait donc utile de parfois différencier afin d’offrir un confort de lecture optimal à tous les utilisateurs. Et nous pourrions même aller plus loin en différenciant également selon la résolution (Retina/HD d’un côté, écrans « SD » de l’autre).
Mais monochrome permettrait aussi de gérer au mieux l’adaptation de couleurs en niveaux de gris. Il peut arriver qu’une couleur fasse partie d’une charte graphique, parce qu’elle est partie de l’identité d’une entreprise ou d’un éditeur par exemple. Or, le passage en niveau de gris d’une palette assez étendue de couleurs se révèle problématique. Pouvoir spécifier les niveaux de gris à utiliser sur écran monochrome réglerait ce problème assez facilement.
Quant à resolution, elle pourrait ponctuellement être utilisée pour adapter la taille de caractères des titres ainsi que leurs marges sur les petits écrans afin de trouver un équilibre, ou d’une citation mise en page de façon graphique4 par exemple.
Ce ne sont là que des idées pratiques mais, dans tous les cas, les media queries ne doivent amener que des ajustements et enrichissements non essentiels. Ils ne doivent pas être utilisés comme l’élément technique principal de la mise en pages (complexe ou pas) d’un livre numérique, ils ne doivent servir qu’à apporter quelques modifications quand l’utilisation d’une pseudo-grille, la composition typographique et l’utilisation de valeurs relatives ne permettent pas d’adapter.
* * *
