Ieri è arrivato il mio nuovo monitor Samsung a 23 pollici 
che sostituisce egregiamente i miei due Benq da 19. Se fino a pochi anni fa i monitor “over 17″ erano destinati solamente ai professionisti, oggi, grazie ai prezzi sempre più bassi, è comune utilizzarli anche per navigare in internet.
Secondo le statistiche di w3schools a gennaio del 2010 il 76% dei suoi utenti naviga con risoluzioni superiori alla canonica 1024×768 (il 20% in più dell’anno precedente)
Queste statistiche sono piuttosto simili a quelle del mio blog mentre riscontro ancora un’elevata diffusione del 1024×760 quando consulto le statistiche di siti che parlano e pubblicizzano contenuti a minor impatto tecnologico.
Partendo da queste informazioni è possibile fare alcune semplici considerazioni:
- la risoluzione 800×600 è caduta definitivamente in disuso: non sono più in commercio schermi con questa risoluzione e anche la maggior parte dei netbook/tablet utilizzano risoluzioni vicine a 1024×768/1024×600).
- la risoluzione 1024×760 può considerarsi ormai il minimo comune denominatore: è la risoluzione più diffusa, in particolare fra i sistemi relativamente datati e sui dispositivi come netbook e tablet. In questi ultimi casi è da considerare la possibilità di avere 160px in meno in verticale.
- la risoluzione 1280×1024 è il minimo comun denominatore del segmento superiore: consultando le statistiche degli ultimi 6 mesi del mio blog, su un campione di 14.000 visite circa il 34% degli utenti usa una risoluzione di 1280×1024 (e 1280×800), il 12% 1440×900 e l’11% 1680×1050. L’8% usa 1920×1200 (anche 1920×1080) mentre il 1024×760 non raggiunge il 13% e sommandolo alle risoluzioni inferiori arriva al si e no al 15%. Da questi dati (che ovviamente non sono rappresentativi e non lo vogliono essere) è lecito pensare che siti web e blog di natura tecnica/tecnologica beneficiano di un utenza con schermi più grandi e sarebbe lecito offrire loro un esperienza migliore.
Detto questo personalmente progetto ancora tenendo come riferimento una risoluzione ottimale di 1024×760, il che principalmente è dovuto alla tipologia di clienti con cui lavoro. Sarebbe comunque interessante progettare layout che forniscano esperienze migliori su schermi più grandi (il ottica enanched css, a riguardo consiglio il sempre ottimo Oltre i CSS di Andy clark).
Quindi in che modo possiamo progettare tenendo a mente le risoluzioni elevate?
Layout centrato a larghezza fissa
Questo layout è forse il più diffuso. In questo caso il contenitore principale è centrato utilizzando in margini automatici ( #container {margin:0 auto;} ) la larghezza di #container non deve essere superiore a 960px in modo da essere visualizzata correttamente a 1024×768, oppure non superiore a 1200px se si intende ottimizzare per schermi a risoluzione di 1280×1024. Per rendere il layout interessante a risoluzioni superiori conviene utilizzare una texture che ci aiuti incorniciare efficacemente il nostro layout. A riguardo vi consiglio l’ottimo articolo di webdesigner wall (How to: CSS Large Background da cui riproponiamo l’immagine qui sotto)
Layout fluido con larghezza massima e minima impostati
Un secondo approccio consiste nel adottare un layout fluido con dimensione impostata in percentuale che abbia una dimensione minima di 960px (o inferiore) e massima di 1200px (o superiore).
Ad esempio scriveremo: #container {width:90%; min-width:960px; max-width:1200px;}
Questa scelta ha indubbiamente diversi ovvi vantaggi in termini di flessibilità.
Tuttavia non tutti i layout si prestano ad essere gestiti con una larghezza variabile, soprattutto quando si ha l’esigenza di avere un controllo preciso sulla posizione degli elementi.
In questo caso ad esempio la colonna centrale della sezione superiore aumenterà di altezza sino a trasbordare al di sotto di 1024px mentre la posizione del logo in alto a sinistra andrà a posizionarsi attaccato al margine sinistro.
Layout allineato a sinistra con larghezza fluida (ma anche no…)
Una terza alternativa (perente stretta della precedente) consiste nell’adottare un impaginazione allineata a sinistra con il contenitore di dimensioni impostate in percentuale e una dimensione minima e massima impostate sulle risoluzioni precedentemente elencate.
Il background anche in questo caso ci aiuterà a creare un illusione di continuità che confeirà al layout maggior respiro all’aumentare dello spazio disponibile [vedi in questo articolo un esempio].
Oppure è possibile affidare totalmente alla texture di sfondo il compito di sfruttare lo spazio in eccesso, in alcuni casi [Zen City Morning - Pseudo Sahara - DECO] l’effetto ottenuto è di grande impatto!
Per chi volesse approfondire i risvolti pratici di progettare avendo in mente schermi di grandi dimensioni vi consiglio la lettura di questo articolo di M. Griffin che affronta il problema proponendo “3 layout che gestiscono la risoluzione dello schermo con dignità” .
Un breve ma interessante articolo: Web Design Trend Hunting – Fluid Grid Layout: 10+ Outstanding Examples & 1 Tutorial
Vi segnalo inoltre alcune risorse utili alla realizzazione di layout liquidi:
- Css Liquid – una piccola raccolta di layout liquidi
- CSS Drive [sezione layout liquidi] – idem come sopra
- Css layout-packs – una selezione di layout base già pronti
- Un framework CSS – per creare layout basati su griglie fluide
- Fluid960gs – una versione modificata di 960gs che permette la creazioen di layout fluidi grid based
- Fluid Grids – un ottimo articolo su A List Apart
Ovviamente in questo articolo non si è parlato dell’altra parte del cielo: MID, tablet e netbook… ne parleremo la prossima volta
Una Risposta
Molto utile, grazie!