In questo articolo vedremo come realizzare un layout responsive, formato da tre box il quale, a prima vista, ci dà impressione di una pagina molto leggera e dall' aspetto piacevole. Il risultato finale sarà visualizzabile su qualsiati tipo di media, indipendentemente dalle sue dimensioni.
E' pur vero che siamo abituati a vedere nel web layout molto più complessi di quello presentato in questo articolo, ma potrebbe essere preso come base di partenza per poter arrivare a costruire pagine più "impegnative". Ho pensato a questo layout come ad una presentazione di un'anteprima di un libro, suddiviso in capitoli.
Di seguito una immagine:
Come si può vedere dall'immagine sopra ripostata, i 3 box sono essenzialmente:
- Header
- Contenuti (box di sinistra)
- Box Menu (colonna destra)
Il colore di sfondo dei box, uguale al colore di background della pagina, permette di avere una pagina molto chiara e pulita. Il colore tenue dei bordi, permettono la suddivisione delle aree. Tutta la struttura è stata inserita in un box contenitore; all' interno di questo ce ne sono altri 3: uno per la header, uno per i contenuti ed infine quello destro. Vediamo il codice.
#container {
padding:0;
margin: 10px auto;
}
#header{
padding-top:0;
padding-right: 10px;
padding-bottom:10px;
padding-left:10px;
margin-bottom: 10px;
height:50px;
text-align:left;
border-bottom: 1px solid rgb(213, 219, 225);
}
#content {
padding: 10px;
margin-right: 230px;
text-align:left;
border-right: 1px solid rgb(213, 219, 225);
line-height: 22px;
}
#destra {
float: right;
width: 200px;
margin: 0;
margin-left: 10px;
padding: 10px;
text-align:left;
}
Il container non presenta nessun codice particolare.
La header (testata) ha un bordo inferiore (bottom) il quale viene visualizzato, per la sua leggerezza di colore, quasi come se fosse una linea divisoria con il corpo della pagina. Il #content presenta due elementi importanti: il margin-right ed il border-right. Il motivo per cui è stato dato un margine di 230px è perchè la misura della colonna destra è di 200px; a questi si deve aggiungere la misura del padding dello stesso box #content (sinistro + destro = 10px X 2) in più i 10 pixel di margine tra la colonna destra e quella centrale.
Questo non è altro che il concetto del box model, così come viene interpretato dai diversi browser. L' altra cosa, dicevo, è il bordo destro, con la stessa funzione di quello in alto, cioè che divide il corpo centrale da un ipotetico menu posto sulla destra.
L'esempio finale mostra quanto scritto fino ad ora. Provare ad allargare e restringere la finestra del browser per visualizzare la pagina sia sugli smartphone, su un tablet o monitor del PC.
Rendere il layout Responsive
Come si può vedere, il layout si adatta alle diverse dimensioni dei media. Questo è stato ottenuto grazie alle Media Queries le quali consentono di introdurre delle regole affinchè il tutto si adatti senza perdere il layout. Innanzitutto, nella head dichiarare:
<meta name=viewport content="width=device-width,initial-scale=1,minimum-scale=1" />
Dopo tutto il codice CSS, inserire la direttiva @media:
@media screen and (max-width:767px){
#content, #destra{
width:100%;
float:none;
border-right:none;
}
#destra{
border-bottom:1px solid rgb(213, 219, 225);
}
}
Una variante potrebbe essere quella di avere il menu, su dispositivi quali tablet e smartphone, in orizzontale e centrato. Per ottenere questo tipo di menu, si deve scrivere poco codice CSS, in questo modo:
@media (max-width:767px){
#destra ul{text-align:center;}
#destra ul li{
display:inline-block;
margin-right:20px;
height:40px;
line-height:40px;
font-weight:bold;
}
}
Aggiunto il codice come riportato qui sopra, otteniamo il menu in orizzontale. Potrebbe essere molto comodo nel caso in cui la pagina dovesse contenere molto testo, onde evitare che si allunghi di molto in verticale.
Con queste poche righe di codice, abbiamo dato la possibilità agli utenti di poter usufruire, con qualsiasi device, dei contenuti del nostro sito.