{"id":136,"date":"2011-01-24T19:03:41","date_gmt":"2011-01-24T18:03:41","guid":{"rendered":"https:\/\/alistapart.com\/it\/article\/una-pagina-piu-semplice\/"},"modified":"2011-01-24T19:03:41","modified_gmt":"2011-01-24T18:03:41","slug":"una-pagina-piu-semplice","status":"publish","type":"article","link":"https:\/\/alistapart.com\/it\/article\/una-pagina-piu-semplice\/","title":{"rendered":"Una pagina pi\u00f9 semplice"},"content":{"rendered":"

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<\/em>: i suoi limiti sono l\u00ec davanti ai nostri occhi, non c’\u00e8 nulla da indovinare.<\/p>\n

Ma per quel che riguarda i libri digitali?<\/p>\n

I tablet hanno molti aspetti in comune con i libri \u201cfisici\u201d: 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\u00f2 estendere in ogni direzione, il carattere pu\u00f2 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?<\/p>\n

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, \u00e8 ottimizzata per iPad. Si chiama Bibliotype e la speranza \u00e8 quella di fornire una base solida dalla quale partire per le nostre esplorazioni. E’ molto rudimentale, ma rudimentale \u00e8 un posto maledettamente corretto da cui cominciare.<\/p>\n

\n

La pagina semplice<\/h2>\n

Progettare un libro \u00e8 in gran parte un esercizio di equilibrio: l’equilibrio tra la forma delle lettere e lo spazio attorno ad esse in relazione alla fisicit\u00e0 di un libro. Nel loro Designing Books<\/em>, Hochui e Kinross discutono l’unicit\u00e0 della simmetria di un libro:<\/p>\n

\n

L’asse di simmetria del dorso c’\u00e8 sempre: uno ci pu\u00f2 sicuramente lavorare, ma non pu\u00f2 negarlo. Sotto questo aspetto, la tipografia di un libro \u00e8 essenzialmente differente dalla tipografia delle singole pagine, come nella stampa professionale, nei poster e cos\u00ec via.<\/p>\n<\/blockquote>\n

Il dorso d\u00e0 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\u00ec 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\u00f2 sottointende \u00e8 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.<\/p>\n

Se l’asse di simmetria di un libro \u00e8 il dorso, dov’\u00e8 su un iPad? Da una parte, i designer possono approcciare i tablet come se si trattasse di un singolo foglio di \u201ccarta\u201d, lasciando che la fisicit\u00e0 dell’oggetto definisca l’asse centrale di simmetria: direttamente nel mezzo.<\/p>\n

D’altro canto, la fisicit\u00e0 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 \u201ctela infinita\u201d cos\u00ec come \u00e8 illustrato da Scott McCloud<\/a>.<\/p>\n

\"La<\/p>\n

Fig 1. La tela infinita<\/p>\n<\/div>\n

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\u00e0 del device (una pagina senza dorso con un asse di simmetria centrale) o abbracciamo la fisicit\u00e0 virtuale<\/em> (un dorso invisibile definito da ciascun bordo del device, segnalando il potenziale del contenuto che si trova giusto ad uno \u201cswipe\u201d?<\/p>\n

\"In<\/p>\n

Fig 2. In qualunque direzione funziona<\/p>\n<\/div>\n

Al momento, c’\u00e8 una spaccatura evidente nel design editoriale per iPad. Ci sono delle applicazioni: iBooks, Kindle, New York Times<\/em>, Wired<\/em>, The New Yorker<\/em>, 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.<\/p>\n

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<\/a> 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.<\/p>\n

Metafore inconsistenti<\/h3>\n
\"L'app<\/p>\n

Fig 3. L’app del New York<\/em> Times: fate swipe verso sinistra per continuare a leggere l’articolo<\/p>\n<\/div>\n

\"L'app<\/p>\n

Fig 4. L’app The New Yorker<\/em>: fate uno swipe verso l’alto per continuare a leggere questo articolo<\/p>\n<\/div>\n

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\u00f9 ampio contesto e non in grado di scorrere indietro in fretta.<\/p>\n

D’altro canto abbiamo applicazioni di lettura come Instapaper e Mobile Safari (e Mobile Safari \u00e8 l’applicazione di lettura pi\u00f9 importante sui nostri iDevice) che abbracciano la natura senza limiti dello schermo dell’iPad: i limiti fisici non vincolano i blocchi di testo.<\/p>\n

Molto raramente si trova un’applicazione che fonda in maniera magistrale queste due scuole. Inkling<\/a> tuttavia \u00e8 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\u00ec mantenere il contatto con quello a cui era solitamente abituato l’utente, tramite una navigazione studiata attentamente. E lo fa in un modo cos\u00ec bello, con una sicura consapevolezza di quello che \u00e8 il contenitore.<\/p>\n

Ci\u00f2 che rende tutto questo cos\u00ec eccitante \u00e8 che ancora adesso, all’inizio del 2011, stiamo migliorando e ragionando circa le problematiche di leggibilit\u00e0 dell’editoria digitale.<\/p>\n

Come designer, dobbiamo chiederci: dove giace l’asse di simmetria pi\u00f9 razionale per il contenuto che abbiamo tra le mani? Da dove nasce l’elemento cinetico di questo contenuto? Qual \u00e8 la logica che sta dietro a delle specifiche scelte di layout e navigazione per questo contenuto? E saranno intuitive per il lettore?<\/p>\n

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\u00f9 di una semplice pagina.<\/p>\n<\/div>\n

\n

Il futuro e il presente: libri e HTML<\/h2>\n

Nell’ottobre 2010 ho partecipato alla conferenza \u201cBooks in Browser\u201d a The Internet Archive. Si \u00e8 trattato di una conferenza con una visione singolare: che la lettura nel \u201cbrowser\u201d sia il futuro.<\/p>\n

Ho messo browser tra virgolette perch\u00e9, 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 \u201cun libro in un browser\u201d non implica necessariamente un libro visualizzato in Internet Explorer (sebbene quasi certamente significhi anche questo).<\/p>\n

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.<\/p>\n

Alcuni dei pi\u00f9 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<\/abbr> per i propri libri.<\/p>\n

Un ePub \u00e8 un pacchetto zippato di files XHTML<\/abbr> (con un po’ di puro XML buttato dentro per sicurezza). Altri possono spiegare ePub meglio di me, cos\u00ec non mi addentrer\u00f2 qui nelle specifiche, ma la questione da tenere a mente \u00e8 che nel cuore di ePub c’\u00e8 HTML<\/abbr>: l’industria del libro digitale \u00e8 gi\u00e0 costruita su HTML<\/abbr>.<\/p>\n

In realt\u00e0, ho avuto la possibilit\u00e0 di chiacchierare anche con il team di iBooks. iBooks \u00e8 solo un involucro per WebKit. Stiamo gi\u00e0 creando i libri nei browser su una scala commerciale ad alto livello.<\/p>\n

Alla \u201cBooks in Browsers\u201d, Bill McCoy ci ha fatto dare una prima sbirciata alla specifica ePub3<\/a>: \u00e8 una convergenza di HTML5<\/abbr>, CSS3<\/abbr> e ePub. Questo significa che tutti gli incredibili layout e lavori che stiamo facendo con HTML5<\/abbr> e CSS3<\/abbr> 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 \u00e8 l’anno prossimo, ma sappiamo bene quanto tempo possano richiedere le implementazioni.)<\/p>\n

Con i renderer WebKit e Mozilla che stanno diventando pi\u00f9 maturi e precisi ad ogni release (l’ultima build di Mozilla ha al suo interno le \u201clegature discrete\u201d ad esempio) e con @font-face<\/code> inserito nella specifica ePub3 (come requisito), non \u00e8 difficile immaginare ePub3 che diventa cos\u00ec robusto e pieno di sfumature come InDesign per i layout dei libri digitali.<\/p>\n

Con un po’ di immaginazione, fate un salto pi\u00f9 in l\u00e0: con l’inclusione di HTML5, CSS3 e JavaScript in ePub, pi\u00f9 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\u00f9 necessarie. Qualunque cosa, perfino le cose pesantemente interattive, potrebbero essere possibili all’interno di ePub stesso. Questo avr\u00e0 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.<\/p>\n

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

Vale anche la pena notare che c’\u00e8 ora una generazione di designer per cui lavorare con HTML e CSS \u00e8 pi\u00f9 rapido ed intuitivo per le iterazioni del design che usare software specializzato come InDesign. Questa \u00e8 la generazione di designer che sar\u00e0 pi\u00f9 abile nel portare la migliore estetica della stampa sul web con sfumature, equilibrio e maestria nell’implementazione.<\/p>\n

\"Tipografia<\/p>\n

Fig 5. Tipografia per tablet. Una libreria per la lettura long form.<\/p>\n<\/div>\n<\/div>\n

\n

Bibliotype: un template<\/h2>\n

Ci serve un punto di partenza. Sappiamo che HTML \u00e8 il futuro, quindi perch\u00e9 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 \u00e8 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<\/abbr>, in un blog, in una app iOS o in qualunque altra cosa che utilizzi WebKit come renderer).<\/p>\n

Ho lavorato con i fantastici amici di Enhanced Editions<\/a> 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\u00e0 di lavorare assieme.<\/p>\n

Con il vostro iPad (o browser) andate qui per una demo<\/a>.<\/p>\n

Il punto pi\u00f9 importante da considerare nell’editoria digitale per i tablet \u00e8 che questi sono quasi il primo schermo digitale con cui si interagisce da una variet\u00e0 di distanze. Fino ad ora, uno schermo desktop \u00e8 sempre stato a qualche piede di distanza dal viso dell’utilizzatore. O, con gli smartphone, a distanza di braccio. Ma non pi\u00f9 con i tablet.<\/p>\n

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