Cominciamo ad addentrarci un po' più nello specifico con il Responsive Web Design, realizzando un semplicissimo layout a colonna singola e che si adatti a tutte le dimensioni del tipo di media dal quale verrà richiamatoa.
Quando scrivo di adattamento, mi riferisco al fatto che non appaia la barra di scroll orizzontale nella parte inferiore della pagina. Il primo riscontro lo abbiamo restringendo ed allargando la finestra del browser. Se non appare, è già un buon primo passo.
Il nostro layout conterrà, al suo interno, una header nella quale inserire il logo, un corpo centrale per i contenuti, il footer. Impostazione "classica" di una pagina web.
Il meta tag viewport
Se volessimo visualizzare un qualsiasi sito web, non responsive, attraverso un media diverso dal desktop, lo vedremmo senza nessun problema. Sarebbe presto evidente, però, che tutto il sito verrebbe "compresso" nella videata del cellulare, del palmare o del tablet. Immaginiamo una dimensione di 960 pixel in uno schermo di 480 pixel. Difficile da navigare. Perderemmo molto tempo ad ingrandire il menu per spostarci nelle altre pagine. Rimpicciolire per far adattare il tutto. Scrollare da destra a sinistra per leggere i contenuti. Non credo sarebbe il massimo dell'usabilità. Il browser web non fa altro che adattare automaticamente le dimensioni della pagina alla sua area di visualizzazione (viewport) affinchè tutti i contenuti vengano visualizzati. In questo modo, però, abbiamo la "versione desktop" in miniatura.
Nel momento in cui si decide di voler adattare in maniera "responsive" un sito ai diversi tipi di media, è importantissimo controllare il meccanismo che regola il funzionamento del viewport.
Spesso si tende a confondere la risoluzione dello schermo con la sua dimensione, e viceversa. Sono due cose completamente differenti. Fatta questa piccola precisazione, possiamo procedere.
Come funziona il meta tag viewport
Quando realizziamo un sito web responsive, è d'obbligo inserire tra i tag <head> e </head> della pagina, il meta tag viewport. Così facendo, chiediamo al browser il modo in cui deve gestire il viewport. Siamo noi a controllare come deve essere gestita la pagina e non il browser. Il codice è il seguente:
<meta name="viewport" content="width=device-width">
Stiamo dando istruzioni al browser di impostare la larghezza (width) del viewport in base alla larghezza dello schermo del dispositivo (device-width).
Le altre impostazioni del meta tag viewport sono:
user-scalable=no
consentiamo o meno all’utente di far ridimensionare e/o zoomare la pagina.
initial-scale=1.0
si riferisce allo zoom iniziale, relativo al momento in cui la pagina viene caricata.
minimum-scale=1.0 | maximum-scale=1.0
servono a far ingrandire/rimpicciolire, e fino a che punto, le pagine all'utente. Va da se' che se impostiamo user-scalable=no, non avrebbe senso introdurre minimum-scale=1.0 e maximum-scale=1.0.
Il markup HTML
Il codice html per il layout in oggetto è davvero molto semplice. Di seguito il markup:
<div class="container"> <div class="header">Logo Sito</div> <div class="content"> ....... </div> <div class="footer">...</div> </div>
Il codice CSS
Dovendo adattare il nostro layout a diversi tipi di device, non dovremmo impostare nessuna larghezza fissa, al di sotto di una determinata dimensione. L'unica misura in px, al massimo, verrà impostata al di sopra dei 1024px. A livello generale, vale a dire per tutti i device, abbiamo:
.container {
margin-left:auto;
margin-right:auto;
padding: 0 .6em;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-o-border-radius:4px;
}
Le Media Queries per il container
@media screen and (max-width:767px){
.container {width:80%;}
}
@media screen and (min-width:768px) and (max-width:1023px){
.container {width:85%;}
}
Per solo scopo dimostrativo, ho deciso dimensioni a piacere. Nella dichiarazione CSS appena scritta, stabilisco che il nostro div.container deve avere larghezza in percentuale fino ad un viewport di 1023px.
@media screen and (min-width:1024px){
.container {max-width:980px;}
}
Nell'ultima dichiarazione, riportata qui su, assegno una dimensione fissa, perchè nella versione desktop voglio avere il controllo del layout, anzichè affidarmi solo alla larghezza in percentuale.
Di seguito il layout responsive a colonna unica che si adatta a qualsiasi dimensione di viewport, grazie alle mediaqueries associate ai breakpoints.