Imposta le dimensioni per l'area visibile

Questa regola viene attivata quando PageSpeed Insights rileva che i contenuti della pagina non si adattano orizzontalmente alle dimensioni specificate per l'area visibile, costringendo l'utente a scorrere in orizzontale per visualizzare tutti i contenuti.

Panoramica

Sui dispositivi desktop e mobili, gli utenti fanno generalmente scorrere i siti web in verticale e non in orizzontale. Pertanto, costringere l'utente a utilizzare lo scorrimento orizzontale o a diminuire lo zoom per visualizzare tutta la pagina è causa di un'esperienza utente non soddisfacente.

Durante lo sviluppo di un sito per dispositivi mobili con un metatag viewport, è facile creare involontariamente contenuti che non si adattano all'area visibile specificata per la pagina. Ad esempio, un'immagine che viene visualizzata con una larghezza superiore rispetto all'area visibile può causare lo scorrimento orizzontale dell'area stessa. Devi modificare questi contenuti adattandoli alla larghezza dell'area visibile, in modo tale che l'utente non debba scorrerli orizzontalmente.

Consigli

Le dimensioni dello schermo variano considerevolmente nei vari dispositivi (ad esempio, tra cellulari e tablet e perfino tra cellulari diversi). Pertanto, devi configurare l'area visibile in modo che le pagine vengano visualizzate correttamente su un gran numero di dispositivi diversi. Tuttavia, poiché la larghezza dell'area visibile (espressa in pixel CSS) può variare, i contenuti della pagina non devono basarsi sulla larghezza di un'area in particolare per poter essere visualizzati correttamente.

  • Evita di impostare larghezze CSS assolute di grandi dimensioni per gli elementi della pagina (ad esempio, div{width:360px;}), poiché l'elemento potrebbe risultare troppo grande per l'area visibile su un dispositivo con uno schermo più ridotto (ad esempio, un dispositivo avente una larghezza di 320 pixel CSS come un iPhone). Piuttosto, valuta l'utilizzo di valori di larghezza relativi, come width:100%. Allo stesso modo, cerca di non utilizzare valori di posizionamento assoluti di grandi dimensioni, poiché l'elemento potrebbe risultare troppo grande per essere contenuto nell'area visibile sugli schermi piccoli.
  • Se necessario, puoi utilizzare le query supporti CSS per applicare stili differenti a schermi piccoli e grandi. In questo articolo di HTML5 Rocks puoi trovare ulteriori consigli in merito.
  • Per quanto riguarda le immagini, questo articolo contiene un'utile panoramica su come pubblicare immagini con dimensioni appropriate senza dover adattare dinamicamente i contenuti della pagina durante il rendering.