Vai ai contenuti

LAU



Home > realizzare > accessibilità: fogli di stile > Risoluzioni dei monitor e layout


Risoluzioni dei monitor e layout

I monitor di nuova generazione sono sempre più diffusi e influenzano la fruizione dei contenuti web da parte degli utenti. Meglio realizzare un layout rigido o liquido?

a cura di: Alessio Mantegna e Andrea Di Pizio | 9 marzo 2009


Le innovazioni tecnologiche nel campo dell'informatica determinano una continua evoluzione del mercato e la possibilità per i consumatori di disporre di computer e monitor di varie fasce di prezzo (netbook, home pc, notebook, etc.) a costi inferiori rispetto ad alcuni anni fa. Oggi i monitor 800x600 non sono più in commercio e la risoluzione minima presente nel mercato è 1024x768.

Le domande che ci poniamo sono queste:

  • nel costruire il layout di un nuovo sito, scegliamo un layout rigido o liquido?
  • in caso di layout rigido, a quale risoluzione facciamo riferimento?

Recenti statistiche, come quelle evidenziate dagli articoli How much longer will we design for 1024? [link esterno] su sohtanaka.com e La risoluzione giusta per un sito web[link esterno] su tomstardust.com, confermano la crescita dell'utilizzo da parte degli utenti di risoluzioni elevate:

  • le ricerche effettuate da w3Counter.com [link esterno] e w3Cschools.com [link esterno] rilevano che le risoluzioni 1280x800 o superiori sono utilizzati quasi dal 50% degli utenti (dati aggiornati al mese di gennaio 2009); i dati mostrano, inoltre, che dal mese di gennaio 2007 al mese di gennaio 2008 c'č stato un incremento del 10% delle risoluzioni superiori a 1024x768;
  • i risultati di una ricerca pubblicata da Net Applications [link esterno] mostrano che, nel mese di dicembre 2008, 1024x768 č la risoluzione pių diffusa, con il 37% degli utenti. Le risoluzioni 1280x960 e 1280x1024 sono utilizzate rispettivamente dal 20% e 13% degli utenti;
  • alcuni importanti portali, come Apple.com, Microsoft.com, Yahoo.com e YouTube.com, hanno scelto un layout rigido ottimizzato per visualizzazioni 1024x768.
    Questa tendenza è confermata anche in Italia dove i due principali quotidiani, La Repubblica.it [link esterno] ed il Corriere.it [link esterno], hanno effettuato da più di un anno la stessa transizione.

In linea con questi risultati, i dati di accesso del sito web del LAU, riferiti al mese di gennaio 2009, confermano l'incremento delle risoluzioni alte o molto alte e la scomparsa degli schermi 800x600:

Grafico percentuali utilizzo risoluzioni degli utenti del LAU

I dati del sito web del LAU confermano che circa il 50% degli utenti utilizza risoluzioni superiori a 1024x768. È bene precisare che questo trend è dovuto al target del sito che è indirizzato alla comunità di sviluppatori web.

I dati presentati, anche se provenienti da fonti differenti, confermano tuttavia una indiscutibile evoluzione delle risoluzioni utilizzate dagli utenti.

In base all'evoluzione delle risoluzioni, rispondiamo alle domande che ci siamo posti all'inizio: nel costruire il layout di un nuovo sito, scegliamo un layout rigido o liquido ? In caso di layout rigido, a quale risoluzione facciamo riferimento?

Layout rigido

I vantaggi:

  • è più facile da realizzare;
  • permette un maggior controllo del layout al variare delle risoluzioni e all'ingrandimento dei caratteri.

Gli svantaggi:

  • ad alte risoluzioni non viene utilizzata tutta la larghezza a disposizione;
  • a basse risoluzioni o a finestra ridotta è necessario utilizzare le barre di scorrimento orizzontale per raggiungere tutte le informazioni.

Layout liquido

I vantaggi:

  • i contenuti si adattano alla risoluzione dell'utente, anche a basse risoluzioni o a finestra ridotta;

Gli svantaggi:

  • ad alte risoluzioni i contenuti testuali potrebbero allungarsi eccessivamente in orizzontale e creare difficoltà di lettura;
  • a risoluzioni basse o a finestra ridotta potrebbero verificarsi sovrapposizioni di contenuti;
  • la gestione degli spazi e delle proporzioni grafiche è più complessa rispetto al layout rigido.

Alcuni sviluppatori preferiscono utilizzare delle soluzioni miste che prevedono, per esempio, una colonna fissa in pixel ed un corpo dei contenuti liquido con larghezza massima e minima fissate. Un'interessante risorsa on line ricca di esempi di layout fissi, liquidi e misti sviluppati con i CSS è il sito web layouts.ironmyers.com

Grafico percentuali utilizzo risoluzioni degli utenti del LAU

Layout rigido o liquido?

Il trend dei portali di larga diffusione sembra dire layout rigido con una larghezza (width) non superiore ai 960 pixel, in modo da adattarsi alla risoluzione considerata minima di 1024x768 px. Questa è una delle scelte che ci sentiamo di consigliare.

Nel caso in cui ci si voglia orientare, invece, verso un layout liquido, consigliamo di utilizzare un'accortezza:

  • prevedere l'inserimento di una larghezza minima (min-width) di circa 700 pixel al contenitore del layout, per evitare la sovrappozione del contentuto a basse risoluzioni
  • prevedere una larghezza massima (max-width) di circa 1400 pixel per evitare che il testo del sito risulti eccessivamente esteso in orizzontale ad alte risoluzioni.

torna su

[ Torna all’inizio della pagina ]



Sito realizzato dal Laboratorio di Accessibilità e Usabilità del CSI-Piemonte - Privacy, cookies e accessibilità

[ Torna all’inizio della pagina ]