Web Design  »  Articoli  »  Web design 

Una delle questioni che si ripresenta ciclicamente tra i blog dedicati al web design è il tema "meglio il layout fisso o quello liquido?". A parer mio il dibattito non giungerà mai a una parola definitiva, perchè è una domanda troppo generica. La questione è che la scelta dipende soprattutto dalla tipologia del sito, dalla quantità di colonne, dalla densità dei contenuti, dalla scelta dell'impostazione della grafica e da molti altri fattori che vanno valutati di volta in volta. Da oggi però c'è una possibile soluzione in più, a cui sono giunto cercando di combinare i vantaggi di entrambi i layout, creando così il layout progressivo.

Il layout progressivo è un layout che si presenta fisso in condizioni estreme, ovvero a larghezze della finestra del browser molto piccole o molto grandi, ma tra due valori limite diventa sostanzialmente un layout semi-liquido, ovvero un layout con larghezza e margini variabili. Vediamo subito uno dei due esempi che ho preparato per questo articolo. Si tratta di un layout progressivo a due colonne, con larghezza minima di 540 pixels e larghezza massima di 850 pixels, raggiungibile alla risoluzione di 1024x768. Prima di addentrarci nella tecnica e la sua implementazione, alcune considerazioni.

Fisso, liquido e risoluzioni

Negli ultimi tempi si è registrata una notevole traslazione verso l'alto delle risoluzioni dei monitor, come dimostrano le statistiche di w3Schools e di theCounter. La scelta va comunque ponderata attentamente. Prima di procedere con il layout progressivo, diamo uno sguardo alle principali tipologie.

Il layout fisso è senza dubbio più facile da realizzare e offre maggiori possibilità di personalizzazione grafica rispetto al layout liquido. È importante considerare che un buon layout fisso deve essere progettato per servire bene la maggior parte degli utenti, soprattutto senza scrolling orizzontale. L'analisi delle statistiche per risoluzione, i contenuti del sito e il "target" dei visitatori sono aspetti fondamentali nella scelta della larghezza del layout. Se per esempio un sito come StyleGala, principalmente visitato da web designer e sviluppatori può permettersi un layout fisso adatto per risoluzioni 1024x768 o superiori, così non è ad esempio per Yahoo.it che deve accontentare un'utenza certamente più variegata e offre un layout fisso adatto a 800x600.

Il layout liquido è più versatile per l'utente, dato che si presta ad uno spettro più ampio di risoluzioni. La sua realizzazione può risultare un po' più complessa rispetto al layout fisso, per le limitate possibilità grafiche soprattutto in casi di layout liquidi con colonne percentuali. A parer mio un buon layout liquido va controllato con larghezza minima e massima: questo però potrebbe essere un problema dato che Internet Explorer, che detiene ancora il titolo di browser più usato al mondo, non supporta le proprietà CSS min-width e max-width. Si può risolvere facilmente con un commento condizionale, come abbiamo visto nell'articolo sul Layout liquido a 2 colonne con i CSS.

Una possibile soluzione, attraverso la quale è possibile far scegliere all'utente con quale tipo di layout consultare il sito è usare uno Style Switcher per tutti - I. Soluzione addottata per esempio su SimpleBits e Phonophunk, due tra i miei siti preferiti, che consentono di scegliere tra layout liquido o fisso.

Un'altra alternativa, come si diceva, è il layout progressivo.

Layout progessivo: come funziona

Il layout progressivo si realizza grazie a un piccolo file Javascript che è in grado di trasformare una pagina con layout basato sui CSS (che sia liquido o a larghezza fissa non fa differenza) in un layout a larghezza progressiva. Lo script, incorporato nella pagina prima della chiusura del body, controlla la larghezza dell'area utile della finestra del browser, e regola di conseguenza la larghezza del contenitore principale. Rivediamo il primo esempio. Ed ecco come si presenterebbe con Javascript disabilitato: un semplice layout a larghezza fissa. Mentre la versione con Javascript presenta un layout:

• a larghezza fissa (540px) per larghezze minori o uguali a 540px
• liquido tra i 540px e i 1024px
• a larghezza fissa (850px) per larghezze superiori a 1024 pixels

Altri articoli

Altre guide

Altre newsletter