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.

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.

Ma… il vostro sito è responsive? 😉
Sì,il mio sito è responsive!! Io però sapevo che le media queries vanno inserite direttamente nel CSS principale, non in un file apposito.
Bravo 🙂
Anche l’approccio di inserire le media queries nel css principale è corretto.
Il mio consiglio, soprattutto per i neofiti, è di separare i file utilizzando un css per il responsive, per individuare a colpo d’occhio dove fare le modifiche, senza perdersi in migliaia di righe di codice.
Alla fine il css è come un vestito. C’è a chi piace l’abito lungo e a chi piace lo spezzato 🙂
Bellissimo post, davvero molto utile! Lo aggiungo subito fra i preferiti, thanks!
Grazie a te per essere passata da queste parti e felice di esserti stata utile. 🙂
Salve
Aiuto….Non ho ancora capito dove diamine devo copiare il codice per rendere il mio sito responsive.
nel foglio style.css ? ma dove ?
grazie 1000 per l’aiuto
Ciao Federico, per rendere il tuo sito responsive puoi fare in due modi, come spiegato nell’articolo:
1) copi il codice nel file style.css o comunque nel tuo css principale
2) crei un altro file, ad esempio responsive.css, che dovrai linkare nella head e in cui copierai il codice.
Tutto chiaro?
🙂 Buona giornata