Come sviluppare un layout fluido.

Il web, come altri campi, è in una fase di transizione e di grosso rinnovamento, da una parte si hanno tecnologie e software che hanno fatto la storia ma che stanno diventando obsoleti, dall’altra una grande innovazione che fatica a prendere possesso della situazione e soppiantare quelle vecchie.

Se andiamo ad osservare le statistiche che mostrano le percentuali di utilizzo delle risoluzioni web vediamo subito che esiste un range molto vasto che va ancora dalla vecchia 800×600, che resite ancora, passando per 1024, la più utilizzata per ora, finendo con risoluzioni molto alte come 1920×1200, ( Statistiche delle risoluzioni più utilizzate)

Per chi progetta un sito web, quindi, è importante pensare ad un sito che si possa visualizzare nel migliore dei modi a diverse risoluzioni adattandosi ad esse, il miglior modo è realizzare un layout fluido, per realizarne uno bisogna usare misure relative, più precisamente percentuali invece che misure fisse come il classico pixel.

Come funzionano le percentuali

A differenza di dimensioni fisse come px, in, cm etc le misure percentuali prendono riferimento dall’elemento che li contiene, prendendo come primo punto di riferimento la grandezza della finestra del browse, il codice seguente

<div id="base">
   <idv id="contenuto"></idv></div>

#base { width:70%; }
#contenuto { width:100%; }

si può tradurre in questa maniera: Il div base è largo il 70% rispetto alla larghezza della finestra del browser, mentre il div contenuto è largo il 100% rispetto al div base che lo contiene quindi è largo il 70% rispetto alla finestra del browser, il rislutato sarà come questo nell’immagine di esempio.

Demo

Cerare Il layout fluido

il metodo più semplice per realizzare un sito dalla struttura fluida è non assegnare nessun valore di larghezza width, tramite il foglio di stile CSS, in questa maniera il contenuto occuperà il 100% dello spazio a sua disposizione nella finestra browser e si adatterà automaticamente, è chiaro che questa soluzione è un pò grezza e limitatante graficamente.

La seconda soluzione è quella di usare unità di misura relative, nel caso del layout fluido le percentuali %, per impostare il valore di un determinato elemento.

Partendo da un layout in pixel possiamo dedurre le eventuali dimensioni percentuali tramite dei semplici calcoli matematici, poniamo il caso di voler trasformare un sito web con un div contenitore che occupa la larghezza totoale 1024px con al suo interno una div sidebar di 300px un div per i contenuti di 700px e uno spazio tra di due elementi di 24px, possiamo trasformare facilmente questo sito da fisso a fluido trasformando le misure in percentuali, ovviamente il fatto che la larghezza iniziale sia di 1024px diventa un fattore meno influente, molto più importante invece è creare un sito fluido che mantenga le corrette proporzioni rispetto al sito di partenza.

1024px = larghezza del div contenitore si può trasformare in una percentuale a piacere a seconda delle esigenze, in questo caso 82%.
300px = 29.2% di 1024px.
700px= 68.3% di 1024px.
24px =2.3% di 1024px.

Demo

Potrebbe esserti utile questo tool online per il calcolo di rapporti percentuali rispetto a due valori

il layout semifluido

Il layout fluido è la miglior soluzione per soddisfare tutti i tipi di risoluzione, ma allo stesso tempo è un rischio, perchè non a tutte le risoluzioni il layout potrebbe ridisporsi e adattarsi in una maniera corretta o comunque soddisfacente, non avendo un conttrollo perfetto delle dimensioni come con i pixel, a questo problema viene in contro la soluzione del layout semifluido che mescola pixel e percentuali.

tramite le proprietà CSS max-width e min-width, puoi settare un valore massimo e uno minimo di larghezza di un elemento entro i quali questo elemento smetterà di modificare la sua dimensione di larghezza, riducento quindi il range di errori dovuti al rimpicciolimento o ingrandimento esagerato.

#container { width:100%; max-width:1024px; min-width:960px;}

In questa maniera il div id=”container” occuperà la finestra del browser nella sua totale larghezza 100% ma fino a una larghezza massima di 1024px e una minima di 960px, fuori dai quali la sua dimensione e quelle di tutti gli elementi contenuti al suo interno non potrà cambiare.

Demo

Le immagini

Altro aspetto importante è rendere fluide anche le immagini, per farlo puoi usare due metodi, il primo è specificare la larghezza e/o l’altezza della immagine direttamente nel HTML dentro al tag img nella maniera sotto:

<img src=".../immagine.jpg" alt="" width=50% height="50%" />

nel secondo caso invece puoi specificare la grandezza dell’immagine direttamente nei CSS utilizzando selettore adeguato e la proprietà width:

<img src=".../immagine.jpg" alt="" width="320px" height="200" />

img { width:100%; }

Questo significa che, nonostante sia impostata una dimensione dell’immagine in pixel, oltre la quale l’immagine non si ingrandirà, al contrario in un eventuale rimpicciolimento di risoluzione l’immagine si ridimensionetà tenendo conto della proprietà CSS width:100%.

Lavorare con le immagini di sfondo

Grazie alla proprietà Background-size introdotta con i CSS3 è possibile anche rendere fluida una immagine di sfondo:

background:url(/images/immagine.png);
//* possiamo associare alla proprietà background: url diverse combinazioni di misure,
la prima è il valore della larghezza la seconda dell'altezza *//
background-size: 60px 80px; 
background-size: 100%; /* Valido sia per la larghezza che per l'altezza */
background-size: 100% 50%;

Questa proprietà è supportata da Chrome, Firefox tramite il vendor -moz-background-size, Opera e Safari.

Demo

Conclusioni

In questa breve guida hai visto come iniziare a dare una struttura ad un layout fluido utilizzando le misure relative percentuali, anche se questo è il più utilizzato, è giusto sapere che esiste un altro modo per ottenere un risultato simile a questo, viene chiamato layout elastico e utilizza le misure relative EM al posto delle percentuali.
Per poterti allenare puoi scaricare di seguito il file zip con tutti gli esempi di questa guida.

Download

Condividi questo articolo:

• Tweet

Info sull' autore:

Nato a Bologna, mi occupo della realizzazione grafica e dello sviluppo front-end di siti web e sono il fondatore di questo blog. Se vuoi segnalare qualche problema o hai qualche richiesta particolare invia una mail tramite il modulo contatti.
Leggi gli altri articoli di Francesco