Design responsive: cos’è e come progettare un sito per ogni schermo

Un sito è responsive quando c’è una sola versione delle pagine e quella versione si riorganizza da sola in base allo schermo: colonne che si impilano sullo smartphone, menu che si compatta, immagini che si ridimensionano, testi che restano leggibili senza zoom. Il design responsive è proprio questo modo di progettare. Per una piccola impresa, un professionista o un’attività locale non è un dettaglio estetico: buona parte dei potenziali clienti arriva da telefono, e un sito che sul telefono si legge male li perde prima ancora che leggano un’offerta. In questa guida vediamo come funziona, come si progetta partendo dal mobile, in cosa si differenzia dall’adaptive e quali controlli fare sul tuo sito.

In breve

• Responsive vuol dire una sola pagina che adatta layout, immagini e testi a ogni larghezza di schermo, grazie al CSS.
• Mobile first vuol dire progettare prima per lo schermo piccolo e poi arricchire la pagina man mano che lo spazio aumenta: costringe a mettere in ordine le priorità.
• Gli ingredienti tecnici sono quattro: meta viewport, griglie fluide, media query con breakpoint, immagini e tipografia flessibili.
• Adaptive significa più versioni della stessa pagina, una per tipo di dispositivo: ha senso in casi specifici, mentre per la maggior parte dei siti aziendali il responsive è la scelta di riferimento.
• Velocità, immagini leggere, alt text scritti bene, backup e aggiornamenti fanno parte dello stesso lavoro: un sito responsive va anche mantenuto.

Indice

• Cosa si intende per design responsive
• Perché il responsive conta per i clienti e per Google
• Mobile first: progettare partendo dallo schermo piccolo
• Gli elementi tecnici che rendono un sito responsive
• Responsive o adaptive: le differenze
• Esempi di layout responsive
• Immagini: peso, formato e alt text
• Come verificare se il tuo sito è responsive
• Sito WordPress responsive: sicurezza e backup
• Il nostro punto di vista
• Un sito responsive costruito sul tuo business
• Domande frequenti
• Fonti

Cosa si intende per design responsive

Il termine nasce da un articolo di Ethan Marcotte su A List Apart e indica una strategia di progettazione che risponde alle esigenze degli utenti e alle capacità dei loro dispositivi, modificando il layout del sito in base allo schermo. L’esempio classico, riportato nelle nozioni di base sul Responsive Web Design di web.dev, è quello dei contenuti mostrati in una colonna sullo smartphone, in due sul tablet e in tre o quattro sul computer.

In italiano lo trovi chiamato anche design responsivo, reattivo o adattabile: sono sinonimi che descrivono la stessa idea. “Responsive” significa letteralmente “che risponde”: la pagina risponde all’ambiente in cui viene aperta.

Anche la Pubblica Amministrazione lo aveva fissato come standard: le Linee guida di design per i servizi web della PA, oggi superate da versioni più recenti, chiedevano che i siti fossero progettati e sviluppati con approccio responsive, per offrire un’esperienza ottimale a prescindere da risoluzione e dispositivo.

Quando un sito è davvero responsive

Un sito è responsive se, aprendolo su qualsiasi schermo, supera questi punti:

• non compare la barra di scorrimento orizzontale;
• i testi si leggono senza allargare con le dita;
• pulsanti e link si toccano facilmente con il pollice, senza premere quello accanto;
• immagini e video restano dentro lo schermo e non si deformano;
• il menu è raggiungibile e comprensibile anche in poco spazio;
• moduli di contatto e prenotazione si compilano comodamente da telefono.

Se anche uno solo di questi punti salta, il sito “si vede” su mobile ma non funziona su mobile. È una differenza che il cliente nota subito.

Perché il responsive conta per i clienti e per Google

Il primo motivo è il comportamento delle persone. Secondo la guida di Google sull’ottimizzazione dei siti per dispositivi mobili, circa la metà dei visitatori abbandona un sito mobile se le pagine non si caricano entro tre secondi. Pensa a chi cerca “pizzeria aperta ora” camminando per via Maqueda o a chi vuole prenotare una visita dallo studio mentre aspetta il bus: se la pagina è lenta o scomoda, torna ai risultati e sceglie un altro.

Il secondo motivo è la visibilità. Google oggi analizza e classifica i siti guardando soprattutto la loro versione mobile: se su smartphone mancano contenuti, titoli o link presenti su desktop, per il motore di ricerca quei contenuti di fatto pesano meno. Ne parliamo nella nostra guida all’indicizzazione su Google.

Il terzo motivo è l’accessibilità. Un layout che si adatta a schermi diversi, con testi ridimensionabili e controlli ben distanziati, è più fruibile anche da chi ha difficoltà visive o motorie. Se vuoi capire cosa chiede la normativa, trovi i dettagli nell’articolo su accessibilità del sito web e obbligo 2026.

Mobile first: progettare partendo dallo schermo piccolo

Mobile first non significa “fare anche la versione mobile”. Significa partire da lì. Le stesse linee guida della PA descrivevano l’approccio mobile first e il progressive enhancement come il considerare prima esperienza e necessità degli utenti mobili, per poi arricchire la pagina con elementi e funzionalità man mano che crescono dimensioni, potenza e rete del dispositivo. Progettare con poco spazio, aggiungevano, aiuta a stabilire priorità utili all’usabilità.

In pratica, per una pagina servizi, il lavoro mobile first si svolge così:

1. Definisci l’azione principale. Chiamare, prenotare, chiedere un preventivo, comprare. Sul telefono deve essere visibile senza cercarla.
2. Ordina i contenuti per importanza. Cosa offri, per chi, perché fidarsi, come contattarti. Tutto il resto viene dopo.
3. Disegna la colonna singola. Titolo chiaro, testo breve, un’immagine utile, il pulsante. Se funziona così, funzionerà ovunque.
4. Allarga lo schermo finché il layout “si rompe”. È il consiglio di web.dev: si parte dal piccolo e si espande finché non serve un punto di interruzione. Lì aggiungi la seconda colonna, poi la terza.
5. Arricchisci per desktop. Gallerie più ampie, tabelle complete, contenuti di approfondimento affiancati.

Il vantaggio concreto è che il sito nasce leggero e focalizzato. Chi parte dal desktop tende invece a nascondere o comprimere elementi sul telefono, e spesso finisce per tagliare proprio quello che il cliente cercava.

Gli elementi tecnici che rendono un sito responsive

Non serve essere sviluppatori per capire cosa c’è sotto il cofano. Ecco i pezzi che, insieme, fanno funzionare un layout su ogni schermo.

Il meta viewport

È una riga nell’intestazione della pagina: <meta name="viewport" content="width=device-width, initial-scale=1">. Come spiega la guida MDN al responsive web design, indica ai browser mobili di impostare la larghezza dell’area visibile su quella del dispositivo. Senza, anche il CSS più curato viene mostrato come una versione desktop in miniatura.

Griglie fluide

Le griglie moderne usano flexbox e CSS grid. Un esempio italiano è Bootstrap Italia, il kit usato per molti siti pubblici: eredita la griglia mobile first di Bootstrap, con dodici colonne e sei breakpoint basati su media query di larghezza minima. Il principio vale per qualsiasi sito: una scheda prodotto occupa 12 colonne su telefono, 6 su tablet, 4 su desktop.

Media query e breakpoint

Le media query sono regole CSS che si attivano solo se una condizione è vera, per esempio “lo schermo è più largo di una certa misura”. Il punto in cui il layout cambia si chiama breakpoint. MDN raccomanda di definirli in unità relative, in base al contenuto, e non sulle misure esatte di un singolo modello di telefono: i dispositivi cambiano ogni anno, il contenuto no.

Tipografia e spazi

Un testo comodo su desktop può diventare faticoso su un telefono. Dimensioni in unità relative, righe non troppo lunghe e spazi generosi tra i paragrafi rendono la lettura scorrevole su ogni schermo. Lo stesso vale per il menu: come progettarlo bene lo spieghiamo nella guida al menu di navigazione responsive.

Responsive o adaptive: le differenze

Le due parole si confondono spesso. Il responsive adatta il rendering di una sola versione della pagina a qualsiasi dispositivo, con il CSS che governa il layout. L’adaptive, come riassume questa guida di Contentsquare al responsive design, fornisce più versioni della stessa pagina, ognuna con un template pensato per un tipo di dispositivo.

Il criterio di scelta più chiaro arriva dal design system di SAP: se funzioni e informazioni possono essere offerte allo stesso modo su tutti i dispositivi, si usa il responsive; se una funzione non può restare uguale su dispositivi diversi, si adatta l’interfaccia manualmente. Per il sito di un’impresa, di uno studio o di un negozio il contenuto è lo stesso per tutti, quindi il responsive è la strada naturale, anche perché un solo sito da aggiornare significa meno lavoro e meno errori nel tempo.

Esempi di layout responsive

Tre scenari tipici, per vedere come lo stesso principio cambia forma a seconda dell’attività.

Un ristorante. Su telefono la prima schermata mostra nome, orari di oggi, pulsante “Prenota” e pulsante “Chiama”. Il menu è a fisarmonica, una categoria alla volta. Su desktop compaiono le foto dei piatti affiancate e la mappa accanto all’indirizzo. Chi lavora con i clienti della zona trova altre idee nella guida alla SEO locale.

Uno studio professionale. Commercialista, avvocato, fisioterapista: su smartphone contano chi sei, quali servizi offri, come prenotare. Le schede servizio si impilano una sotto l’altra; su desktop diventano una griglia a tre colonne con le testimonianze di fianco.

Un piccolo e-commerce. Su telefono una colonna o due di prodotti, filtri in un pannello che si apre dal basso, carrello sempre raggiungibile. Su desktop quattro colonne e filtri visibili di lato. Qui ogni secondo di caricamento e ogni passaggio in più nel checkout pesano sulle vendite.

Per un’attività con una sola offerta da presentare può bastare anche una pagina unica ben strutturata: ne parliamo nell’articolo sul sito one page.

Immagini: peso, formato e alt text

Le immagini sono spesso la parte più pesante di una pagina e la prima causa di lentezza su mobile. Ottimizzarle vuol dire:

• caricare versioni di dimensioni diverse e lasciare che il browser scelga quella adatta allo schermo;
• usare formati moderni e compressi;
• non caricare subito le immagini che stanno in fondo alla pagina;
• dichiarare le proporzioni, così la pagina non “salta” mentre si carica.

Poi c’è il testo alternativo, l’attributo alt. Serve a chi usa un lettore di schermo e aiuta i motori di ricerca a capire cosa mostra l’immagine. Le regole pratiche:

• descrivi contenuto e scopo dell’immagine, in una frase breve e precisa;
• evita “immagine di” e “foto di”: il lettore di schermo lo annuncia già;
• per immagini cliccabili descrivi l’azione o la destinazione, per esempio “Prenota un tavolo”;
• per immagini decorative o che ripetono un testo già presente usa un alt vuoto, alt="".

Su questo punto Google for Developers sull’alt text aggiunge un dettaglio utile: se l’attributo alt manca del tutto, i lettori di schermo leggono il nome del file invece di ignorare l’immagine. “IMG_4582.jpg” letto ad alta voce non aiuta nessuno. Un esempio di alt scritto bene: “Cannoli siciliani con ricotta e granella di pistacchio su vassoio”. Uno scritto male: “foto cannoli palermo migliori cannoli pasticceria”. Il primo descrive, il secondo accumula parole chiave. Altri accorgimenti di questo tipo li trovi nella guida alla SEO on page.

Come verificare se il tuo sito è responsive

Puoi fare un primo controllo da solo in dieci minuti.

1. Apri il sito dal tuo telefono e fai il percorso di un cliente: dalla home al servizio, dal servizio al contatto. Annota dove esiti.
2. Usa gli strumenti per sviluppatori del browser. In Chrome, la modalità dispositivo dei DevTools mostra la pagina a diverse larghezze e, come spiega web.dev, permette di visualizzare i breakpoint delle media query.
3. Trascina la finestra del browser stringendola lentamente: se a un certo punto compaiono sovrapposizioni o barre orizzontali, lì manca un breakpoint.
4. Compila i moduli da telefono. Campi troppo piccoli, tastiera sbagliata per il numero di telefono, pulsante di invio nascosto: sono contatti persi.
5. Misura la velocità su rete mobile, non solo con il Wi-Fi dell’ufficio.

Se dal controllo emergono problemi diffusi, spesso non conviene rattoppare pagina per pagina. Nella guida al restyling del sito web spieghiamo quando conviene rifare la struttura e come farlo senza perdere posizionamento.

Sito WordPress responsive: sicurezza e backup

Molti siti aziendali sono costruiti con WordPress, e un tema responsive è solo l’inizio. Perché il sito resti veloce e funzionante nel tempo servono manutenzione e protezione.

Mettere in sicurezza WordPress

Le buone pratiche di base sono note e vanno applicate con costanza:

• aggiorna regolarmente core, tema e plugin, e rimuovi quelli che non usi;
• usa password robuste e l’autenticazione a due fattori per gli account amministratore;
• dai a ogni persona solo i permessi che le servono;
• installa plugin e temi solo da fonti affidabili;
• monitora il sito, così un’intrusione viene scoperta in fretta e non dopo settimane.

Backup del sito WordPress

Un backup completo comprende i file del sito e il database. La guida al backup WordPress di OpenReplay consiglia di automatizzare il processo e seguire la regola 3-2-1: tre copie, su due tipi di supporto diversi, una fuori sede. Mai lasciare l’unico backup sullo stesso server del sito. E un backup va verificato: il metodo più affidabile è ripristinarlo periodicamente su un ambiente di prova, controllando che pagine, immagini e moduli funzionino come sul sito reale.

Il nostro punto di vista

Quando un cliente ci chiede un sito responsive, la nostra prima domanda non riguarda i colori ma l’azione: cosa deve fare chi arriva dal telefono? Chiamare, prenotare, chiedere un preventivo. Da lì costruiamo tutto il resto, partendo dallo schermo più piccolo.

Evitiamo le soluzioni preconfezionate perché un tema che “si adatta” non basta. Un layout può ridimensionarsi alla perfezione e non convertire comunque, se il pulsante giusto è sepolto in fondo o se le immagini rallentano la pagina. Per noi responsive significa che il sito funziona per il business su ogni schermo: è bello da vedere, facile da navigare e misurato sui dati.

Per questo curiamo insieme la parte creativa e quella di performance: struttura, contenuti, immagini e SEO nascono nello stesso progetto. E affianchiamo il cliente per tutto il percorso, con un approccio trasparente, perché ogni scelta sia chiara e utile.

Teodoro

Un sito responsive costruito sul tuo business

Se il tuo sito sul telefono non rende come dovrebbe, o se devi crearne uno da zero, a Palermo realizziamo siti web ottimizzati e responsive per piccole imprese, professionisti, startup e attività locali, con strategie personalizzate basate sui dati.

Il servizio di creazione siti web parte da 349 €. Trovi tutti i dettagli e puoi chiederci un preventivo nella pagina dedicata alla creazione di siti web; se ti serve anche un lavoro su posizionamento o immagine coordinata, guarda tutti i nostri servizi di web marketing.

Domande frequenti

Qual è la differenza tra sito responsive e sito mobile?

Un sito mobile tradizionale è una versione separata, spesso su un indirizzo diverso, pensata solo per i telefoni. Un sito responsive è un unico sito che si adatta a qualsiasi schermo. Con il responsive gestisci un solo indirizzo e un solo insieme di contenuti, il che semplifica aggiornamenti e SEO.

Il design responsive migliora il posizionamento su Google?

Google valuta soprattutto la versione mobile delle pagine, quindi un sito che su smartphone è completo, veloce e facile da usare parte avvantaggiato. Il responsive da solo non garantisce le prime posizioni: contano anche contenuti, struttura e autorevolezza. È però una base senza la quale il resto del lavoro SEO rende meno.

Posso rendere responsive un sito esistente?

Spesso sì: a seconda di come è costruito, si può intervenire sul tema e sul CSS oppure conviene un restyling completo. Se il sito è vecchio, lento e con molti problemi su mobile, rifare la struttura in ottica mobile first di solito costa meno fatica nel tempo. Una verifica iniziale chiarisce quale strada ha più senso.

Quanti breakpoint servono?

Non esiste un numero giusto valido per tutti. I breakpoint si scelgono in base al contenuto: si allarga lo schermo e si aggiunge un punto di interruzione dove il layout smette di funzionare. Molti framework ne usano alcuni predefiniti come base, poi si rifinisce pagina per pagina.

Ogni quanto va fatto il backup di un sito WordPress?

Dipende da quanto spesso cambia il sito: un blog o un e-commerce attivo richiedono backup frequenti e automatici, un sito vetrina aggiornato di rado può averne meno. In ogni caso conserva almeno una copia fuori dal server del sito. Verifica regolarmente che il ripristino funzioni davvero.

Fonti

Nozioni di base sul Responsive Web Design, web.dev
Linee guida di design per i servizi web della Pubblica Amministrazione, Designers Italia
Ottimizzazione dei siti web per i dispositivi mobili, Guida di Google Ads
Responsive web design, MDN Web Docs
Le Griglie, Bootstrap Italia
Responsive Design: cos’è e in cosa consiste, Contentsquare
Multi-Device Support: Responsive vs. Adaptive, SAP Design System
Write helpful alt text, Google for Developers
How to Back Up a WordPress Site, OpenReplay

Raccomandati

• Menu di navigazione: come progettarlo chiaro, accessibile e responsive
• Sito one page: quando conviene sceglierlo e come progettarlo bene
• Restyling sito web: quando conviene farlo e come affrontarlo senza rischi
• Accessibilità sito web: cosa cambia con l’obbligo 2026

admin

See Full Bio