Le blogde Chapal & Panoz

Concept design — collection éditeur

Le design n’est pas que la conception esthétique d’un produit. Il doit aussi répondre à des problématiques, prendre en compte des contraintes diverses et atteindre des objectifs dans un environnement particulier.

Le design éditorial, par exemple, a pour but premier de faire passer l’information de la manière la plus efficace possible. On arrange donc les éléments (le contenu) sur la page en fonction des contraintes techniques (papier ou numérique).

Pourquoi, alors, ce concept de collection éditeur ? Quels sont ces objectifs ? Quelles sont les contraintes à prendre en compte ? Quelles sont les solutions proposées ? Et surtout, quels bénéfices ?

Les objectifs

Quand on pense collection, on pense souvent à une mise en pages générique qui pourra s’accommoder de textes parfois très différents. Autrement dit, on prévoit une base solide que l’on peut faire facilement évoluer au besoin. Dans le domaine du web, on parlerait de thème (template).

Mais une collection a également besoin d’une identité propre. Il faut que les textes puissent clairement être identifiés comme des composantes de cette même collection. Après tout, beaucoup de lecteurs feront confiance à la sélection éditoriale de l’éditeur, il faut donc appuyer là-dessus. On peut utiliser différentes choses pour construire cette identité : les couvertures, une mise en pages reconnaissable, l’utilisation de polices de caractères ayant une personnalité remarquable1.

Le défi est donc de trouver un juste équilibre : il faut un thème qui fonctionne pour tous les textes mais qui ne les trahit jamais, tout en gardant une identité forte pour bâtir une relation de confiance avec le lecteur.

 

Ce ne sont pas là les seuls objectifs que nous devons nous imposer. Dans l’industrie du livre, traditionnellement, il faut bien imprimer le livre sur quelque chose, en faire un objet : on choisit donc un format, le papier, etc.

Comment traduire ceci dans le numérique ?

Un livre numérique de qualité, c’est un livre bien codé. Il faut donc prévoir le thème — ou la maquette, si vous préférez — en conséquence et trouver les moyens d’obtenir une bonne qualité dans tous les cas. L’équation est complexe, mais nous pouvons la résoudre. Il faudra simplement garder cet objectif en tête lors des différentes étapes de la conception.

Un autre objectif important est de rendre la solution efficace (effective et time effective) et rentable (cost effective). Ce n’est pas forcément évident vu l’état de l’écosystème du livre numérique aujourd’hui, d’autant que les sources à numériser peuvent être très nombreuses (InDesign, XML, PDF, etc.) et qu’on ne les gère pas de la même façon.

 

Récapitulons. Nous devons imaginer une maquette générique qui garde une identité forte, dont le code favorise la qualité, qui doit obligatoirement s’inscrire dans un système efficace afin de rendre la publication rentable. Or, comme nous allons le voir, les contraintes du numérique sont assez nombreuses.

Les contraintes

Les contraintes du numérique sont bien connues. Cela ne fait pourtant pas de mal de les rappeler, d’autant qu’il est très facile de les ignorer… et certains ne se gênent pas du tout pour le faire.

Les contraintes du numérique sont d’abord celles de l’écran… des écrans en ce qui concerne le livre. Il faut que la maquette soit prévue pour des écrans dont la taille varie de 3,5 » (smartphone) à 27 » (ordinateur de bureau). Dans le cas de romans, cela ne doit logiquement pas poser de trop gros problèmes.

Mais nous n’avons pas que la contrainte de la taille, nous devons également prendre en compte le fait que les lecteurs numériques peuvent utiliser un écran LCD couleur et un écran eInk à seize niveaux de gris. Cela va donc avoir des répercussions sur le design de la maquette et de la couverture.

Construire une identité avec des polices de caractères, c’est bien. Construire une identité avec des polices de caractères adaptées à l’écran, c’est mieux. En effet, le rendu des polices à l’écran dépend de l’appareil, l’application ou le service de lecture. Or, dans certains cas, le rendu de telle ou telle police peut se révéler catastrophique. Il faut donc de nombreux tests pour déterminer le choix des polices à utiliser.

Rajoutons que certains appareils, applications ou services ne supportent pas les polices intégrées au livre numérique. Il nous faut donc faire une sélection étendue de polices (polices système de substitution) pour gérer cette problématique et garder l’essence de l’identité de la collection.

 

Amazon utilise son propre format de livres numériques : le format Mobi. Nous devons donc également penser la maquette pour qu’elle se traduise le mieux possible dans ce format. Ce n’est plus un aussi grand problème que par le passé, mais cela nécessite toujours d’adapter le code du fichier EPUB. Il est largement possible de prévoir le fichier EPUB pour une conversion Kindle, mais il faut connaître les petits trucs pour ne pas se retrouver avec un ersatz. En effet, cette contrainte modifie la façon dont on code le fichier EPUB, mais pas beaucoup plus que certaines apps et services qui supportent EPUB nativement…

L’écosystème EPUB est particulièrement hétérogène. Tels appareils ne supportent pas tel style de présentation, d’autres ne supportent pas tel code et vont faire sauter la présentation en entier, et ainsi de suite. Et n’oublions pas que certaines apps ignorent ou remplacent tout ou partie des styles de présentation. Même les choses les plus simples peuvent se révéler problématiques, il faut donc prévoir les possibles dégradations. Une nouvelle fois, cela modifie la façon dont on code le fichier.

En rouge, ce qui n’est pas supporté par Kindle Format 8. En orange, ce qui n’est pas supporté mais pour lequel une alternative existe. Le but : modifier notre fichier afin que la conversion Kindle se fasse avec le minimum de pertes.

Enfin, dernière grosse contrainte, et pas des moindres, la production. Il faut la rendre la plus efficace possible tout en maintenant une bonne qualité. Nous devons gérer de nombreux formats source, nous devons obtenir la même qualité pour chaque livre numérique (EPUB, Kindle). Il existe des solutions, mais l’automatisation pure est à oublier. Nous pouvons par exemple automatiser certains processus d’une production manuelle, ce qui permettra de gagner énormément de temps tout en améliorant substantivement le code des fichiers.

La proposition

Présentation dans les détails

La couverture a fait l’objet d’une réflexion approfondie : comment en simplifier la production tout en obtenant quelque chose d’agréable pour le lecteur, qui permet autant l’identité de la collection et l’identification de chaque publication, et qui ne se démode pas avec le temps ?

Un modèle Photoshop a été créé, permettant une création extrêmement rapide de chaque couverture. La composition générale permet l’identité de la collection : police linéale Quattrocento, formes géométriques, etc. Ce sont les motifs (à dominante claire) qui permettent l’identification de chaque publication.

La police Quattrocento a été choisie pour sa lisibilité, son design très équilibré et son rendu exceptionnel sur LCD et eInk.

Nous obtenons quelque chose de suffisamment simple, donc lisible, et qui reste remarquable en miniature. Notez que l’on peut tout à fait imaginer utiliser un code couleur. Ceci n’est qu’un exemple de template générique ; il y en a bien évidemment une infinité d’autres.

Pour la page de titre, une composition centrée a été privilégie, plus classique dans l’esprit. Elle a simplement été modernisée par l’utilisation de la police Quattrocento. Le code a été prévu pour les différentes tailles d’écrans des appareils que les lecteurs sont susceptibles d’utiliser.

La table des matières a été pensée pour faciliter l’interaction, avec des marges confortables. Ici aussi, Quattrocento est utilisée.

Source du texte : wikipedia

La biographie de l’auteur se voit elle aussi attribuer Quattrocento. Même si la police n’offre pas de chiffres elzéviriens (ou minuscules), qui auraient pu être très pratiques étant donné que les biographies comportent toujours des dates, la police offre une bonne lisibilité : les caractères romains et italiques sont bien différenciés (a, f et g), les approches sont bonnes, etc. L’épaisseur de son trait facilite même l’usage de fausses petites capitales.

Pour le titre, nous rajoutons juste une graisse bold sans augmenter de façon significative la taille de caractères2.

Début du chapitre à gauche, appel de note au centre, notes de bas de page à droite.

Le texte en lui-même repose sur une composition très simple. On utilise Georgia, qui n’a plus à faire ses preuves dans le numérique. Le titre ou numéro de chapitre n’est pas centré, mais aligné à gauche avec un retrait deux fois supérieur à l’alinéa ouvrant (indentation du texte). Cela modernise un peu la composition tout en permettant de mieux gérer les titres moyens et longs, toujours problématiques sur les petits écrans quand ils sont centrés. Le premier alinéa (ou paragraphe si vous préférez) n’a pas de retrait, ce qui est un choix esthétique et pratique. Les appels de notes sont dans le corps et pas en exposant afin d’être facilement accessibles, mais dans un niveau de gris afin de ne pas trop parasiter la lecture. Les notes de bas de page émigrent en fin de chapitre et leurs styles sont automatiquement appliqués.

Une invitation à découvrir les autres publications de la collection a bien entendu été prévue en fin de livre. Comme pour tout autre paratexte, Quattrocento est utilisée ici.

Enfin, nous terminons avec la page de copyrights. Pourquoi ne pas l’insérer au début, après la page de titre ? Pour suggérer au lecteur de visiter le site de l’éditeur et y découvrir son catalogue. Cette dernière page nous sert donc de porte d’entrée, l’adresse de l’éditeur renvoyant vers son site. De fait, si la page se trouve au début de l’ouvrage, il y a peu de chances que le lecteur y revienne.. Même s’il reste facile de taper l’adresse URL d’un éditeur dans son navigateur, nous simplifions ici la tâche au lecteur : il n’aura pas de manipulations supplémentaires à faire. Nous pensons là aux lecteurs qui utilisent une tablette ou un smartphone. Évidemment, rien n’empêche d’enrichir cette page : c’est ici un simple exemple, presque minimaliste.

Plus généralement

L’identité de la collection est construite grâce à la police linéale Quattrocento utilisée pour les pages liminaires (page de titre, copyrights, biographie, table des matières, etc.) ainsi que le design de la couverture qui repose majoritairement sur des motifs3. C’est la seule police de caractères intégrée au fichier puisque Georgia a été choisie comme police de labeur (corps du texte). Georgia, dont nous savons qu’elle est bien adaptée à l’écran, a le mérite d’être disponible à peu près partout. Là où elle n’est pas disponible, elle sera remplacée par une police serif prévue par les développeurs de l’appareil ou l’application de lecture. Pour la police linéale, Avenir, Gill Sans, Helvetica Neue et — au pire — Arial ont été choisies comme polices de substitution. L’identité de la collection repose presque davantage sur l’utilisation fonctionnelle des polices (linéale pour paratexte, serif pour le texte) que les polices en elles-mêmes, même si Quattrocento offre une personnalité propre.

Qui plus est, pour marquer cette identité dans l’expérience de lecture numérique, nous forçons l’ouverture du fichier sur la couverture. D’habitude, le livre s’ouvre sur la première page de texte (premier chapitre), ce qui constitue une expérience trop générique dans notre cas. Puisque la publication comporte très peu de pages liminaires (page de titre et biographie avant le texte en lui-même), alors nous pouvons nous permettre de faire ceci. Si nous avions une dizaine de pages, ce serait plutôt une mauvaise idée.

 

Les couvertures reposent sur des motifs (patterns). L’objectif était de simplifier la réalisation des couvertures tout en obtenant quelque chose d’agréable et de reconnaissable. Les motifs peuvent d’ailleurs être utilisés de concert avec un code couleur à la Penguin/Pelican afin d’indiquer visuellement le genre de l’œuvre. Viennent s’y ajouter le titre et le nom de l’auteur ainsi que le logo(type) de l’éditeur. Il a donc fallu chercher un équilibre.

Bien entendu, on retravaillera parfois la lisibilité des motifs pour les écrans eInk. Source : subtlepatterns.com

La composition typographique reste simple dans l’idée d’optimiser au maximum la lisibilité et de privilégier le contenu. Nous n’avons que du texte à arranger sur la page, autant nous concentrer sur les petits détails qui peuvent grandement améliorer l’expérience de lecture. De plus, ce choix est également guidé par un choix technique : le code a été pensé pour automatiser la mise en pages avec un marquage sémantique très simple. Pas besoin d’ajouter une classe pour le premier paragraphe sans alinéa, la feuille de styles le fait pour vous. Tant que le marquage est standard, logique et propre, il n’y aura aucun problème. Si l’on cherche à tricher sur la sémantique, alors cela se paye : on verra directement à l’écran qu’il y a un problème.

Le bénéfice, c’est qu’il est bien plus facile de nettoyer les exportations depuis les fichiers sources, qu’on peut donc automatiser la tâche et passer beaucoup moins de temps à baliser le contenu tout en offrant un fichier d’une très bonne qualité.

Bien évidemment, les « styles typographiques » ont fait l’objet de toutes les attentions. L’interlignage a été choisi pour s’accommoder d’un changement de police de caractères par le lecteur (serif ou sans-serif), les césures sont contrôlées au maximum, le rythme vertical et horizontal est affiné, la façon dont est pensée la feuille de styles n’enlève aucune liberté au lecteur.

Choix a été fait de ne pas offrir quelque chose de dégradé aux utilisateurs selon leur appareil de lecture. Tous auront la même composition alors qu’il était par exemple possible d’automatiser lettrines ou premières phrases des chapitres en petites capitales (sans marquage HTML supplémentaire). Nous privilégions là l’identité de la collection.

 

D’un point de vue technique, tout a été fait pour privilégier le marquage HTML le plus pur possible. La solution ne se repose pas sur des classes s’il n’y en a pas besoin, la mise en pages est automatisée au maximum via la feuille de styles CSS et cette dernière n’intègre que ce qui est nécessaire. S’il y a besoin d’autre chose, alors il suffit d’ajouter des modules prévus à cet effet — des lignes de code CSS en réalité. La volonté ici est de nous servir correctement des éléments sémantiques et, ce faisant, de nous servir quasiment uniquement de ces éléments. Il existe quelques classes mais elles sont peu nombreuses et donc très faciles à gérer, d’autant plus que leur nom a été choisi pour rendre compte de leur fonction. Et comme ces classes sont limitées, meilleurs seront le support et la potentielle dégradation. Cela garantit également une très bonne conversion Kindle, que ce soit dans le nouveau ou l’ancien format.

Des styles de présentation qui automatisent au maximum la mise en pages + un marquage sémantique HTML simplifié = Un très bon rendu général et un code de qualité.

Les bénéfices

Tous les efforts qui ont été consentis se révèlent payants. Les bénéfices sont finalement nombreux et prouvent surtout qu’une réflexion approfondie permet de créer un système vertueux.

Le code prévu permet de nombreuses répétitions et, par conséquent, une « automatisation manuelle » (par exemple rechercher/remplacer ou copier/coller) dans l’objectif d’améliorer la qualité du fichier. De plus, parce qu’on gagne du temps sur cette automatisation manuelle, on peut en consacrer davantage aux détails qui vont encore améliorer la qualité globale de la publication sans devoir forcément payer plus cher. Cela peut être utile si une problématique (technique ou éditoriale) se pose, parce que l’humain pourra réagir promptement là où la machine ne peut couvrir que les cas qui ont été prévus en amont.

Le code prévu étant simple, il peut être facilement repris. Puisqu’il automatise lui-même la mise en pages, il y a juste besoin d’utiliser les éléments sémantiques de façon correcte. Plusieurs intervenants pourraient donc intégrer rapidement et efficacement ce processus de production4. En outre, cette production semi-automatisée permet un contrôle qualité suffisamment strict. On gagne donc du temps et de l’argent tout en bénéficiant d’un délai d’exécution suffisamment court.

Le code prévu étant interopérable, il ne posera pas de problèmes, y compris lors de la conversion Kindle. Tous les lecteurs auront donc le même livre, ce qui est encore malheureusement un argument en faveur de l’éditeur à l’heure actuelle.

Le bénéfice le plus visible est le bénéfice esthétique. On construit une collection à l’identité propre, avec une composition typographique riche que l’on ne retrouve même pas forcément dans les livres qui le nécessitent. On peut donc bâtir une relation de confiance, confiance qui invitera le lecteur à revenir piocher dans cette collection. Bien évidemment, nous avons présenté une base de réflexion dans cet article. Elle est modulable afin de pouvoir intégrer les idées des éditeurs qui pourraient être intéressés par un tel workflow.

Enfin, on met toutes les chances de son côté quant à la rentabilité d’une telle collection : on s’offre une production à la main sans dépenser plus, on gagne du temps, on automatise au maximum ce qui peut l’être sans compromettre la qualité globale, etc.

* * *

  1. Remarquable ne veut pas forcément dire qu’elles doivent être atypiques, on peut aussi remarquer dans la subtilité.
  2. Nous avons tout juste augmenté de 0.1 em pour améliorer la lisibilité de la graisse plus épaisse.
  3. Leur rendu a bien évidemment été testé sur les appareils de lecture.
  4. On peut d’ailleurs imaginer leur fournir un mini-guide pour les aider.