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

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

body{font: 130%/1.6
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 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 i valori di margini e padding assegnati di default dal browser

Procediamo con le sezioni di pagina linearizzare la colonna di navigazione inline

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

Non ci resta che definire i link e i colori bordi 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 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:

Ti consigliamo anche