Rendere utilizzabili pagine e navigazione da cellulare

Il sito da smartphone si vede male o il menu non si apre: cosa controllare

Sul computer il sito sembra a posto, ma dal telefono i testi escono dallo schermo, i pulsanti si sovrappongono oppure il menu non si apre.

Leggi la guida8 minuti di lettura
Smartphone e tablet su un banco di lavoro durante una verifica della visualizzazione di un sito
Una verifica su smartphone e tablet permette di confrontare la stessa pagina con larghezze e interazioni diverse.

Sul computer il sito sembra a posto, ma dal telefono i testi escono dallo schermo, i pulsanti si sovrappongono oppure il menu non si apre. Per capire cosa correggere serve distinguere un problema di impaginazione da un comando che non risponde. Ecco un percorso di verifica utile anche per spiegare il difetto a chi segue il sito.

Indice della guida

Descrivi il difetto e il percorso che lo provoca

Parti dall’indirizzo esatto: una pagina servizi può usare una struttura diversa dalla home. Scrivi cosa fai e cosa succede, per esempio: “Apro la pagina preventivi, tocco le tre linee del menu e non compare nessuna voce”. Una breve registrazione è spesso più utile di una foto del solo punto finale.

Annota modello del telefono, browser, orientamento e presenza di finestre o banner. Specifica se il difetto compare subito oppure dopo aver scorso la pagina. Se hai aperto il link dentro un’app, prova anche nel browser del telefono.

Non confondere un menu fermo con una pagina che deve ancora caricarsi. Se i comandi funzionano soltanto dopo una lunga attesa, considera anche la guida sul sito lento da smartphone.

Confronta browser, schermi e pagine diverse

Ripeti gli stessi passaggi su un secondo telefono o tablet. Controlla una pagina informativa, una pagina commerciale e i contatti: se tutte hanno lo stesso difetto nell’intestazione, il componente condiviso diventa un punto da esaminare. Se succede soltanto su una pagina, cerca ciò che contiene di diverso.

Chi sviluppa il sito può usare la modalità dispositivo di Chrome DevTools per provare larghezze diverse e individuare il punto in cui l’impaginazione cambia. L’emulazione è un’approssimazione: la conferma va fatta anche sul dispositivo reale.

Controlla inoltre la rotazione dello schermo. Un menu che resta aperto e copre la pagina dopo il passaggio da verticale a orizzontale richiede una verifica specifica del cambio di layout.

Se la pagina è tagliata, cerca l’elemento troppo largo

Se devi trascinare l’intera pagina lateralmente per leggere, segnala da quale sezione inizia il problema. Una tabella, una mappa incorporata, una riga senza interruzioni o una colonna con larghezza fissa possono superare lo spazio disponibile. Una tabella con scorrimento nel proprio riquadro va distinta dall’intero sito che esce dallo schermo.

La documentazione MDN sul design responsive descrive layout flessibili, immagini adattabili e regole che cambiano con la larghezza. Il tecnico deve trovare l’elemento responsabile e correggere la regola pertinente.

Evita correzioni che nascondono semplicemente tutta la parte eccedente: potrebbero tagliare prezzi, testi o pulsanti. Dopo l’intervento controlla che il contenuto sia ancora completo, comprese etichette e messaggi dei moduli.

Controlla perché il sito appare minuscolo o ingrandito

Quando sul telefono compare una versione desktop molto piccola, fai verificare il metadato viewport. La documentazione MDN sul viewport spiega come la larghezza usata dal browser influenzi l’adattamento della pagina allo schermo. L’impostazione deve essere coerente con il layout mobile del sito.

Controlla anche se è attiva l’opzione del browser per richiedere il sito desktop. Prova le dimensioni del testo abitualmente usate sul telefono: un titolo più grande non dovrebbe finire sopra il pulsante successivo.

Non bloccare lo zoom per nascondere il difetto. Se servono verifiche più ampie su lettura, tastiera e interazione, approfondisci l’accessibilità di contatti e prenotazioni.

Controlla gli script e le modifiche recenti

Se il pulsante è raggiungibile ma non reagisce, chi segue il sito può consultare la console degli strumenti per sviluppatori per leggere gli errori JavaScript e riprodurre l’azione. Va individuato l’errore pertinente, evitando di attribuire il guasto a ogni avviso presente.

Segnala modifiche recenti a tema, menu, banner o strumenti che ritardano e combinano gli script. Il confronto va eseguito su una copia di prova, cambiando un elemento alla volta e verificando il risultato.

Se il difetto è iniziato dopo un intervento su WordPress, consulta anche cosa controllare dopo un aggiornamento. Non eliminare componenti dal sito pubblico per tentativi: potrebbero gestire anche moduli e prenotazioni.

Ripeti il percorso del cliente dopo la correzione

La verifica deve arrivare oltre l’aspetto della home. Apri il menu, raggiungi un servizio, leggi le condizioni e prova l’azione di contatto. Controlla i messaggi del modulo e la sua conferma, usando dati di prova riconoscibili e concordati con chi riceve le richieste.

  • Prova telefono verticale e orizzontale.
  • Controlla apertura e chiusura dei sottomenu.
  • Verifica che intestazioni e finestre non coprano i campi.
  • Ripeti il test come visitatore senza accesso amministrativo.

Se il tecnico vede la correzione e tu vedi ancora il difetto precedente, confrontate la stessa versione della pagina. La guida alle modifiche non visibili per la cache affronta questo caso separato.

Prepara una richiesta di assistenza riproducibile

Invia un unico riepilogo con link, dispositivo, browser, passaggi e risultato atteso. Aggiungi una registrazione priva di dati personali e indica se il problema si ripete anche su un altro telefono. Evita descrizioni generiche come “da mobile è tutto rotto”.

Chiedi che il lavoro comprenda la verifica delle pagine che condividono il componente modificato. Una correzione al menu deve funzionare anche sulle pagine interne; una regola per le tabelle deve rispettare gli altri contenuti.

Conserva il breve percorso di prova per i controlli successivi. Prima di promuovere una nuova pagina o una campagna, ripeterlo ti aiuta a scoprire se un visitatore riesce effettivamente a raggiungere il servizio e a contattarti.

Domande frequenti

Basta restringere la finestra del computer per controllare il sito mobile?

È un primo controllo utile, ma non riproduce tutte le caratteristiche del telefono. Verifica anche su un dispositivo reale, con il tocco e il browser usato dai visitatori.

Perché il menu funziona sul computer e non sul telefono?

Le due versioni possono usare strutture e comportamenti diversi. Sul telefono il problema può riguardare gli script del menu, un pannello sovrapposto o un’interazione prevista soltanto per il mouse.

Devo rifare tutto il sito se una pagina è tagliata?

Non necessariamente. Il problema può dipendere da un singolo elemento troppo largo o da una regola del layout. Prima individua le pagine coinvolte e il componente responsabile.

Un buon punteggio di velocità garantisce che il menu funzioni?

No. La velocità di caricamento e il corretto funzionamento della navigazione richiedono verifiche distinte. Prova concretamente apertura del menu, scelta delle voci e percorso fino al contatto.

Fonti ufficiali e approfondimenti

Riferimenti per approfondire i controlli descritti nella guida.

Problemi con il tuo sito web?

Il sito è lento, presenta errori o non viene trovato su Google? Con SitiProfessionali.net ti aiutiamo a migliorarlo, risolvere i problemi tecnici o realizzare un nuovo sito per la tua attività.

Scopri i servizi per il tuo sito SitiProfessionali.net

Assistenza professionale

Il tuo sito è difficile da usare sul telefono?

Inviaci il link della pagina, il modello del telefono e i passaggi che non funzionano. Possiamo valutare il problema di impaginazione o navigazione e aiutarti a rendere utilizzabile il percorso verso i tuoi servizi. Scopri i servizi per il tuo sito su SitiProfessionali.net.

WhatsApp
Si apre in una nuova scheda.