Layout elastico dalla A alla Z
Martedì 9 Ottobre 2007 - 09:37
di Alessandro Fulciniti
Alcuni lettori ricorderanno il vero e proprio boom del layout elastico che fece seguito all’articolo Elastic design di Patrick Griffiths pubblicato su A List Apart più di tre anni e mezzo fa.
Di Griffiths è anche Elastic Lawn su CSS Zen Garden.
Per chi non conosce i layout elastici basterà ridimensionare il testo del browser per ammirare la caratteristica peculiare di questa tipologia di layout, ovvero la proporzionalità tra larghezza del layout e dimensione del testo.
Da allora sono comparsi diversi articoli, letture ed esempi.
- Creating Elastic Layouts with the em Unit di Zoe Gillenwater;
- Fixed vs Liquid vs Elastic di Tommy Olsson;
- Elastic Fantastic di John Oxton;
- Going elastic with ems layout tecnhiques di Mike Jolley;
- Fixed or fluid width? Elastic! di Roger Johansson.
Personalmente ho qualche perplessità sui layout elastici. La prima: è giusto forzare una relazione tra la dimensione del testo e la larghezza del layout? Non ci sono infatti a parer mio elementi sufficienti per determinare se un utente che
preferisce il testo grande abbia anche uno schermo ad alta risoluzione. Propendo invece per l’approccio proposto da Johansson e implementato anche sul suo sito, ovvero un layout liquido con una larghezza massima impostata in em che elimina tale forzatura.
In chiusura, segnalo un articolo recente e imperdibile sul layout elastico: The Incredible Em & Elastic Layouts with CSS, probabilmente uno dei migliori pezzi sul tema.
Commenti
1
Ciao Alessandro,
Personalmente ho qualche perplessità sui layout elastici. La prima: è giusto forzare una relazione tra la dimensione del testo e la larghezza del layout? Non ci sono infatti a parer mio elementi sufficienti per determinare se un utente che preferisce il testo grande abbia anche uno schermo ad alta risoluzione.
È vero, nel caso limite si va ad intaccare l’usabilità del layout. Ma è vero anche per la situazione contraria: layout fisso che si “riempe” e, in estremo, esplode per eccesso di text-resize.
Poi però, la questione dipende anche dal tipo di text-resize implementato dal browser: per dire, Opera non fa resize ma zoom e per lei fluido o no non fa differenza.
No?
2
ecco degli articoli che devo divorare, volevo giusto approfondire, grazie!
3
La soluzione di Johansson è la migliore soprattutto perché il layout liquido ad alte risoluzioni renderebbe troppo lunghe le righe di testo, quando tutti i test mostrano che l’usabilità va a decrescere oltre un certo numero di lettere per riga.
Guardate anche nei commenti all’articolo originale le modifiche che ho suggerito alla tecnica di Roger per rendere anche il CSS valido.
# - postato da Andrea Martines - 09 Ottobre 2007 - 13:31
4
Se si vogliono layout elastici che diventino proporzionali con la misura dei font bisogna usare il percentuale. Comunque non bisogna collegare la misura del testo con la misura del testo assolutamente. A me personalmente piace l’idea del testo che forza il box senza “romperlo”, cioè design che resistono a certi ingrandimenti del testo, tipo qui:http://microformats.org/
Un layout come questo mi sembra ok http://www.arapacis.it/museo/l.....mpo_marzio
Comunque raccomando questo libro http://www.simplebits.com/publ.....lletproof/
tratta parecchio l’idea di layout flessibile ovvero bulletproof.# - postato da Avasilcai Daniel - 09 Ottobre 2007 - 23:58