Cosa significa «non responsive» (e come si rompe sul telefono)

Un sito non responsive è costruito su una larghezza fissa – di solito 960 o 1200 pixel. Sul monitor ci sta. Sul telefono no.

Il risultato sono tre tipi di rottura. Di solito ne hai almeno una:

  • Overflow orizzontale
  • Testo microscopico
  • Colonne che non collassano

Overflow orizzontale. La pagina è più larga dello schermo. Compare lo scroll laterale. L'utente deve muoversi a destra e sinistra per leggere. Quasi nessuno lo fa.

Testo microscopico. Le dimensioni dei caratteri sono impostate per un grande schermo. Sul telefono diventano 8–10 punti. Bisogna pizzicare per zoomare. Ogni volta che l'utente zooma, perde il filo.

Colonne che non collassano. Il layout a tre colonne rimane a tre colonne anche su 390 pixel di larghezza. Ogni colonna diventa larga 130 pixel. Il testo non si legge, le immagini si tagliano, i pulsanti non si trovano.

Un caso tipico: un idraulico a Portogruaro con sito del 2014. Sul pc tutto bene. Sul telefono il menu non si apre, il numero di telefono è minuscolo, il pulsante «Richiedi preventivo» cade fuori schermo. Chi cerca «idraulico Portogruaro» da mobile – e lo fa quasi sempre da mobile – apre il sito, non capisce niente e va al concorrente.

Come capire se il tuo sito è responsive: autodiagnosi in 2 minuti

  • 01. Aprilo sullo smartphone – davvero

    Non ridurre la finestra del browser sul computer: non è la stessa cosa. Prendi il telefono, digita il tuo indirizzo, guarda cosa succede.

  • 02. Cerca questi tre segnali

    Compare lo scroll orizzontale? Devi zoomare per leggere il testo? Il menu non si apre o apre in modo strano? Se anche solo uno di questi è sì, il sito non è responsive.

  • 03. Fai il test con PageSpeed Insights

    Vai su pagespeed.web.dev, incolla il tuo URL e seleziona «Mobile» in alto. Nella sezione «Diagnostica» trovi i problemi concreti che Google vede sul tuo sito da schermo stretto. È gratuito, non serve account.

  • 04. Guarda i dati se hai Google Analytics

    Filtra le sessioni per dispositivo. Se il bounce rate da mobile è il doppio rispetto al desktop, il sito sta perdendo utenti ogni giorno in modo silenzioso.

Perché «aggiustarlo» spesso non funziona

Molti pensano che sia una questione di «qualche modifica al CSS». Non è così, quasi mai.

Un sito costruito su griglia fissa non ha la struttura per adattarsi. Aggiungere media query sopra quel codice è come cercare di far stare un mobile da 200 cm in un corridoio da 80. Puoi smontarlo. Ma a quel punto è un mobile diverso.

Uno scenario che vediamo spesso: una falegnameria che ha già pagato due volte per «rendere il sito mobile». Il menu funziona. Le pagine dei prodotti hanno ancora lo scroll orizzontale. Il motivo è sempre lo stesso: layout a tabelle, larghezze fisse dappertutto, nessuna fluid grid. L'unica strada è rifare la struttura da zero.

Il retrofitting ha senso quando il sito è semplice, recente, con poche pagine e un template vicino al responsive. Negli altri casi, il costo di adattare si avvicina al costo di rifare – con la differenza che rifare dà una base solida, adattare dà un rattoppo.

Quando il problema è strutturale, la strada è il rifacimento del sito. Stai valutando i tempi? Ogni quanto si rifà un sito.

Perché «aggiustarlo» spesso non funziona

Sintomi e diagnosi: cosa stai vedendo e cosa significa

  • Scroll orizzontale sulla pagina

    Layout a larghezza fissa. Il contenuto supera la larghezza dello schermo. Problema strutturale.

  • Testo leggibile solo dopo aver zoomato

    Dimensioni font impostate per desktop. Il sito non scala il testo per mobile. Dipende dal template.

  • Menu che non si apre o scompare

    Menu desktop non adattato: rimane orizzontale o collassa in modo non funzionale. Spesso richiede riscrittura del componente.

  • Bottoni e link troppo piccoli da toccare

    Touch target sotto i 48px. PageSpeed Insights li segnala nella diagnostica mobile. Correggibile, ma sintomo di un template non pensato per mobile.

  • Colonne sovrapposte o testo tagliato

    Griglia CSS rigida che non collassa su schermi stretti. Tipico dei layout a tre o quattro colonne del decennio scorso.

  • PageSpeed Insights segnala problemi mobile

    Non è un suggerimento: significa che Google vede quei problemi ogni volta che indicizza la tua pagina.

Adattare o rifare: la valutazione onesta parte dal codice

Non tutti i siti non responsive vanno rifatti subito. Se il tuo sito ha poche pagine, un layout semplice e un template relativamente recente, vale la pena valutare prima quanto costerebbe adattarlo. A volte ha senso. Ma se il sito ha più di 8–10 anni, è costruito su tabelle o su div a larghezza fissa, e il traffico da mobile è già alto – ogni mese in più è un mese in cui Google ti valuta male e gli utenti da telefono se ne vanno. La valutazione onesta parte da un'analisi del codice, non da un'occhiata al design.

Google e il mobile: cosa è cambiato (e perché conta per te)

Entro il 2023 Google ha completato il passaggio al mobile-first indexing per tutti i siti. Significa una cosa sola: Google valuta il tuo sito dalla versione mobile. Non da quella desktop.

Se la versione mobile è rotta, Google lo vede. Non sparisci dall'indice – ma scivoli nel ranking in modo lento e silenzioso, senza che nessun alert te lo dica.

In Italia circa il 70% delle ricerche locali avviene da smartphone. Chi cerca un servizio in Veneto o in FVG – un elettricista, un B&B, un'officina – lo fa quasi sempre dal telefono. Se il sito non funziona su mobile, quella ricerca va al concorrente. Non tutta in un giorno. Una posizione alla volta, ogni settimana.

Il problema non è solo il posizionamento: perché un sito vecchio converte meno parte spesso proprio dal mobile – utenti che arrivano, non riescono a usare il sito e chiudono.

Come si vede un sito mobile-first fatto bene

È un sito che abbiamo costruito come esempio di settore (progetto dimostrativo). 

Su mobile: il menu si apre con un tocco, il layout passa a colonna singola, i pulsanti sono larghi abbastanza da toccare senza errori, il testo si legge senza zoomare.

Sul piano tecnico, i valori misurati:

  • PageSpeed Insights mobile: sopra 80
  • Elementi fuori viewport: nessuno
  • Touch target: tutti ≥ 48px
  • Dati strutturati schema.org: presenti

Sono caratteristiche verificabili con gli stessi strumenti usati nel passaggio 3 dell'autodiagnosi. Non promesse.

Come si vede un sito mobile-first fatto bene
Ho visto centinaia di siti di piccole imprese in Veneto e FVG. Il sito non responsive è il problema più comune – e quello che più spesso viene sottovalutato, perché il titolare lo guarda sempre dal computer. Questa pagina nasce da quelle conversazioni.
Pavel Lidum CEO | Preveli
Domande frequenti

Domande frequenti sul sito non responsive

Il plugin «responsive» per WordPress risolve il problema?

Spesso no. I plugin responsive agiscono sui contenuti – testi, immagini – ma non sulla struttura del tema. Menu fissi, header non adattivi, colonne rigide: il plugin non li tocca. Il risultato è sempre parziale. Prima di installare qualcosa, conviene capire dove il sito si rompe davvero.

Conviene fare una versione mobile separata (m.sito.it)?

Era la soluzione del 2012. Crea doppia manutenzione, rischi di contenuto duplicato, problemi con i canonical tra le due versioni. Google stesso raccomanda il responsive unico e lo dice nella sua documentazione ufficiale. Se qualcuno te lo propone oggi, chiediti perché.

Il test dice «ottimizzato» ma il sito si vede male lo stesso. È possibile?

Sì, ed è più comune di quanto sembri.

PageSpeed Insights e gli strumenti Google verificano soglie tecniche minime – non l'usabilità reale. Un sito può superare il test e avere comunque testo piccolo, link troppo vicini tra loro, form impossibili da compilare su un telefono con le dita. Il test dice che il sito non ha errori critici. Non dice che l'utente riesce a usarlo senza frustrazione. Sono due cose diverse.

Il test è un punto di partenza. L'esperienza reale si vede aprendo il sito sullo smartphone, su modelli diversi, e cercando di fare quello che farebbe un cliente.

Quanto costa rendere responsive un sito vecchio rispetto a rifarlo?

Dipende dal punto di partenza. Tre situazioni tipiche:

  • Template recente, poche pagine, layout semplice – adattamento spesso ha senso, costi contenuti
  • Layout a div fissi o griglia rigida – costo di adattare si avvicina al costo di rifare
  • Sito costruito su tabelle HTML, più di 8 anni – rifare è quasi sempre la strada più efficiente

La differenza non è solo economica. Adattare dà un rattoppo che regge fino al prossimo aggiornamento del browser o del sistema operativo. Rifare dà una base strutturale che non si rompe al prossimo cambio. La valutazione onesta parte da un'analisi del codice, non dall'aspetto visivo.

Google mi penalizza davvero se il sito non è responsive?

Non arriva un avviso, non c'è una notifica in Search Console che dice «sito penalizzato». L'effetto è nel ranking. Google valuta il tuo sito dalla versione mobile: se quella versione ha problemi, il sito perde posizioni rispetto ai concorrenti che hanno siti mobile-first. Lentamente, ma in modo costante. E poiché le prime tre posizioni nei risultati locali raccolgono la grande maggioranza dei clic, anche scendere di due o tre posti ha un impatto reale sul numero di persone che arrivano sul tuo sito.

Come faccio a sapere quanti utenti perdo per il mobile?

Se hai Google Analytics, ci sono tre numeri da guardare:

  • Bounce rate da mobile vs. desktop (se il mobile è il doppio, qualcosa non funziona)
  • Conversioni per dispositivo: clic su numero di telefono, clic su WhatsApp, form inviati
  • Sessioni da mobile che finiscono sulla homepage senza ulteriori clic

Se il mobile porta traffico ma quasi zero contatti, il sito sta perdendo quegli utenti ogni giorno. Non in modo catastrofico, ma costante.

Altri articoli sul tema