Il termine viewport diventa sempre più importante nel web moderno. Questo perché non esistono più misure standard ma piuttosto vediamo giorno dopo giorno nascere nuove dimensioni e risoluzioni. Conoscere le unità di misura che ti permettono di gestire al meglio queste situazioni è essenziale per il tuo lavoro e in questo articolo voglio aiutarti a comprenderle al meglio.
Per prima cosa cerchiamo di capire da dove deriva questo problema, il web è in continua trasformazione e deve soddisfare le dimensioni e le risoluzioni degli schermi che sono incaricati di visualizzarlo.
In questo articolo facciamo molto riferimento al termine viewport. Se hai alcuni dubbi a riguardo ti consiglio di leggerti il nostro precedente articolo dove inoltre scoprirai un interessante elemento HTML che ti sarà utile per creare siti web responsive.
Partiamo dagli schermi di pochi pollici di uno smartphone (anche se con un’alta densità di pixel) per poi arrivare ai mega schermi che sono in grado di rappresentare 4.000 pixel sul lato orizzontale (in alcuni casi anche 5.000). Questo significa avere un sacco di spazio a propria disposizione!
Ma come possiamo fare per gestirlo al meglio?
Questa è una domanda che più e più volte mi è balenata in mente perché tutto quello che dobbiamo riuscire a fare noi sviluppatori è rendere questo media, il web, una fonte di informazioni accessibile a chiunque e con qualsiasi dispositivo.
All’interno del corso dedicato al Responsive Web Design ti ho presentato una nuova unità di misura che ci è molto utile quando lavoriamo con il responsive: la rem.
Se non la conosci nessun problema, cercherò di spiegarti brevemente quali sono le peculiarità più interessanti dicendoti immediatamente che si tratta di un tipo di unità di misura relativa. A differenza delle percentuali, che sono sempre unità di misura relative che prendono come riferimento le dimensioni del proprio contenitore, i rem sono relativi alla grandezza del carattere m definito all’interno dell’elemento radice: il classico <html>.
Questo consente al nostro layout e a tutti gli elmenti che sono stati definiti con questa unità di misura di trasformarsi in base allo zoom che il nostro visitatore ha fatto sulla pagina. Grazie a questa tecnica ci assicuriamo la realizzazione di un template responsive che non considera soltanto il numero di pixel che lo schermo è in grado di rappresentare ma che è in grado di soddisfare le reali necessità del visitatore applicando le logiche di un design strutturato con il Content First.
La logica Content First per la realizzazione di siti web responsive è trattata con estrema cura all’interno del nostro corso ed è praticamente quella tecnica che ci permette di trasformare il layout sia in base alla quantità di pixel che uno schermo è in grado di rappresentare sia al livello di zoom che il visitatore desidera utilizzare per consultare il contenuto della pagina. Praticamente se il visitatore clicca Ctrl + svariate volte, non vedrà soltanto il testo ingrandire, ma anche il layout si trasformerà per consentirgli una miglior esperienza utente. Una cosa impensabile per siti responsive basati sul pixel.
Forse mi sono un po’ perso nella descrizione della logica Content First perché, anche se è una tecnica incredibilmente importante per la realizzazione di un web moderno, non è l’argomento che voglio trattare oggi.
Quello che mi ha spinto a creare questo articolo è la volontà di presentarti delle unità di misure che ci permetteranno di conoscere le dimensioni dello schermo e di adattare le misure dei nostri elementi di conseguenza. Nelle prossime sezioni ti presenterò le caratteristiche più interessanti e ti mostrerò alcuni esempi che ti permetteranno di capire quali siano le situazioni migliori per utilizzare queste unità di misura.
Perché una nuova unità di misura? Non bastavano le percentuali?
Cerchiamo di capire al meglio la natura di queste unità di misura rispondendo a una domanda che mi è balenata in mente la prima volta che ne sono venuto a conoscenza.
In molte definizioni, compresa quella presente all’interno della specifica W3C, queste unità di misura vengono definite come pari all’1% della dimensione della viewport, il nostro elemenot <html> come specificato prima. A partire da questa definizione mi sono subito incuriosito perché, in fin dei conti, se sono pari all’1% perché mai dovrei utilizzare queste nuove unità di misura rispetto alle percentuali?
Se sei stato attento precedentemente ti sarai accorto che ho già risposto a questa domanda, praticamente perché le percentuali non fanno riferimento al contenitore principale ma pittosto al contenitore dell’elemento che stiamo modificando con questa unità di misura, ovvero alla viewport.
Questo significa che se io ho un div largo 600px e al suo interno ho posizionato un paragrafo per il quale ho definito una larghezza del 50% questo paragrafo misurerà esattamente 300px. Cosa molto diversa succede se lo stesso paragrafo viene definito con le unità di misura relative al viewport.
Non mi credi? Osserva il seguente esempio:
Come puoi notare tu stesso i due paragrafi hanno misure differenti e quello che potrai trovare ancora più interessante è scoprire che, aprendo l’esempio in una finestra separata e ridimensionando la stessa finestra che contiene l’esempio non farai altro che ridimensionare la grandezza del paragrafo arancione mentre quello contenuto nel box azzurro resterà fisso perché anche se la sua larghezza è impostato al 50% è sempre relativo alla dimensione fissa del suo contenitore.
Con questo semplice esempio spero di averti fatto capire come funziona veramente questa nuova unità di misura e perché ritengo così importante che tu la conosca. Già ma come si dichiarano queste unità di misura?
Tutte le unità di misura relative al viewport
Se hai controllato il codice presente nell’esempio precedente hai già osservato una di queste unità all’opera.
Tagliando la testa al toro ecco l’elenco di queste unità di misura e il loro significato:
vw– con questa abbreviazione si identifica la viewport width che, traducendo dall’inglese, ci permette di conoscere la larghezza dello schermo.100vwrappresenta l’intera larghezza dello schermo.vh– se quella di prima definiva la larghezza, con questa unità di misura possiamo conoscere l’altezza del nostro schermo ovvero la viewport height.vmin– questa è un’unità di misura incredibilmente interessante perché al posto di rappresentare 1/100 della larghezza o dell’altezza della viewport il suo valore è relativo alla direzione minore.vmax– molto simile al concetto dell’unità appena descritta, in questo caso non prendiamo il valore della direzione minore ma di quella maggiore.
Per quanto riguarda queste ultime due, vmin e vmax, il concetto è ancora più interessante perché non rappresenteranno 1/100 della dimensione rilevata per larghezza o altezza ma andranno a prendere in automatico il valore per il lato più grande (nel caso di vmax) o del lato più piccolo (nel caso di vmin).
Avere a disposizione queste unità di misura è una cosa incredibilmente interessante perché se abbiamo la necessità di creare un elemento che sia esattamente il 50% delle dimensioni dello schermo non dobbiamo fare altro che scrivere una regola del genere:
#box{
width: 50vw;
height: 50vh;
}Niente di più semplice, vero?
La cosa più bella è che bastano queste due regole e abbiamo creato un elemento che si adatta automaticamente alle dimensioni della nostra viewport, non abbiamo bisogno di media query o JavaScript. Tutto funziona tranquillamente in qualsiasi browser moderno. Come c’è da aspettarsi abbiamo sempre il classimo Internet Explorer (e il nuovo Edge) che non funzionano bene con queste unità di misura…
Se ancora non vedi l’utilità di poter utilizzare queste unità di misura ecco di seguito qualche esempio che spero ti possa aiutare a tenerle in considerazione.
Centrare un elemento nello schermo
Da sempre il desiderio di molti designer e developer è quello di poter posizionare un elemento al centro di uno schermo, con Flexbox siamo in grado di risolvere facilmente questo problema perché il posizionamento dell’elemento è veramente un gioco da ragazzi. Tutto quello che dobbiamo fare è impostare il contenitore per posizionare i suoi elementi centralmente in questo modo:
#container{
display: flex;
justify-content: center;
align-items: center;
}Con le proprietà justify-content e align-items possiamo dire che gli elementi contenuti al suo interno devono essere centrati per entrambi gli assi, ma uno dei primi problemi che sorge è dovuto all’altezza del nostro contenitore che si adatterà al contenuto presente al suo interno. In tutto questo però c’è un problema…
Se proviamo a impostare l’altezza del contenitore al 100% non succede assolutamente niente! Come fare per risolvere questo primo rompicapo?
La soluzione è molto semplice e basta fare affidamento alle unità di misura che abbiamo appena scoperto. Tutto quello che ci è richiesto di fare è impostare l’altezza al 100% della viewport, ovvero a 100vh.
#container{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}Con questa singola proprietà siamo stati in grado di dire ai nostri browser che il contenitore dovrà essere alto quanto la finestra che lo ospita, ora tutto quello che resta da fare è inserire al centro tutti gli elementi che vogliamo mostrare al nostro utente.
Se visualizzi questo esempio all’interno di questo articolo, noterai che il box contenente il titolo e la CTA è centrato, ti consiglio però di visualizzare allo stesso tempo l’esempio nella finestra dedicata che ti permetterà di ridimensionare le sue dimensioni e vedere come questo possa adattarsi alle dimensioni della stessa.
Tutto questo è stato possibile grazie all’uso di Flexbox e sfruttando le unità di misura che prende come punto di riferimento la viewport, infatti la cosa più interessante di tutte è la possibilità di impostare l’altezza del contenitore alla stessa altezza della viewport.
A oggi quindi, creare dei siti web con le hero image non richiede più l’utilizzo di linguaggi come JavaScript che misuravano la dimensione in pixel del viewport, possiamo lasciare questo calcolo ai nostri browser senza dover utilizzare altre soluzioni.
Se non ti ricordi il significato di hero image (o section), diciamo brevemente che è una soluzione che viene applicata molto negli ultimi tempi nella creazione di siti web. Essenzialmente sono tutte quelle immagini che occupano l’intera grandezza dello schermo e che presentano al suo interno un titolo e, come nell’esempio precedente, una call to action.
Così facendo sei stato in grado di creare un elemento e di centrarlo nello schermo esclusivamente con del codice CSS, tutto quello che è servito è stato impostare l’altezza del nostro contenitore a 100vh. Però c’è un altro effetto che voglio presentarti…
Tipografia dinamica grazie alle vw e vh
Per il momento abbiamo visto come utilizzare queste unità di misura in relazione alle dimensioni che può avere un oggetto. È sicuramente una funzionalità molto interessante dato che ci permette di creare degli elementi che si adattano alle dimensioni della finestra in modo del tutto automatico.
Però sapevi che la stessa cosa è possibile farla anche con i font che utilizzi?
Diversi anni fa è comparso questo articolo sul grande blog CSS Tricks, un sito all’interno del quale HTML, CSS e JavaScript la fanno da padroni. Già nel 2012, si parlava di queste unità di misura e anche se a quei tempi eravamo costretti a utilizzare librerie JavaScript come FitText (per questioni di compatibilità), al giorno d’oggi possiamo tranquillamente impostare la grandezza dei nostri caratteri utilizzando la larghezza del viewport come punto di riferimento.
h1 {
font-size: 5.9vw;
}Nel corso dedicato allo sviluppo di siti web responsive ti ho spiegato quanto sia importante l’uso di unità di misura rem che ci permette di modificare al meglio il layout del sito web, ma se stai sviluppando un layout mono colonna che guida il visitatore a un flusso verticale nella consultazione dei contenuti, ti consiglio di utilizzare le unità di misura descritte in questo articolo.
In questo modo potrai facilmente ridimensionare i tuoi testi in base alla dimensione dello schermo che ha caricato la pagina. Questo è il modo migliore per poter far ridimensionare il testo all’interno di qualsiasi schermo, ma al tempo stesso è bene saper usare le unità di misura nel momento migliore.
Se vuoi un consiglio personale, io utilizzo le unità di misura vw e vh principalmente sulle homepage e le landing page nelle quali mi devo assicurare che il copy utilizzato abbia la capacità di seguire lo stesso flusso per il quale è stato studiato, mentre quando si tratta di una pagina articolo cerco sempre di utilizzare il rem (magari modificandolo con delle media query) in modo da non far modificare troppo la dimensione del carattere con il quale è stato studiata la disposizione del testo.
Conclusioni
Abbiamo concluso questo semplice argomento, in fin dei conti in questo articolo abbiamo parlato di nuove unità di misura che possono essere utilizzate all’interno del nostro lavoro per la realizzazione di elementi che si adattino allo schermo e per la creazione di siti web responsibve migliori.
Sono unità di misura incredibilmente interessanti perché, come hai già scoperto si adattano automaticamente alle dimensioni del viewport e questo permette di creare elementi che si adattano da sole creando dei siti veramente responsive.
Se unisci le possibilità offerte nelle dimensioni degli elementi alla grandezza dei font capisci da solo che sta diventando sempre più semplice creare siti web responsive che possono essere consultati da qualsiasi dispositivo in circolazione.
Ti invito a riflettere su queste nuove potenzialità e su come potrai applicarle al tuo lavoro perché assieme alle Grid CSS lo sviluppo di siti web sta cambiano e permette di realizzare delle cose mai viste prima! Anche l’accesso web con i dispositivi mobili è in costante crescita, raggiungendo in quest’anno il 52.7%, c’è anche da dire che creare un unico sito web accessibile da tutti i dispositivi è una cosa sempre più importante che i tuoi clienti continueranno a chiedere!
Se l’articolo ti è piaciuto, ti chiedo la gentilezza di condividerlo e farlo conoscere a più persone possibili, soltanto in questo modo potremmo aiutare sempre più persone a utilizzare e creare il web in modo più consapevole!
Lascia un commento