Progettare un layout web responsive a colonna unica con i CSS Media Queries e Breakpoints

Cominciamo ad addentrarci un po' più nello specifico con il Responsive Web Design, realizzando un semplicissimo layout a colonna singola e che si adatti in maniera perfetta a tutte le dimensioni del tipo di media dal quale verrà richiamata la pagina. Quando mi riferisco all'adattamento "perfetto", 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.

Nell'articolo sulla pianificazione dei contenuti e dei diversi tipi di media è stato introdotto un meta tag viewport.

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 codice CSS per il layout

Dovendo adattare il nostro layout a diversi tipi di device, non dovremmo impostare nessuna dimensione, in larghezza, altrimenti potrebbe capitare che in qualche media, di cui non conosciamo le dimensioni, potrebbe essere necessario spostare la colonna verso sinistra per poter leggere il contenuto. Ne consegue che dovremmo giostrare solo sul margine destro e sinistro. L'unico codice che possiamo scrivere, a livello generale, riguardante il div è il seguente:

.container 
{
margin:	    0 auto; 
background: #ccc;
}

Da ora in poi, dobbiamo stabilire quanto margine a destra e sinistra, assegnare al div.

@media screen and (max-width:480px)
{
.container { margin: 0 1em;}
}

A solo titolo dimostrativo, ho deciso dimensioni a piacere. Nella dichiarazione CSS appena scritta, stabilisco che il nostro div deve avere margini, destro e sinistro, pari ad 1em. Impostando la dimensione del font a 16px, equivale, appunto, a 16px da destra e 16px da sinistra.

All'aumentare della dimensione del tipo di media, aumento anche i margini:

@media screen and (min-width: 481px) and (max-width:959px)
{
.container { margin: 0 1.5em; }
}

In ultimo:

@media screen and (min-width: 960px) 
{
.container { width:	920px; }
}

Nell'ultima dichiarazione assegno una dimensione fissa, perchè nella versione desktop voglio avere il controllo del layout, anzichè affidarmi solo ai margini laterali. Il file di esempio mostra il div che si adatta a qualsiasi dimensione di tipo di media, grazie alle Media Queries associate ai Breakpoints.

Conclusioni

Anche se si tratta di un semplicissimo esempio, l'intento vule essere quello di dimostrare l'adattabilità di un layout sulla maggior parte, se non tutti, i tipi di media. Questa potrebbe essere un'ottima base di partenza per la costruzione di un sito web responsive.

© www.extrowebsite.com - Grafica, layout, articoli e guide sono di esclusiva proprietà del webmaster - Tutti i diritti riservati