La prima cosa che la maggior parte dei designer considera quando costruisce la propria pagina web è la risoluzione per cui progettare. Ciò che questo equivale a decidere è quanto deve essere ampio il tuo design. Non esiste più una larghezza standard del sito web.
Perché prendere in considerazione la risoluzione
Nel 1995, i monitor con risoluzione standard 640x480 erano i monitor più grandi e migliori disponibili. Ciò significava che i web designer si concentravano sulla creazione di pagine che guardavano bene nei browser web massimizzate su un monitor da 12 pollici a 14 pollici a quella risoluzione.
Al giorno d'oggi, la risoluzione 640x480 rappresenta meno dell'1% della maggior parte del traffico del sito web. Le persone utilizzano computer con risoluzioni molto più elevate, tra cui 1366x768, 1600x900 e 5120x2880. In molti casi, la progettazione di uno schermo con risoluzione 1366x768 funziona.
Siamo ad un punto nella storia del web design in cui non dobbiamo preoccuparci molto della risoluzione. La maggior parte delle persone ha monitor grandi e widescreen e non massimizzano la finestra del browser. Quindi, se decidi di progettare una pagina larga non più di 1366 pixel, la tua pagina probabilmente andrà bene nella maggior parte delle finestre del browser, anche su monitor di grandi dimensioni con risoluzioni più elevate.
Larghezza del browser
Prima di iniziare a pensare "okay, renderò le mie pagine larghe 1366 pixel", c'è dell'altro in questa storia. Un problema spesso trascurato quando si decide la larghezza di una pagina web è quanto i tuoi clienti conservano il loro browser. In particolare, massimizzano i loro browser a schermo intero o mantengono i loro schermi più piccoli di quelli a schermo intero?
In un sondaggio informale di colleghi che utilizzavano un laptop con risoluzione 1024x768 standard aziendale, due hanno mantenuto tutte le loro applicazioni ottimizzate. Il resto aveva finestre di dimensioni diverse aperte per vari motivi. Questo dimostra che se stai progettando l'intranet di questa azienda a 1024 pixel di larghezza, l'85% degli utenti dovrebbe scorrere orizzontalmente per vedere l'intera pagina.
Dopo aver account per i clienti che massimizzano o no, pensa ai bordi del browser. Ogni browser Web ha 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 ingrandite con risoluzioni 1024x768. Questo è chiamato browser "chrome" e può portare via dallo spazio utilizzabile per la progettazione della pagina.
Pagine a larghezza fissa o liquida
La larghezza numerica effettiva non è l'unica cosa a cui devi pensare quando si progetta la larghezza del tuo sito web. Devi anche decidere se avrai una larghezza fissa o una larghezza del liquido. In altre parole, hai intenzione di impostare la larghezza su un numero specifico (fisso) o su una percentuale (liquido)?
Larghezza fissa
Le pagine a larghezza fissa sono esattamente come suonano. La larghezza è fissa su un numero specifico e non cambia a prescindere da quanto grande o piccolo sia il browser. Questo può essere utile se hai bisogno che il tuo design sia esattamente lo stesso indipendentemente dalla larghezza o dalla larghezza dei browser dei tuoi lettori, ma questo metodo non tiene conto dei tuoi lettori. Le persone con i browser più stretti del tuo progetto dovranno scorrere orizzontalmente, e le persone con browser estesi avranno grandi quantità di spazio vuoto sullo schermo.
Per creare pagine a larghezza fissa, è sufficiente utilizzare numeri di pixel specifici per le larghezze delle divisioni di pagina.
Larghezza del liquido
Le pagine di larghezza liquida (a volte chiamate pagine a larghezza flessibile) variano in larghezza a seconda di quanto è ampia la finestra del browser. Ciò ti consente di progettare pagine che si concentrano maggiormente sui tuoi 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ù breve 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, è sufficiente utilizzare percentuali o em per le larghezze delle divisioni di pagina. Dovresti anche familiarizzare con la proprietà max-width del CSS. Questa proprietà ti consente di impostare una larghezza in percentuale, ma di limitarla in modo che non diventi così grande da non poterla leggere.
E il vincitore è: Query media CSS
La soluzione migliore in questi giorni è utilizzare le query multimediali CSS e il design reattivo per creare una pagina che si adatta alla larghezza del browser che la visualizza. Un web design reattivo usa lo stesso contenuto per creare una pagina web che funzioni sia che 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 query multimediale in CSS3, ogni dispositivo ricevente risponde alla query con le sue dimensioni e il foglio di stile si adatta a quella particolare dimensione.
