it-swarm-eu.dev

Per i siti Web, è meglio avere un layout a larghezza variabile o un layout a larghezza fissa?

A causa delle diverse risoluzioni dello schermo, l'esperienza dell'utente nella navigazione di un sito Web potrebbe essere diversa. È meglio impaginare il sito Web con una larghezza fissa? (e in tal caso dovrebbero esserci diverse larghezze statiche per risoluzioni standard?) O un sito Web dovrebbe essere sempre strutturato in larghezza variabile?

32
txwikinger

Non penso che ci sia una risposta facile qui, perché, in definitiva, dipende da cosa stai costruendo e per chi lo stai costruendo. Sia i siti a larghezza fissa che i siti a larghezza variabile hanno i loro vantaggi e svantaggi.

Una cosa che dovrei sottolineare qui, non parlerò di esperienze mobili per siti fissi/fluidi, perché i siti mobili sono i migliori quando il design è specifico per i dispositivi mobili, non una porta di un sito desktop su una piattaforma mobile.

Larghezza fissa - Vantaggi

Un sito a larghezza fissa è un'esperienza più coerente ed è più veloce da sviluppare rispetto a un sito a larghezza variabile. Inoltre, consente al progettista di avere un maggiore controllo sulla presentazione perché è possibile impostare valori rigidi per larghezze, lunghezze di linea, dimensioni della tipografia, ecc. È anche più facile da mantenere rispetto a un sito a larghezza variabile.

Larghezza fissa - Svantaggi

D'altra parte, i disegni a larghezza fissa iniziano a fallire quando compaiono casi Edge. In questo momento, è molto comune per le persone progettare siti per un monitor con risoluzione di larghezza 1024px, ma ci sono ancora persone là fuori con macchine a risoluzione inferiore. In questo momento, sto lavorando ad un'applicazione progettata usando una griglia da 960 px; Ho dato un'occhiata all'analitica oggi e ho notato che il 3% degli utenti era su monitor 800 x 600 e circa il 5% in totale aveva risoluzioni inferiori a 1024 x 768. Quegli utenti stanno probabilmente vivendo una brutta esperienza perché il sito ha una larghezza fissa .

Larghezza del fluido - Vantaggi

La larghezza del fluido consente l'espansione del progetto in base alle impostazioni dell'utente; il design si adatta a loro, il che è positivo. Ciò consente al sito di mantenere uno spazio negativo proporzionale, in modo che il sito non si senta mai troppo ingombrato o troppo aperto (a meno che non sia stato appositamente progettato in questo modo).

Larghezza del fluido - Svantaggi

Sfortunatamente, i design della larghezza del fluido non sono impermeabili ai casi Edge. Quando le larghezze diventano troppo magre o troppo larghe possono accadere cose brutte, specialmente con il testo. Le lunghezze di linea troppo corte o troppo lunghe sono essenzialmente illeggibili. Inoltre, molte forme di media, come immagini o oggetti Flash, sono difficili da ridimensionare in progetti a larghezza di fluido; IE richiede javascript per ridimensionare le immagini, altrimenti vengono pixelate.

Web design reattivo

Alcune persone hanno mostrato esempi, ma non hanno ancora fatto riferimento a questa tecnica per nome. Ethan Marcotte ha recentemente coniato il termine per descrivere layout fluidi che possono cambiare completamente in base alla risoluzione dello schermo di un utente (vedi dettagli qui ). Si tratta di un ibrido di larghezza fissa e larghezza del fluido: consente di impostare minimi e massimi in modo che i supporti o le lunghezze delle linee non sfuggano al controllo e consente inoltre al design di adattarsi alle impostazioni dell'utente. Naturalmente, questa tecnica ha anche i suoi vantaggi e svantaggi. Mentre viene fornito un layout appositamente scelto per le impostazioni di un utente, questo tipo di sito è difficile da sviluppare. Non tutti i browser supportano le query multimediali necessarie per eseguire questa operazione. Inoltre, stai essenzialmente sviluppando più layout, estendendo il tempo necessario per la creazione e la manutenzione.

Credo che sia impossibile stendere semplicemente una coperta "Usa sempre questo" o "Non usare mai questo"; Direi che dovresti sempre valutare le tue esigenze prima di prendere una decisione. Ritengo per la maggior parte dei casi che un layout a larghezza fissa soddisferà i tuoi scopi, ma che un layout fluido o reattivo può offrire un'esperienza utente molto migliore, solo a costo di difficoltà extra.

17
RussellUresti

Il problema con l'utilizzo della larghezza variabile al 100% è che in realtà non viene visualizzato bene per gli utenti con schermi più piccoli e più grandi. Generalmente progetterò la mia sezione di contenuto principale per la norma impostando una larghezza min/max e quindi centrerò l'importante contenuto (fisso). È quindi possibile avere elementi di design a larghezza variabile (poiché non sono così importanti) che si estendono/riducono per riempire lo schermo.

In questo modo le informazioni importanti vengono sempre (si spera) visualizzate correttamente mentre appaiono buone in molte risoluzioni.

24
LoganGoesPlaces

Non sono un web designer, ma penso che idealmente dovresti creare un layout fluido. Cioè, un layout che cambierà automaticamente (e dinamicamente) in base alla larghezza corrente. In questo modo, i dispositivi stretti come i telefoni sono ben supportati, così come tutte le diverse larghezze del display.

Il post sul blog Infine, un fluido Hicksdesign spiega e dimostra la tecnica. Ha 3 layout di colum, 2 colum e one colum, che sono selezionati in base alla larghezza della finestra del browser.

7
whybird

Il testo è difficile da leggere quando la lunghezza della linea diventa troppo lunga. Pertanto, per qualsiasi sito a larghezza variabile, è necessario che vi sia almeno una larghezza massima per qualsiasi area di testo per mantenere la leggibilità.

È molto più difficile far apparire bene un sito a larghezza variabile.

6
Mongus Pong

Dipende da cosa sto lavorando, ma tendo ancora a inclinarmi verso siti a larghezza fissa. Il motivo è perché ti consente di controllare meglio l'interfaccia utente e mantenerla coerente su tutte le dimensioni dello schermo. Molti siti con larghezza del fluido sembrano terribili su monitor più grandi/più piccoli (a seconda di cosa sono stati progettati).

Regola generale per me:

  • Se l'usabilità del sito dipende in gran parte dall'interfaccia e/o il contenuto è principalmente di testo: larghezza fissa
  • Se il sito ha un'interfaccia minima, ma il contenuto è in gran parte visivo (siti di foto o un'app di mappe, per esempio), allora vado per fluidità.

Ecco una grande ripartizione di alcuni pro/contro: http://www.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one- per-te /

2
Ryan

Ogni volta che posso, provo a non impostare l'altezza e la larghezza specifiche di un oggetto in px ma in %

1
megubyte

Suggerirei di tenere conto della larghezza variabile o di fornire un layout alternativo per schermi più ampi.

Se scegli una larghezza fissa, assicurati che non sia piccola! Ho visto alcuni siti con una larghezza di 500 o 600 px che rendono la lettura del sito come la scansione delle pagine gialle.

Sono stato a lungo un fan dell'approccio di The Man In Blue nel fornire layout alternativi basati sulla larghezza disponibile: vedi la demo live qui

1
scunliffe

Potresti voler progettare il layout del tuo sito web con orientamento orizzontale. Sempre più monitor widescreen vengono utilizzati, con grandi risoluzioni di 1920x1080 (questo è il più comune). Hai mai provato a ingrandire una finestra del browser che mostra un layout fisso verticale su questo? È come metà dei due terzi dello schermo riempito con il colore/immagine di sfondo.

È bello che Windows 7 ti permetta di ridimensionare rapidamente una finestra a metà schermo e attaccarla di lato: WindowsKey + Left/Right

1
Mircea Chirea

La larghezza variabile è probabilmente la strada da percorrere, perché con una larghezza fissa, alcune persone potrebbero pensare che il tuo sito Web sia troppo piccolo per il loro monitor e alcune persone potrebbero pensare che sia troppo grande per il loro monitor.

0
David

Dipende dal contenuto del sito Web. Se ha molto testo, la larghezza variabile ha più senso in quanto il testo può essere distribuito e gli utenti possono leggerlo in modo più efficiente. Se è più simile a un sito Web di marketing in cui l'aspetto è più importante, scegli una larghezza fissa poiché è molto più difficile rendere un sito Web a larghezza fissa un aspetto eccezionale.

0
Kai Chan

Qualunque ipotesi fatta nella progettazione di un layout di dimensioni fisse è errata per alcuni dei tuoi utenti. L'unico modo per offrire un'esperienza soddisfacente per tutti è utilizzare un design flessibile e reattivo.

Due problemi (cercando di evitare la duplicazione):

  • Non puoi presumere che il browser sia a schermo intero; le analisi che riportano la risoluzione dello schermo raccontano solo una parte della storia.

  • Non puoi presumere che gli utenti stiano utilizzando le stesse dimensioni dei caratteri che sei. Le righe troppo larghe per essere lette alla dimensione del carattere potrebbero non essere troppo ampie per essere lette da qualcuno che ha dovuto aumentare la dimensione del carattere di alcune tacche; al contrario, la colonna per cui hai impostato una larghezza fissa in base alle impostazioni del tuo carattere può indicare che l'utente vede cinque parole per riga o qualcosa del genere.

Per essere utilizzabile da tutti gli utenti, il tuo web design deve utilizzare tutto e solo lo spazio che il browser ti offre. Affidati che l'utente abbia dimensionato il suo browser per ottimizzare la propria esperienza; dovresti quindi lavorare entro quei limiti. Questo approccio funziona su monitor da 30 "e tablet da 7" (e persino telefoni, se non hai realizzato una versione specifica per dispositivi mobili).

0
Monica Cellio