Il layout della pagina Web può essere fatto in due modi diversi:
- Layout a larghezza fissa: si tratta di layout in cui la larghezza dell'intera pagina è impostata con un valore numerico specifico.
- Layout liquidi: si tratta di layout in cui la larghezza dell'intera pagina è flessibile a seconda dell'ampiezza del browser del visualizzatore.
Esistono buoni motivi per utilizzare entrambi i metodi di layout, ma senza comprendere i relativi vantaggi e le carenze di ciascun metodo, non è possibile prendere una decisione corretta su quale utilizzare per la pagina Web.
Layout a larghezza fissa
I layout fissi sono layout che iniziano con una dimensione specifica, determinata dal progettista web. Rimangono quella larghezza, indipendentemente dalle dimensioni della finestra del browser che visualizza la pagina. I layout a larghezza fissa consentono al designer un controllo più diretto sul modo in cui la pagina apparirà nella maggior parte delle situazioni. Sono spesso preferiti dai designer con uno sfondo di stampa, in quanto consentono al progettista di apportare piccole modifiche al layout e mantenerli coerenti su browser e computer.
Layout liquidi
I layout liquidi sono layout basati sulla percentuale delle dimensioni della finestra del browser corrente. Flettono con le dimensioni della finestra, anche se il visualizzatore corrente modifica le dimensioni del browser durante la visualizzazione del sito. I layout di larghezza del liquido consentono un uso molto efficiente dello spazio fornito da qualsiasi finestra del browser Web o risoluzione dello schermo. Sono spesso preferiti dai designer che hanno molte informazioni da trasmettere nel minor spazio possibile, in quanto rimangono coerenti nelle dimensioni e nei relativi pesi di pagina indipendentemente da chi sta visualizzando la pagina.
Cosa c'è in gioco?
Il metodo scelto per la progettazione del tuo sito web avrà un impatto non solo sul tuo design, ma sulla reattività e l'adeguatezza del tuo sito. A seconda di quale scegli, influirai sulla capacità dei tuoi lettori di eseguire la scansione del tuo testo, trovare ciò che stanno cercando o, a volte, persino utilizzare il tuo sito. Allo stesso modo, lo stile del layout influenzerà i tuoi sforzi nel marketing del tuo sito web attraverso il branding, la disponibilità di immobili e l'estetica del tuo sito.
Vantaggi dei layout a larghezza fissa
- Un layout a larghezza fissa consente al progettista di creare pagine che sembreranno identiche, indipendentemente da chi le stia guardando.
- Gli elementi a larghezza fissa come le immagini non sovrastano il testo su monitor più piccoli perché la larghezza dell'intera pagina includerà quegli elementi.
- La lunghezza della scansione non sarà influenzata da ampi segmenti di testo, indipendentemente dalla larghezza del browser.
Vantaggi dei layout liquidi
- Un layout di larghezza del liquido si espande e si contrae per riempire lo spazio disponibile.
- Vengono utilizzati tutti gli immobili disponibili, consentendo al designer di visualizzare più contenuti su monitor più grandi, ma rimangono comunque fattibili su schermi più piccoli.
- I layout liquidi forniscono coerenza nelle larghezze relative, consentendo a una pagina di rispondere in modo più dinamico alle restrizioni imposte dal cliente, come le dimensioni dei caratteri più grandi.
Inconvenienti a layout a larghezza fissa
- I layout a larghezza fissa possono causare lo scorrimento orizzontale nelle finestre dei browser più piccole. E alla maggior parte delle persone non piace scorrere in orizzontale.
- Possono anche risultare in ampie estensioni di spazi bianchi in monitor più grandi, con conseguente spazio inutilizzato e maggiore scorrimento verticale rispetto a quello che potrebbe essere altrimenti necessario.
- I layout a larghezza fissa non gestiscono molto bene le modifiche dei clienti alle dimensioni dei caratteri. Per piccoli aumenti delle dimensioni del carattere, possono andare bene, ma per aumenti maggiori, il layout può essere compromesso.
Inconvenienti ai layout liquidi
- I layout liquidi consentono un controllo molto preciso della larghezza dei vari elementi della pagina.
- Possono risultare colonne di testo troppo larghe per essere esplorate comodamente o su browser più piccoli troppo piccoli perché le parole vengano visualizzate in modo chiaro.
- I layout liquidi possono avere problemi quando un elemento a larghezza fissa, come un'immagine, viene collocato all'interno di una colonna liquida. Se la colonna viene renderizzata senza spazio sufficiente per l'immagine, alcuni browser aumenteranno la larghezza della colonna, ignorando le istruzioni del designer, mentre altri browser causeranno sovrapposizioni di testo e immagini per ottenere le percentuali corrette.
Conclusione
Molti siti che hanno molte informazioni che devono trasmettere nel minor spazio possibile funzionerebbero bene con un layout liquido. Ciò consente loro di usufruire di tutti gli immobili che offrono i monitor più grandi senza ridurre i display più piccoli.
I siti che richiedono un controllo preciso su come appaiono le pagine in ogni situazione farebbero bene a utilizzare un layout a larghezza fissa. Ciò fornisce una maggiore garanzia che il marchio del tuo sito Web sia coerente e chiaro, indipendentemente dalle dimensioni monitorate.
Preferenza di layout
Molti preferiscono un approccio misto. A loro non piace usare layout liquidi per grandi blocchi di testo, in quanto ciò può rendere il testo illeggibile su un monitor piccolo o non analizzabile su uno grande. Pertanto, tendono a rendere le colonne principali delle pagine di larghezza fissa, ma rendono più flessibili intestazioni, piè di pagina e colonne laterali per occupare gli immobili rimanenti e non perdere la capacità di browser più grandi.
Alcuni siti utilizzano script per determinare le dimensioni della finestra del browser e quindi modificare di conseguenza gli elementi di visualizzazione. Ad esempio, se si apre un sito di questo tipo in una finestra molto ampia, è possibile ottenere una colonna aggiuntiva di collegamenti sul lato sinistro, che i clienti con monitor più piccoli potrebbero non vedere. Inoltre, il testo che avvolge la pubblicità dipende dalla larghezza della finestra del browser. Se è abbastanza largo, il sito si avvolgerà intorno al testo, altrimenti visualizzerà il testo dell'articolo sotto l'annuncio.Mentre la maggior parte dei siti non ha bisogno di questo livello di complessità, dimostra un modo per sfruttare gli schermi più grandi senza influire sul display su schermi più piccoli.