Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Zoom layout: tecniche ed esempi

Un valido ausilio per l'accessibilità
Un valido ausilio per l'accessibilità
Link copiato negli appunti

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:

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:

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.


Ti consigliamo anche