Contenuto
- Layout di liquidi statici VS.
- Filtro delle dimensioni dello schermo standard
- Schermi mobili
- La griglia d'oro
I telefoni cellulari, i tablet e i monitor dei computer hanno usi, utenti e dimensioni diversi che lasciano la domanda su quale sia la migliore dimensione di layout per un sito determinata dalle esigenze degli utenti primari di quel sito. Se un sito deve essere visualizzato dagli utenti standard su un display widescreen con una risoluzione di 1680x1040 pixel, la dimensione del sito deve essere adattata alla schermata principale del browser. Se il sito è destinato all'uso su dispositivi mobili, dovrebbe essere realizzato per uno schermo molto più piccolo.
Layout di liquidi statici VS.
La prima considerazione è se il sito richiede una dimensione definita in pixel. Usando le percentuali, puoi creare un layout "fluido", che ridimensiona le aree in modo dinamico, a seconda delle dimensioni della finestra del browser. Se utilizzati in combinazione con il testo, i layout fluidi possono essere la scelta migliore quando si crea un sito con risoluzione dello schermo standard e browser per dispositivi mobili. I layout fluidi si ottengono utilizzando "width = 100%" nella dichiarazione del contenuto CSS, ad esempio "width = 960x".
Filtro delle dimensioni dello schermo standard
Per creare layout "fissi" o fluidi, la larghezza dei div, dei wrapper o delle tabelle del contenuto principale dovrebbe rientrare nella finestra del browser dell'utente, tenendo conto sia della barra di scorrimento che della barra degli strumenti. Dovresti anche considerare di fare per la maggioranza. Oggi più dell'80% dei browser utilizza una risoluzione dello schermo di oltre 1024x768 pixel. Ciò significa che puoi farlo per 1680x1024 pixel, ma è una buona idea proiettare a metà strada. 960 o 980 pixel di larghezza sono due misure affidabili utilizzate per visualizzare i contenuti comodamente in un browser utilizzato da chiunque utilizzi una risoluzione 1024x768 o superiore. Il sistema si adatta anche a dispositivi mobili in grado di visualizzare interi siti. Se è troppo stretto, 1080 è la migliore larghezza successiva. Ricorda l'altezza di un browser standard a qualsiasi risoluzione per conservare le informazioni più importanti sopra la "piega", o punto, dove lo scorrimento diventa necessario.
Schermi mobili
Se vuoi che il tuo sito abbia un bell'aspetto su una varietà di dispositivi mobili, dovrai farlo in modo specifico per il dispositivo o creare uno stile speciale che viene utilizzato dai browser per dispositivi mobili per mostrare la versione "mobile" del tuo sito. La risoluzione 240x320 è lo standard corrente per la maggior parte degli smartphone e dei dispositivi Internet, come l'iPhone. È una buona idea usare percentuali o layout "fluidi", poiché molti dispositivi supportano sia le modalità verticale che orizzontale. se si crea un sito Web impostato su 320 pixel di larghezza, potrebbe apparire tagliato per l'utente accedendo in modalità verticale.
La griglia d'oro
Forse il miglior sistema per determinare le dimensioni del layout è attraverso l'uso del sistema di griglia. Le griglie calcolano le regioni perfettamente bilanciate all'interno di una data larghezza per fornire un'idea di come ridimensionare gli elementi all'interno del layout principale o dell'area del contenuto. Questi elementi includono scatole promozionali, barre, spazi pubblicitari o paragrafi. Ad esempio, un layout che utilizza una larghezza totale di 1080 pixel e diviso utilizzando la griglia dorata avrebbe lasciato l'area a sinistra per i post del blog a 739 pixel di larghezza e una a destra a 780 pixel di larghezza, entrambi utilizzando il margine di 10 pixel. Il risultato finale è un layout perfettamente allineato e bilanciato. Puoi provare diverse griglie visitando il sistema del generatore di griglie (vedi Risorse).