Customer Login

Lost password?

View your shopping cart

Blog

COUVERTURE INTERACTIVE POUR EBOOKS, ESSAI N°1: TOUT EN CSS3

[read this post in english]

Une fois n’est pas coutume, nous vous proposons de partager avec nous quelques essais et pistes de design concernant l’ebook et plus particulièrement nos tentatives de rendre les couvertures plus vivantes que de simples images.

Pour cet essai, nous n’avons employé que de la CSS (des feuilles de styles, donc) et du HTML: pas de Javascript. Les interactions sont donc basiques mais elles fonctionnent étonnamment bien. Voici donc la vidéo.

L’intégralité des animations a été effectuée en utilisant la pseudo-classe :hover, la seule « gâchette » qui fonctionne sous iBooks pour le moment puisque epub:trigger n’a semble-t-il pas été implémentée dans la version 3.0. Nous savions que les propriétés d’animations CSS3 fonctionnaient très bien en mode Fixed Layout: elles fonctionnent également très bien dans un epub classique dit « flowable ».

À noter que le tout nouveau mode de lecture en scrolling « faire défiler » nous permet de zapper cette affreuse animation automatique de page tournée à chaque fois qu’un lien est déclenché. Si vous reproduisez l’effet, nous vous conseillons de régler votre iDevice dans ce mode particulier.

Nous pourrions vous expliquer longuement comment nous avons fait pour réaliser cette couverture, mais le plus simple est encore de vous en faire partager directement le code. Vous trouverez donc à cette adresse un fichier .zip contenant le fichier HTML et la CSS.  Libre à vous de le décortiquer, de le modifier, bref, de vous amuser. Faites-nous partager vos créations si l’envie vous en prend!

Commentaires

comments

5 Responses

  1. Marc Jahjah says:

    Bravo Julien, bravo Jérémy pour toutes ces pistes ouvertes. Au-delà des « interactions » (animer par la manipulation) c’est, je pense, autour de la « pénétration » que va en partie se jouer (ou doit se jouer, je ne sais pas) l’avenir de la couverture : qu’elle nous montre, par un survol-souris, les entrailles du livre numérique (personnages, thèmes, mots-clés, etc.) qu’elle nous donne à voir un concentré rapide, explorable, un déroulé, un tapis rouge de ce qu’il y aura à lire. À terme, ce sont des jeux entre ces manipulations et le livre qui seront probablement explorés : un personnage présent dans la couverture (à la 3ème couche-étape, par exemple, après le survol appuyé de la souris; on peut même imaginer différentes scènes dans une même couverture - angle-droit, angle-gauche, bas, haut, comme dans une peinture - à révéler-loupe-agrandir), un personnage présent dans la couverture absent du livre, donc (ou révélé qu’au 3ème, dans le cas des séries) ou un thème développé dans la couverture, absent du livre (relations-bonus, horizon d’attente crée et déjoué), etc. etc. Dans l’avenir concurrentiel du livre et des pratiques encouragées par Apple  et cie (one-click, zapping), avoir des couvertures très travaillées en ce sens (car perso, je ne crois pas trop aux BA de livre, mais bon) pourrait s’avérer utile.

    Et pis c’est tout. 😉

    Marc

    Reply
  2. Nicolas B. Wulf says:

    C’est génial ! Maintenant on passera autant de temps à jouer avec la couverture qu’à lire ! ^^
    Sérieusement, les futures applications sont justes impressionnantes, ne serait-ce que celles qu’évoque Marc. 🙂

    Reply
  3. The SF Reader says:

    Outre la performance technique et l’effet « Waouhhhh » (qui ne dure qu’un temps), j’ai de sérieux doutes sur la pertinence des effets sur les couvertures.

    1) d’un point de vue interopérabilité, et vu les innombrables versions de plateformes de lecture (matériel/logiciel),  c’est un risque certain pour le publieur.

    2) d’un point de vue « économique », les efforts et coûts de conception seront-ils compensés par des ventes en rapport ? Si c’est sur un produit isolé, avec une différentiation forte, je suppose que c’est possible, mais si tous les livres se mettent à faire pareil … j’en doute.

    3) A quelle « utilité/besoin » cela répond t’il ? (Et merde, je me fais l’écho des #PapyDuPapier) : Outre l’aspect esthétique, la couverture a un côté utilitaire (et une efficacité) certain en tant que « média de métadonnées », explicites ou non : genre (et toutes les déclinaisons de celui-ci), auteur, titre, sujet etc. Habituellement, elle est complétée par le « Quatrième de couverture », qui complète ces métadonnées.

    L’approche de Marc (si je comprends bien) est de merger des métadonnées supplémentaires dans la couverture, masquées par défaut. 

    Mais en tant qu’acheteur de livres, lorsque je décide d’acheter, c’est souvent par réflexe/impulsion, et les étapes de recherches de métadonnées vont à l’encontre de cette impulsion. Alors perso, si j’envisage d’acheter un livre, je ne vais pas prendre le temps de parcourir toutes les interactions de la couverture, à ne pas savoir si je vais tomber sur des infos correspondant à des critères qui m’intéressent (DRM, prix etc.)

    Bref, pour moi, aucun intérêt en dehors de l’esthétique.

    Reply
    • Walrus Ebooks says:

      Merci de ton commentaire, qui a le mérite de pointer les faiblesses de ce qui reste une expérimentation. Néanmoins, je ne suis pas d’accord avec toi sur plusieurs points, je me permets donc de te répondre.
      1/ L’interopérabilité est un faux argument qui s’inscrit dans une temporalité restrictive: aucun doute sur le fait que d’ici très peu de temps, ces interactions simples seront prises en charge par la totalité des appareils de lecture. Ce n’est pas parce que quelque chose est vrai un jour qu’elle est vraie le lendemain. Et les éditeurs doivent absolument avoir une visibilité sur le moyen terme afin de prévoir des stratégies d’action, qui mettent souvent du temps à être planifiées. 

      2/ le coût d’une couverture aujourd’hui est très élevé. C’est une des dépenses les plus importantes dans le coût d’un livre, puisqu’il faut payer l’artiste ET les droits de reproduction. Nous parlons de plusieurs milliers d’euros quelquefois. Cette couverture a le mérite d’avoir été créée en une demi-journée. Son coût est sans aucune commune mesure avec ce qui se pratique pour une couverture traditionnelle.

      3/ les besoins et utilités sont à inventer: ce n’est pas parce que t’y trouves « aucun intérêt » que des créateurs n’y verront pas là le moyen de réaliser quelque chose avec. C’est un outil, pas un but en soi. La couverture participe dans bien des cas de 50% de l’impulsion de l’acte d’achat en librairie « physique ». Une bonne couverture est un des seuls leviers pour donner envie de lire le quatrième de couverture. Je pense notamment à des implications sur le quatrième de couverture, ce fantôme qui n’existe plus dans le livre numérique. ET j’en parlerai très vite. 😉

      Donc pour moi, y a plein d’intérêts! Il suffit de se creuser la tête quelques instants et tu verras, ça ouvre beaucoup de possibilités. Il faut arrêter de penser nostalgie, mais commencer à aller de l’avant et INVENTER! 😉

      Reply
      • The SF Reader says:

        Sur le 1), je suis plutôt d’accord avec toi, à une condition toutefois :  
        que ça se « dégrade » (sur des matériels non complètement compatible),   non seulement correctement, mais sans perte d’information. Par exemple, les artistes/graphistes/couvertureurs doivent adapter leurs couvertures à 1) la présentation dans les e-libraires (avec les multiples tailles de rendus), 2) le rendu en niveau de gris sur les liseuses qui empêche certains contrastes etc. (ce n’est pas à toi que je vais l’apprendre).
        Si la couverture « animée » se dégrade en perdant trop d’information ou de lisibilité, oui, pourquoi ne pas viser le « haut » du matériel.

        Sur le 2) je ne me prononce pas, mais il me semble que pour rester compétitif vis-à-vis des couvertures à plusieurs milliers d’euros, il faudra faire les même en plus des animations.  Si j’ai bien compris, tu proposes en quelque sorte de réduire le budget « droits de repro » en remplaçant les « images » par d’autres moins chères et en rajoutant des « effets spéciaux » pour compenser.  Selon la charge de travail, et les artistes concernés, c’est sans doute une bonne idée, mais si les animations se généralisent, il faudra bien compenser avec des images de meilleure qualité, et retour au point de départ, le coût/effort des animations en plus.

        Sur le 3), oui, mille fois oui, la couverture est un élément primordial de l’achat, et le 4eme de couv’ est un avatar qui va sans doute évoluer et peut-être disparaitre.
        Pour autant, je ne le vois pas (à mon avis) s’intégrer complètement dans une couverture. Aussi, lorsque je parle de 4ème de couv. je fait aussi référence aux affichages informatifs de « métadonnées » techniques etc.  qui eux ne me  semblent pas intégrables facilement dans l’animation.

        Bref, je suis plutôt sceptique. Mais on verra bien. 

        Reply

Laisser un commentaire

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