Il layout fluido a due colonne perfetto
Giovedì 18 Ottobre 2007 - 11:35
di Alessandro Fulciniti
Ok, forse è un pò pretenzioso il titolo, ma merita una segnalazione. Scopro
di recente The Perfect Fluid Width Layout con relativo esempio. Le caratteristiche
del layout? Riporto tradotta l’introduzione:
Penso che il migliore scenario possibile sia realizzare un layout fluido
che accomodi tutti. Ecco cosa penso che sia il layout fluido “perfetto”:
- Funziona sui principali browser;
- si restringe fino a 780px, così da non dare scrolling orizzontale a utenti con risoluzione 800×600;
- si allarga fino a 1260px, così da accontentare gli utenti con risoluzione 1280×768 e quelle intermedie;
- questo soddisfa il 90% circa degli utenti […];
- colonna laterale della stessa altezza della principale;
- la pagina è centrata per risoluzioni maggiori.
Buone le premesse, un po’ fallaci la scelta della marcatura e l’implementazione del foglio di stile dopo un rapido sguardo: con i margini negativi si può eliminare facilmente il vincolo della colonna secondaria prima dei contenuti effettivi; e non c’è bisogno dei div vuoti nel markup che danno il clear per contenere i float. Ultimo, ma non meno importante, l’espressione ternaria per emulare min-width e max-width su IE fino alla versione 6 che impedisce la validazione del CSS: basterebbe inserirlo in un commento condizionale.
Se vi va, posso preparare una versione un po’ più pulita da presentare qui sul blog o su HTML.it. Vi basta aggiungere un commento! Concludo con una domanda: che caratteristiche dovrebbe avere secondo voi il layout a due colonne ideale? A larghezza fissa, fluido o elastico?
Commenti
1
Ottima idea la tua! Aspetto il tuo layout “perfetto” rivisto.
Secondo me la soluzione fluida è la migliore, ma questo è applicabile per determinati siti, ricchi di informazioni.
Comunque il layout a due colonne ideale dovrebbe avere per esempio,con la visualizzazione senza css, il contenuto che venga prima della colonna laterale, ma questo è logicamente ovvio se parliamo di accessibilità.
Sono comunque daccordo su impostare una larghezza minima del layout.
2
Ottima idea. Concordo anch’io per una tua versione più pulita (non me ne volere, anche se sono nuovo del blog ti seguo sempre su html.it :-)).
Poi secondo me il layout ideale a due colonne è a larghezza fissa (diciamo max 730px) e con un’immagine per le colonne che dia uniformità.
Ciao ciao# - postato da Emiliano - 18 Ottobre 2007 - 12:08
3
io prediligo sempre il layout a 3 colonne. Ovviamente la scelta dipende da molti fattori.
# - postato da Alessandro - 18 Ottobre 2007 - 12:10
4
Certo che ci va! ;-) grazie.
E’ il mio layout preferito :-D
5
mi associo ai precedenti commenti. aspetto la tua versione del layout.
alla domanda non saprei rispondere con certezza. secondo me dipende da un bel po’ di variabili.
6
Il layout fluido a tre colonne perfetto dove si può trovare?
7
layout fisso? no grazie!
quando passo dal pc 1 con monitor 1024*768 in ufficio a quello 2 da 1280*1024.. sino al mio a casa da 1440*990…. beh posso capire la frustraizone di chi nn ha un monitor “per quel sito”.O tutto piccolo o troppo grande.
preferisco “meno bello” “ma per tutti”# - postato da Evi|A|ivE - 18 Ottobre 2007 - 12:24
8
Il sbatto la testa di continuo su quelli a 3 colonne. Non vedo l’ora di studiare la tua versione riveduta e corretta
9
Si, è una ottima cosa..magari pure con sidebar a destra e non solo a sinistra.
ciao :)
10
Peccato che a me con firefox a 800×600 compare la barra di scorrimento orizzontale! :-(
# - postato da Giuseppe - 18 Ottobre 2007 - 13:25
11
Vai, Ale!
# - postato da P&M - 18 Ottobre 2007 - 13:36
12
Non male, siamo tutti con te!
13
Io in genere, per un blog, preferisco 2 colonne, ma per altri tipi di siti potrebbe essere differente.
E penso che il layout elastico (questo in realtà è un layout elastico, non fluido) sia il compresso migliore tra avere spazio a sufficienza per i contenuti senza penalizzare risoluzioni maggiori.# - postato da Simone Chiaretta - 18 Ottobre 2007 - 14:15
14
ottimo esempio, io nel lavoro utilizzo layout fissi che mi facilitano la vita nel caso lo devi ritoccare piu’ volte
se poi lo devono toccare colleghi e/o altri non ti dico il macello…# - postato da persoperilmondo - 18 Ottobre 2007 - 15:35
15
Meglio una tua soluzione.
Tra l’altro l’autore ha anche sbagliato, 760px è la misura massima per un 800×600 e non 780, infatti ridimensionandolo a 800×600 compare la barra orizzontale.
attendiamo tuo esempio che sarà anche meglio eheh
per quanto mi riguarda il layout a due colonne ideale deve essere fisso, o al massimo misto, appunto colonna fissa colonnafluida in un contesto fluido.
16
Anche se seguo solo sporadicamente questo blog, sarebbe bella l’idea di “pulire” la soluzione a due colonne fluida.
Personalmente, amo molto le soluzioni fluide usando gli em come unità di misura.
17
rimango sul layout a larghezza fissa, ok posta il tuo layout
18
@Giuseppe, per non avere scrolling orizzontale a 800×600 la larghezza minima dovrebbe essere 760px.
@Simone, in realtà in layout elastico è differente: la caratteristica principale è che è dimensionato in em. La scorsa settimana è iniziata una serie su html.it sul Layout elastico, in cui trovi anche il rimando all’articolo sul layout liquido (o fluido che dir si voglia). La seconda parte, che sarà pubblicata martedì pomeriggio, presenterà anche alcune soluzioni ibride.
Per tutti: per metà della prossima settimana preparo volentieri un paio di post con i layout liquidi a due e tre colonne. Saluti!
# - postato da Alessandro Fulciniti - 19 Ottobre 2007 - 00:03
19
Bravo Ale.
Per rispondere alla tua domanda, il layout perfetto:
1 - deve avere i contenuti prima della navigazione
Stop. Il resto dipende da contenuti e tipologia di sito.Quello che secondo me nessuno considera sono i monitor wide. Basterebbe entrare in un negozio di elettronica x capire dove va il mercato, e che quel 90% è un dato, a mio parere, un po’ ottimistico…
# - postato da paperogiallo - 19 Ottobre 2007 - 09:49
20
ho trovato un errore nell articolo sul layout elastico:
Un em, nella tipografia tradizionale, corrisponde alla larghezza della lettera m minuscola.
no, è la larghezza della M maiuscola.
# - postato da kentaromiura - 19 Ottobre 2007 - 10:21
21
@ kentaromiura : a me risulta la m minuscola invece
in generale. il layout elastico è interessante a condizione di avere un max-width a contenimento. una riga di testo diventa difficilmente leggibile oltre un certo numero di caratteri; e chissene se nn usate tutti i pixel del vostro monitor. lo scopo è leggere in fretta, non accendere (o meglio spegnere) i pixel.
Una soluzione intelligente è invece di avere una colonna che a seconda dello spazio floatti a lato o si trasformi in un simil-footer (con un pizzico di Js ovviamente)
22
come si comporta in stampa, uno dei problemi di molti siti web è la stampa di explo che taglia la parte destra
# - postato da carlo - 19 Ottobre 2007 - 13:25
23
In realtà non è nemmeno corretto definire em come la larghezza dell’ M maiuscola, 1em è rappresentato correttamente dallo spazio e dal trattino (dash)
-
che misura sempre 1em.
fonte wikipedia.
http://en.wikipedia.org/wiki/E.....m_(typography)# - postato da kentaromiura - 19 Ottobre 2007 - 17:40
24
Buona idea, aspetto il layout “rivisto”! Proverò anch’io a dargli un’occhiata. Nel frattempo, buon lavoro!
# - postato da Marcello - 19 Ottobre 2007 - 19:33
25
Forse ho letto troppo in fretta, però non mi è chiaro cosa abbia di tanto speciale (anzi “perfetto”) questa soluzione. Da quel che io ho capito la perfezione è intesa come avere colone liquide dela medesima altezza con min- e max-width. Probabilmente ho capito male io, dato che queste cose sono disponibili da alcuni anni.
Per quanto riguarda la questione dell’ordine delle colone, trovo piuttosto assurdo che ancora oggi qualcuno le disponga in base a come debbano essere impaginate.
Senza offesa per nessuno.
# - postato da Gianluca - 20 Ottobre 2007 - 11:05
26
Son curioso di vedere questo tuo lavoro, penso ci sia molto da imparare da persone con la tua professionalità.
Io per il mio blog ho preferito un layout a 3 colonne, ma l’ho fatto per una questione prettamente organizzata.
Comunque, se avrai tempo vorrei chiederti un consiglio e un piccolo aiuto.
Gianluca.P.S. ti ho linkato tra i miei blog amici
# - postato da tecno exodus - 19 Dicembre 2007 - 13:05
27
Tecno Exodus, grazie! La mia versione del layout la trovi in questo post.
# - postato da Alessandro Fulciniti - 19 Dicembre 2007 - 23:18
28
Anche io sono molto curiosa di sapere come sei riuscito a creare questa ‘’versione pulita'’!!
Attendo con ansia tue notizie ^^
io ho un problema con il mio sito al riguardo…diciamo che per come l’ho impostato mi servirebbero tre colonne : due laterali che abbiano una larghezza variabile se si restringe la visuale dello schermo o viceversa, e una fissa al centro che non deve variare invece!
come posso fare??# - postato da Valenitina - 04 Dicembre 2010 - 11:43
29
CMQ complimenti per il sito!^^
# - postato da Valentina - 04 Dicembre 2010 - 11:44