Layout grafico : fisso, fluido o dinamico

Sappiamo tutti che i blocchi di layout disegnati con carta e matita sono inclusi in un rettangolo che corrisponde al blocco contenitore. Questo contenitore nel Web e’ rappresentato dalla finestra del browser. La domanda che mi sento fare piu’ spesso e’: il design della pagina web deve riempire tutta la finestra del browser o deve avere una larghezza fissa? La scelta da fare affligge da tempo tutti i web designer. In questo articolo analizziamo i tre tipi di layout fisso, fluido e dinamico, in maniera tale da rispondere a questo grande dubbio amletico.

Larghezza fissa

Chi ha iniziato a lavorare con un layout aderente al 960 Grid System probabilmente utilizza un layout a larghezza fissa. Questa soluzione viene definita a partire da un tag DIV cui e’ assegnata una larghezza in pixel precisa (960px es.) e che e’ centrato all’interno di un altro tag BODY che prevede margin:0 auto;. Se la finestra del browser e’ piu’ larga di 960px, a destra e a sinistra del contenitore compare lo sfondo dell’elemento BODY; se e’ piu’ piccola di 960px, compare una barra di scorrimento orizzontale. I layout a larghezza fissa sono i piu’ semplici da progettare, visto che si tratta, in sostanza, di realizzare esattamente quello che abbiamo creato in Photoshop.

Pro: il designer gestisce facilmente la posizione di un’immagine all’interno dei contenuti della pagina. Permette di pianificare la presenza degli spazi vuoti. Migliora la leggibilita’ grazie alla presenza di blocchi di testo piu’ piccoli.

Contro: il layout ha un aspetto microscopico nelle finestre di browser di grandi dimensioni. L’utente non puo’ controllare l’aspetto del layout.

Larghezza variabile

I layout a larghezza variabile sono anche detti fluidi o liquidi e si progettano in base a percentuali. Una soluzione di questo tipo va ben pensata, dato che diventa necessario prevedere i problemi che si possono verificare per ogni larghezza possibile della finestra del browser. A volte il layout variabile prevede una combinazione tra colonne a larghezza fissa e definita in pixel e colonne che hanno una larghezza definita in percentuale. In genere i layout fluidi sfruttano le proprieta’ MIN-WHITH e MAX-WHITH degli stili CSS, in modo da garantire che il contenitore non assuma dimensioni troppo piccole o troppo grandi.

Pro: si adatta alla maggior parte delle risoluzioni e dei dispositivi. Riduce lo scorrimento della pagina da parte del cliente.

Contro: diventa difficile da leggere quando il testo e’ visualizzato ad una certa distanza. E’ difficile da costruire e limita l’utilizzo degli spazi vuoti.

I layout dinamici

Sono la soluzione alternativa tra fisso e fluido. Il, concetto di fondo di questo tipo di layout tiene conto del fatto che il Web e’ sempre piu’ mobile e che per questo motivo le dimensioni delle finestre dei browser sono sempre meno uniformi. Nasce quindi l’esigenza di definire layout fluidi che si adattano a larghezze diverse. Sfruttando le funzioni di scalabilita’ dei browser e le query dei CSS3 andiamo a modificare il layout in funzione di determinate soglie di larghezza delle finestre.(Per approfondimenti consiglio di leggere il seguente articolo: http://ww.alistapart.com/articles/responsive-web-design/).

Ecco qui la descrizione dei vari layout grafici che possiamo utilizzare. Tenendo presente i vantaggi e gli svantaggi indicati ho sempre preferito progettare layout fissi. Mi piace avere il controllo del contenuto da visualizzare e lavorare con gli spazi bianchi. Ma a volte mi piace anche accettare la sfida dei layout variabili. A prescindere dalle esperienze personali e’ importante sottolineare che come prima cosa occorre valutare con attenzione le esigenze del cliente.

Alla prossima!