Scrivere con gli atomi, scrivere con i bit,

riflessioni sulla composizione tipografica nel mondo della rete.

 

 

Per millenni l’uomo ha usato per scrivere atomi. Ha iniziato per asportazione: le lapidi partono come pietre levigate alle quali viene tolto il materiale corrispondente alle lettere ed ecco un testo dove la posizione relativa delle lettere, la loro dimensione e forma sono stabili e costanti nei secoli.

 Figura 1 La stele di Rosetta, scritta per asportazione di materia con un formato che resiste per secoli!

Grafite, inchiostri e colori hanno poi sostituito l’asporto con l’apporto di materiale: gli strumenti di scrittura apportano atomi di colore diverso da quello del supporto ed ancora una volta il segno se ne sta là dove lo metto fino a quando resiste il legame tra gli atomi.

Figura 2 Francesco Colonna, Hypnerotomachia Poliphili, Venezia, Aldo Manuzio, dicembre 1499.

La stampa, nelle sue diverse evoluzioni, altro non fa che replicare il fenomeno rendendo semplicemente la cosa più precisa e più veloce. La vostra stampante a getto di inchiostro sputa sulla carta goccioline piccolissimo, la laser usa un tamburo e cariche elettrostatiche per appiccicare alla pagina minuscole particelle di toner che vengono poi fissate in modo permanente con il calore.

Questi strumenti dotati di precisione sempre crescente hanno fatto nascere una liturgia della stampa fatta di convenzioni e di regole sempre più precise e stringenti. Un articolo scientifico, una pubblicazione filologica o una tesi di laurea sono in larga parte riconoscibili anche senza leggere nulla del testo solo dal formato e dalla posizione relativa degli elementi.

Poi venne un oggetto chiamato WWW, World Wide Web^[1].

Quando nel 1980 Tim Berners-Lee ipotizzò per la prima volta un sistema per la condivisione e la consultazione in rete di documenti adottò un subset del markup language allora in fase di studio in casa IBM, lo SGML (Standard Generalized Markup Language) definito oggi dallo standard ISO 8879:1986, e lo chiamò HTML (Hypertext Murkup Language).

La caratteristica fondamentale di un markup language e’ la astrazione: il fatto che un titolo sia proprio un titolo viene indicato non dicendo che dovrà essere rappresentato in “New Times corpo 20 grassetto” oppure in “copperplate33bc corpo 12”, ma definendo quel testo come titolo con una sorta di indicazione tipografica, che nel mondo di HTML si chiama tag, per esempio H1.

Sarà a questo punto il programma di visualizzazione usato che si farà carico di rappresentarlo con i caratteri e le dimensioni definiti dall’utente, più affini ai sui gusti e più adatti al mezzo che si sta utilizzando.

All’inizio questo approccio fu pienamente rispettato e la visualizzazione delle pagine era indipendente dallo strumento utilizzato, la tentazione poi di imporre all’utente visualizzazioni predeterminate da chi ha disegnato la pagina con limiti che possono comunque essere superati.

Chi usa per esempio Internet Explorer di Microsoft andando nel sottomenù Opzioni Internet del menù Strumenti alla voce Accesso Facilitato trova quanto gli serve per evitare la formattazione automatica.

Figura 3 Ognuno può facilmente cambiare le modalità di visualizzazione del proprio broser, questa la procedura per MS Explorer

Qui è possibile indicare un foglio di stile nel quale definire le modalità di rappresentazione di ogni singolo elemento logico del testo, per esempio nel caso di quel titolo H1 di cui abbiamo parlato leggeremo qualche cosa del tipo:

Figura 4 Facendo riferimento a un file .CSS (Cascade Style Sheet) si possono definire in modo anche molto dettagliato le modalità di visualizzazione.

So tratta di una serie di comandi che definiscono per i vari elementi del testo (per esempio H1) le modalità di rappresentazione (in questo caso un Arial corpo 24)^[2].

Per capire come funzioni il meccanismo basta scrivere una semplice pagina di prova

 

Scrivetela con un semplice editor di testo come per esempio Word Pad di Windows^[3] e salvatela da qualche parte usando la estensione .html, basterà a questo punto un doppio click per attivare il browser che ne interpreterà il contenuto e li rappresenterà con le modalità che voi avrete definito.

 

Figura 5 Ecco come appare nel mio browser il documento che abbiamo appena scritto...

La visualizzazione della pagina è qui quella di default del browser in uso, ma se, come descritto prima, andiamo a cambiare il .CSS di riferimento utilizzando il file parzialmente listato nella Figura 2 la rappresentazione si può modificare e non poco.

 

Figura 6 ... basta cambiare le impostazioni e lo stesso documento sullo stesso browser appare molto diverso.

Chi ha scritto questo file .CSS al Times New Roman preferisce un carattere senza grazie che si chiama Arial e come si vede bene ha impostato lo stesso identico carattere e la stessa dimensione per i tag H4, H5 e H6 ragione per cui le righe appaiono identiche.

Anche una pagina banale come quella che abbiamo preparato vista sulla stessa macchina con due browser diversi nella loro installazione di default: se fosse una pagina stampata e il tipografo ci dicesse che sono due copie della stessa pagina lo prenderemmo per pazzo.

Figura 7 Lo stesso documento visto con browser diversi sulla stessa macchina, qui si tratta di Microsoft Explorer e Netscape….

Figura 8 ... ma le cose non vanno meglio se usiamo Opera!

Cosa è successo?

La chiave del gioco sta nella parola astrazione.

L’autore del documento lavora ad un livello di astrazione superiore: quando vuole dire che un titolo di capitolo è un titolo di capitolo semplicemente lo indica come tale senza stare a pensare a particolari tipografici quali caratteri e posizioni relative delle righe.

Il documento contiene a livello concettuale le stesse informazioni, mancano le indicazioni su come fisicamente ogni elemento verrà rappresentato, di questo si farà carico lo strumento che i lettori useranno per accedere al documento.

Quando pubblicai il mio primo libro, era una introduzione al vecchio caro dBaseII di Ashton Tate, scrivevo in Word Star, il documento veniva poi ribattuto in una macchina speciale che produceva le strisciate di testo: colonne interminabili di testo composto nel carattere, nel corpo e nelle dimensioni volute. Un impaginatore poi ritagliava le strisce, le passava un una inceratrice che ne ricopriva il dorso con un sottile strato di cera adesiva e poi le incollava nella gabbia e così via pagina per pagina componeva l’intero volume a mano. Il tutto poi rifotografato andava in stampa.

Ricordo la faccia incredula della segretaria di redazione quando avendo quasi finito il volume ed avendolo in gran parte già impaginato mi venne l’idea di aggiungere a margine delle icone per segnalare passi salienti. La cosa avrebbe comportato la riduzione della larghezza del testo, qualche millimetro appena intendiamoci, per fare spazio ad icone di dimensioni adeguate.

Con il più scarso dei programmi di elaborazione di testi disponibile oggi sul mercato la cosa richiederebbe forse due minuti. Allora, parliamo dei primi anni ottanta, l’idea venne bocciata decisamente per i tempi e per i costi impensabili che avrebbe comportato.

Quella stessa segretaria, abilissima con le forbici e la colla, mi diede allora della impaginazione una visione che mai dimenticai. Il testo scende e come un liquidi va ad occupare le pagine seguendo le regole tipografiche che il grafico ha imposto. Per ottenere un volume armonico non bisogna cercare mai di forzare le cose: le regole sono fisse, testo, figure e titoli le seguono e riempiono le pagine con quel ordine che tanto piace all’occhio del lettore e che rende il volume gradevole da leggere e facile da consultare.

Vestale di questa visione fluviale della impaginazione mi inseguiva con inviti perentori ad aggiungere 145 battute o toglierne 270 cose che mugugnando un po’ poi finivo per fare e devo dire che quando ho avuto in mano la prima copia del volume  non me ne sono pentito.

Qualcuno si chiederà il motivo di questo racconto da nostalgico reduce dai capelli bianchi. Ebbene al di là del fatto che non ho la minima nostalgia di quei metodi di lavoro, oggi si lavora molto meno e si produce molto di più e molto meglio, quella visione mi è rimasta nella testa e sono profondamente convinto che fosse allora un saggio modo di lavorare e che sia oggi l’unico modo logico per farlo.

Quali i vantaggi sostanziali di un approccio fluido alla pagina?

1.    Meglio fare di necessità virtù

Chi vuole una pagina perfetta e vuole essere fiero di avere deciso fino all’ultimo decimo di millimetro la posizione di ogni singolo elemento come succedeva sulla carta stampata meglio continui ad usare la carta stampata.

La rete è grande, gli utenti sono molti ed ognuno lavora su macchine diverse con impostazioni diverse e programmi diversi: scrivere una pagina che sia visibile allo stesso identico modo su tutte queste macchine è semplicemente impossibile. L’atteggiamento dei puristi che, tipometro^[4] alla mano, controllano le righe una per una è semplicemente velleitario e sterile.

Attenzione qui non stiamo parlando di differenze nella visualizzazione delle pagine su calcolatori con sistema operativi diversi (diciamo Mac e Wintel) o con browser diversi (Explorer e Netscape). Stiamo parlando di problemi che si possono presentare tranquillamente anche su macchine con lo stesso sistema operativo e con lo stesso browser, ma con fonti installate e impostazioni diverse e, credetemi, le possibilità che dopo qualche giorno dalla installazione due macchine siano identiche è molto molto bassa.

Meglio dunque considerare la realtà, conoscerla e conviverci in modo efficace, o no?

2.    Gli strumenti di accesso sono molti

Innanzitutto ognuno può utilizzare diversi strumenti senza che questo impedisca una visualizzazione corretta dei documenti, indipendentemente dal browser utilizzato, dalle dimensioni dello schermo e dalla natura dell’hardware sul quale il documento viene letto.

Questa ultima considerazione fino a poco tempo fa era relativamente poco rilevante in quanto la visualizzazione avveniva quasi esclusivamente utilizzando un browser e lo schermo di un personal computer. Oggi le cose stanno rapidamente cambiando: le probabilità che qualcuno abbia la esigenza di leggere il nostro sito non da un personal computer, ma da una qualche appliance, sono enormemente cresciute.

Un iPaq Compaq e un telefono cellulare GPRS blue tooth compatibile possono essere un interessante modo per navigare per esempio alla ricerca di news o per leggere in spiaggia le ultime notizie.

Proviamo a prendere il sito dell’Ansa (www.ansa.it) un sito ben scritto, senza tanti fronzoli che fa quello che deve fare: offre informazioni.

 

Figura 9 Il sito ANSA visto con un normale browser...

 

Armati di un telefonino GPRS Blue tooth e di un palmare andiamo in spiaggia e sotto l’ombrellone ci colleghiamo e possiamo tranquillamente leggere le ultime notizie.

 

Figura 10 Lo stesso sito navigato con un palmare.

Lette le notizie ci viene voglia di andare a leggere l’ultimo saggio della bellissima rivista online www.engramma.it una rivista molto bella sia nella forma che nei contenuti.

 

Figura 11 Un bellissimo sito...

 

Inevitabile la delusione!

Il sito risulta assolutamente impossibile da navigare: tutto quello che si vede è l’angolo in alto a sinistra, ma la mancanza di barre di scorrimento non permette di fare praticamente nulla.

 

Figura 12 ... non navigabile però con lo stesso palmare.

Basta fare un po’ di  prove anche nella versione web per vedere che questo sito a differenza di quello Ansa impone una formattazione assolutamente rigida.

Certo non tutti i siti hanno l’esigenza di essere letti con diversi browser e diversi device (nel caso delle Intranet per esempio di solito il tipo di browser è imposto), ma per siti generali rinunciare alla cosa può non essere una buona idea.

3.    Non di solo Web…

L’accesso ai documenti via Web è certamente comodo e spesso preferito dagli utenti, ma dobbiamo considerare che non è l’unico.

Se dovete distribuire una voluminosa raccolta di documenti che non saranno più modificati, per esempio qualche annata di una rivista, un bel CDROM può essere la scelta più giusta.

Se poi il documento deve essere utilizzato per esempio come manuale su una macchina Microsoft Windows poterlo convertire in un file nel formato nativo degli Help Microsoft^[5] potrà essere estremamente efficace. Il bello di un file di help è che può essere reso disponibile all’interno di una applicazione ed offre una serie di funzioni native per esempio per la ricerca delle informazioni.

E infine c’è sempre la vecchia cara carta che resta un supporto interessante e che non può certo essere dimenticata, molti documenti letti su carta sono molto più efficaci.

Seguendo un approccio tipografico rigido l’unica soluzione per pubblicare un documento in modo che sia fruibile sui vari supporti è impaginare ogni volta a mano le diverse versioni. Questo oltre che comportare lavoro e costi di fatto inutili rende molto difficile per documenti che cambiano spesso il mantenimento di versioni aggiornate e sincronizzate.

L’approccio fluido permette invece di gestire un solo documento di partenza ripubblicandolo poi in modo automatico nelle versioni per i diversi supporti in modo automatico. Esattamente come nel caso della pubblicazione su web avremo un file .CSS che definirà le regole di rappresentazione così le regole per i diversi supporti saranno definite una volta sola e poi applicate dai diversi programmi di formattazione.

Un altro grande vantaggio di questo approccio è la possibilità di andare a modificare per esempio un particolare nella rappresentazione cartacea senza toccare minimamente né il documento né tanto meno le regole di formattazione e rappresentazione per gli altri supporti.

4.    Non tutti navigano guardando le immagini

Il continuo aumento nella velocità di connessione^[6]  è stato in larga parte vanificato dalla presenza sempre più massiccia di elementi grafici sempre più pesanti.

Molti di coloro che navigano per professione preferiscono aumentare la velocità inibendo la visualizzazione delle immagini e riservandosi di scaricare solo quelle delle pagine che veramente interessano.

Un sito ben scritto, e l’approccio fluido alla formattazione è alla base di questa buona scrittura, restano leggibili e navigabili anche senza le immagini.

Figura 13 Il sito Ansa navigato senza visualizzazione delle immagini resta accessibile, anche se mancano alcuni elementi quali per esempio i testi da visualizzare in asenza delle immagini.

Un po’ meno facile navigare un sito pur molto bello come quello nuovo di Alitalia se si decide di farlo rapidamente senza le immagini: il sito di una compagnia aerea è peraltro un esempio molto classico di sito nel quale la stragrande maggioranza degli utenti cercano informazioni rapide e non belle immagini!

Figura 14 Il sito Alitalia senza la visualizzazione delle immagini risulta assolutamete non navigabile.

Figura 15 CNN ha un sito magistralmente scritto per la navigazione senza immagini! (L'immagine che si vede in alto a destra è di fatto un banner che nonviene escluso in quanto scende con altre modalità)

5.    Gli schermi non sono tutti uguali

I monitor di grandi dimensioni sono, soprattutto nei PC portatili e nelle versioni flat, una delle componenti più costose della macchina.

Bene dopo avere comperato un bel NEC da 18 pollici flat da due milioni e mezzo di vecchie lirette andiamo a casa lo attacchiamo al nostro personal, cominciamo a navigare e cosa vediamo spesso?

Il sito ha le stesse dimensioni che aveva quando usavo il mio vecchio ed economico monitor da 17 pollici e tutto quello che ho ottenuto è l’aggiunta di due belle bande bianche laterali: bel risultato!

La cosa non succede, ci sono siti ben scritti che occupano tutto lo schermo.

Figura 16 WWW.USEIT.COM, uno dei siti storici sulla usabilità, si adatta allo schermo, qui lo vediamo a 800 per 600 pixel su un monitor piccolo...

 

Figura 17 ... mentre su un monitor più grande possiamo salir fino a 1024 per 768 mantenendo la leggibilità e vedendo più materiale tutto insieme.

La condizione necessaria, ma non sufficiente, per ottenere questo risultato?

L’approccio fluido alla formattazione della pagina.

6.    Il mondo è pieno di daltonici e di presbiti

“Daltonici presbiti mendicanti di vista…” così comincia la versione di Fabrizio De Andrè^[7] di una poesia della antologia di Spoon River di Edgar Lee Masters.

L’otto per cento dei maschi europei ed il sette per cento dei maschi statunitensi sono Daltonici^[8], hanno cioè una qualche forma di difficoltà nella visione dei colori. I Daltonici^[9] non vedono in bianco e nero come ci hanno raccontato quando eravamo bambini, ma hanno una certa difficoltà a distinguere tra di loro certi colori.

 

 

La figura è presa da un test di daltonismo: chi ha una vista normalmente sensibile ai colori non ha difficoltà a riconoscere il numero 6 disegnato con pallini di diversi colori mentre per alcuni daltonici la cosa è assolutamente impossibile.

Un miliardo e mezzo di persone nel mondo, quindici milioni gli italiani, sono presbiti. La presbiopia è quasi sempre un affetto dell’invecchiamento: dopo moto anni onorato servizio l’occhio diventa incapace di mettere a fuoco gli oggetti vicini ed eccoci allora leggere tenendo il giornale lontanissimo o mettere gli occhiali^[10].

 

Questa GIF animata^[11] da una idea della differenza di visione da vicino per i non presbiti, che hanno una visione nitida delle lettere, e per i presbiti che ne hanno una visione confusa.

Citando un personaggio di Alberto Sordi qualcuno interessato al disegno di siti potrebbe dire ora un bel “E chi se ne frega non ce lo metti?”.

Chi disegna siti non può prescindere da questi problemi.

Per aiutare i daltonici dobbiamo scegliere colori per loro sicuri, si tratta di combinazioni di colori che non causano problemi alla maggior parte dei daltonici.

In ogni caso vale la pena di non imporre colori per lo sfondo e per i caratteri lasciando che i vari utenti possano ridefinirli nel loro lettore per adattarli ai loro problemi specifici.

Figura 18 Il sito WWW.USEIT.COM permette la modifica dei colori dello sfondo e dei caratteri per adattarli ad eventuali problemidi visione degli utenti.

E per aiutare e presbiti?

La cosa è ancora più semplice: i presbiti navigano impostando caratteri grandi, il sito deve essere scritto in modo da permettere il loro ingrandimento.

Figura 19 Anche la dimensione del carattere è impostabile a piacere sul browser.

La morale…

La pagina Web nasce con caratteristiche e finalità molto diverse da quelle che hanno ispirato la formattazione della pagina stampata.

Voler ottenere dallo strumento nuovo risultati identici quelli che otteniamo sulla pagina non è che un cattivo uso dello strumento che a fronte di risultati per forza di cose piuttosto scadenti rende le pagine meno accessibili e ne aumenta enormemente tempi e costi di realizzazione e soprattutto di manutenzione.

Ne vale la pena?