Web Design: l’importanza di chiamarsi… Responsive!

Il web è in costante evoluzione e i dispositivi con i quali oggi vi si accede sono molteplici: dal computer wide screen al notebook, dal tablet allo smartphone.

Le risoluzioni sono differenti, non pensiamo più a siti con larghezze statiche come i vecchi design 800 pixel per 600 pixel o con una larghezza che non superi i 1024 pixel.

Per questo motivo realizzare siti con un design statico non è più possibile ed è nato il bisogno di progettare siti web con un design fluido, che si adatti al dispositivo come l’acqua in un contenitore.

“Content is like Water” Responsive Design – Fonte: Pinterest

Questo principio è alla base del responsive design.

Il responsive design, o design responsivo, nasce da questa esigenza di avere siti leggibili e ottimizzati nella visualizzazione in base al dispositivo da cui si visitano.

Ma come si realizza un sito responsive?

Innanzitutto la base è il css o foglio di stile, nel quale vengono definiti alcuni step che identificano le risoluzioni dei dispositivi: i breakpoint.

Si può agire in varie maniere ma quella che posso suggerirvi è associare due file css al vostro html (o php o asp.net):

• il file style.css nel quale inserirete tutte le classi e identificativi con proprietà e attributi di base dello stile del vostro sito;
• il file responsive.css nel quale inserirete solo le classi e gli identificativi che subiranno variazioni in base al dispositivo.

Il file responsive.css avrà quindi al suo interno tutti i breakpoint necessari alla visualizzazione sui dispositivi, che possiamo indicativamente suddividere con questo criterio:

• smartphone verticale: larghezza massima 320 pixel;
• smartphone orizzontale: larghezza massima 480 pixel;
• smartphone e tablet con misure intermedie: dai 481 pixel ai 767 pixel;
• tablet verticali (ad esempio iPad): dai 768 pixel ai 1023 pixel;
• tablet orizzontali o monitor PC piccoli: dai 1024 pixel ai 1200 pixel;
• monitor wide: dai 1201 pixel a salire.

Questa è una divisione indicativa, sapendo che i modelli di smartphone e tablet sono in crescita e hanno una costante evoluzione e miglioramento delle risoluzioni.

Come inserire i breakpoint nel css per ottenere un responsive design?

Dopo la dichiarazione del file css è bene inserire un commento, inserendo /* all’apertura e */ alla chiusura, nel quale identificate il tipo di css e il tipo di dispositivo per cui state adattando il design. Seguirà la dichiarazione del tipo di supporto @media screen con la definizione delle larghezze minime e massime.

Vediamo come in questo esempio:

/* CSS Responsive Design */
/* smartphone verticale */
 @media screen and (max-width: 320px){
   .my-class{
   }
   #my-id{
   }
 }
 /* smartphone orizzontale*/
 @media screen and (min-width: 321px) and (max-width: 480px){
   .my-class{
   }
   #my-id{
   }
 }
 /* misure intermedie smartphone e tablet */
 @media screen and (min-width: 481px) and (max-width:767px){
   .my-class{
   }
   #my-id{
   }
 }
 /* tablet */
 @media screen and (min-width: 768px) and (max-width:1023px){
   .my-class{
   }
   #my-id{
   }
 }
 /* iPad e monitor piccoli*/
 @media screen and (min-width: 1024px) and (max-width:1200px){
   .my-class{
   }
   #my-id{
   }
 }
 /* monitor wide */
 @media screen and (min-width: 1201px){
   .my-class{
   }
   #my-id{
   }
 }

Si ma una volta realizzato il css, come farete a testarlo?

Si possono utilizzare differenti tecniche:

• utilizzare il browser stesso, ridimensionando la sua larghezza
• utilizzare dei plugin o delle estensioni per web designer, come “Web Developer” per Chrome
• utilizzare dei simulatori, come Responsinator e iPadPeek.
• utilizzare i dispositivi a nostra disposizione

Perchè è importante avere un sito responsive?

Questa infografica lo spiega benissimo:

• attualmente il 25% degli utenti accede a internet da mobile;
• non si ha bisogno di siti mobile dedicati, quindi si ha un solo codice al quale si associa il css responsive e non un numero indefinito di css per ogni dispositivo;
• migliora la SEO ed è caldamente consigliato da Google;
• si prevede che entro la fine del 2014 gli utenti mobile supereranno gli utenti desktop.

Responsive Design Infografica – Fonte: Pinterest

Ma… il vostro sito è responsive? 😉