it-swarm.it

Larghezza fissa vs larghezza dinamica

Ho notato che sempre più siti sono passati a un layout a larghezza fissa, in cui il ridimensionamento della finestra del browser fa apparire solo le barre di scorrimento, al contrario di un layout flessibile, in cui il ridimensionamento del browser fa "scricchiolare" i componenti della pagina .
I siti StackExchange come questo sono un esempio di layout fisso. GMail e iGoogle sono esempi di layout flessibile. Quali sono i motivi per scegliere l'uno rispetto all'altro?

15
BenV

Disegni più complessi possono essere molto difficili da realizzare con layout a larghezza variabile. Quindi immagino che abbia un ruolo.

C'è anche il fatto che non è comodo leggere un testo molto ampio. La dimensione della colonna sui siti StackExchange è abbastanza gestibile e di facile lettura. Con un layout a larghezza variabile, non puoi semplicemente estendere il corpo del testo principale senza renderlo illeggibile. Anche Google limita la larghezza dei risultati di ricerca.

Naturalmente se hai un sito in cui lo spazio è limitato (come Google Documenti e Google Maps), vuoi davvero andare con uno schema a larghezza variabile per utilizzare tutto lo spazio disponibile.

11
Kris

Risolto con è molto più facile da sviluppare per siti complessi. Inoltre, la maggior parte dei siti a larghezza fissa avrà una larghezza di circa 1000 pixel. Il motivo è che solo l'1% dei browser utilizza 800x640 e lo 0% utilizza 640x480. Controlla le statistiche più recenti qui . Questo non include il cellulare però. Che è un gioco con la palla completamente diverso.

Il valore del layout a larghezza variabile è che consente alle persone di utilizzare facilmente il sito Web in una finestra non ottimizzata.

Devi guardare il tuo pubblico e decidere in base all'esperienza che pensi che desideri e se la larghezza variabile è più importante di altre funzionalità che non sarai in grado di sviluppare se devi fare larghezza variabile.

8
Ben Hoffman

Esiste anche un compromesso tra i due in cui si imposta una larghezza minima e una larghezza massima (utilizzando CSS) e quindi si utilizzano larghezze percentuali per far fluire il resto tra i due estremi. Ad esempio, è possibile che una colonna del menu a sinistra non sia più stretta di 200 px, ma il contenuto principale scorra. Questa tecnica consente al tuo sito di adattarsi alla risoluzione dei visitatori, senza guardare sciocche risoluzioni estremamente alte o estremamente basse. L'HTML, dopo tutto, è stato progettato per fluire: è un linguaggio di mark-up e non è lo stesso di stampa.

Questo approccio funziona bene per progetti relativamente semplici, come blog o quelli che presentano molte informazioni testuali. In effetti, lo uso sul mio sito web personale . Dopo che molte persone ora hanno monitor a schermo largo o ad alta risoluzione - il mio monitor di lavoro è largo 1680 px - quindi perché dovrebbero perdere un gran numero di immobili e devono scorrere in orizzontale semplicemente perché un designer ha deciso di scegliere una larghezza fissa adatta al loro schermo? Alla fine, un buon design significa offrire agli utenti la migliore esperienza possibile, non si tratta solo di ciò che appare "carino" sul monitor del designer.

3
Dan Diplo

Secondo Jakob Nielsen ' 113 Linee guida di progettazione per l'usabilità della home page :

67 Usa un layout liquido in modo che le dimensioni della homepage si adattino alle diverse risoluzioni dello schermo.

È anche una delle Le dieci linee guida per la progettazione della home page più violate :

Combattere layout congelati sembra una battaglia persa, ma vale la pena ripeterli: diversi utenti hanno monitor di dimensioni diverse. Le persone con grandi monitor vogliono essere in grado di ridimensionare i loro browser per visualizzare più finestre contemporaneamente. Non puoi presumere che la larghezza della finestra di tutti sia di 800 pixel: è troppo per alcuni utenti e troppo poco per altri.

1
melhosseiny

Potrebbe non essere necessario fare questa scelta. A List Apart ha un eccellente articolo su Responsive Design . L'idea principale è che è possibile utilizzare media query per rilevare le modifiche nella finestra del browser o le dimensioni della finestra e riassegnare i CSS in base alle necessità. C'è molto da leggere lì, quindi dai un'occhiata a l'articolo per tutti i dettagli succosi. Ma per il lungo e il breve (o dovrebbe essere il "largo e stretto" di esso?) Guarda le pagine before e after del loro esempio. La pagina prima si ridimensiona bene fino a un certo punto, ma se la restringi abbastanza, diventa un po 'goffa. Anche la pagina after viene ridimensionata, ma cambia anche il layout quando lo si restringe troppo perché il ridimensionamento funzioni correttamente.

1
Alan

Che ne dici di un pasticcio? Questo mostra la # sezione-contenuto in una larghezza fissa (70em) se c'è abbastanza spazio, altrimenti la sezione viene ridotta all'80% della finestra view-port/browser.

#content {
    margin: 0 auto 2em 0;
    width: 70em;
    max-width: 80%; }
0
feeela

Il vantaggio di un layout dinamico è che funziona su tutte le dimensioni dello schermo, compresi i dispositivi mobili. È un lavoro più difficile però per far sembrare le cose buone in tutte quelle dimensioni. La domanda da porsi è: i tuoi visitatori useranno i dispositivi mobili?

0
paulmorriss