Layout fluido e layout fisso: quando usarli? E l’accessibilità?
Un nostro nuovo lettore ci pone questa domanda, e vorrei chiarirgli le idee in merito.
Innanzitutto il layout fluido è detto in questo modo poichè si compone di box o colonne di dimensione calcolata in percentuale e che si adattano alla larghezza del browser con il quale vengono visitate. Inizialmente pensati per dare più “accessibilità” al sito, in realtà si sono rivelati portatori di effetti negativi, come vedremo di seguito.
I layout fissi invece hanno una grandezza espressa in pixel e da tale larghezza non si spostano.
Vantaggi del layout fluido:
- le colonne si adatteranno sempre alla grandezza del browser utente (ma è poi davvero un vantaggio?)
Aspetti negativi:
- proprio per questa sua caratteristica risulta impossibile gestire al meglio la grafica in modo omogeneo
- con l’avvento dei nuovi monitor, sempre più grandi, il layout rischia di ridursi ad una riga di testo illeggibile
- i testi contenuti nei box o colonne risultano meno leggibili poichè distribuiti su poche righe di larghezza
Vantaggi del layout fisso:
- la grafica, così come viene progettata, rimarrà sempre la stessa ad ogni risoluzione
- il testo risulta più leggibile poichè contenuto nelle gabbie originariamente pensate per esso, così come le immagini di contenuto
Svantaggi:
- la grafica, proprio perchè fissa, a grandi risoluzioni risulterà “vuota” ai lati, ma sta alla nostra bravura far sì che ciò non succeda
I layout fluidi e la pubblica amministrazione
In realtà i layout fluidi sono previsti dai requisiti WCAG 1
Requisito n. 12
Enunciato: La presentazione e i contenuti testuali di una pagina devono potersi adattare alle dimensioni della finestra del browser utilizzata dall’utente senza sovrapposizione degli oggetti presenti o perdita di informazioni tali da rendere incomprensibile il contenuto, anche in caso di ridimensionamento, ingrandimento o riduzione dell’area di visualizzazione o dei caratteri rispetto ai valori predefiniti di tali parametri.
Riferimenti WCAG 1.0: 3.4
Ora non ricordo se siano enunciati nelle WCAG 2, ma a mio parere bisognerebbe lasciare libera interpretazione alla cosa. Tale requisito dovrebbe limitarsi a dire che i contenuti devono essere fruibili senza sovrapposizioni di oggetti, senza suggerire il modo in cui farlo (in questo caso, secondo loro, il layout fluido risolverebbe la situazione).
Nella mia esperienza un layout misto, con alcune colonne fisse e la colonna dei contenuti fluida, potrebbe essere un buon compromesso, ma se per seguire delle regole, devo infrangere dei principi fondamentali, preferisco infrangerle.
Voi che ne pensate?
Layout Gala, che propone diversi layout preimpostati, e che per primo fa uso di un layout liquido (immenso)
L'Autore
Laura Gargiulo, webdesigner freelance. Web architect senior, esperta xhtml, css, usabilità, design, cms, webmarketing e Seo, Wordpress specialist. Autrice di "Consigli di webdesign base", Membro del progetto Piperita Lab e dell'IWA Italy.
9 Commenti
Bell’articolo, però è da sottolineare la presenza della proprietà min-width che funziona ovunque , e la funzione max-width che è attiva nei moduli di css3.
Queste due ottime funzioni ci permettono di creare un layout fluido in larghezza e di poter dare dei limiti minimi e massimi di ridimensionamento dell’elemento evitando la fastidiosa possibilità dei contenuti illeggibili o di un layout inguardabile.
Qua ti riporto i link rispettivamente di min-width e max-width :
- http://www.w3schools.com/CSS/pr_dim_min-width.asp
- http://www.w3schools.com/css/pr_dim_max-width.asp
Spero di aver reso il concetto
sì hai chiarito
con l’uso di queste due proprietà in effetti si ovvia ad alcuni effetti negativi del layout fluido. Stranamente però non li vedo applicati ai siti in questione, se non sempre in termini di percentuali, quindi applicando comunque il layout liquido. Mi è capitato in passato di creare un paio di layout liquidi ed anche io li usavo sempre in percentuale, usando invece la colonna fissa in pixel dove necessario. Diciamo che non sono la soluzione ma una tecnica integrativa del layout liquido.
Li usa Smashing Magazine
, hanno alcuni effetti negativi se usi valori come inherit o none, ma se metti valori in px rendono di più 
( sto provvedendo al nuovo layout del mio sito , e sto inserendo una section fluida con la colonna impostata in min-width per dispositivi mobile e schermi con risoluzioni orrende )
ottimo, grazie! ps ho corretto “inheart” in “inherit”
in linea generale, una struttra fluida si presta ad un uso aggressivo dell’user-experience, snobbando utenti meno esperti o intuitivi ma regalando situazioni inaspettate e coinvolgenti, specie con le nuove tecnologie (lasciando stare per adesso css3 e html5, limitiamoci ad unire un buon javascript).
Per questo occorre chiedersi, più che altro, se il progetto che stiamo seguendo sopporterebbe l’urto di una cosa del genere. Per quanto riguarda l’usabilità in se stessa, corro il rischio di farmi tirare addosso dei gran manuali ma credo sia oramai un concetto in rapido invecchiamento.
Se già arrivi a chiederti “Sarà il caso di usare un layout fluido?” vuol dire che qualcuno probabilmente tagli fuori. Niente che non sia comunque risolvibile con un secondo css scritto a modino!
Lauryn congratulazioni per il matrimonio (!!!!!) , e conto presto o tardi di avere la possibilità di leggere il tuo libro?
tra l’altro oggi è il mio compleanno, mi fanno notare.
whoops.
E’ esattamente quello che faccio io sul mio blog. Un layout semi-fluido in grado di adattarsi ai dispositivi mobili, ma senza risultare orrendo su schermi a 1920 pixel di larghezza
La menzione alle WCAG è giusta, ma secondo me il semi liquido è accettabile ed andrebbe implementato al posto del liquido attuale.
auguri roberto! fammi sapere se ti è arrivato
ottima riflessione camu!