Nei primi anni in cui si sviluppavano siti web responsive, l’unico problema che veniva spesso messo in luce era l’adattabilità di un layout. Creare un sito a più colonne era diventata una necessità, i contenuti richiedevano nuovi spazi per essere raccolti e organizzati.
Eppure il più delle volte l’unico test che veniva effettuato era stringere e allargare la finestra del browser. Se il layout era in grado di ridimensionarsi allora era tutto a posto.
Purtroppo non è affatto così, bastava aprire lo stesso sito web all’interno di un dispositivo mobile (tablet o smartphone che sia) per trovarlo orribilmente ridimensionato con testi piccolissimi e l’impossibilità di navigare le nostre pagine.
Con questa immagine spero di averti fatto ricordare qualcosa, senza l’utilizzo del meta tag viewport che scopriremo in questo articolo, qualsiasi sito web con un layout in percentuale si sarebbe trasformato in un minuscolo francobollo.
È vero, molto probabilmente questa è una complicazione che si nota sempre meno spesso perché le risoluzioni dei nostri dispositivi sono cresciute parecchio; ma allo stesso modo ritengo che sia un aspetto importante per la creazione del tuo sito privo di errori.
Quindi un po’ per limitare alcune incongruenze e un po’ per permettere agli utenti di vecchi device di poter consultare tranquillamente il web, in questo articolo parleremo proprio delle caratteristiche del viewport.
Ma insomma, quale sarebbe il problema?
Può darsi che l’esempio precedente non sia stato abbastanza chiaro ed è per questo motivo che ti ho preparato qualche altra immagine 
Quello che vedi qua sopra è un semplicissimo esempio all’interno del quale il titolo cambia colore e dimensione a seconda della larghezza della finestra nella quale ci troviamo. Come ti mostro, se testiamo questo codice in un browser qualsiasi tutto funziona correttamente. Basta stringere la finestra del nostro browser e il gioco è fatto.
L’effetto precedente viene realizzato grazie a questo pizzico di codice CSS:
body { font-size: 1em; line-height: 1.5;}h1 { font-size: 2em; line-height: 1; letter-spacing: -0.05em; color: #252424; font-family: Helvetica, Arial, sans-serif;}@media only screen and (min-width: 35em) { body { font-size: 1.5em; } h1 { font-size: 3em; color: #ff333e; } }Come puoi notare tu stesso, una volta che la larghezza del browser raggiungerà i 35em questo andrà a leggere le regole dichiarate all’interno della media query e cambierà le dimensioni e il colore del nostro titolo.
Se hai qualche problema a capire questa sintassi ti invito a consultare il corso Buone pratiche e soluzioni per il Responsive Web Design dove andiamo ad analizzare da vicino la sintassi e la struttura delle media query e altre caratteristiche interessanti di un approccio dedicato al responsive design.
Torniamo però al nostro esempio, tutto sembra filare liscio visto che riducendo la larghezza della finestra il testo si adatta e rende più facile la sua lettura; poi però abbiamo l’opportunità di testare il nostro codice all’interno di un iPhone ed ecco il risultato:
Un semplice esperimento ci mostra un errore bello e buono!
Praticamente quello che stiamo osservando è la versione rimpicciolita del nostro stesso sito e questo è un comportamento standard di iOS Safari che comprendendo che il sito è più largo dei pixel che ha a disposizione non farà altro che rimpicciolire il tutto rendendo il testo quasi impossibile da leggere.
Perché succede tutto questo?
Semplicemente perché non istruendo il browser che si trova all’interno dei nostri smartphone, questo dovrà assumere che il nostro desiderio è quello di avere la stessa esperienza che potremmo avere sul desktop e in base a questo cercherà di far vedere tutto il sito all’interno della sua finestra piuttosto che soltanto la parte alta.
Tutto questo succede perché non è stata impostata alcuna viewport che istruisca il browser e lasciamo a lui la scelta da prendere.
Come il viewport risolve la questione
L’unica soluzione a questo problema è quella di utilizzare un meta tag rilasciato dalla Apple che pian piano è stato sempre più utilizzato all’interno del codice di noi sviluppatori.
Prima di proseguire vorrei farti capire che questo non è un tag standard nel senso lato, perché la W3C non ha mai approvato ufficialmente la sua presenza, ma al tempo stesso non abbiamo altre soluzioni per istruire i nostri browser ed è bene utilizzare gli elementi e le regole che migliorano l’esperienza dei nostri utenti.
Quindi la sintassi di questo nuovo elemento è:
<meta name="viewport" content="">Come accade spesso all’interno dei tag <meta> con l’attributo name andiamo a richiamare il tipo di tag di cui abbiamo bisogno mentre è proprio all’interno del content che accade la magia!
Questo elemento ha veramente molti valori che potrai utilizzare in content separandoli con una virgola; ma in questo articolo ci impegneremo soltanto sui più comuni e che hanno dimostrato la loro maggior utilità.
Abbiamo detto precedentemente che il problema è dovuto dal fatto che il nostro device sta cercando di farci avere l’intera esperienza utente desktop senza però capire che il sito web è stato ottimizzato anche per le risoluzioni più basse, come la sua.
Questo è un problema del browser che deve essere istruito.
Diciamo quindi che conosciamo la larghezza del nostro device che è pari a 320px, non ci resta altro che comunicarlo al browser nel seguente modo:
<meta name="viewport" content="width=320">Allo stesso tempo specificando una misura in pixel saremmo costretti a cambiare il suo valore, magari dinamicamente, a seconda del device e della larghezza del viewport utilizzato. Ecco perché per i layout responsive è molto meglio utlizzare un’unità di misura variabile come la seguente:
<meta name="viewport" content="width=device-width">Utilizzare quindi la larghezza del nostro viewport a quella del device stesso (device-width) ci rende tutto molto più semplice dato che il browser andrà a sostituire automaticamente questo valore con la larghezza della propria finestra.
Se però vogliamo essere certi al 100% che il nostro codice funzioni correttamente dobbiamo scoprire un altro paio di valori.
Questo perché per prima cosa, nonostante che abbiamo dichiarato la larghezza desiderata del nostro viewport può darsi che il browser cerchi ancora di zoomare (in o out) il nostro sito web per farlo visualizzare meglio all’interno degli schermi dei nostri device.
La soluzione più semplice che possiamo applicare è dichiarare al browser che noi vogliamo un rapporto 1:1 con il lavoro svolto e che lui non deve preoccuparsi di nient’altro. Per fare questo possiamo utilizzare tranquillamente la seguente regola:
<meta name="viewport" content="initial-scale=1">Adesso che abbiamo sistemato il nostro browser potremmo anche decidere di impedire completamente lo zoom, anche da parte del nostro utente. Per farlo, basta impostare un altro valore:
<meta name="viewport" content="maximum-scale=1">Impostando quindi maximum-scale a 1 ci assicuriamo che anche i nostri utenti non potranno zoommare nella pagina e che il nostro bel layout venga consultato come lo abbiamo creato.
Ma quando si progetta per il web bisogna sempre stare attenti a non rendere inaccessibile il nostro sito. Con la regola precedente stiamo imponendo un limite bello e buono che renderà più difficile per i nostri utenti consultare il contenuto presente all’interno delle pagine.
Pensa sempre due volte prima di inserire quest’ultima proprietà perché dovrai assicurarti che il tuo sito sia completamente consultabile e oltre a questo devi tenere in considerazione il fatto che probabilmente andrai a togliere agli utenti una delle sue funzionalità preferite, lo zoom.
Diciamo quindi che mettendo tutto insieme i concetti che abbiamo visto possiamo creare un tag viewport in grado di far visualizzare correttamente la nostra pagina sia da un punto di vista di dimensioni che di zoom:
<meta name="viewport" content="width=device-width, initial-scale=1">C’è sempre qualche piccola considerazione da fare
Come ormai dovresti sapere, nello sviluppo web c’è sempre qualcosa per la quale dobbiamo stare attenti. Prima tra tutte è il fatto che in alcuni casi se il nostro device viene utilizzato in modo landscape potrebbe succedere che il nostro browser cerchi comunque di zoommare il nostro sito perché andrà ad applicare la nuova larghezza della pagina.
Per risolvere questo problema potremmo utilizzare JavaScript per decidere quale attributo utilizzare, ma la soluzione più semplice è quella di ignorare completamente i valori impostati per la larghezza e inserire soltanto initial-scale=1 in modo da assicurarci che la visione del sito sia quella che ci aspettiamo.
Per quando riguarda la larghezza, questa verrà dedotta in base allo zoom della finestra, ma a meno che tu non incontri dal vivo questo problema ti consiglio di inserire sempre il valore di width in modo da risparmiare calcoli inutili da parte del browser.
Però avevo aperto questa sezione per parlare di qualcos’altro, il mio interesse è rivolto maggiormente verso gli standard.
Ti ho confessato precedentemente che il meta tag viewport non è un tag riconosciuto dal W3C e nonostante il suo grande supporto recentemente IE10 ha deciso di non utilizzarlo.
Il W3C sta lavorando a un nuovo modulo CSS che prende il nome di CSS Device Adaptation che introdurrà, assieme agli altri, la @-rule @viewport grazie alla quale potremmo inserire le nostre impostazioni direttamente all’interno dei nostri fogli di stile grazie a una sintassi simile alla seguente:
@viewport{ zoom: 1.0; width: device-width;}Sicuramente è una soluzione molto più elegante, ma purtroppo il documento è ancora nello stato di Editors Draft e questo significa che dovrà essere discusso ancora per molto tempo.
Come dicevo prima possiamo già utilizzare questa regola per IE10 che, unita alla nuova logica discussa poco fa, potremmo usare per inserire dei valori indipendenti dalla larghezza della finestra del browser.
@-ms-viewport{ width: extend-to-zoom; zoom: 1.0;}Dato che siamo ancora in una fase in cui non è stato ancora definito uno standard vero e proprio abbiamo la necessità di usare questa regola preceduta dal corretto prefix, ma in fin dei conti questo è tutto quello che ci viene chiesto.
Noi continueremo a restare aggiornati sugli sviluppi di questo elemento, ma se tu hai prima di noi qualche considerazione o consiglio da fornire non esitare a farlo all’interno del nostro forum o dei commenti presenti qua sotto!
Conclusioni
Siamo giunti al termine di questo articolo di aggiornamento. Come ti ho ricordato anche prima se hai il desiderio di approfondire questi argomenti puoi farlo all’interno del corso dedicato al responsive web design dove troverai elencate tutte le ultime tecniche utilizzate per creare delle esperienze responsive degne di nota!
Oltre a questo ti ho preparato una piccola sorpresa che sono sicuro apprezzerai.
Lascia un commento