Ricordo ancora quando, prima di iniziare un nuovo progetto, pensavo a quale risoluzione avrei dovuto tenere in considerazione per il mio design: 800? 900? 1000? La risposta di solito era “dipende”: dall’estro, dalle esigenze del cliente, dal tipo di progetto.
Per molto tempo è sembrato che il numero magico fosse “960”: una larghezza intermedia ottimizzata per monitor con risoluzione a 1024×768 pixel e che si prestava molto bene ad essere suddivisa in griglie da 12, 16 e 24 colonne.
Con il passare del tempo però tutte queste larghezze fisse sono diventate obsolete: siamo nell’era dei dispositivi portatili (telefoni cellulari, tablet, net-pc) e per questo non possiamo più ragionare a dimensioni standard.
Se ci pensate bene abbiamo a che fare con monitor che vanno da 320 pixel fino ad oltre 1920 pixel e una percentuale altissima di device mobili che accedono al web ogni giorno (parliamo di cifre 4 volte superiori a quelle di un pc desktop). Se poi prendiamo, ad esempio, iPhone che ha 320 pixel in portrait ma che in landscape ne ha 480, allora è proprio il caso di cambiare l’approccio nella creazione dei nostri design.
Diventate responsive!
Il termine è stato coniato per la prima volta da Ethan Marcotte nel suo articolo “Responsive Web Design” del 2010:
Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them. In short, we need to practice responsive web design.
– Ethan Marcotte
L’idea di fondo è quella di adattare il sito web al dispositivo sul quale lo si visualizza, al fine di fornire un’esperienza unica e disegnata su misura per ogni di tipo di monitor e device.
Sono due i requisiti fondamentali per diventare responsive:
- una griglia (e un layout) fluidi, costruiti con unità di misura relative;
- le media queries.
Il modo di costruire la pagina non cambia, in fondo parliamo sempre di HTML e CSS; cambia radicalmente l’approccio: invece di iniziare a progettare e sviluppare il sito web su un browser desktop si parte dal device più piccolo fino ad arrivare ai monitor più grandi, adattando in maniera proporzionale il layout.
Questo procedimento ha un duplice vantaggio:
- ci costringe a pensare a quali contenuti ha senso mettere nella pagina per evitare che gli utenti che accedono al sito con dispositivi portatili si sorbiscano informazioni inutili;
- possiamo ottimizzare le chiamate a risorse esterne, il markup e le immagini che ogni dispositivo scaricherà.
Date il benvenuto alle media queries!
Il cuore di qualsiasi responsive design sta nelle “media queries” ovvero una o più dichiarazioni che verificano la validità dei requisiti che vengono specificati all’interno di essa.
Esistono un sacco di media queries ma quelle che servono ad un buon design sono quelle che verificano la larghezza minima del display, come ad esempio:
@media only screen and (min-width: 480px) {
[role="banner"] {
float: right;
width: 25%;
}
}
Grazie alle media queries possiamo quindi fornire delle regole CSS mirate, adattando il nostro layout (e perchè no, anche la tipografia) ai diversi tipi di display, come nel seguente esempio:
@media only screen and (min-width: 768px) {
.content {
width: 100%;
font-size: 1.4rem;
}
}
@media only screen and (min-width: 992px) {
.content {
width: 75%;
float: left;
font-size: 1.6rem;
}
}
Perchè dovrei diventare responsive?
Si parla spesso di come guadagnare su internet ma si parla poco di come migliorare il proprio sito affinchè i nostri contenuti siano visibili su quanti più dispositivi possibile.
Lo scopo di qualsiasi sito web è la visibilità e precludersi il traffico che deriva dalle periferiche portatili è un suicidio: rendere meglio fruibili i contenuti del vostro sito web per chi ha un monitor piccolo (o grandissimo) è un accorgimento che vi può far guadagnare centinaia di utenti in più.
Alcuni di voi penseranno che costruire un sito con questa tecnica costringa ad aumentare i tempi di sviluppo. Mi dispiace per voi, ma purtroppo avete pensato male.
Approcciandovi al progetto con in mente la filosofia “mobile first” i tempi di progettazione sono gli stessi, se non addirittura inferiori, perchè si creerà un workflow lineare e costante, garantendovi la massima elasticità anche in fase di modifica e correzione dei bug.
Esiste un solo web
Molto spesso si sente parlare di “siti web mobile”. Lasciate che vi sveli un segreto: non esiste alcun web mobile: il web è uno solo.
Creare siti ad-hoc per telefoni cellulari è come creare automobili diverse a seconda dell’altezza di chi le guida: che senso ha quando è possibile equipaggiare dei sedili adattabili e creare così un prodotto unico che accontenti tutti?
Ormai non siamo più nella condizione di poter scegliere se supportare o meno i dispositivi portatili: siamo arrivati al punto che la creazione di design responsive sia un requisito fondamentale e necessario per creare siti web unici, di successo e che non trascurino alcun tipo di utenza. E tu che ne dici? Il tuo sito è abbastanza responsive?
