La risoluzione giusta per un sito web

Analisi delle ultime statistiche sulle risoluzioni più utilizzate e consigli per la creazione del layout ideale.

Website mockup

Quello della risoluzione migliore per un sito web è un problema spesso sottovalutato. Negli ultimi anni la situazione si è semplificata visto l’ormai definitivo tramonto dei siti ad 800×600, ma questo non mette al riparo da possibili scelte sbagliate.

Le statistiche aggiornate

Secondo il report aggiornato a Dicembre 2008 di Net Applications, 1024×768 resta la risoluzione più diffusa con il 37%, e lo sarà ancora per diverso tempo.

Seguono valori più elevati, da 1280×960 (20%) a 1280×1024 (13%), per poi passare a risoluzioni ancora maggiori.

Una piccola curiosità: la risoluzione più bassa dopo 800×600 (4.49%) è quella di Safari su iPhone, 320×396 pixel (0.53%), importante segno dell’evoluzione del settore mobile.

Le altre combinazioni esistenti sono innumerevoli, soprattutto con l’avvento dei monitor widescreen, e proprio per questo realizzando un sito web è necessario valutare tutte le possibili situazioni.

Le dimensioni della finestra del browser

Un altro fattore difficile da valutare è quello della dimensione della finestra del browser. Pensate alle vostre abitudini: la tenete sempre a tutto schermo? La risposta in genere dipende dal monitor, io dove lavoro, con un monitor a 1280×1024 ho il browser a tutta pagina, ma questo non succede a casa su una risoluzione di 1680×1050 pixel.

Non è detto quindi che i dati ricavati dalle statistiche corrispondano alla situazione reale: un utente con un grande monitor difficilmente terrà la finestra del browser a tutto schermo.

Le percentuali cambiano anche a seconda del sistema operativo. Gli utenti Mac si comportano diversamente da quelli Windows, come era emerso da questo interessante sondaggio di Roger Johansson. Su Mac Os infatti si è più portati a non massimizzare le finestre.

I problemi con l’alta risoluzione

Avere come target un’ampia gamma di alte risoluzioni è comunque un problema da considerare. Questi sono i principali errori da evitare:

  • Layout a larghezza fissa allineati a sinistra
  • Layout fluidi senza max-width, con aree di testo molto estese in orizzontale o font-size troppo piccolo.

I siti allineati a sinistra possono andare bene fino ad una certa risoluzione, ma su monitor particolarmente grandi l’utente sarà portato a guardare solo un lato dello schermo. E’ una soluzione alternativa, che però mi sento di sconsigliare. Molto meglio mantenere l’allineamento centrale.

I layout fluidi sono più difficili da curare nei dettagli e presentano un grave problema di leggibilità se non controllati a dovere. A risoluzioni particolarmente elevate infatti i blocchi di testo rischiano di diventare troppo lunghi e faticosi da leggere.

Come scegliere il layout migliore

La prima cosa da fare rinnovando la grafica di un sito esistente è guardare le statistiche dei propri visitatori. I dati globali della rete hanno ben poca importanza rispetto a quelli dei vostri utenti e del target che vi siete prefissati. Potete usare le statistiche generali per capire quale sia l’andamento, riportandolo alla vostra esperienza.

Se invece state realizzando un nuovo sito, una larghezza minima intorno ai 960 pixel è la base di partenza ideale. A voi la scelta se utilizzare un layout a larghezza fissa, uno fluido, o addirittura uno elastico (anche se potrebbe essere giunto il momento di abbandonarli).

La soluzione a larghezza fissa in generale è quella più sicura, ma anche la più scontata. Una interessante via di mezzo si ottiene sfruttando il background della pagina per riempire lo spazio altrimenti vuoto. In questa galleria di Web Designer Wall ci sono degli ottimi esempi.

Nel caso invece vogliate un layout fluido, ricordate di impostare sempre una larghezza minima ed una massima, oscillando ad esempio tra i 900 ed i 1400 pixel.

Conclusioni

Queste indicazioni vogliono essere semplicemente un consiglio, non esistono verità assolute. In generale i layout a larghezza fissa sono sempre i più diffusi soprattutto per la facilità di realizzazione e le possibilità di controllo della struttura. Se però volete mettervi alla prova con un layout fluido, i vostri utenti potrebbero apprezzare un sito che si adatta alle loro abitudini.

Quali sono le vostre abitudini? Preferite un determinato tipo di layout o cambiate scelta a seconda delle situazioni? Dite la vostra per condividere pratiche e suggerimenti.

[Web Design Concept – Immagine di Shutterstock]

Tommaso Baldovino

UX/UI Designer di Firenze, appassionato di tecnologia e accessibilità, esperto di WordPress, blogger, gamer e amante della fotografia.

22 commenti su “La risoluzione giusta per un sito web”

  1. per fortuna i dati sulla risoluzione sono cambiati, ma negli ultimi 2 anni mi sono capitati almeno 3 clienti che usavano ancora la risoluzione di 800×600.. e in quei casi diventa complicato…

  2. buongiorno,
    ma dal punto di vista dell’accessibilità come ci si comporta con la larghezza fissa? meglio continuare ad usare 800px?

    Saluti

  3. Per quanto riguarda 800×600, ne ho parlato anche in questo post, magari trovate spunti utili. Il discorso è legato soprattutto al target di utenti: in casi come quello citato da Valentino è d’obbligo preoccuparsi anche di questa risoluzione, ma in generale è ormai superata (basta vedere i siti dei maggiori quotidiani).

    Dal punto di vista dell’accessibilità, a mio parere la soluzione ideale è il layout fluido (vedere il sito del W3C), ma non è obbligatorio.

  4. Domanda. Ho notato alcuni siti USA che hanno il layout al pelo del 1024. Su risoluzioni più grandi mostrano sulla destra menù aggiuntivi (pubblicità, sottomenù meno importanti, approfondimenti, ecc…)impossibili da vedere per chi ha schermi a 1024×768 (credo usino il CSS overflow-x:hidden)

    Io credo che sia un buon compromesso per non escludere chi ha schermi “piccoli” e nello stesso tempo “premiare” le risoluzioni maggiori.

    Non trovate?

  5. Sui layout floatati a sinistra sono spesso combattuto. Continuo ad usarli, senza ricorrere a strutture fluide (che praticamente non uso mai), soprattutto per design complessi. Mi trovo meglio nella gestione dei css, soprattutto con le immagini in background.

    Per quanto riguarda i layout elastici, credo sia un errore non settare anche la min-width: stringendo la finestra si sputtana tutto.

  6. “Per quanto riguarda i layout elastici” – volevo dire fluidi :-)

    Dimenticavo: “Se invece state realizzando un nuovo sito, una larghezza minima intorno ai 960 pixel è la base di partenza ideale.”

    Io lavoro sempre sui 990px. Nelle risoluzioni 1024 mi risultano sempre perfettamente “a filo”.

  7. Articolo interessantissimo come sempre.

    Però mi trovo ancora alquanto combattuto sull’abbandono dell’800*600 … per lo meno nei siti che non richiedono tanta roba piazzata in prima pagina (ad esempio un portfolio, un sito aziendale, ecc…) io ottimizzerei ancora anche per questa risoluzione

    Per il resto concordo con Napolux

    PS
    la soluzione via JS è la stessa di quella integrata nel tema K2 di wordpress o sbaglio?

  8. Da alcuni anni uso un’insolita risoluzione a 1440×900. Da una parte è scomodo, perché diversi siti presentano problemi di visualizzazione (per lo più occupano solo la parte sinistra del monitor), ma d’altra parte è vantaggioso in sede di test di temi grafici (cosa che mi capita). Noto che molti siti importanti – per esempio quelli dei principali quotidiani italiani – non sono visualizzati correttamente, a causa del layout fisso.

  9. Personalmente ritengo che, allo stato attuale delle cose, un layout di 960px vada bene nella maggior parte dei casi. Eventualmente si può ridurre di qualche 20ina di px per permettere a degli elementi di “uscire” dalla pagina dando volume e profondità al sito senza compromettere la visualizzazione a chi ha un monitor da 1024×768

  10. Ciao ragazzi sono davvero un neofita ma secondo voi che tipo di risoluzione mi conviene usare per una schermata iniziale di un sito in apertura? Io ne volevo una a tutto schermo tipo quelle dei siti nel link riportato nell’articolo ma non so quale scegliere fra le tante.Se potete darmi una mano…grazie mille

  11. @Gilda grazie per la segnalazione. Le copie ormai si sprecano, ma ci pensa già Google a penalizzare i contenuti duplicati :)

  12. ciao, devo impostare il sito di un’ associazione di promozione sociale emergente,; secondo voi conviene puntare su layout fissi o fluidi?

    Forse fissi e a bassa risoluzione?

  13. Salve! vorrei che la mia pagina web fosse visualizzata da tutti con zoom 75% ma su internet non trovo articoli utili, tranne il ctrl+ rotellina mouse(per ingrandire o diminuire la risoluzione), che modificherebbe solo a me stesso la risoluzione.
    Mi potrebbe dare una mano?
    La rigrazio in anticipo per la risposta .
    Cordiali saluti