Layout Gala, che propone diversi layout preimpostati, e che per primo fa uso di un layout liquido (immenso)

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?

Immagine 10 450x219 Layout fluido e layout fisso: quando usarli? E laccessibilità?

Layout Gala, che propone diversi layout preimpostati, e che per primo fa uso di un layout liquido (immenso)

share small Layout fluido e layout fisso: quando usarli? E laccessibilità?
Avatar of Lauryn Laura Gargiulo, web designer freelance e socia IWA Italy. Autrice di "Come diventare web-coso" e "Consigli di webdesign base", moglie dal dicembre 2010 e madre dal dicembre 2012. Portfolio personale: Lauryn.it Altri blog su cui scrivo: Myplaceintheworld.it, Laurynlabs.it

9 Comments

  • Rocco Passaro

    7 aprile 2011, 09:05

    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 :D

    • Avatar of Lauryn

      Lauryn

      7 aprile 2011, 09:12

      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.

    • camu

      7 aprile 2011, 14:48

      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.

    • Avatar of Lauryn

      Lauryn

      7 aprile 2011, 15:51

      ottima riflessione camu!

  • Rocco Passaro

    7 aprile 2011, 09:20

    Li usa Smashing Magazine :D , hanno alcuni effetti negativi se usi valori come inherit o none, ma se metti valori in px rendono di più :D

    ( 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 )

    • Avatar of Lauryn

      Lauryn

      7 aprile 2011, 09:24

      ottimo, grazie! ps ho corretto “inheart” in “inherit”

  • Roberto Gadotti

    7 aprile 2011, 14:25

    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?

  • Roberto Gadotti

    7 aprile 2011, 14:28

    tra l’altro oggi è il mio compleanno, mi fanno notare.
    whoops.

    • Avatar of Lauryn

      Lauryn

      7 aprile 2011, 15:51

      auguri roberto! fammi sapere se ti è arrivato :)

Lascia un Commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

È possibile utilizzare questi tag ed attributi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>