Il sito mobile-first non è il sito desktop ristretto
Il 70% delle visite arriva dal telefono, ma la maggior parte dei siti è ancora pensata alla scrivania. Cosa cambia davvero quando si progetta partendo dal pollice.
Responsive non significa mobile-first
Quasi tutti i siti oggi 'si adattano' al telefono: le colonne si impilano, i testi si restringono, tecnicamente nulla si rompe. Ma adattarsi non è essere progettati: un layout pensato per lo schermo grande e poi compresso conserva le priorità dello schermo grande — che sul telefono sono le priorità sbagliate.
Mobile-first è un ordine di progettazione: si parte dallo schermo piccolo, dove lo spazio costringe a scegliere cosa conta, e si espande verso il grande. La costrizione è il valore: ciò che sopravvive ai 390 pixel è ciò che serve davvero.
Il pollice è il cursore
Sul telefono non c'è mouse: c'è un pollice che copre con comodità solo la metà inferiore dello schermo. Le azioni importanti — chiamata, preventivo, WhatsApp — vanno dove il pollice arriva, non dove il layout desktop le aveva messe. I bersagli touch sotto i 44 pixel sono errori di mira garantiti, e ogni errore di mira è un attrito che si paga in uscite.
Anche la lettura cambia: righe più corte, paragrafi più brevi, un concetto per schermata. Il testo che sul desktop è una colonna elegante, sul telefono è un muro — e i muri non si leggono, si scavalcano con lo scroll o con il tasto indietro.
La velocità è parte del design
Il contesto mobile è spietato: rete variabile, attenzione frammentata, alternativa a un tocco di distanza. Ogni secondo di caricamento oltre i due costa una quota misurabile di visitatori — prima ancora che abbiano visto qualcosa da giudicare.
Per questo il peso è una scelta progettuale, non un dettaglio tecnico: immagini nel formato giusto, niente librerie superflue, il contenuto principale servito subito. Un sito mediocre che si apre in un secondo batte un sito bellissimo che si apre in cinque.
Il collaudo si fa per strada
Il sito mobile non si collauda nel simulatore del browser sulla scrivania: si collauda sul telefono vero, in 4G, con una mano sola, camminando. È lì che emergono il bottone irraggiungibile, il form che combatte con la tastiera, il popup che copre tutto.
La regola operativa finale: ogni decisione di design si valuta prima nella versione mobile. Se funziona dove lo spazio manca e l'attenzione scarseggia, funzionerà ovunque. Il contrario, come dimostra la maggior parte dei siti, non è vero.
Perché Google guarda solo la versione mobile
Dal duemilaventuno l'indicizzazione avviene esclusivamente sulla versione mobile: quello che non compare sul telefono, per i motori di ricerca non esiste. Un testo nascosto su schermo piccolo per ragioni di pulizia grafica è un testo che non contribuisce al posizionamento.
È un cambio di prospettiva che molti progetti non hanno ancora recepito: si disegna la pagina desktop, la si comprime, e si accetta che su telefono qualcosa sparisca. Quel qualcosa, quasi sempre, è la parte che avrebbe fatto trovare la pagina.
Il pollice come vincolo progettuale
Su un telefono tenuto con una mano, la zona raggiungibile senza riposizionare la presa è il terzo inferiore dello schermo. Ogni elemento importante che finisce in alto a destra richiede un movimento che una parte degli utenti non farà.
Le conseguenze pratiche sono due: i pulsanti di azione vanno in basso, non in cima; e la navigazione in fondo alla schermata funziona meglio del menu a panino, che nasconde le sezioni dietro un gesto in più.
La dimensione minima di un'area toccabile è di quarantaquattro pixel per lato. Sotto quella soglia gli errori di tocco crescono in modo misurabile, e ogni errore è un motivo per abbandonare.
I moduli sono il punto in cui si perde di più
Compilare un modulo da telefono è faticoso e ogni campo pesa il doppio rispetto al desktop. Un form da otto campi che su computer converte al quattro per cento, su telefono scende sotto l'uno.
Le correzioni sono meccaniche e danno risultati immediati: tastiera numerica per i numeri di telefono, tastiera email per gli indirizzi, completamento automatico attivo, un campo per riga, e nessuna richiesta di dati che si possono chiedere dopo.
La regola più utile è chiedersi, per ogni campo, cosa succede se lo togliamo. Se la risposta è che qualcuno dovrà fare una domanda in più al telefono, il campo va tolto: quella telefonata è meno costosa di un contatto perso.
Il peso è una scelta di progetto, non un dettaglio tecnico
Su rete mobile una pagina da tre megabyte impiega diversi secondi a comparire, e la maggior parte di quel peso sono immagini caricate a risoluzione da monitor. Servire immagini dimensionate per lo schermo reale è l'intervento singolo che migliora di più il caricamento.
Il secondo peso è tipografico: caratteri caricati da server esterni bloccano la comparsa del testo. Precaricarli e prevedere un carattere di sistema come ripiego elimina la schermata bianca iniziale.
Il terzo sono gli script di terze parti — chat, banner, strumenti di analisi — che si sommano senza che nessuno tenga il conto. Vanno caricati dopo il contenuto, mai prima.
Cosa misurare per sapere se funziona
Tre numeri, separati per dispositivo: il tasso di conversione, il tempo di comparsa del contenuto principale e la stabilità visiva della pagina durante il caricamento. Guardare le medie aggregate nasconde esattamente il problema che si sta cercando.
Il confronto che conta è tra la conversione da telefono e quella da computer sullo stesso sito. Se la prima è meno della metà della seconda, il sito non è mobile-first: è un sito desktop che si adatta, ed è lì che si sta perdendo la maggior parte del traffico.
