Il Responsive Web Design è una tecnica del web design per realizzare siti in grado di adattarsi automaticamente e facilmente ai dispositivi dai quali vengono visualizzati (computer con diverse risoluzioni, tablet, smartphone, cellulari), evitando quanto più possibile, all'utente, la necessità di scorrere e ridimensionare le pagine che egli visita per la lettura dei contenuti.
Differenze tra dimensioni fisse e layout adattativo
Come suggerisce il termine stesso, adattativo, sta ad indicare la "propensione" ad adattarsi ad un qualcosa, all'ambiente nel quale si trova. Trasferendo il significato del termine ad una pagina, o sito web, possiamo desumere che lo studio preventivo che deve essere fatto, deve prevedere la fruibilità dei contenuti a partire dalle dimensioni dei tipi di media più piccoli fino ad arrivare al monitor desktop. In un certo senso, si dovrebbe pensare "al contrario" di come è stato fatto fino a qualche anno fa. Un approccio non proprio corretto sarebbe quello di realizzare un sito per desktop e lasciare in ultimo la scrittura di codice per il mobile. Lo trovo, a mio modesto parere, un errore ed uno spreco di tempo enorme. Così facendo, si rischia di buttare tutto e ricominciare da zero.
Gestire i contenuti del sito
Ipotizzando di dover realizzare un sito web responsive, sarebbe bene dedicare tempo alla organizzazione dei contenuti. Cosa vuol dire? Per "contenuti" non mi riferisco al solo testo, bensì agli "oggetti" che dovranno comporre la pagina. Per esempio:
- Header + logo
- Navigazione
- Motore di ricerca interno
- Eventuale Slider Immagini
- Colonna sinistra - solitamente per i contenuti principali
- Colonna destra
- Footer
Una impostazione del genere potrebbe riguardare un layout con due colonne. Se la realizzazione dovesse riguardare solo il desktop, non ci sarebbe nessun problema. Dimensioni fisse, con i pixel, e via. Siccome il nostro obiettivo è quello di raggiungere più tipi di media possibili, (numericamente parlando), una mossa sbagliata, a mio modo di vedere, è quella di realizzare prima il sito web per il monitor del pc e poi "modificarlo" per altre dimensioni di schermo. Secondo la mia esperienza lavorativa in merito, discuto sempre con il cliente facendo notare che una determinata "impostazione" potrebbe dare risultati non proprio soddisfacenti, nel passaggio dal desktop al tablet e da questo allo smartphone. Quindi? Capire cosa è più importante (posizionandolo nella parte superiore della pagina web) e cosa lo è meno (magari contenuti di secondo piano) da mettere in basso. Eventualmente ulteriori contenuti, o un video, ancora più in basso.
Stessa cosa dicasi per la colonna destra, o sinistra. Cosa mettere nella parte superiore. Eventuali banner pubblicitari. Se possono essere "omessi" nelle versioni per mobile ecc...
Pianificare per il mobile
Pensare di dover adattare un sito, dal mobile "in su", per quanto riguarda le dimensioni, dopo aver stabilito la gestione dei contenuti, non è cosa che si fa in pochi minuti. Dovremmo conoscere le dimensione di tutti i tipi di media (soprattutto smartphone) esistenti in circolazione? Impossibile. Per fortuna ci vengono in aiuto siti online, i quali mettono a disposizione risoluzione e dimensioni dei diversi devices.
Cosa sono i Breakpoints
Il dover adattare un sito web alle diverse dimensioni e risoluzioni degli schermi, ha reso necessaria l'introduzione dei Breakpoints, per suddividere in un numero definito le diverse tipologie di layout ed organizzazione dei contenuti, a seconda della dimensione del dispositivo.
Immaginiamo una linea orizzontale, la cui origine è lo 0 (zero). Man mano che si procede con lo scorrere questa linea, ad un "certo punto" accade qualcosa. Cosa? Una modifica al nostro layout, in termini di dimensioni e visualizzazione di elementi. Se in un cellulare con dimensioni ridotte, vedremo il nostro sito con gli oggetti uno sopra l'altro, man mano che si scorre la linea immaginaria, (e di conseguenza si allarga la dimensione dello schermo), appariranno gli altri elementi, fino a raggiungere la massima dimensione (Desktop) nel quale visualizzeremo il sito come sempre lo abbiamo visto.
I Breakpoints vengono espressi, solitamente, in pixel, anche se l'aumento della densità di pixel nei media di ultima generazione fa in modo che non debba essere considerato il viewport solo in termini di risoluzione, senza tener conto della effettiva dimensione.
Mi rendo conto che potrebbe sembrare un concetto abbastanza complicato. Presto verrà chiarito. Vediamo quali sono le dimensioni dei device in circolazione.
- 320 pixel per device con schermi piccoli - con orientamento verticale (portrait)
- 480 pixel per device con schermi piccoli - con orientamento orizzontale (landscape)
- 600 pixel per device - quali i tablet - con orientamento verticale
- 768 pixel tablet da 10 pollici quali Ipad e Samsung - con orientamento verticale
- 1024 pixel per computer da scrivania, laptop, notebook e tablet come l'iPad e Samsung (1024x768) mantenuti con orientamento orizzontale
- 1200 pixel per computer con schermi larghi, desktop ma anche laptop
In base ai Breakpoints appena riportati, cerco di chiarire il tutto con una immagine:
Come si può notare, in base alle dimensioni dei tipi di media, ho realizzato 6 Breakpoints. Partendo da sinistra (0 zero) - ovviamente non esiste un device con dimensione zero - fino a 320 pixel, avrò un determinato colore di sfondo o, nel caso di un sito web, una determinata visualizzazione.
- Da 321 pixel fino a 480 pixel, avrò uno sfondo di colore verde.
- Da 481 pixel fino a 600 pixel, avrò uno sfondo di colore fuxia.
- Da 601 pixel fino a 768 pixel, avrò uno sfondo di colore turchese.
- Da 769 pixel fino a 1024 pixel, avrò uno sfondo di colore vinaccia.
- Da 1025 pixel fino a 1200 pixel, avrò uno sfondo di colore blu.
- Oltre i 1200 pixel, possiamo definire un colore di background a nostro piacimento.
Il concetto di Breakpoints adesso dovrebbe essere più chiaro. Se volessimo trasportare i 6 breakpoint in una pagina web, possiamo farlo tranquillamente, riproducendo gli stessi colori visti in figura. Il file di esempio riporta esattamente quanto riprodotto nell'immagine. Provare ad allargare e stringere la finestra del browser per vedere il cambio di colore man mano che mutano le dimensioni della finestra.
Il codice CSS che ha reso possibile tutto ciò è il seguente:
@media screen and (max-width: 320px){
body {background:#FF8000;}
}
@media screen and (min-width: 321px) and (max-width: 480px){
body {background:#00661A;}
}
@media screen and (min-width: 481px) and (max-width: 600px){
body {background:#D900D9;}
}
@media screen and (min-width: 601px) and (max-width: 768px){
body {background:#00FFFF;}
}
@media screen and (min-width: 769px) and (max-width: 1024px){
body {background:#400040;}
}
@media screen and (min-width: 1025px) and (max-width: 1200px){
body {background:#0000FF;}
}
CSS Media Queries
Se abbiamo avuto il cambio di colore ad ogni diversa dimensione del browser, è perchè sono stati utilizzati i CSS Media Queries. Per esempio:
@media screen and (max-width: 320px){
body {background:#FF8000;}
}
vuol dire che fino ad una dimensione di 320px dello schermo, avrò il colore, per lo sfondo pagina, indicato nella dichiarazione CSS.
@media screen and (min-width: 321px) and (max-width: 480px){
body {background:#00661A;}
}
sta ad indicare che il colore di background pagina assumerà tale colore a partire da uno schermo grande 321px fino a 480px. Da questo si evince che i CSS Media Queries possiamo utilizzarli per qualsiasi elemento nella pagina. Senza nessun problema. Essi sono la base fondamentale del responsive design.
Quanti Breakpoints utilizzare?
Di quanti ne ha bisogno il progetto che vogliamo realizzare. Dipende dalla grafica, dai contenuti che vogliamo presentare nel sito, da quello che deve essere messo in primo piano ecc... La cosa ottimale sarebbe quella di provare il lavoro non come è stato fatto per l'esempio che ho riportato, bensì sui devices veri e propri. Nel nostro caso abbiamo avuto solo un saggio di quello che possono fare i CSS Media Queries, senza un layout, senza immagini, senza testo.