Il tuo sito deve adattarsi allo schermo di ogni dispositivo. Il Responsive Web Design serve a fare proprio questo.
Non hai tempo di leggere tutto? Vai subito ai nostri Esempi di siti web responsive
Cosa troverai in questo articolo:
Cos’è il Responsive Web Design
Il responsive web design (RWD) è un approccio alla progettazione e allo sviluppo dei siti internet che permette di creare pagine web reattive ed adattabili automaticamente alle dimensioni dello schermo del dispositivo da cui vengono visualizzate (computer desktop, smartphone e tablet).
Grazie al responsive web designnascono siti dinamici, multiformi, sempre piacevoli da consultare perché ottimizzati per schermi di ogni forma e dimensione.
Un sito web “responsive” (responsivo) è infatti in grado di trasformare e adattare il proprio layout in base al display da cui viene visualizzato.
Questo aspetto della progettazione di siti web, eCommerce e blog è molto importante perchè permette di offrire una buona esperienza utente. Un sito adattabile non si può ottenere semplicemente riducendo “a scalare” la grandezza dei contenuti: questo è l’esatto contrario di “pensare responsive”.
Una buona esperienza di visualizzazione da tutti i dispositivi
Un sito responsive garantisce una buona esperienza di navigazione in qualsiasi caso e a prescindere dalle dimensioni e proporzioni del device da cui viene raggiunto.
Il responsive design aggiusta la grafica delle pagine web:
- senza peggiorare la qualità visiva;
- riducendo al minimo la necessità di ingrandire manualmente i contenuti da parte dell’utente.
Per garantire leggibilità, quando lo spazio si restringe, i testi andranno a riunirsi in un’unica colonna con caratteri ingranditi per facilitare la lettura dai dispositivi più piccoli. Il menù di navigazione di solito rimane nascosto, posto all’inizio della pagina (di solito dietro l’icona a tre linee, il cosiddetto “menu hamburger”).
Ecco un esempio di design responsive: la home page del nostro sito web nelle diverse versioni, desktop, tablet e smartphone:
Come vedi ci sono differenze tra una versione e l’altra che però non stravolgono la coerenza dello stile ma che rendono il sito sempre ordinato e gradevole,
Vuoi trasformare il tuo sito web in un’esperienza responsive? Contattaci ora!
Responsive web design: modelli ed esempi
Ci sono diversi modi di organizzare una pagina web per garantire adattabilità ad ogni dispositivo.
1. Layout responsive: modelli
I cinque modelli di base sono stati descritti da Luke Wroblewski e restano un riferimento utile da seguire:
- modello “Mostly fluid“
- schema “Column drop“
- Layout “Shifter“
- Modello “Off canvas“
- Modello “Tiny tweaks”
Modello “Mostly fluid”
Si tratta di un layout che aumenta la dimensione dei margini su schermi di grandi dimensioni.
Spesso si usa la griglia fluida (che permette al contenuto di scorrere in senso verticale sugli schermi di dimensioni ridotte), immagini “a scalare” e colonne di testo impilate quando lo spazio si restringe.
⚙️Come funziona: il contenuto si dispone su una griglia che si allarga e si restringe in proporzione alla larghezza dello schermo. Sugli schermi medi le colonne si ridimensionano, su quelli piccoli si impilano una sotto l’altra, mentre su quelli molto grandi il contenuto smette di allargarsi e sono i margini laterali a crescere, così le righe di testo non diventano troppo lunghe da leggere.
Quando conviene: è uno degli schemi più semplici da realizzare e da mantenere, ed è molto usato per blog, siti editoriali e pagine ricche di testo.
Schema “Column drop”
Si tratta di un assetto grafico multi-colonna che “perde” progressivamente colonne quando le dimensioni dello schermo si riducono.
La dimensione degli elementi tende a mantenere coerenza e le colonne si riordinano via via che lo schermo diminuisce la dimensione.
Nel layout per gli schermi più piccoli il contenuto scorre in senso verticale e le colonne sono impilate.
⚙️ Come funziona: si parte dalla versione per smartphone, con una sola colonna, e si individuano i punti (breakpoint) in cui lo spazio a disposizione permette di affiancare un altro blocco. Su un tablet le colonne possono diventare due, su un desktop tre o più; riducendo la finestra, l’ultima colonna “cade” sotto le altre, finché si torna a un’unica colonna. Sugli schermi grandi il layout tende a occupare tutta la larghezza disponibile.
Quando conviene: per pagine con più blocchi di pari importanza, come le schede dei prodotti di un eCommerce, i servizi di un’azienda o le card degli articoli di un blog.
Layout “Shifter”
Questo modello offre massima adattabilità: layout diversi sono usati su schermi grandi, medi e piccoli. Si tratta del modello meno diffuso perché richiede più tempo e impegno di progettazione. Questo tipo di schema responsive offre la massima reattività, ma richiede una gestione dei contenuti più complessa che riadatta ogni elemento in maniera funzionale ai diversi assetti della pagina.
⚙️ Come funziona: invece di limitarsi a riordinare le colonne, questo schema usa molti breakpoint e prevede un’impaginazione studiata apposta per ogni fascia di schermo. Su smartphone e tablet di solito si vede un layout impilato; allargando lo schermo i blocchi vengono spostati, ridimensionati e riorganizzati secondo un piano preciso, per esempio portando una sezione laterale accanto al contenuto principale o cambiando l’ordine di lettura.
📌 Quando conviene: nei siti complessi, in cui i contenuti hanno gerarchie diverse a seconda del dispositivo. Il prezzo è un lavoro di progettazione e di test molto più lungo, che si ripete a ogni modifica dei contenuti.
Modello “Off canvas”
Il contenuto non si riordina verticalmente, ma colloca una parte del contenuto “fuori dallo schermo”.
Questo modello di layout responsive sfrutta, in un certo senso, lo spazio che è fuori dallo schermo per nascondere quello che non entra nella pagina quando lo schermo si riduce. Questo contenuto viene invece reinserito per i display più grandi.
⚙️Come funziona: su schermo piccolo i contenuti secondari, come il menu di navigazione, i filtri di ricerca o una colonna laterale, restano fuori dall’area visibile e compaiono solo quando l’utente li richiama, per esempio toccando l’icona del menu o scorrendo dal bordo dello schermo. Sugli schermi più grandi lo stesso contenuto resta sempre visibile accanto alla parte principale. È lo schema alla base del classico menu “hamburger”.
Un’attenzione importante: i contenuti nascosti devono restare facili da aprire e da chiudere, anche da tastiera e con gli screen reader, altrimenti l’accessibilità del sito ne risente.
Modello “Tiny tweaks”
È il più semplice dei cinque schemi: il layout resta sostanzialmente lo stesso su tutti gli schermi e cambiano solo piccoli dettagli, come la dimensione dei caratteri, dei margini e degli spazi, che crescono o diminuiscono con la larghezza del display. Funziona bene per siti semplici, con una sola colonna di contenuti, e richiede poca manutenzione.
⚙️ Come funziona: non si ridisegna la pagina, ma si regolano alcuni parametri in base alla larghezza dello schermo. Su smartphone i caratteri e gli spazi sono compatti, su tablet e desktop diventano un po’ più grandi e arieggiati, mentre i contenuti restano nello stesso ordine.
Quale modello scegliere?
Nella pratica gli schemi si combinano: un sito può usare una griglia mostly fluid per i contenuti, un menu off canvas per la navigazione e qualche breakpoint in più nelle pagine più complesse. Il grafico qui sotto offre un indicazione di massima per scegliere, caso per caso:
2. Layout responsive: esempi
Ecco alcune immagini per capire come i siti responsive riorganizzano gli elementi del layout per gestire al meglio lo spazio a disposizione.
1. Questo è lo schema di un sito web che possiamo definire non-responsive, predisposto semplicemente per scalare la grandezza dei contenuti, con un layout che praticamente resta identico.
In questo caso può accadere che i testi e le immagini siano rimpiccoliti per rientrare nelle varie dimensioni dello schermo con un effetto che, in alcuni casi, finirà per offrire una pessima leggibilità dei testi e una scarsa godibilità delle immagini.
2. Ecco il layout di un sito web che riorganizza le colonne in senso verticale (column drop), fino ad impilarle tutte nei layout dei dispositivi più piccoli.
3. Infine, un esempio di massima reattività (layout “shifter”), con modifiche funzionali alla gestione di forme e spazi, con evidenti cambiamenti tra una versione e l’altra.
📌Attenzione all’ordine di lettura
Quando i blocchi cambiano posizione, come nei modelli Column drop e Layout shifter, su smartphone l’ordine può cambiare rispetto al desktop. Il layout può sembrare ordinato e funzionare comunque male.
Prendi una scheda prodotto: se le condizioni di spedizione finiscono in fondo alla pagina, lontane dal pulsante “Acquista”, l’utente non le legge prima di decidere. Se invece spiegazione e pulsante restano vicini, capisce cosa sta per fare.
Dopo aver scelto il modello, controlla da smartphone che il contenuto segua un ordine logico, che ogni testo resti vicino all’azione a cui si riferisce e che lo stesso ordine valga per chi usa uno screen reader.
Perché è importante avere un sito web responsive?
Se il tuo sito web non è responsive e mobile friendly non riuscirai ad offrire una buona esperienza alle persone che ti cercano dai dispositivi più piccoli, soprattutto da smartphone. Questo significa perdere la possibilità di sfruttare un mercato vasto e ricco di opportunità.
1. Garantire La responsività del sito web da smartphone
In Italia gli smartphone generano ormai più della metà del traffico web: a settembre 2026 circa il 52% delle visite arrivava da cellulare, il resto da desktop e tablet:
- Smartphone: 51,78%
- Desktop: 46,61%
- Tablet: 1,61%
Questo significa che più di una visita su due parte da un telefono, e che un sito non adatto agli schermi piccoli esclude una fetta enorme di potenziali clienti.
Fonte: https://gs.statcounter.com/platform-market-share/desktop-mobile-tablet/italy
Se il tuo sito non è responsive da cellulare e i contenuti sono poco leggibili dagli schermi più piccoli chi vi atterra girerà i tacchi in un pochi secondi. E difficilmente si prenderà la briga di tornare a visitarlo dal pc.
Non avrai una seconda occasione!
L’esperienza di navigazione che le persone vivono sulle tue pagine web da cellulare ha un grosso peso e incide sul ranking del tuo sito.
Google ragiona in ottica mobile first, dal 2023 il passaggio al mobile-first indexing è ormai completato e tutti i siti web vengono scansionati e indicizzati a partire dalla versione smartphone. Questo significa che Google valuta, prima di tutto, come il tuo sito appare e funziona da cellulare: una versione mobile povera di contenuti, difficile da leggere o poco funzionale, finisce per pesare inevitabilmente sul tuo posizionamento organico , anche per le ricerche da computer. Ma c’è di più: Google continua a considerare l’usabilità da mobile parte dell’esperienza di pagina, insieme a velocità e stabilità del layout.
Tutto quello che piace alle persone, piace anche a Google!
2. Avere più visibilità sui motori di ricerca
Uno studio interessante di Semrush del 2019 condotto su 50.000 parole chiave mostra come
- solo il 13% dei siti web ha la stessa posizione nella ricerca di Google su tutti i dispositivi
- Il 30% dei siti in prima pagina da pc precipita in basso (oltre i primi 10 posti) nella ricerca da mobile:
Lo studio risale a prima del completamento del mobile-first indexing, ma il messaggio resta attuale: la versione mobile di molti siti è più povera di contenuti e informazioni di quella desktop, e questo può costare posizioni.
Perché accade questo? Spesso la versione mobile di un sito contiene meno testi e informazioni di quella desktop, e i risultati sugli smartphone hanno un layout diverso. Inoltre, Google posiziona meglio i siti che offrono una buona esperienza di navigazione dai dispositivi mobili.
Con il mobile-first indexing, inoltre, il motore di ricerca prende come riferimento la versione mobile del sito e con questo dimostra di tenere in grande considerazione le persone che tentano di raggiungerti dal cellulare.
I siti veloci e web responsive offrono un’esperienza migliore e hanno più probabilità di ottenere visibilità sui motori di ricerca.
3. Sfruttare meglio le Campagne Google Ads
Il responsive design non è solo un approccio alla progettazione del sito ma una risorsa che puoi sfruttare a tuo vantaggio nella tua strategia di digital marketing.
Potresti ad esempio pubblicare annunci Google Ads e regolare le offerte in base al dispositivo, aumentandole o riducendole per gli smartphone, oltre a mostrarli solo agli utenti che si trovano nella tua zona.
Calibrando i tuoi annunci per i cellulari la tua pubblicità su Google diventerà più specifica e avrai maggiori probabilità di ricevere clic e convertire.
Ma cosa succederebbe se qualcuno cliccasse il tuo annuncio e atterrasse su un sito disordinato con immagini che si vedono male e testi poco leggibili? Passerebbe oltre e tu avresti perso un’opportunità.
Questo è un altro esempio di come la responsività del design del tuo sito o della tua landing page possono influenzare direttamente le tue opportunità di guadagno.
FOCUS – Responsive e velocità: i Core Web Vitals
Un sito responsive deve essere anche veloce e stabile da smartphone. Google misura questa esperienza con i Core Web Vitals: LCP (velocità di caricamento del contenuto principale), CLS (stabilità visiva, cioè quanto gli elementi si spostano mentre la pagina si carica) e INP (reattività a tocchi e clic, che dal marzo 2024 ha sostituito l’FID). Puoi controllarli con PageSpeed Insights e con il report Core Web Vitals di Search Console.
📌 Nota: dal dicembre 2023 Google ha dismesso il Test di ottimizzazione per dispositivi mobili e il report Usabilità per dispositivi mobili di Search Console. Per verificare come si vede il sito da smartphone oggi puoi usare Lighthouse, integrato in Chrome.
Esempi di siti web responsive
Mi hai seguito fin qui? Adesso ti mostro alcuni esempi di siti responsive per capire come gestire lo spazio che hai a disposizione dai diversi schermi e garantire la massima reattività del design:
- Warehouse
- CreaCity
- Zerogermil
- Moleskine
- Egan
- Ikea
- Condenast
1. Warehouse
Ecco come warehouseusatodiqualita.it si adatta ai diversi device:
Si tratta di un sito che raccoglie e seleziona le offerte dell’usato Amazon Warehouse, con filtri per cercare i prodotti.
Il sito è facile da esplorare e le foto dei prodotti non perdono qualità da cellulare: un aspetto da considerare ancora più attentamente quando il sito web è un eCommerce.
Nella versione tablet e mobile il menù si posiziona al centro e le sue voci sono nascoste, mentre il logo è rimanere grande e in evidenza.
2. CreaCity
Questa è la nostra pagina del Listino servizi.
Si tratta di una pagina con una grande immagine centrale. Da desktop, tablet o mobile la grafica risulta piacevole, armoniosa e ordinata.
Potrebbe interessarti anche: 18 esempi di landing page efficaci.
3. ZeroGermil
Ecco un altro esempio di sito responsive, dal design adattabile: di forte impatto visivo e che non perde efficacia dai device più piccoli.
L’immagine del prodotto rimane sempre in evidenza, come anche il pulsante che invita il cliente a cliccare. Nelle diverse versioni l’assetto grafico è pulito efficace e ordinato.
4. Moleskine
Moleskine offre un esempio di estremo ordine ed efficacia visiva:
Le immagini sono tagliate e incolonnate e la struttura della pagina garantisce una buona esperienza di navigazione, anche da mobile.
5. Egan
Egan gestisce la versione da mobile riadattando l’area dedicata alle slide ridimensionando le immagini, centrando il logo e nascondendo la barra del menù. Ottimo lavoro!
6. Ikea
Efficacia della grafica e usabilità per Ikea. Le modifiche tra una versione e l’altra si notano appena, non infastidiscono ma sono estremamente funzionali.
7. Condenast
Il sito di Condenast non offre un buon esempio di responsività. I testi sono ridotti a scalare e risultano poco leggibili dagli schermi più piccoli. Anche la barra di navigazione diminuisce di dimensioni nella versione mobile e i caratteri sono davvero troppo minuti per permettere un’agevole lettura.
Nota: Da quando è stato pubblicato questo articolo ad oggi, Condenast ha rinnovato il sito web gestendo in modo più virtuoso il suo layout. Ma questa vecchia versione rimane un buon esempio su cosa non fare.
Siamo in chiusura. Questo articolo ti è stato utile? Hai altri buoni esempi di siti responsive da suggerire?
Un sito responsive è un sito che adatta automaticamente layout, testi e immagini alle dimensioni dello schermo da cui viene visto: smartphone, tablet o computer. L'indirizzo e il contenuto sono gli stessi, cambia il modo in cui vengono disposti.
I cinque schemi di base sono Mostly fluid (griglia fluida con margini che crescono), Column drop (le colonne si impilano), Layout shifter (i blocchi cambiano posizione e forma), Off canvas (menu o filtri nascosti fuori schermo) e Tiny tweaks (piccoli aggiustamenti su siti semplici). Quale scegliere dipende da quanto è complesso il sito.
Il modo più rapido è restringere la finestra del browser da computer: se i contenuti si riorganizzano e non compare lo scorrimento orizzontale, il sito è adattabile. Per una verifica più precisa usa la modalità dispositivo degli strumenti per sviluppatori di Chrome, PageSpeed Insights o Lighthouse e prova il sito su uno smartphone vero, perché è lì che si notano testi troppo piccoli o pulsanti difficili da toccare.
No. "Responsive" indica la tecnica con cui il layout si adatta, mentre "mobile friendly" indica il risultato: un sito comodo da usare da smartphone. Un sito può essere responsive e comunque scomodo, per esempio con testi minuscoli, pulsanti troppo vicini o pagine lente.
Aiuta in modo indiretto. Google non assegna un bonus di posizionamento per il solo fatto di essere responsive, ma indicizza e valuta il sito a partire dalla versione mobile (mobile-first indexing) e considera l'esperienza di pagina. Un sito che si vede e funziona bene da smartphone ha più probabilità di essere indicizzato correttamente e di trattenere chi lo visita.
Per la maggior parte dei siti è meglio un sito responsive. Usa un solo indirizzo e un solo codice, quindi richiede meno manutenzione, evita contenuti diversi tra mobile e desktop e Google lo indica come configurazione consigliata. Una versione separata (o un'app) ha senso solo per esigenze particolari.
Sì. Adattare il layout non rende leggeri i contenuti: se lo smartphone scarica le stesse immagini pesanti del desktop, la pagina si carica lentamente. Per questo servono immagini responsive (srcset e sizes), compressione e il controllo dei Core Web Vitals.
Se vuoi realizzare un sito responsive o rendere responsivo il sito che hai già
