Responsive Web Design: Pianificazione dei contenuti e dei diversi tipi di media

Nei tanti tutorial che ho avuto modo di leggere in rete, in merito al Responsive Web Design, mi sono imbattuto, come anticipato nell'articolo di apertura, in due termini spessissimo ricorrenti:

Affronteremo nello specifico cosa si intende.

Gestire i contenuti del sito

Se dovessimo realizzare un progetto web, il mio consiglio è quello di dedicare del tempo, prima di cominciare a scrivere codice, alla organizzazione dei contenuti. Cosa vuol dire? Per "contenuti" non mi riferisco al solo testo, bensì agli "oggetti" che dovranno comporre la pagina:

Se si è notato bene, la descrizione appena fatta, potrebbe riguardare un sito con impostazione a 2 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. Niente di più sbagliato. 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...

Cominciare dal 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 devices.

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.

In base ai Breakpoints appena riportati, cerco di chiarire il tutto con una immagine:

breakpoint

  1. 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.
  2. Da 321 pixel fino a 480 pixel, avrò uno sfondo di colore verde.
  3. Da 481 pixel fino a 600 pixel, avrò uno sfondo di colore fuxia.
  4. Da 601 pixel fino a 768 pixel, avrò uno sfondo di colore turchese.
  5. Da 769 pixel fino a 1024 pixel, avrò uno sfondo di colore vinaccia.
  6. Da 1025 pixel fino a 1200 pixel, avrò uno sfondo di colore blu.
  7. Oltre i 1200 pixel, possiamo definire un colore di background a nostro piacimento.

Il concetto di Breakpoints 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. 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:

body 
{
margin:			0;
padding:		0;
background:		#fff;
}

@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 sfondo 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 io, 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.

Conclusioni

Quanto visto nell'articolo, fa intravere enormi possibilità per la realizzazione di siti web responsive. Non resterà che cambiare il modo di "pensare" ed organizzare un sito, proprio grazie alle possibilità che vengono messe a disposizione dai CSS.

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