La prima cosa che la maggior parte dei designer considera quando costruisce la propria pagina web è cosa risoluzione progettare per. Ciò a cui ciò corrisponde davvero è decidere quanto dovrebbe essere largo il tuo design. Non esiste più una larghezza standard del sito web.
Perché considerare la risoluzione?
Nel 1995, i monitor standard da 640 pixel per 480 pixel erano i monitor più grandi e migliori disponibili. Ciò significava che i web designer si sono concentrati sulla creazione di pagine che sembravano buone nei browser Web ingrandite su un monitor da 12 pollici a 14 pollici a quella risoluzione.
Al giorno d'oggi, la risoluzione 640x480 costituisce meno dell'1% della maggior parte del traffico del sito web. Le persone usano computer con risoluzioni molto più elevate, tra cui 1366 per 768, 1600 per 900 e 5120 per 2880. In molti casi, la progettazione per uno schermo con risoluzione 1366x768 funziona.
Oggi, la maggior parte delle persone ha monitor di grandi dimensioni e widescreen e non ingrandisce la finestra del browser. Quindi, se decidi di progettare una pagina che non sia più larga di 1366 pixel, la tua pagina probabilmente avrà un bell'aspetto nella maggior parte delle finestre del browser anche su monitor di grandi dimensioni con risoluzioni più elevate.
Larghezza del browser
Un problema spesso trascurato quando si decide la larghezza di una pagina Web è quanto grandi i clienti mantengono i loro browser. Nello specifico, massimizzano i loro browser a una dimensione a schermo intero o li mantengono più piccoli dello schermo intero?
Dopo aver preso in considerazione i clienti che massimizzano o meno, pensa ai bordi del browser. Ogni browser web utilizza una barra di scorrimento e bordi sui lati che riducono lo spazio disponibile da 800 a circa 740 pixel o meno su risoluzioni 800x600 e circa 980 pixel su finestre massimizzate a 1024x768 risoluzioni. Questo si chiama browser cromo e può portare via lo spazio utilizzabile per il design della tua pagina.
Pagine a larghezza fissa o liquida
La larghezza numerica effettiva non è l'unica cosa a cui devi pensare quando progetti la larghezza del tuo sito web. Devi anche decidere se avrai un larghezza fissa o larghezza del liquido. In altre parole, imposterai la larghezza su un numero specifico (fisso) o su una percentuale (liquido)?
Larghezza fissa
Le pagine a larghezza fissa sono esattamente come sembrano. La larghezza è fissata a un numero specifico e non cambia, non importa quanto grande o piccolo sia il browser. Questo approccio può essere utile se hai bisogno che il tuo design abbia lo stesso aspetto, non importa quanto siano larghi o stretti i browser dei tuoi lettori, ma questo metodo non tiene conto dei tuoi lettori. Le persone con browser più stretti del tuo design dovranno scorrere orizzontalmente e le persone con browser ampi avranno grandi quantità di spazio vuoto sullo schermo.
Per creare pagine a larghezza fissa, utilizza numeri di pixel specifici per le larghezze delle divisioni di pagina.
Larghezza del liquido
Pagine liquid-width (a volte chiamate pagine a larghezza flessibile) variano in larghezza a seconda dell'ampiezza della finestra del browser. Questa strategia porta design che si concentrano maggiormente sui clienti. Il problema con le pagine a larghezza liquida è che possono essere difficili da leggere. Se la lunghezza di scansione di una riga di testo è più lunga di 10-12 parole o più corta di 4-5 parole, può essere difficile da leggere. Ciò significa che i lettori con finestre del browser grandi o piccole hanno problemi.
Per creare pagine con larghezza flessibile, usa le percentuali o ems per le larghezze delle divisioni di pagina. Familiarizzare con i CSS larghezza massima proprietà. Questa proprietà ti consente di impostare una larghezza in percentuale, ma poi di limitarla in modo che non diventi così grande che le persone non possano leggerla.
Query multimediali CSS
La soluzione migliore in questi giorni è utilizzare le query multimediali CSS e il design reattivo per creare una pagina che si adatti alla larghezza del browser che la visualizza. Un web design reattivo utilizza lo stesso contenuto per creare una pagina web che funzioni sia che tu la visualizzi a 5120 pixel di larghezza o 320 pixel di larghezza. Le pagine di dimensioni diverse hanno un aspetto diverso, ma contengono lo stesso contenuto. Con la media query in CSS3, ogni dispositivo ricevente risponde alla query con la sua dimensione e il foglio di stile si adatta a quella particolare dimensione.