Oltre il 60 per cento di tutto il traffico web arriva ormai da dispositivi mobili. Un sito non adatto al mobile delude la maggior parte di chi lo visita, e non è un caso marginale. Fare bene il mobile non è un extra. È il livello minimo che ci si aspetta da un sito aziendale.
Rendere un sito adatto ai dispositivi mobili significa dare a chi lo visita da telefono la stessa qualità di esperienza di chi lo visita da computer. Non una versione ridotta che si carica e basta, ma un sito dove il testo si legge, la navigazione funziona, le immagini si vedono bene e i moduli si possono davvero inviare da un telefono senza fatica.
Questo articolo passa in rassegna le modifiche pratiche che rendono un sito davvero adatto al mobile, da navigazione e testo fino a immagini, moduli e velocità.
Cosa significa in pratica essere adatti ai dispositivi mobili?
Un sito adatto ai dispositivi mobili è un sito in cui ogni funzione lavora correttamente su un telefono senza bisogno di trucchi. Il testo è leggibile con lo zoom predefinito. La navigazione si apre e si chiude in modo pulito. I pulsanti sono abbastanza grandi da toccarli senza colpire l'elemento sbagliato. Le immagini si caricano e si vedono correttamente. I moduli si compilano e si inviano senza fatica.
La distinzione tra tecnicamente compatibile con il mobile e davvero adatto al mobile conta. Un sito è tecnicamente compatibile se non si rompe su un telefono. È davvero adatto se usarlo su un telefono sembra naturale come usarlo su un computer. La differenza sta nei dettagli. Spaziatura, dimensione dei font, dimensione delle aree da toccare e tempo di caricamento decidono se l'esperienza è giusta o appena funzionante.
La base di un sito adatto al mobile è il design responsive, che fa adattare il layout in automatico a schermi di dimensioni diverse. L'articolo su cos'è il design responsive spiega come funziona a livello tecnico.
Come si verifica se il tuo sito è adatto ai dispositivi mobili?
Il test più affidabile è passare in rassegna il tuo sito su un telefono vero. Non l'anteprima mobile di un browser. Non una finestra del computer ridotta a una colonna stretta. Un telefono vero, con i tuoi pollici, nel modo in cui lo userebbe un visitatore.
Controlla ogni pagina. Apri la navigazione e verifica che ogni link sia raggiungibile. Leggi il testo per confermare che sia leggibile senza ingrandire. Tocca ogni pulsante per confermare che risponda correttamente. Compila e invia i moduli. Controlla che le immagini si carichino e si vedano bene. Controlla che nulla richieda lo scorrimento orizzontale.
I motori di ricerca offrono anche strumenti gratuiti per testare il mobile. Inserisci il tuo URL e lo strumento segnala problemi specifici, come testo troppo piccolo da leggere, elementi cliccabili troppo vicini o contenuti più larghi dello schermo. Per indicazioni più ampie su cosa controllare prima della messa online, cosa sapere prima di lanciare il tuo sito tratta il test su mobile come parte del processo completo prima del lancio.
Come far funzionare la navigazione su mobile?
La navigazione è il punto in cui l'esperienza mobile si rompe più spesso. Un menu orizzontale che occupa tutta la larghezza di un monitor non ha spazio sullo schermo di un telefono. La soluzione standard è un menu richiudibile attivato da un pulsante, di solito in un angolo in alto.
Il pulsante del menu deve essere riconoscibile subito. L'icona a tre linee è diventata una convenzione ampiamente conosciuta per i menu di navigazione ripiegati. Quando il menu si apre, deve coprire abbastanza schermo da risultare facile da leggere e da toccare. Le voci hanno bisogno di abbastanza spazio verticale perché un dito ne tocchi una senza colpire quella sopra o sotto.
Tieni breve il menu mobile. Se la navigazione per computer ha molte voci, pensa a quali servono di più ai visitatori mobili e se le voci secondarie si possono raggruppare o togliere dal primo livello. Un menu mobile più pulito è più facile da usare. L'articolo su cos'è la navigazione di un sito tratta struttura e usabilità della navigazione su tutti i dispositivi.
Come devono essere testo e font su mobile?
Un testo facile da leggere su computer può diventare scomodamente piccolo su un telefono se la dimensione del font è troppo bassa. Una dimensione minima del testo di 16 pixel è lo standard più usato per la leggibilità su mobile. Sotto quella soglia il testo richiede lo zoom, che la maggior parte dei visitatori non farà.
Conta anche la lunghezza delle righe. Su computer una riga di testo può occupare 600 o 700 pixel. Su mobile lo stesso testo va a capo in righe molto più corte. Se l'interlinea è troppo stretta o i paragrafi sono troppo lunghi, leggere su uno schermo piccolo diventa scomodo. Paragrafi brevi, interlinea generosa e stacchi chiari tra le sezioni migliorano la leggibilità.
I titoli devono ridursi in proporzione. Un H1 di 48 pixel su computer può andare bene a 28 o 32 pixel su mobile. Se i titoli restano alla dimensione da computer su un telefono, dominano lo schermo e spingono il contenuto vero sotto la parte visibile.
Come gestire le immagini su mobile?
Le immagini sono uno dei maggiori rischi per le prestazioni su mobile. Un'immagine a piena risoluzione pensata per un monitor da 1440 pixel è molto più grande del necessario se mostrata su uno schermo di telefono da 375 pixel. Servirla ai visitatori mobili spreca banda e rallenta molto la pagina.
La soluzione è servire immagini di dimensioni adatte ai diversi dispositivi. La maggior parte dei creatori di siti moderni lo fa in automatico, generando più dimensioni e servendo quella giusta in base allo schermo. Se gestisci le immagini a mano, ridimensionale alla dimensione massima a cui verranno mostrate, non alla più grande che la tua fotocamera può produrre.
Fai attenzione a come le immagini vengono ritagliate su mobile. Un'immagine orizzontale larga, equilibrata su computer, può risultare ritagliata male su uno schermo mobile alto. Le immagini hero e le sezioni banner sono i punti più comuni in cui i ritagli per computer e per mobile divergono in modo evidente. L'articolo su cos'è la velocità di un sito spiega l'impatto dell'ottimizzazione delle immagini sulle prestazioni complessive della pagina.
Cosa fa funzionare bene i moduli su mobile?
I moduli sono un punto di forte attrito su mobile. Compilare i campi con una piccola tastiera touch è più impegnativo che scrivere con una tastiera intera. Meno campi inserisci, meglio è. Ogni campo in più è un'occasione di frustrazione e un motivo per abbandonare.
Conta la dimensione dei campi. Devono essere abbastanza grandi da toccarli con precisione e abbastanza larghi perché il testo dentro sia leggibile. Le etichette vanno sopra ogni campo, non solo come testo segnaposto al suo interno, perché il segnaposto sparisce non appena qualcuno inizia a scrivere.
Imposta bene i tipi di campo. Un campo email deve far comparire la tastiera per l'email. Un campo telefono deve far comparire il tastierino numerico. Un campo data deve aprire un selettore di date. Sono piccole impostazioni tecniche che rendono l'esperienza sensibilmente più fluida.
Prova ogni modulo sul telefono, compilandolo per intero e inviandolo. Conferma che l'invio vada a buon fine e che l'eventuale messaggio di conferma compaia correttamente. Un modulo di contatto che si invia sul computer ma fallisce su mobile perde contatti in silenzio, senza che tu lo sappia.
Come influisce l'adattamento al mobile sul posizionamento nelle ricerche?
I motori di ricerca indicizzano per prima la versione mobile del tuo sito. Significa che l'esperienza mobile non conta solo per i visitatori mobili. È la versione che determina come il tuo sito viene capito e posizionato su tutti i dispositivi.
Un sito che va male su mobile, per tempi di caricamento lenti, layout rotti o testo illeggibile, si posizionerà sotto siti paragonabili che gestiscono bene il mobile. I visitatori che arrivano su un sito mobile e se ne vanno subito perché non funziona mandano un segnale chiaro: la pagina non ha risposto alle loro esigenze. Alte frequenze di rimbalzo dei visitatori mobili influiscono sul posizionamento nel tempo.
La velocità della pagina su mobile è un fattore specifico. Una pagina che si carica in due secondi su una connessione a banda larga veloce può impiegare sei secondi o più su una tipica connessione cellulare. Immagini ottimizzate, pochi script bloccanti e una struttura pulita del modello contribuiscono a tempi di caricamento mobile più rapidi. Per un quadro completo di come funziona l'ottimizzazione per i motori di ricerca, cos'è la SEO tratta l'argomento per intero, compresi i fattori tecnici.
Come WEMASY gestisce il mobile
Il creatore di siti di WEMASY usa modelli responsive che si adattano in automatico a computer, tablet e mobile. L'editor visivo include un'anteprima mobile, così mentre costruisci puoi controllare come appare ogni sezione su uno schermo piccolo. Ottimizzazione delle immagini e prestazioni mobili le gestisce la piattaforma, senza configurazione manuale.
Scopri cosa è incluso nel creatore di siti WEMASY o guarda i piani nella pagina dei prezzi.
Domande frequenti
Come faccio a sapere se il mio sito è adatto ai dispositivi mobili?
Passa in rassegna il tuo sito su un telefono vero. Prova ogni pagina, ogni voce di navigazione, ogni modulo e ogni pulsante. I motori di ricerca offrono anche strumenti gratuiti per testare il mobile: inserisci il tuo URL e segnalano problemi specifici. Combinando una verifica manuale e un controllo con uno strumento, emergono i problemi che contano di più. Le anteprime mobili del browser sono utili durante lo sviluppo, ma non replicano del tutto l'esperienza su un dispositivo reale. Con il creatore di siti di WEMASY puoi impostarlo direttamente sul tuo sito.
Posso rendere adatto al mobile un sito esistente senza ricostruirlo?
Dipende da come è stato costruito il sito. Nei siti creati con creatori di siti moderni si può spesso migliorare l'esperienza mobile cambiando le impostazioni del modello, ridimensionando le immagini o passando a un modello migliore. I siti costruiti con codice su misura o su piattaforme più vecchie possono richiedere un intervento più importante. In alcuni casi ricostruire su una piattaforma attuale è più veloce e dà un risultato migliore che rattoppare un vecchio sito.
Un sito adatto al mobile si posiziona meglio nei risultati di ricerca?
I motori di ricerca usano la versione mobile del tuo sito come versione principale per l'indicizzazione e il posizionamento. Un sito che funziona bene su mobile e si carica in fretta su un telefono di solito rende meglio di uno costruito soprattutto per computer. Oltre al vantaggio di posizionamento, un sito adatto al mobile trattiene i visitatori più a lungo, riduce le frequenze di rimbalzo e converte meglio. Anche questi segnali di comportamento influiscono sulle prestazioni di ricerca nel lungo periodo.
Qual è la dimensione minima del font per un sito mobile?
Una dimensione del testo di 16 pixel è il minimo più consigliato per la leggibilità su mobile. Sotto quella soglia il testo diventa difficile da leggere senza zoom. I titoli devono ridursi in proporzione, per non sopraffare lo schermo. Un'interlinea di almeno 1,5 volte la dimensione del font migliora la leggibilità sugli schermi piccoli, soprattutto nei paragrafi più lunghi.
Quanto devono essere grandi i pulsanti su un sito mobile?
Per i pulsanti mobile si consiglia ampiamente un'area da toccare di almeno 44 per 44 pixel. Dà al dito un bersaglio chiaro e riduce i tocchi accidentali sugli elementi vicini. I pulsanti devono anche avere abbastanza spazio tra loro, perché toccarne uno non venga registrato come tocco su qualcosa di vicino. I pulsanti di invito all'azione devono essere grandi, visivamente distinti e facili da raggiungere con il pollice senza spostare il telefono.