Nel post Layout elastico dalla A alla Z
pubblicato sul nostro blog abbiamo citato diverse risorse dedicate a questo tipo di layout.
Si tratta di una tipologia nota da tempo, già trattata anche nella
Guida ai layout con i CSS.
Abbiamo però ritenuto che fosse un argomento degno di approfondimento: vedremo nell'articolo i concetti che
stanno alla base del layout elastico (prima parte) insieme a molte soluzioni implementative (seconda parte, per la quale vi rimando alla prossima settimana).
Cominciamo subito.
Capire gli em
Uno degli aspetti fondamentali del layout elastico è il dimensionamento in
em. È pertanto indispensabile la comprensione degli em per sviluppare siti elastici.
Un em, nella tipografia tradizionale, corrisponde alla larghezza della
lettera m minuscola. Per i CSS c'è da dire innanzitutto che
gli em sono un'unità di misura relativa attraverso la quale è possibile
specificare il font-size di un elemento e/o le sue dimensioni.
Per quanto riguarda il font-size, un valore specificato in em funge sostanzialmente
da fattore moltiplicativo. Nel seguente esempio
body{font-size: 10px}
h1{font-size: 3em}
il font-size del body è di 10px e stabilisce la misura di
base del font dell'intero documento. Il titolo h1, che è ovviamente parte
del body, avrà un font-size che è tre volte quello del suo contenitore.
Se il titolo h1 del documento associato, com'è presumibile che sia,
non ha altri "genitori" con un font-size specificato, si risalirà fino al font-size del body:
il font-size del titolo sarà quindi tre volte 10px, ovvero 30px.
Il discorso è un po' più sottile per ciò che riguarda il dimensionamento
relativo: in questo caso bisognerà tener presente che la dimensione del font
di default dei browser (o con carattere medio impostato nel browser se si
tratta di IE) è di 16 pixel.
Le due misure del font di base per il body più diffuse sono 76% e 100.01%
(la scelta di tali valori è ben illustrata nell'articolo
Creare un CSS di base)
a cui corrispondono rispettivamente un font-size di 12px e di 16px. Anche in questo
caso gli em introducono un fattore moltiplicativo, basterà tener presente
la corrispondenza tra pixel, em e font di base. Ad esempio:
body{font-size: 76%} /* 12px con il font-size di default sul browser*/
h1{font-size: 3em} /* 36px con il font-size di default sul browser*/
p.small{font-size:0.8em} /* circa 10px con il font-size di default sul browser*/
È possibile inoltre specificare dimensioni degli elementi in em: in questo
caso basterà tener presente che le dimensioni effettive si ottengono applicando il
fattore moltiplicativo del font-size attuale dell'elemento. Ecco un esempio:
body{font-size: 10px}
div.box{width: 40em} /* 400 pixel*/
Andrà comunque sempre tenuto in considerazione il font-size attuale dell'elemento.
Un ulteriore esempio chiarirà il concetto.
body{font-size: 10px}
div.bigbox{font-size: 1.5em; width: 40em} /* font-size: 15px, larghezza: 600 pixel*/
Allo stesso modo si potrà procedere a specificare dimensioni di elementi immersi in
pagine in cui il dimensionamento dei font è relativo, tenendo presente le corrispondenze
citate in precedenza. A tal proposito, c'è un dato molto più significativo per quanto
riguarda gli em: ad un em corrisponde in media la larghezza di due caratteri.
Qui intervengono quindi elementi di usabilità quali la lunghezza ideale di linea e
la leggibilità su schermo: diversi studi hanno confermato che la lunghezza ideale
di linea per un testo centrale di una pagina web con dimensione media
è compresa tra i 60 e 100 caratteri (tra i 30 e i 50 em quindi).
Altri fattori influenzano comunque la leggibilità di un testo: la dimensione del font,
l'altezza di linea e il contrasto tra testo e sfondo... ma il dimensionamento in em
può costituire comunque una solida base per favorirla.
Arriviamo quindi alla caratteristica essenziale del layout elastico, che usa
testo dimensionato relativamente e larghezze specificate in em, così da mantenere
una lunghezza di linea in caratteri più o meno costante (quindi una buona leggibilità)
al variare della dimensione del carattere impostato sul browser.
Questa caratteristica è verificabile ad esempio ridimensionando la misura dei caratteri dal browser sul primo esempio
che, dopo questa doverosa premessa, siamo pronti a presentare.
Layout elastico di base
Il primo esempio che
accompagna l'articolo è un semplice layout elastico a due colonne con header e footer.
Vediamo per prima cosa il codice HTML:
<div id="container">
<div id="header">Header</div>
<div id="content">Contenuto</div>
<div id="sidebar">Colonna secondaria</div>
<div id="footer">Footer</div>
</div>
Come si può notare, il markup è semantico e minimale, ed è composto
da un contenitore generico in cui sono immerse le varie sezioni. Siamo pronti
a procedere con il CSS dell'esempio.
Per quanto riguarda la tipografia, mi sono servito del CSS risultante
dall'articolo Ritmo verticale nella tipografia, in grado
di fornire una solida e pratica base.
La dichiarazione più importante
dell'intero CSS ai fini dell'esempio è senza dubbio quella per stabilire
il dimensionamento relativo del font-size del body, ovvero:
body{font: 100.01%/1.5 Arial,Helvetica,sans-serif}
Possiamo quindi definire il CSS per il layout, che usa i float opposti
di cui ho parlato nell'articolo Float: teoria e pratica.
In sostanza, una volta stabilita la larghezza del container (60 em, ossia 960px con font-size di default sul browser),
le due colonne vengono rese float in senso opposto, ciascuna a larghezza
determinata: 38em per i contenuti centrali e 18em per la sidebar.
Un margine di 1em viene impostato per distanziare le due colonne dagli estremi
del container. Per ovviare al doubled-margin bug su IE6 (di cui abbiamo
parlato in
Risoluzione dei problemi di CSS)
esse vengono dichiarate display: inline. Ecco il CSS relativo al layout per intero:
body{text-align:center}
div#container{width:60em;margin:0 auto;text-align:left}
div#content{float:left;width:38em;display:inline;margin-left:1em}
div#sidebar{float:right;width:18em;display:inline;margin-right:1em}
div#footer{clear:both}
Due parole per quanto riguarda le false colonne, ovvero il
meccanismo attraverso il quale vengono distinte cromaticamente le due colonne:
in questo caso la larghezza dell'intero layout è variabile, e quindi potrebbe
risultare difficile pensare a come impostare uno sfondo che dia l'idea di separazione
delle colonne. Ma è piuttosto semplice se si realizza che la colonna centrale
è larga il doppio della secondaria, ovvero occupa i due terzi del layout includendo i
margini.
Si sono adottate quindi le false colonne in percentuale, di cui abbiamo
parlato nell'articolo Layout liquido a due colonne,
posizionando quindi lo sfondo in percentuale:
div#container{background:url(bk-left.png) repeat-y 66% 0}
Il nostro esempio è sostanzialmente ultimato, e con un minimo di modifiche
(ovvero invertendo il verso dei float e riflettendo orizzontalmente l'immagine di sfondo)
si può ottenere facilmente anche il secondo esempio,
in cui la colonna secondaria è a sinistra.
Da elastico a liquido: soluzioni ibride
Il layout elastico ha un pregio notevole: quello di consentire una proporzionalità
tra dimensione del testo e larghezza del layout mantenendo una buona leggibilità.
Ma tale pregio è per certi versi anche un difetto, dato che stabilisce una relazione implicita tra
dimensione del testo sul browser dell'utente e risoluzione dello schermo.
Non ci è possibile sapere se questi due fattori siano effettivamente correlati,
ma quello che vorremmo è non compromettere l'usabilità di una pagina per la presenza
di scrolling orizzontale. Si presentano a questo punto diverse possibilità implementative
in grado di liberarci da tale rischio con alcuni piccoli accorgimenti.
Eccoci quindi al terzo esempio, in cui il layout è
liquido ma in condizioni limite è elastico, in quanto ha larghezza minima e massima
impostate in em. Il vantaggio in questo caso è evidente: il layout ottiene
una maggiore flessibilità e conserva comunque la caratteristica peculiare
dei layout elastici, ovvero la proporzionalità tra testo e dimensioni.
Per la realizzazione delle due colonne si è abbandonato il dimensionamento
in em a favore del dimensionamento in percentuale.
Vediamo il CSS relativo al layout dell'esempio, con le due
dichiarazioni chiave evidenziate:
body{text-align:center}
div#container{max-width: 70em;min-width: 40em;
margin:0 auto;text-align:left}
div#content{float:left;width:60%;display:inline;margin-left:3%}
div#sidebar{float:right;width:27%;display:inline;margin-right:3%}
div#footer{clear:both}
Con lo stesso procedimento si potrà ottenere la versione con colonna
secondaria a sinistra: basterà invertire il verso dei float e cambiare
l'immagine di sfondo. Ecco quindi il quarto esempio.
I due layout appena visti possono essere visti come soluzioni ibride
tra layout liquido ed elastico. In particolare, potremmo definirli layout
liquidi-elastici, dato che si presentano sostanzialmente liquidi
ma elastici in condizioni estreme. Si può pensare anche a un layout
elastico-liquido, ovvero un layout che sia principalmente
elastico ma assuma le caratteristiche di un layout liquido al restringersi
della finestra del browser, così da non generare scrolling orizzontale.
Ecco allora il quinto esempio, un layout
con larghezza in em ma max-width pari al 100%, e il suo CSS:
body{text-align:center}
div#container{width:60em;max-width: 100%;
margin:0 auto;text-align:left}
div#content{float:right;width:60%;display:inline;margin-right:3%}
div#sidebar{float:left;width:27%;display:inline;margin-left:3%}
div#footer{clear:both}
Anche in questo caso ho preparato la versione duale
con le colonne invertite.
Sistemare le cose per IE 6 e versioni inferiori
Gli esempi visti hanno una buona compatibilità: sono stati infatti testati
con successo sulle versioni di IE dalla 5 alla 7, oltre che sulle ultime
versioni di Opera, Firefox e Safari. Per quanto riguarda gli ultimi quattro,
c'è da dire che le versioni di IE fino alla 6 inclusa non potranno beneficiare
appieno delle loro caratteristiche, dato che non supportano le
proprietà max-width e min-width.
Si può in questo caso servire alle versioni di questo browser
un layout che abbia larghezza minima e massima in pixel, da servire attraverso
il commento condizionale.
La strategia è quella esposta in questo articolo,
ovvero usare le espressioni proprietarie. Ecco quindi il settimo esempio
che su IE7, Opera, Firefox e Safari ha larghezza minima di 40em e larghezza
massima di 70em, mentre su IE5.x e IE6 ha tali valori rispettivamente di
700 e 1100 pixel grazie al commento condizionale.
Per quanto riguarda il CSS, andranno incluse nella sezione head della pagina
le seguenti righe di codice:
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="widthIE.css">
<![endif]-->
Il file widthIE.css conterrà quindi l'espressione ternaria per condizionare la larghezza del
layout:
#container{
width: expression(document.body.clientWidth < 702? "700px" : document.body.clientWidth > 1102? "1100px" : "auto");
}
Una piccola nota è a questo punto necessaria: se disponete di un sistema Windows con versioni multiple di Internet Explorer,
queste verranno comunque identificate come la versione principale installata (presumibilmente IE7) e il commento condizionale
appena visto non avrà effetto per il testing in locale. Ho preparato quindi questa pagina da usare
esclusivamente per i test su IE5.x e IE6: c'è da evidenziare che anche IE7 percepirà le istruzioni incluse nel commento condizionale.
Conclusioni
Termina qui l'articolo. Abbiamo visto il dimensionamento in em, le caratteristiche principali di un
layout elastico e alcune soluzioni per migliorarne l'usabilità. Gli stessi concetti possono essere applicati
facilmente anche a layout a tre e più colonne. Gli esempi visti sono disponibili per il download. Alla prossima.
