Impostare correttamente i breakpoint – Risoluzione Vs. viewport

Per ogni webdesigner è necessario sapere come i visitatori “vedono” il proprio sito, una delle questioni più importanti riguarda l’impostazione dei “breakpoint” css per stabilire quando passare dalla visualizzazione mobile a quella desktop etc.
A tal proposito si trovano vagonate di articoli e di dati statistici che riportano quali siamo le risoluzioni maggiormente per stabilire quali siano di conseguenza i valori “ottimali” dei breakpoint. Purtroppo quest’approccio non è del tutto corretto.

Definire i “breakpoint” dai dati relativi alla risoluzione del monitor è errato.

Ritengo che basare la definizione dei “breakpoint” analizzando i dati relativi alla risoluzione del monitor sia semplicemente errato, in primis perché non è detto che (in ambiente desktop) il browser sia impostato alla massima larghezza, soprattutto nel caso di monitor grandi. In secundis perché ci possono essere mille motivi (barre di scroll, toolbar, estensioni del browser e ammennicoli vari) perché l’effettiva finestra che contiene il sito sia di dimensioni inferiori rispetto alla risoluzione del monitor.

Inoltre ci si preoccupa in modo esclusivo della larghezza ma è importante notare come l’altezza della finestra del browser (viewport) sia un dato necessario per disciplinare quali contenuti saranno “above the fold“. Grazie alle recenti versioni di css tramite  “flex model” e alle dimensioni espresse in “vw” e “vh” la gestione corretta delle altezze in una pagina html non è più un tabù.

Per impostare i “breakpoint” dobbiamo fare riferimento alla effettiva dimensione del viewport.

Ho personalmente analizzato i dati provenienti da alcuni siti che gestisco tramite l’agenzia per la quale lavoro, che hanno un traffico rilevante e sufficiente a definire un trend ed ho cercato di raggrupparli in dei grafici sensati.

Di seguito il grafico che mostra ad oggi (settembre 2018) quali sono le larghezze del viewport, quindi le effettive larghezze della finestra del browser, più diffuse

 

Grafico: larghezza finestra browser viewport 2018

 

Possiamo notare come tra i 320px e i 360px ci sia una parte molto rilevante degli utenti (più grandi sono le bolle, maggiore è il numero di utenti), fenomeno dovuto principalmente al mondo mobile. L’andamento delle “bolle” del grafico indica chiaramente come esistano due macro-step. I dispositivi tra i 320 e i 360 pixel di larghezza e quelli maggiori di 1350. Ne consegue che il numero minimo di breakpoint da usare in larghezza è di due. Tuttavia se si vuole fornire una maggiore fluidità e granularità al nostro design potremmo considerarne qualcuno in più.

Le larghezze più diffuse sono 320, 360, 1020 e 1350 pixel. La cosa interessante da notare che larghezze tipiche da tablet “economico” (tra i 700 e i 1000) non ricoprano un campione significativo

Grafico: altezza finestra browser viewport 2018

Il caso dell’altezza è un po’ diverso, infatti con le altezze non andremo a definire breakpoint ma ci possiamo “regolare” in fase di progettazione per stabilire quali siano i contenuti “above the fold“. A differenza della larghezza e (come prevedibile a causa delle varie toolbar etc) nelle altezze troviamo un campione più variegato. Per quasi metà dei visitatori l’altezza della finestra è contenuta tra i 510 e i 560 pixel (anche qui gioca un ruolo forte il traffico mobile). Un terzo dei visitatori lo troviamo nella fascia tra i 670 e i 970 pixel e il resto “sparso”.

Le altezze più diffuse sono 510, 540, 560 e 670 pixel. 

 

Riassumendo:

Valori di larghezze più diffusi 320, 360, 1020 e 1350 pixel con il 360 e il 1350 che da soli fanno un terzo del traffico

Valori di altezze più diffusi sono 510, 540, 560 e 670 pixel con il 510 e il 670 che da soli fanno un terzo del traffico

 

 

3 commenti su “Impostare correttamente i breakpoint – Risoluzione Vs. viewport

  • Ciao Andrea, ottimo articolo e spunto di riflessione, onestamente non mi ero ancora posto il problema di analizzare questo dato, sicuramente molto utile per migliorare la user experience dei siti web quando sono in fase di realizzazione (o di restyling).

    Ottimi anche i grafici per rendere più chiaro il tutto, posso chiederti però cosa mi simboleggi l’asse delle X con i numeri solo pari (2,4,6,8 ecc)?

    Grazie!

    • He he, mi hai preso in castagna :-)

      in teoria non dovrebbero esserci dei valori nelle X, le dimensioni espresse sono due, la larghezza/altezza del viewport che sta sull’asse Y, e la percentuale di sessioni espressa dalla grandezza della bolla.

      Avrei potuto mettere le bolle in colonna, ma sarebbe stato meno leggibile

      Chievo venia!

      Grazie

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.