Hai aperto il tuo sito su uno smartphone e hai trovato qualcosa che non somiglia per niente a ciò che avevi costruito? Un sito rotto su smartphone è una delle lamentele più comuni di chi ha progettato il sito sul computer e non ha mai controllato come andasse su uno schermo più piccolo. Questo articolo spiega cosa causa il problema, come capire quale difetto colpisce il tuo sito e cosa fare per risolverlo.
Oggi più della metà del traffico web arriva da dispositivi mobili. Quella quota cresce da anni e continua a salire. Se un visitatore arriva sul tuo sito da uno smartphone e trova testo troppo piccolo da leggere, immagini che escono dallo schermo o un menu di navigazione che non risponde al tocco, le probabilità che resti sono basse. Una frequenza di rimbalzo alta da smartphone è spesso il primo segnale misurabile che qualcosa non va, e molti titolari non collegano le due cose finché non controllano le statistiche.
La parte frustrante è che i problemi di visualizzazione su smartphone non sono sempre evidenti dalla vista da computer che usi per gestire il sito. Tendono a emergere solo guardando lo schermo vero di un telefono, quindi possono passare inosservati per settimane o mesi mentre i visitatori se ne vanno in silenzio.
Perché un sito sembra rotto su smartphone?
Non esiste una causa unica per un sito rotto su smartphone. Il problema è di solito uno di cinque difetti di fondo, e in alcuni casi una combinazione di più d'uno. Capire quale causa colpisce il tuo sito determina quale soluzione applicare.
Il sito non è stato costruito con un design responsive
Un sito responsive adatta automaticamente il suo layout in base alla larghezza dello schermo che lo mostra. Su un computer, i contenuti possono comparire su tre colonne. Su un tablet, due. Su uno smartphone, una sola colonna scorrevole. Questo adattamento avviene tramite regole CSS chiamate media query, che dicono al browser come riorganizzare i contenuti a dimensioni di schermo diverse.
Se un sito è stato costruito senza design responsive, mostra lo stesso layout fisso qualunque sia la dimensione dello schermo. Un sito progettato per un monitor da 1.440 pixel di larghezza proverà a mostrarsi con quella larghezza su uno schermo di smartphone largo circa 390 pixel. Il risultato è una pagina rimpicciolita e fuori scala, con testo illeggibile e pulsanti troppo piccoli da toccare. Il contenuto tecnicamente c'è, ma è inutilizzabile.
I siti più vecchi, in particolare quelli creati con editor drag-and-drop che non davano priorità al risultato su dispositivi mobili, hanno spesso questo problema. Anche i siti scritti su misura senza pensare prima ai dispositivi mobili possono rientrare in questa categoria.
Le immagini non sono dimensionate per gli schermi degli smartphone
Un'immagine caricata a 3.000 pixel di larghezza e mostrata senza vincoli proverà a mostrarsi alla sua dimensione piena ovunque venga vista. Su un computer, il browser può ridurla per adattarla. Su un dispositivo mobile senza regole di dimensionamento responsive, l'immagine può sporgere oltre il bordo dello schermo, causando scorrimento orizzontale o il crollo del layout.
Anche quando le immagini non escono dallo schermo, quelle grandi e non ottimizzate influiscono sul perché la velocità del sito è importante su smartphone. Un'immagine lenta che blocca la comparsa del resto della pagina è una forma di malfunzionamento anche quando il layout regge. I visitatori con connessione mobile sono particolarmente sensibili a questo.
Elementi a larghezza fissa escono dallo schermo
Gli elementi a larghezza fissa sono contenitori, div, tabelle o altri elementi HTML a cui nel foglio di stile è assegnata una larghezza precisa in pixel invece di una percentuale o di un'unità flessibile. Un contenitore impostato a 900 pixel di larghezza si vedrà bene su un computer ma uscirà oltre il bordo dello schermo di uno smartphone, costringendo l'utente a scorrere in orizzontale per vedere tutto il contenuto. Lo scorrimento orizzontale su un sito è quasi sempre il segno di un problema di elemento a larghezza fissa che deborda.
Le tabelle sono spesso la causa. Una tabella dei prezzi o un confronto costruito in HTML con colonne fisse può crollare in modo drastico su smartphone, facendo impilare il testo in modi impossibili da leggere. Lo stesso vale per le barre laterali, i widget incorporati e ogni elemento scritto con una larghezza esplicita in pixel che supera lo spazio disponibile sullo schermo del telefono.
I caratteri sono troppo piccoli per essere letti senza zoom
Un testo che si legge bene a 14 pixel su uno schermo di computer può diventare illeggibile su uno smartphone, in particolare sugli schermi ad alta densità in cui il numero di pixel fisici è molto più alto della dimensione logica dello schermo. Se un visitatore deve pizzicare e ingrandire per leggere i tuoi contenuti, l'esperienza è rotta anche se il layout è tecnicamente integro.
La dimensione minima consigliata per il testo del corpo su dispositivi mobili è 16 pixel. Qualsiasi valore inferiore rischia di non essere leggibile su una parte significativa dei dispositivi. Un testo più piccolo segnala inoltre ai motori di ricerca che la pagina non è ottimizzata per i dispositivi mobili, il che può influire su come il sito viene posizionato e indicizzato.
La navigazione si rompe o non funziona al tocco
I menu di navigazione per computer sono spesso barre orizzontali con voci a discesa che compaiono al passaggio del mouse. Su un touchscreen il passaggio del mouse non esiste. Un menu che dipende da quell'interazione semplicemente non funziona su uno smartphone. I visitatori toccano la voce di menu e non succede nulla, oppure vengono portati alla pagina sbagliata perché lo stato di passaggio che doveva mostrare un sottomenu non si attiva mai.
Anche una navigazione che tecnicamente funziona al tocco può essere rotta nella pratica se le aree da toccare sono troppo piccole o troppo vicine. La linea guida generale per le aree touch su dispositivi mobili è un minimo di 44 per 44 pixel. Aree più piccole portano a tocchi mancati, navigazione accidentale e visitatori frustrati che trovano più facile andarsene che trovare ciò che cercavano.
Come controllare se il tuo sito è adatto agli smartphone
Il controllo più rapido è aprire il sito su un vero telefono. Usa sia il tuo dispositivo sia, se possibile, un altro modello di un'altra marca. Ciò che sembra a posto su un telefono può apparire diverso su un altro, per differenze di risoluzione dello schermo, motore di rendering del browser e versione del sistema operativo.
Gli strumenti per sviluppatori del browser offrono una simulazione mobile integrata. Nella maggior parte dei browser per computer, premere F12 apre il pannello per sviluppatori. L'icona della barra dei dispositivi permette di simulare diverse dimensioni di schermo e tipi di dispositivo. È utile per controlli veloci, ma non sostituisce del tutto i test su dispositivi reali, perché gli ambienti simulati non riproducono il vero comportamento al tocco, il rendering dei caratteri né le condizioni di rete.
Il test di compatibilità con i dispositivi mobili di Google, disponibile tramite Google Search Console, valuta le tue pagine e segnala problemi specifici di usabilità su dispositivi mobili. Individua problemi come testo troppo piccolo da leggere, elementi cliccabili troppo vicini e contenuti che non entrano nell'area visibile. Il report dà il dettaglio pagina per pagina, così puoi capire quali pagine specifiche non superano il controllo e quali sì.
Guardare i dati delle statistiche aggiunge uno strato di comportamento al quadro tecnico. Se la frequenza di rimbalzo da smartphone è molto più alta di quella da computer, quella differenza indica spesso un problema di visualizzazione o di usabilità sui telefoni. L'articolo su frequenza di rimbalzo alta su smartphone spiega come leggere questi segnali e cosa fa andare via subito i visitatori sugli schermi più piccoli.
Come risolvere un sito che sembra rotto su smartphone
La soluzione giusta dipende da quale causa produce il problema. Ognuna delle cinque cause qui sopra ha una soluzione corrispondente.
Passa a un layout responsive
Se il sito non è affatto responsive, la soluzione è ricostruirlo su un framework responsive oppure passare a una piattaforma che produce HTML responsive di default. Aggiungere un comportamento responsive a un sito che non lo è, a posteriori, è possibile ma spesso richiede più lavoro che ricostruire partendo da una base responsive. Se il sito è su una piattaforma moderna che supporta temi o modelli responsive, passare a un modello responsive è di solito la strada più veloce.
Ridimensiona e vincola le immagini
Le immagini vanno caricate alla dimensione di visualizzazione effettivamente necessaria, non alla risoluzione originale di esportazione. Per la maggior parte delle immagini di un sito, una larghezza massima di 1.200 pixel è sufficiente per gli schermi ad alta densità e mantiene gestibili le dimensioni dei file. Le regole CSS che impostano max-width: 100% sulle immagini assicurano che non escano mai dal loro contenitore, qualunque sia la larghezza dello schermo. Questa singola regola risolve la maggior parte dei problemi di immagini che escono dallo schermo senza dover ridimensionare le singole immagini.
Sostituisci le larghezze fisse con unità flessibili
Le larghezze fisse in pixel su contenitori, tabelle e altri elementi del layout vanno sostituite con larghezze in percentuale o con unità CSS flessibili come em, rem o vw. Un contenitore impostato a width: 90% invece di width: 900px si adatta nel modo giusto a ogni dimensione di schermo. Per le tabelle, aggiungere una regola CSS che le renda scorrevoli in orizzontale dentro il loro contenitore evita che rompano il layout generale sugli schermi stretti.
Aumenta la dimensione dei caratteri su smartphone
Il testo del corpo su smartphone dovrebbe essere impostato ad almeno 16 pixel. Se il foglio di stile per computer definisce una dimensione più piccola, una media query rivolta alle larghezze di schermo degli smartphone può sovrascriverla. Vanno riviste anche le dimensioni dei titoli, perché molti stili di titolo che sul computer sembrano proporzionati diventano eccessivamente grandi su uno smartphone e spingono altri contenuti sotto la parte visibile prima che il visitatore abbia letto qualcosa.
Sostituisci la navigazione al passaggio del mouse con un menu per smartphone
La soluzione standard per la navigazione su smartphone è un menu comprimibile, spesso chiamato menu hamburger, attivato da un tocco e non dal passaggio del mouse. La maggior parte dei framework responsive e dei creatori di siti include questo schema di default. Se la navigazione del sito attuale non ha un equivalente per smartphone, aggiungerlo richiede di modificare il foglio di stile e il JavaScript oppure di passare a un tema che includa la navigazione mobile come funzione integrata. Va rivista anche la dimensione delle aree da toccare, per assicurarsi che tutte le voci del menu rispettino la linea guida minima di 44 pixel.
Se il tuo sito ha pagine rotte oltre ai problemi di visualizzazione, sistemare prima il layout visivo rende spesso più facile raggiungere e provare ogni pagina durante il controllo.
Come WEMASY gestisce gli smartphone
Il creatore di siti WEMASY genera HTML responsive su ogni pagina senza richiedere configurazioni. I layout si riadattano in automatico alle dimensioni degli smartphone, le immagini restano dentro i loro contenitori e la navigazione passa a un menu adatto al tocco su smartphone e tablet. Dimensioni dei caratteri, aree da toccare e spaziature sono tutte impostate nel sistema di design della piattaforma per rispettare gli standard di usabilità su dispositivi mobili, quindi chi parte con WEMASY ha subito un sito pronto per gli smartphone e non deve adattarlo dopo.
Scopri cosa è incluso nel creatore di siti WEMASY oppure guarda i piani disponibili nella pagina dei prezzi.
Domande frequenti
Perché il mio sito sembra a posto sul computer ma rotto su smartphone?
Di solito succede perché il sito è stato costruito o progettato soprattutto per la visione su computer, senza regole CSS responsive che adattino il layout agli schermi più piccoli. Il browser del computer ha abbastanza larghezza per mostrare il layout fisso come previsto. Lo schermo di uno smartphone no, quindi gli elementi escono dallo schermo, si sovrappongono o si rimpiccioliscono fino a diventare illeggibili. Controllare il sito nella modalità di simulazione mobile di un browser o su un dispositivo vero è il modo più rapido per vedere cosa vivono i visitatori da smartphone. Con il creatore di siti di WEMASY puoi impostare tutto questo direttamente sul tuo sito.
Un layout rotto su smartphone influisce sul mio posizionamento su Google?
Sì. Google usa l'indicizzazione mobile-first, cioè la versione per smartphone di una pagina è quella che Google valuta principalmente per il posizionamento. Un sito con problemi di visualizzazione su smartphone, testo piccolo o contenuti che escono dall'area visibile riceve punteggi di usabilità più bassi, che incidono sulle prestazioni complessive nella ricerca. Risolvere i problemi su smartphone migliora l'esperienza utente e dà un vantaggio SEO.
Cosa causa lo scorrimento orizzontale su un sito per smartphone?
Lo scorrimento orizzontale su smartphone indica quasi sempre un elemento con una larghezza fissa in pixel che supera la larghezza dello schermo del telefono. Le cause più comuni sono tabelle, barre laterali, contenuti incorporati, immagini senza limiti di larghezza e contenitori impostati a una larghezza precisa in pixel invece che a una percentuale. Individuare l'elemento che esce dallo schermo con gli strumenti per sviluppatori del browser, poi sostituire la larghezza fissa con una percentuale o aggiungere controlli di overflow al contenitore che lo racchiude, di solito risolve il problema.
Come verifico se il mio sito è adatto agli smartphone?
Apri il sito su un vero telefono e scorri ogni pagina importante. Poi aprilo negli strumenti per sviluppatori di un browser per computer e usa la modalità di simulazione dei dispositivi per vedere l'anteprima a più larghezze di schermo. Per un controllo strutturato, passa le pagine nel report sull'usabilità su dispositivi mobili di Google Search Console, che segnala problemi specifici come testo troppo piccolo, elementi cliccabili troppo vicini e problemi di configurazione dell'area visibile. Insieme, i due approcci danno il quadro più completo.
Posso sistemare un sito rotto su smartphone senza rifarlo tutto?
Dipende da come è stato costruito il sito all'inizio. Se il sito gira su una piattaforma che supporta temi responsive, passare a un tema responsive è spesso la soluzione più rapida e non richiede di rifare i contenuti da zero. Se il sito è scritto su misura con un layout non responsive, modifiche CSS mirate con le media query possono risolvere problemi specifici senza rifare tutto. Tuttavia, se il layout è costruito su tabelle o dipende molto da larghezze fisse in tutto il sito, rifarlo su una base responsive è di solito più efficiente che rattoppare i singoli problemi.
Perché i visitatori se ne vanno dopo pochi secondi dal mio sito su smartphone?
Quando i visitatori arrivano su una pagina con problemi di visualizzazione, testo illeggibile, navigazione rotta o immagini lente, se ne vanno in fretta perché la pagina non soddisfa le loro aspettative di base sull'usabilità. Chi usa lo smartphone ha meno tolleranza per gli intoppi di chi usa il computer. Se il layout è rotto o lento, tornano ai risultati di ricerca e cliccano sul risultato di un concorrente. L'articolo su i visitatori che se ne vanno dal tuo sito spiega tutte le ragioni per cui le persone se ne vanno in fretta e come capire quale colpisce il tuo sito.