Ci sono alcuni argomenti che tornano ciclicamente tra i blog e i siti di webdesign di tutto il mondo. Una cosa positiva è che alcuni quesiti vengono trasformati, rivisti in chiave più moderna.
Il dibattito sulla dimensione ottimale dei font, e se usare dimensionamento in pixel o relativo (percentuali o em che sia) è uno di quegli argomenti che sta andando alla deriva, rimanendo senza una definitiva risposta. È un raro caso in cui un quesito insoluto cede il passo a una possibile risposta alternativa, che diventa anche una buona tendenza del webdesign.
Un articolo recentemente apparso su A list apart ha lanciato un "nuovo" trend, ovvero lo zoom layout: da notare che non si tratta di un nuovo tipo di layout, nè di una novità assoluta. È solo un modo per fornire una versione del sito ad alta leggibilità per gli utenti ipovedenti, cioè affetti da problemi di vista.
Il fatto che sia stato dato un nome a questa tipologia di pagine non è così significativo: lo è il fatto che a seguito di altri articoli sul tema si sono definite meglio le caratteristiche. Le vedremo tra breve, ma prima diamo uno sguardo a uno degli esempi che ho preparato per questo articolo.
Caratteristiche di uno Zoom Layout
La caratteristica peculiare di uno zoom layout è la grandezza dei font: questa dovrà essere almeno 100-120% se espressa in percentuale, o 20-25 pixel se dimensionata con carattere fisso. Ma non si tratta solo di dimensioni dei font... ecco alcune altre caratteristiche:
- È un layout liquido a colonna singola adatto a tutte le risoluzioni
- Il carattere è piuttosto grande e le linee ben spaziate
- Alto contrasto tra background e testo
- Il dimensionamento di elementi e sezioni di pagina, se necessario, andrà preferibilmente fatto in em
- I link di salto ai contenuti, se presenti nel markup, dovranno essere visibili
Il punto essenziale per uno zoom layout è che questo dovrà essere il più semplice possibile: in questa ottica, bastano poche regole CSS per realizzarlo. Vediamo come.
Realizzare uno zoom layout
Vedremo ora passo passo come realizzare la pagina di esempio. Il modo con cui procederemo è disporre di una pagina HTML tipo, ripartire da zero con il CSS e procedere a definire nell'ordine:
- Tipografia
- Sezioni di pagina, menu incluso
- Elementi particolari quali form e tabelle
- Colori
In questo modo disporremo di un approccio ordinato e la versione a cui arriveremo si potrà facilmente modificabile e riadattabile alle vostre esigenze.
Ora procediamo con il CSS dell'esempio. Per prima cosa definiamo la tipografia essenziale:
body{font: 130%/1.6 Verdana,Arial,sans-serif}
h1{font-size: 250%;margin:0}
h2{font-size: 180%;margin: 1em 0 0 0}
h3{font-size: 130%;margin: 1em 0 0 0}
p{margin: 0 0 2em}
Il font verrà reso grande il 130% della dimensione di default del browser. Se alcuni di voi si stanno chiedendo per cosa sta quel /1.6 dopo la percentuale: questo definisce il line-height, ovvero l'altezza di linea, e consente di avere linee alte 1.6 volte l'altezza del carattere e quindi migliorare la leggibilità. Valori del line-height per font molto grandi dovrebbero essere compresi tra 1.4 e 1.8 .
Si definiscono inoltre le dimensioni dei titoli e i loro margini, insieme a quelli dei paragrafi. Il punto essenziale da considerare è che per mantenere il CSS leggero il più possibile sfrutteremo per gli altri elementi quali elenchi puntati, blockquote ecc.. i valori di margini e padding assegnati di default dal browser.
Procediamo con le sezioni di pagina. L'HTML della pagina di base che ho usato è molto semplice, e potrebbe essere quello di un tipico layout a due colonne. La cosa importante è linearizzare la colonna di navigazione, ovvero rendere la navigazione orizzontale. Basterà quindi controllare i margini e rendere i list-item inline. Il footer verrà distanziato ulteriormente dal corpo della pagina:
div#menu ul{margin:0;padding:0}
div#menu li{display:inline;margin-right: 1em}
div#footer{margin-top: 5em}
Arriviamo così a due elementi importanti che necessiteranno di alcuni aggiustamenti per le dimensioni dei font: i form e le tabelle.
Per prima cosa, aggiungiamo un po' di margini. Poi ci occuperemo dei font: gli elementi dei form infatti non ereditano il dimensionamento del font della pagina, e dovremo forzarlo al 100% del testo di pagina.
Per le tabelle il discorso è un po' più complicato: mentre in browser moderni e in IE6 la dimensione del testo è ereditata, in IE5 e in IE5.5 non lo è, quindi dovremo creare una regola apposta per questi due browser:
form,table{margin: 1em 0}
td,th{padding: 0.3em;
font-size: 100% !important; /* per browser standard */
nbsp; font-size /**/: 130%; /* vista solo da IE5.X */
}
Infatti IE (fino alla versione 6) non interpreta correttamente la parola chiave !important, e la seconda dichiarazione, servita con un commento vuoto che serve a nasconderla in IE6, va quindi a ridefinire la dimensione dei font per celle e header di tabelle solo per IE5.X .
Non ci resta che definire i link e i colori di sfondi e testo, ed eventualmente assegnare dove necessario i bordi. Ho pensato di lasciare al fondo queste regole così da semplificare ulteriormente il foglio di stile e poterne preparare diverse versioni che vedremo tra breve. Intanto, ecco le ultime regole CSS dell'esempio:
body{background:#FFF;color: #333}
a{font-weight:bold;padding: 3px;padding: 3px;color: #090;
text-decoration: none; border-bottom: 2px solid #000;
height: 1em}
a:hover{background: #090;color: #FFF}
h1{color: #C33}
h2,h3,legend{color: #06C}
input{color: #666}
table,td{border-collapse:collapse;border: 1px solid #666}
div#footer{background: #CCC}
Da notare la dichiarazione height: 1em sui link. In effetti i link, essendo di natura elementi inline, non possono avere dimensioni. Ma assegnare un'altezza ai link è l'unico modo per mostrare il bordo in IE 5.x, dato che questo browser ammette (erroneamente) dimensioni su elementi inline. Per i browser più moderni la dichiarazione non avrà nessun effetto.
Il nostro esempio è così ultimato. Il CSS è incorporato nella pagina, ma potete anche consultarlo per intero qui.
Le varianti
Oltre all'esempio che ho presentato passo passo, ho pensato di realizzare altre tre varianti, in cui il CSS è per buona parte identico: cambiano infatti sono i colori, che ho lasciato per comodità come ultime dichiarazioni CSS nell'esempio principale proprio per poter preparare facilmente gli altri tre. Una tendenza recente dello Zoom layout è di presentare testo chiaro su sfondo scuro. Ecco quindi le tre varianti:
- Versione con sfondo grigio
- Versione con sfondo blu
- Versione con sfondo bordeaux
- Versione con caratteri serif e sfondo bordeaux
Personalmente ho un po' di riserve sulla versione serif, e trovo che le altre siano pià leggibili, ma ho pensato di presentarla per completezza. Alcuni di questi schemi cromatici sono stati ispirati dagli articoli di cui parlerò in chiusura.
Approfondimenti e download
Abbiamo visto velocemente le caratteristiche di uno Zoom layout e soprattutto un semplice approccio pratico per implementarlo con i fogli di stile. Alcune letture interessanti, orientate un po' più agli aspetti teorici dello zoom layout sono:
- Big, Stark & Chunky di Joe Clark
- Inverted zoom: designing for low vision di Roger Johansson
- Zoom layout di Douglas Bowman
- Zoom for Low Vision di Gez Lemon
- Zoom the web di Joe Clark
Inoltre merita una lettura attenta Ipovisione e accessibilità e fruibilità del web di Franco Frascolla.
Per concludere, per consentire la presentazione di uno zoom layout dovrete predisporre i vostri siti di uno style switcher: ne potrete trovare una versione lato client con Javascript (cfr. Articolo:«Style Switcher per tutti - I») e una lato server con ASP o PHP (cfr. Articolo: «Style Switcher per tutti - II»).
Gli esempi visti in questo articolo sono disponibili per il download. Alla prossima.
