Metatag viewport per i siti responsive e mobile

M

Con la grandissima diffusione di smartphone e tablet, fare sì che un sito sia ottimizzato per mobile ha assunto oggi una grande importanza. Offrire una buona esperienza di navigazione migliora l’usabilità del sito e incrementa tutte le metriche che ne derivano, in termini di gradimento (es: durata della visita, visualizzazioni di pagina e frequenza di rimbalzo) e conversioni. Ci sono alcuni aspetti da tenere in considerazione per la creazione di siti responsive: uno di questi è la dimensione del display dei vari dispositivi.

I display di smartphone e tablet hanno infatti una risoluzione orizzontale minore rispetto ad un normale monitor per computer (per l’iPhone 5 è di 320px). Per visualizzare un sito nella sua interezza, i browser mobile adattano l’area di visualizzazione della pagina web (viewport) ridimensionando la pagina in scala in modo che si adatti alle dimensioni del display. Safari per iOS ha infatti di default una viewport di 980px. Questo fa sì che i 320px dell’iPhone 5 corrispondano in realtà ai 980px del sito web.

L’uso del metatag viewport?

Ma se volessimo realizzare un sito ottimizzato per smartphone e tablet? Per iniziare è fondamentale modificare il comportamento del browser mobile reimpostando la dimensione della viewport in modo che si adatti esattamente alla larghezza del display. Si fa dichiarando l’apposito metatag viewport (qui l’approfondimento su W3Schools.com) all’interno della head e configurando la proprietà width uguale a device-width:

<meta name="viewport" content="width=device-width, initial-scale=1">

Le proprietà che è possibile configurare all’interno del metatag viewport sono:

  • width: la larghezza della viewport (nel nostro caso uguale a device-width, ovvero la larghezza del dispositivo)
  • initial-scale: lo zoom iniziale che il browser deve applicare alla pagina
  • height: l’altezza della viewport
  • user-scalable: abilita o disabilita la funzione zoom per l’utente
  • minimum-scale: lo zoom minimo che l’utente può raggiungere
  • maximum-scale: lo zoom massimo che l’utente può raggiungere
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0,minimum-scale=0.25, maximum-scale=2.5">

Tali proprietà, come detto, modificano il comportamento del browser mobile. Attenzione però ad utilizzare e impostare il metatag viewport solo quando un sito è effettivamente ottimizzato per smartphone e tablet. Se non lo fosse, le pagine web saranno visualizzate nel modo errato, costringendo l’utente ad utilizzare lo scorrimento orizzontale.

Oggi posso contare su oltre 8 anni di esperienza e una conoscenza a 360 gradi del mondo del digital marketing. Questo fa di me un professionista versatile, in grado di creare strategie complesse che comprendono tutti gli aspetti del web marketing e credibile quando si tratta di indirizzare decisioni aziendali in merito agli investimenti online.

Restiamo in contatto!