CSS: tipi e tipologia di layout

CSS: tipi e tipologia di layout

In questo articolo cercheremo di delineare in linea di massima i tipi e le tipologie di layout che possiamo trovare nel nostro lavoro con i CSS. L'elenco che segue è per forza di cose indicativo e non definitivo.

Introduzione

La tipologia di layout è varia, ma è di solito riconducibile a due parametri fondamentali:

  1. numero di colonne
  2. tipo di misura (fissa, fluida, mista)

La scelta di questi parametri dipende dalle nostre necessità e dal tipo di sito da realizzare. Non esiste un tipo di layout migliore di un altro, in quanto ogni sito ha una storia a parte ed esigenze diverse. Quello che a noi interessa è l'essere in grado di conoscere le varie tecniche al fine di poter soddisfare il maggior numero di richieste possibili.

Ad una colonna

Il layout ad una colonna (o layout monolitico) è in genere costituito dalle seguenti parti:

  1. intestazione (o header)
  2. navigazione
  3. contenuti
  4. piè di pagina (o footer)

Una struttura (X)HTML potrebbe essere la seguente:


<div id="sito">
	<div id="header"></div>
	<div id="navigazione"></div>
	<div id="contenuti"></div>
	<div id="footer"></div>
</div>

Sotto al menu principale (in genere orizzontale) è possibile aggiungere una sezione che indichi la posizione corrente all'interno del sito (le cosiddette "briciole di pane" o breadcrumbs) al fine di aumentare l'usabilità dello stesso. Sempre nella sezione di navigazione potremmo inserire un form di ricerca orizzontale.

Il layout ad una colonna è comune soprattutto nei siti di piccole dimensioni. Per la sua spiccata propensione alla verticalità, è decisamente indicato se vogliamo pubblicare testi di una certa lunghezza e favorire la concetrazione del lettore sul testo. Un esempio in tal senso è costituito dagli articoli presenti sul sito di Michele Diodati.

A due colonne

Il layout a due colonne è in genere costituito dalle seguenti parti:

  1. intestazione (o header)
  2. contenuti (colonna principale)
  3. navigazione (colonna laterale)
  4. piè di pagina (o footer)

Una struttura (X)HTML potrebbe essere la seguente:


<div id="sito">
	<div id="header"></div>
	<div id="contenuti"></div>
	<div id="navigazione"></div>
	<div id="footer"></div>
</div>

Sotto all'intestazione è possibile aggiungere un altro menu di navigazione orizzontale o un form di ricerca (o entrambi), oppure posizionare il form nella colonna laterale. La colonna laterale è in genere adibita ad ospitare il menu di navigazione principale. Se il menu contiene molti link, è possibile raggrupparli per aree tematiche. Ad esempio:


<div id="navigazione">

	<dl>
	
		<dt>Articoli</dt>
		<dd>...</dd>
		
		<!-- continua -->
	
	</dl>

</div>

In alternativa si possono usare le intestazioni per ciascuna area tematica, mantenendo il codice coerente e semantico. Inoltre la colonna laterale può anche contenere altre informazioni, come anterprime di articoli o note personali. Quindi si potrebbe aggiungere:


<div id="navigazione">
	<div class="info"></div>
</div>

Usando una classe è possibile applicare la stessa formattazione a più elementi con contenuto simile.

Il layout a due colonne è comune soprattutto nei siti di medie dimensioni, come i blog. Un esempio in tal senso è il blog di Html.it.

A tre colonne

Il layout a tre colonne è in genere costituito dalle seguenti parti:

  1. intestazione (o header)
  2. contenuti (colonna principale)
  3. navigazione (colonna laterale)
  4. extra (colonna laterale)
  5. piè di pagina (o footer)

Una struttura (X)HTML potrebbe essere la seguente:


<div id="sito">
	<div id="header"></div>
	<div id="contenuti"></div>
	<div id="navigazione"></div>
	<div id="extra"></div>
	<div id="footer"></div>
</div>

Per il layout a tre colonne vale quanto visto per il layout a due colonne, con in più l'aggiunta di una colonna che di solito serve a contenere materiale informativo di vario genere e che a volte può contenere un secondo menu di navigazione. Il layout a tre colonne è comune soprattutto nei siti di grandi dimensioni, come i siti istituzionali.

Layout complessi

Per layout complessi si intendono quei layout che hanno superato il limite delle tre colonne per raggiungere un livello arbitrario di nidificazione. Dato che una norma non scritta di usabilità consiglia di non superare il tetto massimo delle tre colonne, molti siti de facto hanno superato tale limite segmentando ogni colonna in sezioni distinte. Esempio:


<div id="sito">
	<div id="header">
		<div id="logo"></div>
		<div id="ricerca"></div>
	</div>
	<div id="navigazione-1"></div>
	<div id="contenuti">
		<div id="sezione1"></div>
		<div id="sezione2"></div>
	</div>
	<div id="navigazione-2"></div>
	<div id="extra">
		<div id="sezione3"></div>
		<div id="sezione4"></div>
	</div>
	<div id="footer">
		<div id="sezione5"></div>
		<div id="sezione6"></div>
		<div id="sezione7"></div>
		<div id="copyright"></div>
		<div id="navigazione-footer"></div>
	</div>
</div>

Questa soluzione è adottata soprattutto dai grandi portali, che hanno la necessità di concentrare nella home page il maggior numero di informazioni possibile.

Layout sperimentali

I tipi di layout sinora esaminati seguono tutti uno schema basato su una griglia che si estende dalla parte superiore a quella inferiore dello schermo. Un layout sperimentale cerca nuove direzioni per la rappresentazione del flusso. Tipico il caso dei layout orizzontali, che si estendono oltre la normale dimensione orizzontale della finestra di visualizzazione e sono interamente visibili solo grazie alla barra di scorrimento orizzontale del browser. Per esempio, un layout orizzontale può avere la seguente dichiarazione:


body {width: 3500px}

I layout orizzontali, e più in generale quelli sperimentali, vengono usati a scopo prettamente dimostrativo.

Semantica del posizionamento degli elementi

Dagli esempi (X)HTML proposti si sarà potuta notare la tendenza a far precedere le colonne laterali dalla colonna dei contenuti. Ciò è voluto, in quanto per una corretta indicizzazione da parte dei motori di ricerca è necessario che il contenuto principale preceda gli altri contenuti nel sorgente.

I robots (o spider) dei motori di ricerca leggono una pagina web esattamente come un lettore di schermo o un browser testuale, ossia seguendo l'ordine degli elementi dato nel sorgente. Se i contenuti ausiliari precedono il contenuto principale, i robots li memorizzeranno prima del contenuto principale. In genere i robots memorizzano le prime 250 parole di un documento. Quindi, se il contenuto principale viene posto dopo gli altri contenuti, la parte visibile nei risultati della ricerca potrebbe comprendere solo i link di navigazione e il contenuto extra, e non quello principale.

Occorre quindi valutare attentamente la scelta dello schema di posizionamento usato. Per ulteriori informazioni sull'indicizzazione si consulti www.motoricerca.info.

Layout fissi

I layout fissi appartengono a quel tipo di layout in cui le dimensioni degli elementi vengono definite usando misure fisse. L'unità di misura di riferimento è il pixel (px). Esempio:


#sito {width: 600px}
#navigazione {width: 200px}

Questo tipo di layout viene scelto per la precisione con cui si possono definire le dimensioni degli elementi. Contrariamente a quanto si ritiene, i layout fissi non presentano particolari controindicazioni se il media di destinazione è lo schermo di un computer, fermo restando il fatto che la risoluzione di riferimento è 800 x 600. In altre parole, il layout deve rientrare in quelle dimensioni, per evitare che gli utenti siano costretti a scrollare orizzontalmente la pagina se navigano con quella risoluzione di schermo.

Per rendere più flessibile un layout fisso è possibile usare unità relative per i font e per gestire lo spazio tra gli elementi. Esempio:


#contenuti {font-size: 1.1em; padding: 0 1em}
#contenuti p {margin: 1em 0}

Il discorso si complica se il media di destinazione è un palmare o un cellulare. In questo caso è possibile usare i tipi di media CSS per dare un foglio di stile particolare per quei dispositivi:


@media handheld {
* {float: none; position: static}
#sito {width: 250px; max-width: 250px; font-size: 11px}
}

Layout fluidi

I layout fluidi appartengono a quel tipo di layout in cui le dimensioni degli elementi vengono definite usando misure relative. Le misure di riferimento sono em e percentuali. L'indubbio vantaggio consiste nel potersi adattare a qualsiasi risoluzione di schermo. Esempio:


#sito {width: 80%}
#navigazione {width: 20%}

In questo caso il primo elemento sarà largo l'80% della finestra del browser, e il secondo il 20% del primo.

Lo svantaggio maggiore si ha quando bisogna inserire elementi dalle dimensioni predefinite, come le immagini. Avendo delle misure intrinseche espresse in pixel, è necessario trovare un grado di approssimazione che permetta di no stravolgere il layout cambiando risoluzione o ingrandendo i caratteri.

Si è proposto di usare le percentuali anche per le immagini. Esempio:


#extra {width: 25%}
#extra img {width: 100%}

Questa soluzione è efficace solo se siamo in grado di trovare la giusta ratio tra pixel e percentuali. In caso contrario, al variare delle dimensioni della finestra l'immagine potrebbe risultare sgranata.

Il discorso si complica ulteriormente con le immagini di sfondo. Esempio:


#sito {width: 80%}

#header {
width: 100%;
height: 2em;
background: url("banner.gif") no-repeat 0 0;
}

Si supponga che l'immagine abbia le dimensioni di 800 x 80. Al variare della larghezza della finestra, lo sfondo potrebbe non coprire interamente l'elemento o parte di esso potrebbe non essere visibile. Inoltre se ingrandiamo molto i caratteri, l'altezza dell'elemento potrebbe risultare eccessiva, e l'immagine di sfondo non riuscirebbe a coprirla in verticale. La soluzione (parziale) consiste nel prevedere le possibili variabili di ridimensionamento ed impostare immagini di sfondo dalle dimensioni proporzionali.

Layout misti

I layout misti prevedono l'uso combinato di unità di misura fisse e relative. Vengono usati quando si vuole garantire una certa flessibilità e al contempo un preciso controllo su alcuni elementi, come le immagini. Esempio:


#navigazione {width: 20%}

#extra {width: 200px; text-align: center}
#extra img {
width: 180px;
height: 100px;
margin: 0 auto;
padding: 0.2em;
border: 1px solid #000;
display: block
}
Torna su