Font e layout, vecchi problemi risolti che ritornano attuali

Chi si occupa da tempo di accessibilità e usabilità ricorderà che una delle considerazioni di base, è sempre stata che “l’utente deve poter fare quello che vuole”.

Anche l’idea tecnologico/filosofica che sta dietro al passaggio progressivo dall’HTML al rigoroso XHTML poteva significare proprio questo: comprimiamo il disordinato HTML in una struttura rigida stile XML (XHTML) in modo che l’interoperabilità possa diventare massima e l’interpretazione solida e certa, poi affidiamo il vestito al CSS, in modo che se un utente ha esigenze diverse da quelle dello sviluppatore, disattiva il CSS di progettazione e ne attiva uno suo, o addirittura si legge il suo documento XHTML puro.

Ricorderanno in molti che, con le prime timide (e lentissime) connessioni mobili alla rete eseguite con i telefonini che all’epoca si chiamavano “di nuova generazione”, alla fine, su quei monitor da 2 pollici o poco più, l’unico modo per navigare poteva essere la disattivazione dei CSS e delle immagini affidandosi alla sola struttura del codice XHTML.

Poi però sono successe un sacco di cose, dalle connessioni che sono diventate più veloci, ai telefonini che da “nuova generazione” hanno avuto una nuova mutazione in smartphone. Sono nati iPhone, iPad, Galaxy Tab e altri aggeggi che prima o poi arriveranno sul mercato. I lavori per le specifiche dell’XHTML2.0 stanno ristagnando e la comunità è ormai indirizzata verso il nuovo HTML5, riesumando di fatto un linguaggio di scripting che solo qualche anno fa sembrava sull’orlo del pensionamento con la versione 4.

Queste evoluzioni tecnologiche hanno sicuramente meriti che non sono ora oggetto di questo articolo, ma hanno introdotto delle nuove esperienze utente che hanno minato dal basso alcune delle certezze consolidate sul web.
Vediamo i due aspetti che ritengo primari per la progettazione di un buon layout adatto alla maggior parte dei device.

La dimensione dei font.

Sono anni che non ne parlavamo più.
Avevamo tutti imparato (con un po’ di consapevole pressappochismo e “per sentito dire”) che definire nel tag BODY del proprio foglio di stile un font-family Arial o Verdana con un size impostato a 100.01% o a 76% ci avrebbe già risolto un po’ di grane di compatibilità cross-browser. Il perché non ce lo ricordiamo più, ma è così.
E noi, un po’ saccenti e consapevoli che “l’utente fa come gli pare”, abbiamo anche cominciato a sorridere quando alcuni ingenui sviluppatori hanno continuato a proporre qua e là sui siti le classiche iconcine + = – che permettono al supporto javascript di modificare al volo la dimensione dei font. Abbiamo pensato che questo fosse ridicolo perché, come detto, l’utente fa come gli pare e chi ha bisogno di vedere più grande non sta certo ad aspettare che il layout di un sito proponga queste features, ma saprà certo che un semplice Control+ (o Mela+ per gli utilizzatori Mac) è sufficiente per produrre lo stesso effetto su ogni sito, anche dove lo sviluppatore ingrato si è ostinato a specificare le misure dei font in pixel e non in misure relative come % o em.
Poi arrivano i Tablet, dove si naviga senza tastiera e l’azione di Control+ non esiste più.
Già, l’elementare comando che permette di aumentare i font non è più disponibile sui tablet perché è stato sostituito dall’azione di zoom della pagina che si fa con il classico movimento delle due dita che si aprono.
Questo comportamento, se da un lato migliora l’esperienza utente, dall’altro pone fine alla possibilità di scegliere la dimensione del font in modalità relativa rispetto al resto del contenuto.
Mi spiego: già da tempo sui browser evoluti come Firefox, l’ingrandimento dei font può essere fatto sia come “ingrandimento del solo testo”, sia come zoom della pagina (azione che oggi equivale al movimento ad aprire delle dita sui tablet).
Evito ora di ritornare su argomenti già ampiamente trattati in passato sull’utilizzazione delle due possibilità. Ricordo solo che lo zoom di solo testo è un’azione molto più interessante per una grande quantità di utenti ipovedenti e anche normovedenti.

Sui tablet di fatto è possibile solo l’ingrandimento come zoom. In realtà su iPhone a iPad per esempio, l’ingrandimento dei font è possibile se si utilizzano browser diversi da Safari che permettono qualche configurazione in più (ammesso che l’utente ne sia a conoscenza e che effettivamente le utilizzi). Questa possibilità è dunque remota perché e rilegata a una percentuale di utenti tendente allo zero.

E’ evidente quindi che un argomento ormai marginale e rilegato ai principi base dell’accessibilità diventa nuovamente attuale.
Se per motivi di estetica si decidesse di utilizzare un font piccolo ecco che diventerebbe interessante avere a disposizione quel set di funzioni per l’ingrandimento dei font considerate inutili.
E in ogni caso, la scelta della dimensione del font di base deve essere ben ponderata da un punto di vista dell’usabilità e non rilegata alle sole scelte estetiche.
Basta per esempio fare un giretto sul sito di telecomitalia (www.telecomitalia.com) con un iPad per rendersi conto che con la dimensione di base dei font è un po’ piccola e se si utilizzano le funzioni (presenti nel sito) per ingrandirli la lettura diventa molto più agevole.
Peccato solo che il layout, pur contenendo tali funzionalità per i font, non sia poi adatto agli ingrandimenti. Infatti molti box centrali non sono elastici e l’ingrandimento spinge i testi oltre la zona visibile.

Rimane comunque lo zoom della pagina che si può fare con le dita, che garantisce una facile lettura di tutti i testi. Ma anche questa funzionalità nasconde un’insidia, quella del layout.

La scelta del numero delle colonne di layout

Layout a una, due, tre colonne. Fissi, elastici, fluidi e semi fluidi. Layout orizzontali e scorrimenti di porzioni di testo in orizzontale (slideshow) imbottiti di effetti javascritp. Siamo abituati a tutto pur di trovare design interessanti e innovativi.
Anche in questo caso in passato si è molto studiato su quali potessero essere le soluzioni migliori. Considerazioni incentrate anche sulle dimensioni dei monitor che fino a un certo periodo della storia dell’informatica sono sempre stati molto standardizzati. Ricorderete senz’altro i layout ottimizzati per 800×600 e poi per 1024×768.
Alla fine in molti abbiamo teorizzato che i layout di tipo elastico che si adattano automaticamente e in percentuale alla larghezza dei monitor sono senz’altro i più interessanti, seppure i più difficili da gestire soprattutto se contengono elementi grafici non ridimensionabili.
Ma si è anche teorizzato che i layout a una colonna, soprattutto per i documenti di solo testo, siano comunque i più interessanti, proprio perché l’utente utilizzando la funzione di dimensionamento della finestra del proprio browser, può decidere da solo quale sia la larghezza della colonna. E’ noto infatti che molti lettori si trovino a proprio agio con testi scritti in colonne molto corte e altri invece si trovino meglio con colonne più lunghe che occupino l’intero spazio disponibile del monitor.
La colonna unica, di fatto, permette all’utente di fare come meglio desidera.
Molti documenti importanti sono scritti così, anche quelli ufficiali del W3C.

Anche qui poi si sono complicate le cose.
Come abbiamo visto sui tablet e gli smartphone gli ingrandimenti permettono di zoomare su una porzione di pagina e le applicazioni sono sempre a tutto schermo. Nel caso in cui la pagina sia colonna unica e di solo testo, si ha l’inconveniente che lo zoom crea uno scorrimento orizzontale e il lettore si vede costretto a scorrere il testo in avanti e indietro per poter leggere l’intera riga. Oltretutto su questi dispositivi quando si aziona con un dito lo scorrimento in orizzontale non si ha la possibilità di mantenere costante lo scorrimento in verticale.
Di fatto quindi l’utente è costretto a leggere il contenuto in mezzo a una oscillazione costante delle righe, sia in orizzontale che in verticale. Situazione questa non certo comoda.
E se i font sono troppo piccoli per poter leggere lo zoom diventa obbligatorio.
Per esempio, su iPhone e anche su iPad leggere i documenti del W3C è davvero complicato se non impossibile.

Conclusione

L’accesso alla rete è ormai garantito da centinaia di supporti diversi e i monitor degli utilizzatori vanno dai pochi pollici degli smartphone ai mega schermi fino a 30 pollici. Sui tablet, dove non esistono mouse e tastiere reali, l’esperienza di navigazione è completamente diversa dai computer tradizionali (desktop o portatili). Gli sviluppatori dovranno cercare di adattare i propri lavori a questi dispositivi e per fare questo dovranno ripensare anche a cose che erano state quasi dimenticate come la grandezza dei font o le strutture dei layout senza concentrarsi solo su fattori estetici.
Per quanto il mondo delle applicazioni con funzioni di solo browser stia fornendo ambienti appositamente studiati per i dispositivi, la navigazione da browser tradizionale anche da mobile è ancora importantissima, se non quasi unica. Il web è più che mai vivo.