Ho notato che sempre più siti sono passati a un layout a larghezza fissa, dove il ridimensionamento della finestra del browser fa apparire solo le barre di scorrimento, al contrario di un layout flessibile, dove 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?
Risposte:
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.
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. Scopri 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.
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. Anzi, 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 una larghezza fissa adatta al 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.
Potrebbe non essere necessario fare questa scelta. A List Apart ha un eccellente articolo sul Responsive Design . L'idea principale è che è possibile utilizzare le query multimediali per rilevare le modifiche nella finestra del browser o le dimensioni della finestra e riassegnare i CSS in base alle esigenze. C'è molto da leggere lì, quindi dai un'occhiata all'articolo per tutti i dettagli succosi. Ma per il lungo e il breve (o dovrebbe essere il "largo e stretto" di esso?) Guardare le pagine prima e dopo del loro esempio. La pagina precedente si ridimensiona bene fino a un certo punto, ma se la restringi abbastanza, diventa un po 'goffa. Il dopo anche la pagina si ridimensiona, ma cambia anche il layout quando lo si restringe troppo perché il ridimensionamento funzioni correttamente.
Secondo Jakob Nielsen s' 113 Linee guida di progettazione per Homepage Usability :
67 Usa un layout liquido in modo che le dimensioni della homepage si adattino alle diverse risoluzioni dello schermo.
È anche una delle dieci linee guida per la progettazione della home page più violate :
Combattere layout congelati sembra una battaglia persa, ma vale la pena ripeterli: utenti diversi hanno dimensioni di monitor 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.
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?