Vale la pena creare siti Web fluidi? [chiuso]


218

Sto creando un sito Web ora e sto cercando di decidere se renderlo fluido o meno. I siti Web a larghezza fissa sono molto più facili da realizzare e anche molto più facili da far apparire coerenti.

Ad essere sincero, personalmente preferisco guardare siti Web fluidi che si estendono per l'intera larghezza del mio monitor. La mia domanda deriva dal fatto che nella maggior parte dei browser moderni è possibile mantenere il controllo e scorrere la rotellina del mouse per ridimensionare sostanzialmente qualsiasi sito Web.

Quindi la creazione di un sito Web fluido vale la pena?


1
if (a == 1) {+ a} else {'nawp'}
Sphvn

Risposte:


52

Dipende dal tuo pubblico e dai tuoi contenuti.

I seguenti sono siti che rispetto e penso che siano un esempio da imitare.

Esempi fluidi:

Amazon

Wikipedia


Esempi statici:

Mela

eBay

MSN

StackOverflow

MSDN


Alcuni confondono!

CNN

Penso di preferire la statica per la maggior parte del tempo. È più facile farlo apparire bene in più browser. È anche più facile da leggere.


17
Come si confonde la CNN?
Alix Axel,

43

Rendere fluido un sito Web, ma aggiungere un attributo min / max-width sembra essere il migliore dei due mondi, per me. Supportate la fluidità, ma la limitate ad una certa larghezza (diciamo, 800px e 1200px).

Dipende da te - ecco alcune cose da considerare:

  1. Il testo è difficile da leggere quando le linee sono molto lunghe.
  2. Il tuo pubblico potrebbe avere risoluzioni maggiori o minori del normale e scegliere una larghezza statica "errata" li infastidirà.
  3. Mantenere un sito fluido può essere, ma non deve essere molto più difficile della sua controparte statica.

Qualche commento sulla compatibilità del browser per questo?
Avere il


Grazie, sto dando una griglia reattiva a
getkeleton

37

Assolutamente. È un grosso inconveniente per le persone con monitor enormi dover ridimensionare la pagina. Può anche essere un po 'complicato con alcuni layout. Piccoli inconvenienti, per quanto banali, possono effettivamente influenzare le opinioni delle persone sul tuo sito.

Inoltre, i netbook hanno risoluzioni dispari che rendono difficile progettare siti per. Ad esempio, sto scrivendo questo a 1024x600.

Oggigiorno non è particolarmente difficile (nei browser moderni), specialmente con min-e max-heightnei CSS, e i nuovi gradienti, ecc. Nei CSS3, quindi il ridimensionamento delle immagini non sarà un problema così grande nel prossimo futuro.

In risposta al commento qui sotto, penso che i pro superino i contro in questo caso particolare: IE6 è un problema ovunque. Dobbiamo solo affrontarlo.


24
"Neanche oggi è particolarmente difficile" Mi permetto di dissentire. IE6 è ancora molto reale. Scrivere un layout fluido che funzioni in questo piccolo caso è una sfida ardua. Prova a cercare "css holy grail". Grrr.
spender,

4
Penso che, come tutti gli sviluppatori web, mi piace ignorare IE6 per la maggior parte del tempo. Non me ne sbarazzo, ma mi rende più felice :). (So ​​di eludere il commento, ma non riesco a pensare a nessuna risposta in questo momento.)
Lucas Jones,

91
Smetti di supportare IE6
Jason l'

21
Sì, in utopia, tutti smetteremmo di SOSTENERE IE6, ma di solito il denaro dice il contrario.
spender,

13
Secondo w3schools.com/browsers/browsers_stats.asp , il 13% del Web utilizza IE6, il 15% utilizza IE7. Questa è una buona ragione per supportare IE6. La semplice antipatia idealogica non è sufficiente per scaricare IE6. Scusa Jason.
Paul Nathan,

16

Devi capire che la maggior parte degli utenti di computer non sa nemmeno come ingrandire il browser! La maggior parte degli utenti è così lontana dalla comprensione dei computer che abbiamo. Dobbiamo sempre ricordare questo fatto.


2
OK, allora cosa significa? Per quale parte stai litigando?
Segna il

1
Significa che sto discutendo di siti fluidi, perché non possiamo presumere che gli utenti sappiano come modificare le dimensioni da soli.
Alex Baranosky,

Non è necessario ridimensionare il browser per dire che un sito Web è fluido? Come si fa a non sapere come ridimensionare una finestra?
MK12,

1
Sì, intendevo ingrandire :) Io stesso ho appena ingrandito il mio browser per la prima volta nella mia vita 1 minuto fa.
Alex Baranosky,

beh allora sei tu quello che non sa come usare i computer
bevacqua

9

Testo applicazioni basate: No . App basate su tabella: .

Pro di layout fluidi

  1. Le persone con monitor di grandi dimensioni possono utilizzare il proprio schermo immobiliare.
  2. Più facile per gli utenti con grandi monitor quando hai molte informazioni sulla tua pagina.

Contro di layout fluidi:

  1. Una colonna di testo a larghezza fluida è difficile da leggere se è troppo ampia. C'è una buona ragione dietro l'uso delle colonne nei giornali: rende molto più semplice il passaggio alla riga successiva.
  2. (Un po ') difficile da implementare, a causa delle limitazioni nei CSS.

Se stai mostrando dati tabulari (iTunes, db manager, ...), la larghezza del fluido è buona. Se stai mostrando testo (articoli, pagine wiki, ...) la larghezza del fluido non è buona.


e Wikipedia è difficile da leggere su un browser di grandi dimensioni poiché gli spazi tra le frasi non si ridimensionano all'aumentare della lunghezza della linea. Trovo molto difficile scansionare l'occhio avanti e indietro poiché non vi è alcuna "grondaia" da seguire mentre muovo l'occhio avanti e indietro.
Ape-inago,

8

Dal punto di vista del mio iPhone, il layout a larghezza fissa è problematico quando si utilizzano i blocchi di codice. La barra di scorrimento per blocchi di codice di grandi dimensioni non viene visualizzata, quindi non riesco a leggere l'estrema destra del blocco.

Altrimenti, penso che sia una semplice questione del tipo di sito che stai progettando e di come appare su schermi e finestre di dimensioni diverse. Come accennato in precedenza, esiste un'opzione per impostare una larghezza massima, ma lo stesso avvertimento si applica ai blocchi di codice e agli iPhone. Ho progettato entrambi e non preferisco l'uno all'altro.

Anche se è divertente vedere le scatole muoversi mentre gioco con le dimensioni del browser con un layout fluido, ma posso divertirmi facilmente.


6

La cosa più importante è considerare casi d'uso dominanti del tuo sito web o applicazione. Ti aspetti che le persone lo utilizzino esclusivamente su dispositivi mobili? Telefoni cellulari, netbook, desktop?

Dai un'occhiata a "Responsive Web Design" di Ethan Marcotte: http://www.alistapart.com/articles/responsive-web-design/

Grande articolo che dimostra l'uso di layout veramente fluidi utilizzando media query. A volte è necessario creare un front-end separato per diversi user-agent, ma a volte le media query sono lo strumento perfetto per servire più risoluzioni tra diversi user-agent.


5

Dipende da cosa stai cercando di fare. Dai un'occhiata a SO. Ha una larghezza fissa ed è eccezionale. In effetti, se fosse fluido, sarebbe un po 'un PITA. Alcuni siti hanno un aspetto migliore con layout fluidi, ma personalmente, andrei con fisso se non hai una buona ragione per andare fluido.


1
Si adatterebbe sempre al mio browser, invece di farmi ridimensionare. Come sarebbe una PITA? Ci sono casi in cui layout grafici complessi sono difficili da realizzare con layout liquido, ma ciò non si applica certamente al design in gran parte spartano di SO.
bobince,

2
sarebbe un PITA perché tutte le risposte si estenderebbero sulla pagina. sono contento che il testo si avvolga a circa 500 pixel. ecco perché i libri hanno generalmente il rapporto larghezza / larghezza perché gli occhi delle persone si stancano dopo un certo punto che si sposta lateralmente ...
Jason,

Questa non è una PITA. È così che lo voglio. Se vuoi limitare linee molto lunghe, imposta la larghezza massima in em, ma 500px con una dimensione del carattere tipica non è lunga. La poca ricerca attuale non supporta le lunghezze di linea tradizionali basate sulla stampa per la lettura su schermo.
Bobince,

3
Preferirei che SO fosse fluido, me stesso.
Nosredna,

4

Molti punti positivi nei commenti, ma dalla tua domanda sembra che ti piacciano davvero i progetti fluidi e vuoi crearne uno, provalo, è il tuo sito, non deve essere come qualsiasi altro sito sul web.

Basta essere consapevoli dei pro e contro di ogni soluzione.


3

Fino a un certo punto - sì.

C'è una certa larghezza, in cui il testo inizia a diventare fastidioso da leggere se è troppo largo. Facile da verificare se si dispone di un monitor di grandi dimensioni, basta prendere il blocco note e incollare del testo al suo interno senza interruzioni di riga.

Tuttavia, quando si scende a dimensioni inferiori, essere fluidi potrebbe essere una buona idea. I browser dei telefoni cellulari sono sempre più in grado di visualizzare i siti Web "normali", ma a volte sono limitati dalla larghezza e, come tali, avvantaggiano se il tuo sito può adattarsi in uno spazio un po 'più piccolo.

Personalmente mi piace anche mantenere il browser sul mio monitor, ma solo a metà della larghezza del monitor (24 "). I siti che si adattano bene a quello sono molto buoni.

Penso che sia principalmente un caso di convenienza dell'utente. Non tutti i siti trarranno beneficio dall'essere fluidi, ma penso che i siti che hanno molti contenuti testuali siano quelli che ne trarranno maggiori benefici, almeno se sono fluidi fino a una larghezza massima (diciamo 800px o altro)


Concordato. Tendo a costruire tutti i miei siti nella gamma ampia 800 - 1200 px. Guardando 1600 pixel su una pagina spesso non c'è abbastanza contenuto da diffondere e inizia a sembrare vacuo.
womp,

2

Sì. Lo zoom della pagina è eccezionale, ma viene utilizzato principalmente per ingrandire il testo, non per riempire il riquadro di visualizzazione. Certamente se il testo del corpo è già troppo largo, lo zoom in giù per adattarlo lo renderà generalmente illeggibile.

È necessario un layout liquido se si desidera che il testo si adatti alla finestra indipendentemente dal fatto che sia ingrandito o meno.

Il punto su "lunghe righe difficili da leggere" è spesso sopravvalutato dai progettisti che cercano di giustificare i progetti a larghezza fissa (*), ma in realtà non sembra essere così forte sullo schermo come sulla carta. Naturalmente è importante impostare una buona altezza iniziale / di linea, e la larghezza massima può essere utilizzata per inibire i peggiori eccessi delle linee lunghe. (Impostalo in unità em relative al font.) Non ottieni la larghezza massima in IE6, ma non è stato il disastro di una volta. (Puoi aggiustarlo con un po 'di JavaScript se ti importa davvero di quei ragazzi. Non lo so.)

(* che in effetti funzionano meno per layout altamente grafici. Ma per un layout più semplice come quello di StackOverflow, non c'è davvero alcun motivo per non diventare liquido. Tsk @SO, eh!)


2

Prefazione: non un web artist professionista.

Ho scoperto che ci sono troppe cose complicate per far fluire le cose proprio così a dimensioni di cellulare e ultra-schermo, specialmente in qualcosa di complessità ragionevolmente interessante.

Tipicamente, progetto intorno ad avere un sito a larghezza fissa in qualche modo; di solito limitato a [600,1200].

Trovo anche che colonne di contenuto super-ampie siano una seccatura da leggere. Mi sembra di ricordare che ci sono alcune ricerche che suggeriscono un numero ottimale di parole per riga di colonna.


2

Puoi farlo in questo modo.

# Rendi fluido il layout principale e applica ' max-width: 1140px ' e centralo .

In questo modo non ci saranno "lunghe file" di testo su schermi più grandi e un corretto insediamento della pagina Web su quelli più piccoli (esclusi 800x *** e inferiori).

Ho implementato questo metodo nei miei nuovi progetti e funziona come un incantesimo.

atb .. :)


1

Penso che il fluido decisionale / riparato dovrebbe essere basato anche sul contenuto del sito Web:

  1. Per i siti con grandi quantità di informazioni semplici (come i portali di notizie), è meglio utilizzare un layout fluido.

  2. I servizi Web hanno un aspetto migliore e funzionano in dimensioni fisse, quindi sai sempre dove si trovano gli elementi dell'interfaccia al loro posto e non si muovono costantemente.


1

Sì, vale la pena creare siti Web fluidi
Come hai detto, sembra buono e ragionevole quando pianifichi correttamente in fase di progettazione.

Il tuo dubbio sull'impatto di Ctrl + Barra di scorrimento non è un grosso problema. Questa funzionalità è principalmente per l'accessibilità, per rendere il testo più leggibile aumentando le dimensioni.

Tuttavia, se menzioni tutte le dimensioni in Pixel (px), non accadrà. La corretta regolazione si verifica solo quando si utilizza "em" per specificare la dimensione. Quindi hai un modo per accenderlo / spegnerlo


0

Sono un grande fan di fisso a <800px ... è più facile da leggere colonne più strette, e sarà lavorare ovunque. Cioè, se stai cercando di creare un sito Web che presenta ipertesto ... I siti Web che presentano front-end di applicazione, penso che un'altra lattina di worm interamente ...


0

Il design fluido - veramente fluido - è difficile. Molto difficile. Non è solo una questione di larghezza della pagina: i tuoi caratteri si ridimensionano e tutto scala con loro? Idealmente:

  • Le dimensioni dovrebbero essere definite empiuttosto chepx
  • ... e questo vale per le dimensioni degli elementi, non solo per i caratteri!
  • Data una modifica delle dimensioni del carattere o del livello di zoom, gli elementi della pagina dovrebbero avere le stesse dimensioni l'uno rispetto all'altro

Il nostro prodotto principale è fluido ed è un dolore dal mio punto di vista come designer, soprattutto perché coinvolge molti contenuti generati dagli utenti.

Per prima cosa, le immagini: in un sito a larghezza fissa, puoi avere un'immagine che riempie la metà della larghezza e sembra grande. In un sito fluido, questa immagine ha la stessa probabilità di perdersi in un mare di spazi bianchi, piuttosto solitaria.

La vita dovrebbe essere più facile una volta border-radiuse altre proprietà CSS3 entrano in gioco di più, ma purtroppo il nostro pubblico principale sono gli impiegati del governo, che tutti, TUTTI ANCORA USO IE F @! * ING 6!


Per rispondere alla domanda "ne vale la pena"? , se lo fai nel modo giusto.

Ecco uno scenario: scegli un sito a larghezza fissa: il tuo capo lo mostra a un cliente sul suo nuovissimo laptop 1920x1600, poi si lamenta con te "come tutto sembra piccolo sullo schermo di questo ragazzo!"


0

Penso che sia bello poter ridimensionare bene lo schermo di un utente, piuttosto che far scorrere e zoomare gli utenti. In un momento in cui gli utenti navigano sul Web da una così vasta gamma di dispositivi, che vanno dagli smartphone ai PC ultra-mobili, ognuno con una propria risoluzione, possibilmente non standard, penso che sia importante mantenere l'esperienza utente ad alto livello quando il tuo sito viene visualizzato su tali schermi. Per quanto riguarda la lunghezza del testo, potrebbe essere limitato da un certo rapporto, quindi si adatterà perfettamente al layout. Penso che ci siano anche framework che possono aiutare a scrivere un sito in modo fluido e aiutare a mantenere la codifica.


0

Andrò contro la maggioranza e dirò NO. Ragionamento: siti fluidi come Wikipedia sono un incubo da leggere su schermi di grandi dimensioni a causa della loro lunga lunghezza (anche se le sue citazioni rendono difficile la lettura nel migliore dei casi).

Il problema si verifica davvero perché non esiste un meccanismo per ridimensionare il testo in relazione alla risoluzione dello schermo. Se potessi ingrandire automaticamente il testo con risoluzioni più grandi, potresti stare più vicino agli 80 caratteri dispari per riga che sono generalmente considerati i migliori per la leggibilità.

C'è anche il problema delle immagini e di altri elementi di dimensioni fisse. Puoi avere immagini di grandi dimensioni e lasciare che il browser le riduca, se necessario, ma poi incontri altri problemi come tempi di download molto più lunghi e problemi di qualità dell'immagine in molti browser.


Penso che le persone con schermi ad alto rez stiano imparando a impostare lo zoom predefinito, se costruisci un sito a larghezza fissa potresti dover riprogettare in un anno o due
HaveAGuess

0

Sono un fan di siti che hanno una larghezza massima fissa compresa tra 800 pixel - 1000 pixel, ma posso anche ridimensionarli in modo da poter leggere il contenuto senza scorrere lateralmente e anche senza rimpicciolire perché spesso il testo diventa troppo piccolo da leggere e mi fa male agli occhi. Quindi, di solito, questo è il motivo per cui mi impegno perché voglio costruire siti di cui posso essere orgoglioso.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.