Adaptive layout e responsive design eBook

Bill Kasdorf, riferendosi al formato .ePub, lo descrisse come un “sito web in una scatola”. Ciò che l’editore digitale dovrebbe quindi essere portato a fare, è di controllare le tecniche più influenti che circolano nel campo del web design. Come si è più volte descritto,

a text-heavy fixed-layout title can generate an unfriendly user experience because the customer continually has to pinch/zoom/pan the pages on the tablet in order to view the content. There can be a loss of some of the features available in reflowable ebooks — for example, text-search functionality can be lost if the text is flattened as part of an image file. Additionally, a customer who expects a reflowable experience but encounters instead the print replica may experience confusion and disappointment.

BISG, Field Guide to Fixed Layout for Ebooks

Nello specifico, l’IDPF ha suggerito come possibile soluzione l’utilizzo delle tecniche del web design adaptive, nella creazione di libri in formato ePub.

Adaptive layout eBook

This EPUB specification defines a model for template-based adaptive paginated layouts as an extension to CSS. The features described in the specification allow authors to describe precise page appearances that adapt to a wide range of device sizes and custom user settings. Its primary focus is interactive display environments in which the page size and user-defined font metrics are unknown at the time of document authoring and layout has to be done on the fly.

EPUB Adaptive Layout, IDPF

L’ePub Adaptive Layout fornisce un buon equilibrio tra i contenuti reflowable e quelli a layout fisso. Questo tipo di modello non è tuttavia in grado di sostituire il fixed layout poiché comunque dipendente dal sistema di lettura dell’utente e quindi non del tutto controllato dall’editore.

Le possibilità offerte, infatti, si adattano appropriatamente all’interno di eBook in cui il contenuto iconico fa da supporto estetico – considerando per di più che la maggior parte dei libri elettronici sono puramente, o principalmente, a contenuto testuale. Tuttavia, come si è già descritto, molti tipi di pubblicazione richiedono un layout più ricco – per ragioni di marketing o per la natura stessa del contenuto. In questo senso, l’adaptive layout risulta povero rispetto a ciò che si incontra navigando per il web. Ciò che il fixed layout richiede è un design avanzato ma che sia al contempo crossdevice. Grazie al combinarsi della tecnica del responsive layout di CSS3 e del design del fixed layout di ePub3 è possibile giungere a risultati particolarmente soddisfacenti.

Responsive design eBook

The missing component […] is a focus on responsive design: the methodology that web developers and designers began cultivating at the advent of the smartphone era to facilitate creation of a universal set of web assets that yield high-quality results optimized for all devices. There’s no reason publishers shouldn’t strive to achieve these same goals, to commit to an analogous philosophy of responsive ebook design.

Sanders Kleinfeld, Responsive Ebook Design: A Primer

Cardine del responsive eBook design sono i moduli Media Query del CSS3.

«Media queries are CSS conditionals, which allow you to selectively apply styling based on two categories of user-agent parameters: the output medium (called media type), and its display properties, called media features.» [Sanders Kleinfeld, Responsive Ebook Design: A Primer]

In pratica, consentono agli autori di specificare che un insieme di regole e di proprietà vengano applicate esclusivamente a una particolare condizione. Ciò che consiglio è di utilizzare le medie queries per le parti testuali, ingrandendo il testo laddove le dimensioni del dispositivo diminuiscono. In questo modo è possibile consentire una chiara lettura anche per la fruizione dell’eBook a layout fisso su smartphone per esempio.

Le Media Query possono essere anche un utile aiuto per gestire grafiche o immagini che si adattano all’orientamento del dispositivo di lettura. Ne sono un esempio i templates di eBook in ePub3 che ho realizzato: Prove di Layout. La lettura dell’eBook è infatti possibile sia in orientation portrait (con device in verticale) sia in orietation landscape (con device in orizzontale). I vari elementi inseriti all’interno del testo, come blocchi di note, immagini e video, modificano la propria impostazione grafica a seconda dell’orientamento o della grandezza del dispositivo.

ePub Multiple-Rendition

Una soluzione del tutto interna al formato ePub è la specifica che prende il nome di ePub Multiple-Rendition. In questo caso si tratta di fornire al file container.xml più rese (rendition), a seconda di determinate condizione, come il tipo di device o la lingua scelta dall’utente.

<container xmlns="urn:oasis:names:tc:opendocument:xmlns:container" xmlns:rendition="http://www.idpf.org/2013/rendition" version="1.0">
<rootfiles>
<rootfile full-path="Sandman.opf" media-type="application/oebps-package+xml"/>
<rootfile full-path="Sandman-large.opf" media-type="application/oebps-package+xml" rendition:media="(min-width: 1920px)"/>
</rootfiles>
</container>

Nell’esempio riportato, il file container.xml mostra due rendition di ‘The Sandman bundle’ nello stesso contenitore. Come si legge, la prima è ottimizzata per schermi di 1920 px o più ampli, mentre la seconda, come impostazione predefinita, per schermi di dimensioni inferiori a 1920 px. L’esempio è stato preso dal sito IDPF alla pagina Multiple-Rendition Publications 1.0.

«An issue of a magazine, for example, could include a fixed layout version (print replica) for rendering on tablet-sized screens with a reflowable version for smaller cellphone screens where the fixed layout would be scaled to illegibility (or automatically reflowed in unwanted ways if fixed layouts are not supported).» [EPUB Multiple-Rendition Publications, IDPF]

Nonostante la specifica sia stata pubblicata dall’IDPF nel 2015, a oggi non è ancora ben superata dai sistemi di lettura. L’avrei sfruttata volentieri, un vero peccato!

Fonti

BISG, Field Guide to Fixed Layout for Ebooks, Book Industry Study Group, New York, 2015
EPUB Adaptive Layout, IDPF, 2012
Sanders Kleinfeld, Responsive Ebook Design: A Primer, Medium, 2015
EPUB Multiple-Rendition Publications, IDPF, 2015

Immagine in evidenza