Layout fluido da CSS tricks oppure colonne assolute?
Conosco tramite questo articolo di Edit un articolo pubblicato su CSS tricks in cui mettono a disposizione dei layout fluidi o semi-fluidi pronti da scaricare. Beh che dire: fatene buon uso! In alternativa leggetevi questo utilissimo articolo tradotto dall’originale di Dan Rubin in cui si parla invece delle colonne posizionate in modo assoluto.
Amazon-Box creato da Giuseppe Frattura
L'Autore
Laura Gargiulo, webdesigner freelance. Web architect senior, esperta xhtml, css, usabilità, design, cms, webmarketing e Seo, Wordpress specialist. Membro del progetto di prossima pubblicazione Piperita Lab e dell'IWA Italy Visita il mio sito personale Lauryn.it e contattami pure per un preventivo gratuito.
Add to Google
33 Commenti
Ci sono pro e contro nei layout fluidi. Un layout centrato con posizionamento assoluto può essere meglio gestito per creare effetti e grafica accattivante…ma non tiene conto del fatto che la bella grafica inserita all’interno di un container può diventare troppo piccola o troppo grande in funzione della risoluzione dello schermo.
Il layout fludio è più cross browser ma non permette di creare grafica accattivante…per diversi motivi…ne cito solo uno : Trovare una tecnica di image replacement che tenga conto della fluidità del layout e che ridimensioni un logo in funzione della risoluzione. Provateci…è impossibile!…anche perchè explorer deforma completamente le immagini ridimensionate.
secondo me i layout fluidi sono sempre meno adatti (anche dei valori percentuali) specialmente ora che molti utenti utilizzano monitor ad alta risoluzione..mi capita spesso che visualizzando un sito con i miei 1650px di larghezza i contenuti di un post ad esempio si leggono su pochissimi righe nei layout fluidi..non proprio il massimo direi..
mmm… non sono d’accordo…con nessuno dei due. Si possono creare bellissime grafiche con layout fluidi, ed anche la gestione del testo può essere ottimizzata con larghezze in percentuale. Ovviamente sono solo punti di vista.
concordo con laura, e basta sapersele gestire. ovvio non deve essere fluido al 100% se no i testi risultano anche illeggibili su una riga di 1400px, ma il tutto con le giuste proporzioni.
c’è sempre una via di mezzo.
Un gran bel sito fluido -fatto bene- è quello di Ux London in cui il blocco dei contenuti si allarga ma fino a un tot. Non ho visto il codice ma direi che usa max-width.
ma infatti Marco fare un sito fluido non è come spalmare la nutella sul pane
Si ma max-width e min-width funzionano su firefox ma non su explorer(almeno sul 6 e 7…nn so l’8 perchè nn l’ho ancora provato). Mentre concordo che i testi si possono rendere fluidi. Invece per quanto riguarda le immagini che contengono testi…tipo un logo…non è facile trovare la giusta dimensione che vada bene per tutte le risoluzioni. C’è gente ancora che ha il pc impostato su risoluzioni 800×600 e altri che hanno risoluzioni 1650 x 1200…per dire…
In ogni caso…il layout fluido con immagini di dimensione fissa…possono essere costruiti e anche belli…ma secondo me si è purtroppo soggetti a restrizioni sulla creatività, imposte da limiti tecnici.
il problema di max e min-width si risolve con un hack per ie6, le immagini posso essere trattare con l’overflow, i loghi non hanno bisogno di ridimensionamento… diciamo che per come la vedo io non vi sono limiti alla creatività (sarà perchè sto sviluppando 2 layout fluidi e sono abbastanza soddisfatta…)
difendo assolutamente laura e anzi la invito a postarci i suoi due lavori se può…io vedo di trovare degli esempi a sostegno
purtroppo non posso (al massimo in pvt) ma contribuirò a cercare altri esempi
Anch’io ho trovato questi hack…ma non funzionano sempre! Cioè…non è che non funzionano…Dipendono da come è costruita la pagina. Ti pongo un esempio concreto…un esempio in cui per quello che vorrei fare io, non trovo soluzione. La massima soluzione che ho potuto applicare su un sito fluido è la cover up span cioè la tecnica 8 consultabile a questo indirizzo :
http://css-tricks.com/nine-techniques-for-css-image-replacement/
solo perchè soddisfa i 4 requisiti visualizzati nella pagina stessa.
Come vedi…impone l’uso di 1 immagine fissa perchè definita con l’attributo css background.
La domanda è : esiste una tecnica di image replacement che tiene conto della fluidità della pagina e che mi permette di ridimensionare il logo senza perdere in qualità? dove lo piazzo l’hack qui? e l’overflow?
ma perchè devi ridimensionare il logo? ridimensionarlo comporta perdita di qualità, sempre!
non è che ingrandendo la risoluzione il logo devi ingrandirlo eheh
Certo che comporta perdita di qualità…perchè le immagini che noi gestiamo sono immagini bitmap e non vettoriali…anzi firefox ha fatto uno sforzo pazzesco sul rendering delle immagini ridimensionate tale da rendere queste immagini accettabili all’occhio umano…ma explorer no…le deforma totalmente. Il discorso…è che i browser dovrebbero integrare l’svg, mentre ad oggi l’svg è disponibile solo per chi decide di scaricare il plugin ed erroneamente si contina a produrre in bitmap anche su pagine fluide.
per quanto riguarda il logo concordo con lauryn, inutile ribadire. Per il resto invece il link che hai postato non ha nulla a che vedere con gli hack di cui parlo io, nel mio caso si tratta di espressioni inserite nel css alternativo per IE che calcolano la grandezza dello schermo e riadattano il layout, è vero non funzionano sempre bene ma stiamo parlando di IE6.. quel 25% di utenti probabilmente vedrà il layout un tantino più largo… ma l’usabilità resta e anche tanto altro!
conoscerai sicuramente questo sito giancarlo:
http://www.csszengarden.com/
ti pare necessario ridimensionare immagini? soprattutto se usate come sfondo come faresti?
ma che c’entra tutto ciò con i layout fluidi???
e allora…forse mi sono spiegato male. Il sito che mi hai mostrato tu è bello , è fatto bene…ed è più che accettabile(si ridimensiona bene)…io però son partito dicendo…il layout fluido impone delle ristrettezze sulla creatività. (e non ho neanche detto di essere un sostenitore dei layout fissi).
Il sito che mi citi tu…si vede che è costruito ad arte con l’intento di essere il più possibile fruibile. L’header è stato costruito proprio con l’intento di evitare sovrapposizioni. Tanto è vero che :
1) il logo è piccolo e a dimensione fissa.
2) nell’header tra il logo e la scritta a destra si è lasciato tanto spazio.
E se io volessi mettere un logo a sinistra nell’header e altri contenuti sulla destra non posso? devo per forza mettere un min-width venendo meno alla stessa idea di fluidità? e se io volessi che il mio logo mantenga la sua centralità focalizzando l’attenzione degli utenti sull’oggetto + grande? devo fare a meno di una tecnica di image replacement per dare spazio ad 1 hack che mi permette di ridimensionare?…cioè questo è il discorso…devo mettere da parte la mia creatività di come immagino la mia pagina di fronte alle tecniche di fluidità?
Il sito è carino…ma non di grande impatto.
Lo so…sono 1 pò testardo e lungo nei miei ragionamenti…. Non scrivo più…ma almeno…vivacizzo il dibattito…
ahah oddio hai detto un’eresia: “il sito è carino ma non di grande impatto” l’ha fatto DAVE SHEA, il padre dei css
vabè ma se chi non conosce shea guarda per la prima volta il layout posso anche capire che non lo consideri eccezionale…
Per quanto mi riguarda può essere anche il padre eterno. Io non sono per il culto della personalità e metto sempre in discussione quello che non mi convince.
va beh son gusti, comunque non trovo esempi di layout fluidi in questo momento, mi riprometto di riproporvene presto
magari il sito dell’Iwa : http://www.iwa.it
In parte son daccordo con Giancarlo.
Rendere fluido un sito come http://www.webdesignerwall.com/ lo vedo un tantino complicato
caro giuliano. ma ti sfido proprio a render webdesignerwall fluido!
ovvio che la grafica di un sito fluido deve essere progettata ad hoc, stiamo solo dicendo che un sito fluido non necessariamente deve essere brutto.
mi sto impuntando talmente tanto che mo vi faccio un sito fluido e vi faccio vedere ahhah
Non mi permetterei mai di dire che i siti fluidi son brutti, anzi! Di solito li preferisco perchè viene utilizzato un design minimalista
Ecco un sempio
http://beta.w3.org/
sì, ecco bravo, se ne parlava qualche giorno fa. però anche questo è molto scarno e minimale. devo ancora trovare un esempio che vi faccia rizzare i capelli
Intervengo solo ora causa impegni ma la discussione è interessante, le discussioni tra layout fluidi sono sempre all’epicentro e c’è sempre chi è a favore
(http://www.alistapart.com/articles/fluidgrids) e chi è contro (http://www.zackcurl.us/archives/20). E’ anche vero che i layout liquidi sono stati molto “snobbati” negli ultimi anni ma personalmente li vedo ancora molto usati nelle web application data la mole di contenuti e la necessità che si adatti ad ogni risoluzione. Personalmente credo che a livello tecnico un layout liquido non richieda un lavoro oltremodo superiore rispetto ad un layout fisso tale da scartarlo a priori, credo che nel nostro lavoro non si possa escludere mai nulla. Il layout liquido implica qualche limitazione dal punto di vista grafico ma nulla che non possa essere risolto con un po’ di studio. A mio parere è molto più complesso e dispendioso dover ogni volta sistemare un sito per ie6 che non gestire un layout fluido.
http://trenitalia.it/ …buon esempio di layout fluido che non rinuncia al look&feel
ecco brava, ottimo esempio
come non detto!!! trenitalia è tornata al fisso!!!
Leggendo la discussione di Laura su Web-Magazine sono arrivato qui e mi sono letto pure questa. Pro e contro sono da entrambe le parti e per svariati motivi supportati da una e dall’altra parte anche da personaggi molto influenti nel panorama del webdesign. Layout fluidi possono avere vantaggi nell’adattarsi alle varie risoluzioni e (con unità di misura in em ben usate) garantiscono facili zoom con buoni risultati. Per contro, e qui mi trovo d’accordo, pur dando la possibilità di aumentare le dimensioni del testo, un layout fisso e di dimensioni non esagerate permette una migliore lettura visto che (come diceva A List Apart tempo fa) è provato che righe troppo lunghe stancano maggiormente la vista e quindi l’utente, risutando di difficile lettura se il layout si adatta e ridimensiona anche a risoluzioni enormi…
[...] acclamato tanto la bellezza del layout liquido della nostra compagnia ferroviaria preferita, e oggi, intenta ad [...]