24 aprile 2009

5 trucchi per creare layout fluidi senza problemi

scritto daMauro Accornero

Realizzare un layout fluido per un sito web è un’operazione abbastanza semplice, in quanto non implica grosse differenze a livello tecnico rispetto ad un layout a larghezza fissa.

Nonostante questo molti web designer reputano i layout fluidi meno gestibili a cuasa delle unità di misura in percentuale, in questo tutorial vedremo quali sono le problematiche più comuni di questa metodologia e come risolverle.

1) Eredità e unità in percentuale

Il più grande motivo di diffidenza verso i layout fluidi è l’utilizzo delle percentuale, queste in realtà non si comportano molto diversamente dai pixel, semplicemente ereditano le dimensioni e si adattano al contenitore. Prendiamo come esempio due div uno dentro l’altro.

div#contenitore{width:20%;}
div#contenuto{width:100%;}

Settando dei colore di background e un altezza che il div #contenitore sarà largo 1/5 della pagina (20%) e il div #contenuto sarà altrettanto largo in quanto contenuto nel primo div si allargherà del 100% nello spazio disponibile.

2)Un pixel di meno

Le percentuali adattano il contenuto in base alla larghezza della finestra del browser bisogna però ricordare che tutti i siti vengono renderizzati su un monitor che utilizza i pixel e quindi converte ogni percentuale in questa unità di misura.

In questo modo il valore ricalcolato da una percentuale potrebbe non essere un intero e venire arrotondato per eccesso causando problemi al layout (in particolare agli elementi flottanti che hanno una larghezza totale del 100%).

Per risolvere questo problema si possono utilizzare due soluzioni, la prima consiste nel mantenere una larghezza totale inferiore al 100% (ad esempio avere due div flottanti con larghezza del 30% e del 69%).

La seconda consiste nell’impostare un margine negativo tra le due colonne flottanti evitando così il problema del pixel in eccesso senza compromettere l’aspetto del sito.

3) E il background?

Come avviene per i layout a larghezza fissa, si può utilizzare un’immagine di background per separare due colonne flottanti.

Il procedimento è simile anche se meno immediato, è sufficiente creare un’immagine di larghezza superiore alla risoluzione massima del monitor (4000 px per esempio), applicare la larghezza della colonna su cui si desidera applicare l’immagine di fondo (20% per esempio che su 4000px corrisponde a 800px) e riempire questa parte con un colore lasciando il resto dell’immagine trasparente.

In caso di grafiche semplici è possibile utilizzare il formato gif in caso contrario può essere utile utilizzare un png.

Nel css sarà sufficiente specificare un posizionamento orizzontale dell’immagine pari al valore in percentuale della larghezza della colonna (sempre 20%).

VEDI ESEMPIO 1

VEDI ESEMPIO 2

VEDI ESEMPIO 3

4)Attenzione agli elementi rimpiazzati

Gli elementi rimpiazzati sono elementi presenti nella pagina html che hanno larghezza e altezza intrinseca, è quindi necessario gestirli con le percentuali.

Tralasciare la gestione degli elementi rimpiazzati può compromettere il risultato finale forzando il layout liquido alle dimensioni di questi elementi.

Per maggiori informazioni sugli elementi rimpiazzati leggi questo articolo.

5) Non dimenticate la grafica

La più grande sfida spetta come sempre alla parte grafica, non avendo misure fisse occorre trovare soluzioni idonee e compatibili con questa metodologia, le casistiche sono molteplici poichè invece di creare un layout su un canvas standard occorre che si adatti alle diverse situazioni senza perdere valore estetico.

Superare le limitazioni grafiche presenti in un layout fluido è senza dubbio una sfida avvincente superabile con una buona dose di creatività e un preciso studio del layout.

Tag: ,

Lascia un commento