No. 194

I libri reali sono qualcosa che i designer comprendono. Ci sono molte ragioni per questo, non da ultimo il fatto che sia un oggetto fisico: i suoi limiti sono lì davanti ai nostri occhi, non c'è nulla da indovinare.

Ma per quel che riguarda i libri digitali?

I tablet hanno molti aspetti in comune con i libri “fisici”: lo schermo ha dei limiti ben defini ed il numero ottimale di parole per linea non cambia improvvisamente sullo schermo. Ma per altri versi, i tablet non sono affatto come i libri fisici: il testo si può estendere in ogni direzione, il carattere può cambiare dimensione. Pertanto, come possiamo conciliare queste analogie con queste differenze? Dove si trova la linea di base per i designer che vogliono produrre un testo gradevole e ben leggibile su di un tablet?

Questo saggio cerca di affrontare tali questioni. Questo saggio segna inoltre il rilascio di una libreria tipografica HTML di base per la lettura su tablet. Al momento, è ottimizzata per iPad. Si chiama Bibliotype e la speranza è quella di fornire una base solida dalla quale partire per le nostre esplorazioni. E' molto rudimentale, ma rudimentale è un posto maledettamente corretto da cui cominciare.

La pagina semplice

Progettare un libro è in gran parte un esercizio di equilibrio: l'equilibrio tra la forma delle lettere e lo spazio attorno ad esse in relazione alla fisicità di un libro. Nel loro Designing Books, Hochui e Kinross discutono l'unicità della simmetria di un libro:

L'asse di simmetria del dorso c'è sempre: uno ci può sicuramente lavorare, ma non può negarlo. Sotto questo aspetto, la tipografia di un libro è essenzialmente differente dalla tipografia delle singole pagine, come nella stampa professionale, nei poster e così via.

Il dorso dà alla lettura del libro un movimento cinetico che non si trova nei fogli di carta non rilegati. I movimenti in avanti ed indietro in un libro sono resi possibili dal dorso. E così i designer erigono delle impalcature: blocchi di testo e intestazioni di pagina ed altri artifici tipografici attorno a questa chiave di volta. E' il punto di equilibrio naturale di un'espansione. Quello che ciò sottointende è che gli editori hanno ampiamente raggiunto un design funzionale del libro fin dall'inizio: le linee di quarantadue colonne della Bibbia di Gutenberg ancora oggi offrono un esempio di meraviglioso equilibrio tipografico.

Se l'asse di simmetria di un libro è il dorso, dov'è su un iPad? Da una parte, i designer possono approcciare i tablet come se si trattasse di un singolo foglio di “carta”, lasciando che la fisicità dell'oggetto definisca l'asse centrale di simmetria: direttamente nel mezzo.

D'altro canto, la fisicità di questi device non rappresenta il pieno potenziale dello spazio per il contenuto. Lo schermo diventa un piccolo portale verso un piano infinito per il contenuto, o una “tela infinita” così come è illustrato da Scott McCloud.

La tela infinita

Fig 1. La tela infinita

Riguardo il design di un libro per iPad, ai designer rimane una domanda fondamentale a cui devono rispondere prima di avvicinarsi a questo device: abbracciamo la fisicità del device (una pagina senza dorso con un asse di simmetria centrale) o abbracciamo la fisicità virtuale (un dorso invisibile definito da ciascun bordo del device, segnalando il potenziale del contenuto che si trova giusto ad uno “swipe”?

In qualunque direzione funziona

Fig 2. In qualunque direzione funziona

Al momento, c'è una spaccatura evidente nel design editoriale per iPad. Ci sono delle applicazioni: iBooks, Kindle, New York Times, Wired, The New Yorker, che cercano di trasportare un tipo di design per la stampa creato attorno a degli agganci fisici su di uno schermo che non ha quegli stessi agganci. Trattano i contorni dello schermo dell'iPad come i bordi di un foglio di carta stampato, forzando, a volte creando problemi, il contenuto in colonne che non sono ottimizzate per la tela del dispositivo.

Queste applicazioni sono spesso caratterizzate dall'imposizione di pause arbitrarie e non semantiche nel contenuto in nome dell'impaginazione. Oliver Reichentsien, nel suo saggio iPad: Scroll or Card suddivide i casi d'uso in due modelli. Fornisce delle metriche per determinare quando usare lo scroll e quando la paginazione ed inoltre come la pura esperienza della lettura cambi tra i due modi.

Metafore inconsistenti

L'app del New York Times: fate swipe verso sinistra per continuare a leggere l'articolo

Fig 3. L'app del New York Times: fate swipe verso sinistra per continuare a leggere l'articolo

L'app The New Yorker: fate uno swipe verso l'alto per continuare a leggere questo articolo.

Fig 4. L'app The New Yorker: fate uno swipe verso l'alto per continuare a leggere questo articolo

L'inconsistenza con la quale viene imitata la pagina fisica su di un tablet lascia i lettori disorientati, non consci della loro posizione nel più ampio contesto e non in grado di scorrere indietro in fretta.

D'altro canto abbiamo applicazioni di lettura come Instapaper e Mobile Safari (e Mobile Safari è l'applicazione di lettura più importante sui nostri iDevice) che abbracciano la natura senza limiti dello schermo dell'iPad: i limiti fisici non vincolano i blocchi di testo.

Molto raramente si trova un'applicazione che fonda in maniera magistrale queste due scuole. Inkling tuttavia è un esempio di applicazione per la lettura che sta a cavallo tra il vecchio ed il nuovo, dividendo in pezzi il contenuto in maniera intuitivamente predicibile e consistente, all'interno di ogni singolo capitolo e attraverso i vari capitoli, facendo così mantenere il contatto con quello a cui era solitamente abituato l'utente, tramite una navigazione studiata attentamente. E lo fa in un modo così bello, con una sicura consapevolezza di quello che è il contenitore.

Ciò che rende tutto questo così eccitante è che ancora adesso, all'inizio del 2011, stiamo migliorando e ragionando circa le problematiche di leggibilità dell'editoria digitale.

Come designer, dobbiamo chiederci: dove giace l'asse di simmetria più razionale per il contenuto che abbiamo tra le mani? Da dove nasce l'elemento cinetico di questo contenuto? Qual è la logica che sta dietro a delle specifiche scelte di layout e navigazione per questo contenuto? E saranno intuitive per il lettore?

Possiamo cominciare con queste domande. Poi, possiamo passare al contenuto e, pezzo per pezzo, piazzarlo sulla nuova tela con ponderata consapevolezza. Questi sono i primi passi necessari per trattare l'iPad come qualcosa di più di una semplice pagina.

Il futuro e il presente: libri e HTML

Nell'ottobre 2010 ho partecipato alla conferenza “Books in Browser” a The Internet Archive. Si è trattato di una conferenza con una visione singolare: che la lettura nel “browser” sia il futuro.

Ho messo browser tra virgolette perché, beh, i rendering engine specifici per i browser stanno spuntando in tutti i posti di questi tempi. Possono essere embedded nelle app iOS, eReader, nei desktop o nei dispositivi mobili o tablet. Il che vuol dire che “un libro in un browser” non implica necessariamente un libro visualizzato in Internet Explorer (sebbene quasi certamente significhi anche questo).

Quella conferenza mi ha confermato quello che sospettavo da tempo (e che ho strombazzato in privato a chiunque volesse ascoltarmi): che dovremmo creare i libri con HTML.

Alcuni dei più popolari ebook reader sono iBooks e Google Books sull'iPad ed il Kindle (sia l'app sia il device). Google Books e iBooks usano entrambe ePub come formato, il Kindle usa un sottoinsieme di HTML per i propri libri.

Un ePub è un pacchetto zippato di files XHTML (con un po' di puro XML buttato dentro per sicurezza). Altri possono spiegare ePub meglio di me, così non mi addentrerò qui nelle specifiche, ma la questione da tenere a mente è che nel cuore di ePub c'è HTML: l'industria del libro digitale è già costruita su HTML.

In realtà, ho avuto la possibilità di chiacchierare anche con il team di iBooks. iBooks è solo un involucro per WebKit. Stiamo già creando i libri nei browser su una scala commerciale ad alto livello.

Alla “Books in Browsers”, Bill McCoy ci ha fatto dare una prima sbirciata alla specifica ePub3: è una convergenza di HTML5, CSS3 e ePub. Questo significa che tutti gli incredibili layout e lavori che stiamo facendo con HTML5 e CSS3 dovrebbero, in teoria, essere disponibili per noi all'interno dei reader ePub nel giro di pochi anni. (La data prevista per la fine della specifica è l'anno prossimo, ma sappiamo bene quanto tempo possano richiedere le implementazioni.)

Con i renderer WebKit e Mozilla che stanno diventando più maturi e precisi ad ogni release (l'ultima build di Mozilla ha al suo interno le “legature discrete” ad esempio) e con @font-face inserito nella specifica ePub3 (come requisito), non è difficile immaginare ePub3 che diventa così robusto e pieno di sfumature come InDesign per i layout dei libri digitali.

Con un po' di immaginazione, fate un salto più in là: con l'inclusione di HTML5, CSS3 e JavaScript in ePub, più i rendering engines intelligenti come WebKit a dare potenza ai nostri e-reader, le app in stile iOS e Android per i libri interattivi digitali potrebbero non essere più necessarie. Qualunque cosa, perfino le cose pesantemente interattive, potrebbero essere possibili all'interno di ePub stesso. Questo avrà il beneficio aggiunto di semplificare l'attuale biforcazione dei formati di libri digitali (anche i layout complessi dei magazine saranno possibili) e potrebbe anche aiutare i punti di vendita aperti: i libri interattivi non dovranno necessariamente passare attraverso un app store.

Indipendentemente da come ci immaginiamo le cose tra qualche anno, la realtà al momento attuale è che noi (specialmente quelli tra noi che leggono A List Apart) sappiamo quanto sia versatile HTML per i layout. Guardate ad esempio al lavoro ricco di sfumature di Jason Santa Maria e del suo team sul loro progetto Lost Worlds. E' un riconoscimento delle capacità dei layout basati sui browser.

Vale anche la pena notare che c'è ora una generazione di designer per cui lavorare con HTML e CSS è più rapido ed intuitivo per le iterazioni del design che usare software specializzato come InDesign. Questa è la generazione di designer che sarà più abile nel portare la migliore estetica della stampa sul web con sfumature, equilibrio e maestria nell'implementazione.

Tipografia per tablet. Una libreria per la lettura long form.

Fig 5. Tipografia per tablet. Una libreria per la lettura long form.

Bibliotype: un template

Ci serve un punto di partenza. Sappiamo che HTML è il futuro, quindi perché non costruiamo un template di design di base per la lettura su tablet in forma allungata? Tenendo questo a mente, mi sono messo a creare proprio quello. Il risultato finale è Bibliotype, un semplice insieme di files CSS, HTML e JS che fornisce una base per chiunque cerchi di portare la lettura in formato lungo sui tablet (sia che si trovi in un CMS, in un blog, in una app iOS o in qualunque altra cosa che utilizzi WebKit come renderer).

Ho lavorato con i fantastici amici di Enhanced Editions nell'estate del 2010, aiutandoli a progettare e a pensare una lettura "long-form" sull'iPad. Ho anche avuto il piacere di lavorare con l'editore di libri per iPad (e io lo vedo come un editore, sebbene un nuovo tipo di editore), Flipboard, dall'autunno 2010. Questo template a e alcune delle idee che sto qui presentando sono un prodotto del lavoro di pensiero e progettazione nato da quelle collaborazioni. Bibliotype non esisterebbe senza il loro supporto e l'opportunità di lavorare assieme.

Con il vostro iPad (o browser) andate qui per una demo.

Il punto più importante da considerare nell'editoria digitale per i tablet è che questi sono quasi il primo schermo digitale con cui si interagisce da una varietà di distanze. Fino ad ora, uno schermo desktop è sempre stato a qualche piede di distanza dal viso dell'utilizzatore. O, con gli smartphone, a distanza di braccio. Ma non più con i tablet.

Suddivido le distanze di lettura sui tablet in tre categorie principali: Letto, Ginocchia e Colazione; definisco poi le categorie con degli use cases generici:

  • Letto (vicino al viso): lettura di un romanzo con l'iPad appoggiato sul vostro stomaco, stando sdraiati a letto con l'iPad sostenuto da un cuscino.
  • Ginocchia (distanza media dal viso): seduti sul divano o magari sull'Eurostar mentre state andando a Parigi, con l'iPad sulle vostre ginocchia, mentre vi rimettete in pari su Instapaper.
  • Colazione (lontano dal viso): l'iPad, sistemato con la custodia Apple ad un angolo comodo, dietro al vostro caffé e bagel, vi permette di leggere le news mentre vi levate il formaggio spalmabile dall'angolo della bocca.

Pertanto, le distanze sono: vicino, medio, lontano.

Credo che tutti i software seri di lettura per tablet dovrebbero prestare attenzione alla tipografia in base a questi tre use cases. Di conseguenza, abbiamo creato Bibliotype per fare proprio questo.

Letto, Ginnocchia e Colazione in modalità

Fig 6. Letto, Ginnocchia e Colazione in modalità "portrait"

(Digressione: quando ho mostrato questo lavoro ad un amico, la sua prima interpretazione per Letto, Ginocchia e Colazione è stata di definizioni di tipi di contenuto. Il contenuto che leggete a letto non è lo stesso che leggete sulle vostre ginocchia o durante la colazione. Verissimo.)

Inoltre, questi tre use cases devono essere trattati in maniera differente a seconda dell'orientamento del device. Ciò significa che dobbiamo definire sei stili tipografici: margini, lunghezza di linea e line-height non si trasportano in maniera invisibile da un orientamento all'altro.

Il nostro template di base finale ha le seguenti qualità:

  • CSS media queries per rilevare l'orientamento del dispositivo,
  • regole sia per i font serif sia per quelli sans-serif (usando Georgia e Helvetica),
  • divisione in sillabe (a capo) tramite Hyphenation.js,
  • font-size, line-height, margins (e, implicitamente, la line-height) definite per tre categorie di lettura su tablet per entrambe gli orientamenti,
  • possibilità di attivare/disattivare sia il testo allineato a sinistra sia giustificato,
  • impostazioni per background a basso o ad alto contrasto e
  • attivazione/disattivazione di una griglia per vedere il posizionamento del corpo e del titolo
  • stili per le note a pié di pagina.

La struttura

Questi template si basano sugli approcci più importanti per la tela iPad. Definiamo l'asse a metà del monitor e creiamo i nostri blocchi di testo come centrati con un margine uniforme sui lati. Sebbene questi template siano di base, dovrebbero levare ore di panico da primi movimenti da ulteriori esplorazioni ed esperimenti.

I componenti del contenuto sono:

  • intestazione di pagina
  • blocco del titolo
  • paragrafo introduttivo
  • testo del capitolo (composto da molti paragrafi)
  • paragrafo finale
  • fleuron
  • note a pié di pagina
  • intestazione a pié di pagina

L'obiettivo principale del designer è quello di ottenere una leggibilità confortevole a tutte le dimensioni e con ciascun orientamento. Ho cominciato da quella che credevo fosse la dimensione del font più gradevole per qualunque categoria di lettura. Ho poi impostato la line-length per quella dimensione di testo a qualsiasi lunghezza permessa per circa 12-15 parole per riga. Avendo definito la dimensione del font e la line-length, ho creato le guide perché i blocchi di testo sembrassero formare un tutto armonioso.

L'obiettivo basilare della composizione è quello di “disporre” i nostri blocchi di testo all'interno del frame dell'iPad. Così come per molte altre cose nel design, ciò consiste in un esercizio di equilibrio di proporzioni matematiche ed intuizioni istintive. A seconda del font-size, alcuni blocchi del titolo devono stare più in alto o più in basso nel frame. Mi piace pensare al blocco del titolo block come al chiodo a cui si appende una corda che tiene su il corpo del testo.

Per aiutarci a trovare il posto giusto dove attaccare questo chiodo, ho creato delle semplici griglie per i due orientamenti del device. Questo ci permette di vedere rapidamente dove gli elementi si posizionano all'interno dei punti di equilibrio matematici del canvas.

In modalità landscape con la griglia attiva

Fig 7. In modalità landscape con la griglia attiva

Il template che forniamo qui ha anche lo scopo di essere un ambiente rapido per il debugging della tipografia “long form” per i tablet. Potete testare la sillabazione delle parole tramite trattini [hyphenation], testare la posizione sulla griglia, giocare con le variabili tipografiche e vedere rapidamente i risultati mentre si edita l'HTML.

In modalità landscape con il menu attivato

Fig 8. In modalità landscape con il menu attivato

Tutto ciò è molto semplice. La progettazione di un libro non è un'arte oscura: come molte cose è solo una questione di considerare deliberatamente delle micro-sfumature nel contesto di un tutto più ampio. Aggiungiamo ciascun pezzo in maniera lenta e ponderata, intervallando le decisioni a delle pause caffé, a un buon whiskey e a delle passeggiate nel quartiere.

L'iterazione di Bibliotype rilasciata con questo articolo non è affatto ultra-esaustiva, ma è un buon inizio. Posso leggere quel capitolo di Flatland a quelle tre dimensioni, in quei tre stati (Letto, Ginocchia e Colazione) più facilmente che con la maggior parte di tutti gli altri software di eReading per iPad. Sì, è diventato davvero così semplice!

Stiamo ovviamente ignorando l'intero dibattito “card” vs. “scroll”. Sia che il contenuto “scrolli” (come le pagine web tradizionali) sia che tratti lo schermo dell'iPad come un foglio ben definito (rompendo il contenuto in card tra cui fare “swipe”) è un problema sia tecnico sia editoriale. I margini, le lunghezze delle righe, le dimensioni dei font, le intestazioni di pagina ed i footer non cambiano (molto) tra card e scrolling: sono definiti come spazio orizzontale. E lo spazio orizzontale rimane lo stesso nei vari contesti.

Utilizzare i template

Bibliotype è rilasciato sotto la MIT License, quindi non è di nessuno. Il che significa che potete usarlo come base per qualunque cosa (commerciale o gratis) che intendiate creare. L'unica condizione è che se ci create qualcosa, dovete mantenere la notifica di copyright (http://craigmod.com) nella pagina copyright/about della vostra applicazione o del vostro libro.

Bibliotype si trova su github. Potete prenderne una copia da qui: https://github.com/cmod/bibliotype

C'è un numero infinito di casi d'uso e di dispositivi per cui Bibliotype potrebbe essere adottato e sono felice di aprirlo alla comunità per estenderlo e costrurci qualcosa insieme. (Ad esempio, la paginazione per mezzo della grande libreria Javascript Monocle ePub di Joseph Pearson potrebbe essere un progetto divertente con cui fare un mashup con gli stili di Bibliotype).

Se state testando dei nuovi font, cercando il giusto equilibrio tra dimensione, interlinea e margini, posso suggerirvi di attivare due funzioni JavaScript che sono di default commentate: fate swipe verso destra per ricaricare la pagina e verso sinistra per mostrare la griglia.

Su un desktop abbiamo dei tool come Firebug che permettono una rapida visualizzazione dei cambiamenti in CSS e in HTML. Sull'iPad, tuttavia, è un po' più tedioso toccare ripetutamente “reload” o, nel caso di un'istanza chromeless di Safari, uscire dall'app e riaprirla. Abilitando lo swipe a destra per il reload e lo swipe a sinistra per la griglia, il processo di debug diventa infinitamente più semplice, più veloce e potrebbe risparmiarvi dal dare fuori di testa.

Guardare ancora

La tipografia di lettura su iPad è definita da due cose: la porzione visibile della tela (è ostruita da una qualche immagine, colonna, menu o chrome?) ed il modo in cui si legge (Letto, Ginocchia o Colazione?). Si può pensare alla tela come se si estendesse in tutte le direzioni, come se avesse un qualunque numero di assi, ma saremo sempre legati a quello che vede il lettore e quello spazio definisce come (al livello più basso) formattare il testo per una esperienza di lettura confortevole.

Prendete Bibliotype e giocateci. Trasportate gli assi di simmetria, spostate in giro i blocchi di testo, fate paginazioni, immaginatevi il contenuto che si estende in tutte le direzioni con piccoli suggerimenti visuali per guidare il lettore. In che modo terrà il passo la tipografia con questi scenari? Che modifiche richiederà una base come Bibliotype man mano che esploreremo questo spazio? E, ancora più importante, cos'è che risulta più naturale e senza sforzi da parte del lettore?

Non vedo l'ora di sapere dove andremo a finire partendo da qui. Sapendo che, ovunque sarà, il testo sarà confortevole da leggere e HTML sarà il cuore di tutto ciò.

 

Illustrazioni: Carlo Brigatti

Share/Save/Bookmark
 

Discutiamone

Ti sembra interessante? Scrivi tu il primo commento


Cenni sull'autore

Craig Mod

Craig ModCraig Mod è uno scrittore, designer, editore e sviluppatore i cui interessi sono il futuro dell'editoria ed il narrare storie. E' co-autore e designer di Art Space Tokyo, una guida profonda al mondo artistico di Tokyo. Ha vissuto per un decennio a Tokyo. Dall'Ottobre 2010 risiede nella Bay Area in California, collaborando con gli editori digitali attraverso Flipboard. Parla spesso del futuro dei libri, dell'editoria e del design dei contenuti digitali.

Questo sito per poter funzionare utilizza i cookie. Per saperne di più visita la pagina relativa all' INFORMATIVA