Abbiamo visto nella lezione precedente come sia complesso districarsi fra i diversi device e browser. Come facciamo quindi a progettare un design specifico per il mobile? Progettiamo un layout a 960px, 640x480, 320x480...prendiamo come riferimento lo schermo di un iPad...o di un Lumia?
Ci spiega come fare Ethan Marcotte, autore di un famoso articolo su A List Apart del 6 Luglio 2010, che ha gettato le basi di un nuovo modo di fare Web Design: il Responsive Web Design (RWD).
Responsive in italiano vuol dire "adattativo" o "di risposta". Marcotte sostiene che attraverso l'uso di CSS3 Media Queries sia possibile adattare il layout di presentazione di un sito web in base alla larghezza dello schermo in uso.
Tecnicamente, attraverso semplici direttive CSS, è possibile intercettare varie larghezze di una viewport (la finestra del browser) e specificare la formattazione dei contenuti più congeniale.
Scopri di piùleggi Guida Responsive Web Design
Esempi
Se per esempio un layout a 2 colonne funziona bene su un computer desktop ma non su uno smarthphone di medie dimensioni, nel codice CSS si può scrivere:
@media screen and (max-width: 1024) {
.colonna1,
.colonna2 {
width: 50%;
}
.colonna1 {
float: left;
}
.colonna2 {
float: right;
}
}
@media screen and (max-width: 480) {
.colonna1,
.colonna2 {
width: 100%;
float: none
}
}La prima dichiarazione viene letta da tutte le viewport fino ad un massimo di 1024px e crea una formattazione della pagina a 2 colonne affiancate.
La seconda invece, fai in modo che dai 480px in giù le 2 colonne abbiano una larghezza pari al 100% della viewport e non si affianchino in nessun modo. Un layout ad 1 sola colonna quindi. Semplice no?
Possiamo creare quante dichiarazioni vogliamo e controllare il layout a piacimento:
Oltre i 1200px vogliamo che i paragrafi siano grandi il doppio?
@media screen and (min-width: 1200) {
p {
font-size: 200%;
}
}Oppure, abbiamo bisogno che in uno schermo molto piccolo il logo non sia allineato a sinistra ma al centro?
@media screen and (min-width: 320) {
.logo {
float: none;
margin: 0 auto;
}
}Ethan Marcotte, nel suo articolo ci spiega che la ricetta del Responsive Web Design è però completa solo quando si riescono a mescolare 3 tecniche CSS:
- Media Queries
- Griglie Fluide
- Immagini flessibili
Solo in questo modo, non avremo più bisogno di creare un sito per un schermo specifico (un iPhone? un iPad? Nessuno dei 2?) e lasciare indietro tutti gli altri. I nostri siti funzioneranno quasi dappertutto e anche i computer desktop collegati a grandi schermi widescreen ne gioveranno.