Responsive web design:

l’utilizzo delle unità vw, vh, vmin e vmax

Come utilizzare le nuove unità di misura per ottimizzare al meglio il proprio sito web.

Facciamo una breve introduzione al responsive web design (in italiano chiamato anche design responsivo).

Cos’è il responsive web design?

Da quando i vari dispositivi mobili (principalmente smartphone e tablet) hanno preso il sopravvento nella nostra vita, noi web designer abbiamo cominciato a sviluppare siti web che fossero sempre più perfettamente adattabili e ottimizzati per la visione su qualsiasi schermo. Questo design “adattabile” o “flessibile” è tecnicamente chiamato responsive web design e sta alla base dell’accessibilità di qualsiasi sito web.

L’importanza di avere un sito web responsive

Oggi se non hai un sito web responsive e quindi non hai un sito perfettamente adattabile a qualsiasi dispositivo mobile, non dico che non sei nessuno, ma più o meno è così. Infatti è statisticamente provato che i siti web responsive adattabili a qualsiasi schermo e quindi fruibili su tutti gli smarphone e tablet di questa terra hanno una maggiore probabilità che l’utente non solo visiti il sito, ma che vi rimanga collegato a navigare tra le pagine. In più Google “premia” a livello SEO i siti mobile-friendly, e questa direi che è la  motivazione per eccellenza di avere un sito web responsive al 100%.

La viewport e le percentuali

Nel web la viewport è quell’area del browser dove ci appaiono i siti web, ovvero l’area bianca al centro della finestra senza la parte in alto del browser e la barra di scorrimento della pagina. Per ottimizzare la viewport di un sito web e renderlo adattabile a tutti gli schermi, come ben saprai, utilizziamo dei valori in percentuale.

Le lunghezze in percentuale della viewport (chiamate viewport-percentage lengths) fanno sì che quando la viewport viene ridimensionata in base alla agli schermi, le dimensioni del sito vengano scalate di conseguenza.
Da notare che le di default nella viewport è compresa la barra di scorrimento laterale, che, nel caso questa non esista, possiamo escluderla impostando tramite Javascript un valore auto al’overflow come nell’esempio qui di seguito:

var element = document.documentElement;
if(element.scrollHeight > element.clientHeight) {
  // Overflow detected; force scroll bar
  element.style.overflow = 'scrollbar';
} else {
  // No overflow detected; prevent scroll bar
  element.style.overflow = 'hidden';
}
Viewport example

Le unità vw, vh, vmin e vmax

Le unità di viewport sono state progettate per affrontare al meglio la sempre più vasta quantità di dispositivi mobili.

Questa serie di unità si suddivide in quattro tipologie: vw, vh, vmin e vmax.

  • vw: è la percentuale della larghezza ed è uguale all’1% della larghezza totale della viewport.
  • vh: è la percentuale dell’altezza ed è uguale all’1% dell’altezza totale della viewport.

Queste due tipologie di unità si riferiscono sempre alla larghezza e all’altezza totale della viewport.

Es. Se la larghezza totale della viewport è 200mm e vogliamo che le misure dell’h1 siano di 16mm possiamo impostare come misura 8vw, ottenuta facendo (8x200mm)/100 = 16
quindi avremo:

h1{
	font-size: 8vw;
}

Le altre due tipologie invece, si riferiscono al massimo e al minimo della larghezza e altezza dichiarate.

  • vmin: uguale al 1% del valore più piccolo della viewport.
  • vmax: è uguale al 1% del valore più grande della viewport.

Es. se il nostro browser è largo 1100px e alto 700px, 1vmin misurerà 7px e 1vmax invece ne misurerà 11px.

Conclusioni:

Utilizzare queste unità di misura per ottimizzare il vostro sito web e renderlo mobile friendly è altamente consigliato. In più si risparmia la fatica di scrivere una misura per ogni tipologia di dispositivo e indubbiamente si risparmiano molte righe di codice.

4

Post Correlati