Il sito non si vede bene da telefono: cosa fare — articolo

> Il sito non si vede bene da telefono: cosa fare

Problemi di visualizzazione mobile, testo troppo piccolo, bottoni impossibili da premere: cause e soluzioni pratiche.

Luigi Iadicola
~5 min lettura
#Mobile #UX #Frontend
Il sito non si vede bene da telefono: cosa fare

Il 70% dei tuoi visitatori usa lo smartphone

Se il sito non funziona bene da telefono, stai perdendo la maggior parte del tuo pubblico. I dati di traffico web in Italia confermano che tra il 65% e il 75% delle visite avviene da dispositivi mobili, con picchi ancora piu alti per settori come ristorazione, servizi locali e e-commerce. Ignorare il mobile nel 2026 equivale a chiudere il negozio 7 giorni su 10.

Google lo sa e dal 2021 usa il mobile-first indexing: la versione mobile del sito e quella che conta per il posizionamento, non quella desktop. Un sito non responsive viene penalizzato nelle ricerche anche da chi cerca da computer. E un fattore di ranking confermato che impatta direttamente sulla visibilita organica.

I sintomi: come riconoscere un sito non mobile-friendly

I problemi di usabilita mobile sono riconoscibili e documentabili con strumenti specifici:

  • Testo che si legge solo zoomando: il font e troppo piccolo o la pagina non si adatta alla larghezza dello schermo, costringendo l utente a zoomare e scrollare orizzontalmente
  • Bottoni troppo piccoli o troppo vicini: l utente tocca un bottone e ne attiva un altro. Frustrante e causa immediata di abbandono
  • Immagini che escono dallo schermo: la pagina si allarga oltre i bordi del dispositivo, creando uno scroll orizzontale innaturale
  • Menu impossibili da navigare: menu a tendina progettati per il mouse che non funzionano con il touch, voci troppo piccole, sottomenu che si sovrappongono
  • Form inutilizzabili: campi di input troppo piccoli, tastiera che copre il form, bottone di invio nascosto sotto la piega
  • Contenuti tagliati o sovrapposti: colonne che si impilano male, elementi che si sovrappongono, testo che finisce sotto altri elementi

Non e solo un problema estetico — e un problema di usabilita che si traduce direttamente in visitatori persi e conversioni mancate.

Diagnosi: strumenti per verificare i problemi

Prima di intervenire serve una diagnosi precisa. Ecco gli strumenti da usare:

  • Google Mobile-Friendly Test: analizza una pagina e segnala i problemi specifici (testo troppo piccolo, elementi cliccabili troppo vicini, contenuto piu largo dello schermo)
  • Chrome DevTools Device Mode: premi F12, poi Ctrl+Shift+M per attivare la simulazione mobile. Puoi testare diverse risoluzioni e dispositivi senza lasciare il desktop
  • Google Search Console: la sezione "Esperienza" mostra i problemi di usabilita mobile rilevati dal crawler di Google su tutte le pagine del sito
  • BrowserStack o dispositivi reali: i simulatori non catturano tutto. Testare su almeno 3-4 dispositivi reali diversi (iPhone, Samsung, un tablet) rivela problemi invisibili nei DevTools

Interventi concreti: dal piu semplice al piu strutturale

1. Viewport meta tag — il fondamento

Sembra banale ma molti siti vecchi non hanno il meta tag viewport. Senza <meta name="viewport" content="width=device-width, initial-scale=1"> nel <head>, il browser mobile mostra la versione desktop rimpicciolita a 980px di larghezza virtuale. Aggiungere questo tag e il primo passo e a volte risolve gia una buona parte dei problemi.

2. Layout fluidi con CSS moderno

Sostituire larghezze fisse in pixel con unita relative e breakpoint CSS che adattano il layout alla dimensione dello schermo:

  • Flexbox e CSS Grid: layout che si riorganizzano naturalmente. Una riga di 3 colonne su desktop diventa una colonna singola su mobile senza media query complicate
  • Unita relative: usare rem per i font, % e vw per le larghezze, max-width invece di width per i contenitori
  • Media query strategiche: non serve coprire ogni possibile larghezza. Tre breakpoint bastano per la maggior parte dei siti: 480px (smartphone piccoli), 768px (tablet e smartphone grandi), 1024px (desktop). Il CSS mobile-first parte dallo stile base per smartphone e aggiunge complessita con min-width
  • Container query: la nuova frontiera del CSS responsivo. Permettono di adattare un componente in base allo spazio disponibile nel suo contenitore, non nella finestra del browser

3. Tap target adeguati

Google raccomanda almeno 48x48 pixel per ogni elemento cliccabile, con almeno 8 pixel di spazio tra un bottone e l altro. Questo vale per bottoni, link, voci di menu, checkbox e qualsiasi altro elemento interattivo. Un tap target troppo piccolo non e solo un problema di usabilita: e un fattore che Google misura e penalizza nel mobile-first indexing.

4. Tipografia leggibile senza zoom

La leggibilita su mobile richiede attenzione specifica:

  • Corpo del testo: almeno 16px (meglio 18px). Sotto i 16px il browser potrebbe zoomare automaticamente sui campi di input, causando un esperienza sgradevole
  • Interlinea: almeno 1.5 per il corpo del testo. Su schermi piccoli una interlinea stretta rende la lettura faticosa
  • Contrasto: rapporto minimo 4.5:1 tra testo e sfondo secondo le linee guida WCAG. Testo grigio chiaro su bianco e illeggibile sotto la luce del sole
  • Lunghezza delle righe: su mobile le righe non devono superare i 70-80 caratteri. Il padding laterale aiuta a mantenere una lunghezza confortevole

5. Immagini responsive

Usare l attributo srcset per servire immagini proporzionate al dispositivo invece di caricare sempre la versione full-size. Un immagine da 1920px di larghezza su uno schermo da 375px spreca il 90% della banda. Il pattern corretto:

  • Preparare 3-4 versioni di ogni immagine (400px, 800px, 1200px, 1920px)
  • Usare srcset con sizes per indicare al browser quale versione caricare
  • Aggiungere loading="lazy" per le immagini sotto la piega
  • Specificare sempre width e height per evitare layout shift durante il caricamento

6. Menu mobile dedicato

Un hamburger menu ben fatto con area di tocco ampia, non una copia compressa del menu desktop. Il menu mobile deve aprirsi a tutto schermo o quasi, con voci ben distanziate, testo leggibile e un bottone di chiusura evidente. I sottomenu devono funzionare con il touch: niente hover, solo tap per aprire e tap per chiudere.

Test finale: il metodo del pollice

Il test piu rapido e affidabile e aprire il sito dal proprio telefono e provare a completare l azione principale — compilare un form, trovare un numero di telefono, leggere un articolo — usando solo il pollice di una mano. Se serve zoomare, se e frustrante, se devi usare due mani per navigare, il sito ha bisogno di lavoro. Ripeti il test su almeno tre dispositivi diversi e con connessioni diverse (WiFi e 4G) per avere un quadro completo.

altri articoli