Progettato per i dispositivi mobili
Silktide carica ogni pagina su un dispositivo mobile simulato e controlla se è stata progettata per funzionare anche lì, ovvero se si adatta a uno schermo stretto o se mostra semplicemente una versione ridotta della pagina desktop.
Perché è importante
Più della metà del traffico web proviene da dispositivi mobili, quindi una pagina che funziona solo su desktop non riesce a soddisfare le esigenze della maggior parte del suo pubblico già al primo tocco. I visitatori che si trovano davanti a testi minuscoli e devono usare continuamente lo zoom con le dita abbandonano la pagina; i motori di ricerca, che indicizzano prima la versione mobile delle pagine, classificano il sito di conseguenza.
Questo controllo rileva il problema fondamentale — una pagina completamente priva di progettazione per dispositivi mobili — anziché i problemi di rifinitura. Una pagina che supera il controllo può comunque presentare problemi minori su dispositivi mobili, che vengono rilevati da altri controlli.
Come risolvere il problema
La soluzione più duratura è il , in modo che la stessa pagina si adatti a qualsiasi larghezza dello schermo. Se il tuo sito è precedente all'introduzione del responsive design, di solito sarà necessario ricostruirlo o adottare un nuovo tema: la maggior parte dei temi moderni per è già responsive. In particolare:
- Dichiara un per dispositivi mobili nell'elemento head di ogni pagina:
<meta name="viewport" content="width=device-width, initial-scale=1">
- Usa layout flessibili e media query , in modo che il contenuto si disponga in un'unica colonna sugli schermi stretti, invece di fissare la pagina a una larghezza da desktop.
- Mantieni il testo del corpo a una dimensione leggibile sui dispositivi mobili: evita design che riducono l'intera pagina per adattarla allo schermo.
- Esegui i test su un telefono reale oppure usando l'emulazione dei dispositivi del browser, con larghezze fino a circa 320 pixel.
Come esegue i test Silktide
- Carica la pagina su un dispositivo mobile simulato.
- Controlla che la pagina dichiari un viewport utilizzabile. L'assenza del viewport, oppure un viewport fissato a una larghezza superiore a 480 pixel, fa fallire il controllo della pagina: questo è il requisito minimo per il supporto ai dispositivi mobili.
- Misura il testo visibile: se più del 35% viene visualizzato a una dimensione illeggibile (inferiore a 10 pixel dopo lo zoom), la pagina non supera il controllo.
- Controlla quanto la pagina deve ridurre lo zoom per adattarsi allo schermo: uno zoom inferiore al 60% delle dimensioni normali indica che la pagina è di fatto un layout desktop e fa fallire il controllo.
- Una pagina supera il controllo quando non presenta nessuno di questi problemi. Silktide segnala anche nel tempo quante pagine non sono progettate per i dispositivi mobili.
Risoluzione dei problemi
La mia pagina appare perfetta sul telefono
Alcune pagine possono sembrare accettabili pur non superando uno dei controlli sopra descritti, ad esempio quando un tag viewport generato da uno strumento obsoleto ha una larghezza fissa. Visualizza il codice sorgente della pagina e controlla che il tag <meta name="viewport"> corrisponda al formato consigliato.
Il controllo viene superato, ma l'esperienza sui dispositivi mobili è scadente
Superare il controllo significa che la pagina soddisfa i requisiti di base, non che sia ottimale. Consulta i controlli correlati per il testo piccolo, le aree di attivazione ridotte e lo zoom disabilitato.