Comment les media-queries vont révolutionner l’ebook design

Peut-être en avez-vous déjà entendu parler: c’est une discussion qui anime le web depuis quelque temps, et notamment les designers et typographes, autour d’un concept au nom barbare mais tellement prometteur, le responsive design.

LE RESPONSIVE DESIGN, C’EST QUOI?

Lorsque vous naviguez sur Internet, vous rencontrez deux types de sites: ceux pour lesquels l’affichage s’adapte à votre écran et les autres. Lorsque par exemple, vous utilisez votre smartphone pour surfer et qu’un site vous propose (ou vous oblige) à utiliser la version mobile, nous sommes en plein dans le sujet. Chez d’autres, qui n’ont pas pris en compte cette question pourtant cruciale de la navigation mobile, vous êtes obligés de zoomer, de slider, bref, de composer avec une navigation poussive qui n’est pas optimisée pour cet usage.

ET LE LIVRE NUMÉRIQUE LÀ-DEDANS?

Comme vous le savez peut-être, le livre numérique utilise le format de fichier .EPUB. Ce fichier est en réalité une sorte de site web encapsulé dans un fichier .ZIP (on résume) et qui incorpore donc feuillets .HTML et feuilles de style CSS. Le .EPUB répond donc aux mêmes normes, et aux mêmes contraintes, qu’un site web standard lorsqu’il est question de l’afficher sur des écrans aux tailles, ratios et résolutions différentes. La multiplication des supports de lecture va donc contraindre (mais est-ce vraiment une contrainte lorsqu’on voit tout ce que cela apportera au lecteur?) les ebook-designers à penser leur livres sur au moins deux plans différents: l’écran type iPad, Galaxy Tab, Kindle Fire, Kobo Arc, etc, et l’écran mobile d’un smartphone, par exemple l’iPhone ou le Samsung Galaxy S3.

EN PRATIQUE ON FAIT QUOI?

L’usage des media-queries est en réalité assez simple dans sa partie technique. Il s’agit d’une balise directement ajouté dans le fichier .HTML et pouvant être reliée directement à une feuille de styles (CSS) alternative, qui ne sera appelée qu’en cas de détection d’un écran de telle résolution ou répondant à tel critère.

Voilà comment le code à intégrer dans votre balise <head>se présente, par exemple:

<link rel="stylesheet" media="screen and (max-width: 700px)" href="../Styles/mobile.css" type="text/css" />

Dans ce cas, si la résolution de l’écran est inférieure 700 px de large, la page appellera automatiquement la feuille de styles “mobile.css” et l’appliquera au contenu de votre EPUB. Magique, hein?

Les principales fonctions supportées par cet outil (et toujours écrites entre parenthèses) sont:

  • Width (largeur de la zone d’affichage)
  • Height (hauteur de la zone d’affichage)
  • Device-width (largeur du périphérique d’affichage)
  • Device-height (hauteur du périphérique d’affichage)
  • Orientation (avec pour valeur portrait et landscape, TRÈS utile pour les artisans de l’EPUB que nous sommes)
  • Aspect-ratio (16/9, 2/35,4/3, etc)
  • Color (le périphérique d’affichage supporte ou non la couleur)
  • Et enfin resolution (la résolution de votre écran)

La majorité de ces critères sont utilisables avec les préfixes min- et -max. Pour color, on peut laisser le champ vide: par défaut, il détectera si le périphérique affiche ou non la couleur et renverra la valeur correspondante.

Après, c’est à vous de faire votre sauce. Vous pouvez même combiner des propriétés, grâce à la syntaxe “and”. Vous pouvez également utiliser les opérateurs logiques “not” et “only”. Pour utiliser le “or” (ou), il suffit d’égrener les propriétés à la suite séparées d’une virgule. Dans ce cas, si une des options est considérée comme correcte, elle sera prise en compte.

Par exemple:

<link rel="stylesheet" media="screen, handheld and (max-width: 900px)" href="../Styles/mobile.css" type="text/css" />

On pourra aussi directement intégrer la media-querie à une balise <style> dans le <head>, grâce à l’usage de la balise <media>.

Exemple:

<style>
@media handeld and (max-width: 700px) {
  .header {
    display:none
  }

  p {
    font-size: 1.5em;
    }
}
</style>

DU BOULOT EN PERSPECTIVE POUR LES DESIGNERS

Les créateurs de sites web ne sont donc pas les seuls concernés: tous les faiseurs de livres numériques devraient rapidement intégrer dans leur logique de fabrication l’usage des media-queries. Car elle est induite des usages mêmes des lecteurs, qui lisent sur leur iPad à la maison et poursuivent la lecture sur un smartphone dans les transports en commun, avant de poursuivre sur l’écran de leur ordinateur au boulot (oui, ce n’est pas bien mais c’est un exemple fictionnel, souvenez-vous).

Pour garantir un confort maximal à tous les lecteurs, nous devrons banaliser cet usage. Le défi principal n’est ici absolument pas technique, mais artistique: il s’agit pour les designers de penser des mises en page aussi belles en version mobile que sur un grand écran, d’affiner la lisibilité et de permettre une expérience au moins égale sur chaque support.

Voilà donc un défi que, à n’en pas douter, se feront un plaisir de relever quelques designers de ma connaissance. 😉

Commentaires

comments

Laissez un commentaire