Provi il tuo modulo dal computer e sembra perfetto. A tutta larghezza, due colonne, spazioso. Fai una prova dal telefono e capisci subito che qualcosa non va. I campi sono minuscoli. La tastiera copre metà del modulo. Tocchi il campo sbagliato. L'intera esperienza sembra rotta.
Metà dei tuoi visitatori usa il telefono. Se il tuo modulo non è responsive, perdi metà degli invii. In questo articolo vedi come progettare moduli che funzionano su telefoni, tablet e computer.
I moduli per il mobile sono diversi da quelli per il computer
Chi usa il telefono compila i moduli in modo diverso da chi usa il computer. Sul computer hai spazio. Puoi usare layout a più colonne. Puoi mettere le etichette accanto ai campi. Sul telefono conta ogni pixel.
Le tastiere dei telefoni sono enormi. Quando la tastiera si apre, copre metà dello schermo. Il modulo scorre. L'utente perde il contesto. Un pulsante che prima era visibile ora è nascosto dietro la tastiera.
Le aree di tocco devono essere più grandi. Un'area cliccabile di 14 per 14 pixel va benissimo con il mouse. Per un dito servono almeno 48 per 48 pixel, altrimenti l'utente la manca.
Chi usa il telefono ha spesso una rete instabile. Ogni caricamento in più del modulo o ogni immagine aggiunge tempo. La velocità conta più che sul computer.
Il layout del modulo a colonna singola
Il modulo responsive più sicuro è a colonna singola. Un campo per riga, qualunque sia la dimensione dello schermo.
I layout a colonna singola sono semplici, funzionano su tutti gli schermi, creano un'esperienza coerente e sono molto prevedibili. Lo svantaggio principale è che sul computer i moduli sembrano più lunghi e richiedono più scorrimento.
La maggior parte dei moduli dovrebbe essere a colonna singola. Se il tuo modulo ha cinque campi, una colonna singola è in realtà più corta di un layout a due colonne sul computer. L'utente scorre meno e vede più contesto.
Per creare un layout a colonna singola usa input, textarea, select { display: block; width: 100%; margin-bottom: 1rem; }. Così tutto si impila in verticale a ogni breakpoint.
Due colonne sul computer, una sul telefono
Se vuoi sfruttare lo spazio orizzontale sugli schermi grandi, usa una griglia con .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } e una media query @media (max-width: 768px) { .form-row { grid-template-columns: 1fr; } }. Sul computer crea due colonne, sul telefono i campi si impilano in una, e il layout resta semplice e responsive.
Raggruppa solo i campi davvero collegati. Un campo "Nome" accanto a un campo "Cognome" ha senso. Un campo "Indirizzo" accanto a un campo "Paese" no.
Aree di tocco e design a misura di dito
L'area di tocco minima sul telefono è di 44 per 44 pixel (secondo le linee guida di uno dei maggiori produttori di telefoni) o di 48 per 48 pixel (Android). Punta ad almeno 44.
Le dimensioni delle aree di tocco valgono per i campi di input, che devono essere abbastanza alti da toccare facilmente (da 40 a 50 pixel va bene), per le caselle di controllo e i pulsanti di opzione, che per impostazione predefinita misurano 13 per 13 pixel e vanno portati ad almeno 44 per 44 con CSS o JavaScript, per i pulsanti, che devono misurare almeno 44 per 44 pixel con un padding aggiunto, e per le etichette, che devono misurare 44 per 44 pixel anche loro se sono cliccabili tramite l'attributo for. A volte etichetta e campo insieme formano l'area di tocco completa.
Per rendere i campi di input più grandi e più facili da toccare usa input[type="text"], input[type="email"], textarea { padding: 0.75rem; font-size: 1rem; }. Il padding rende il campo più alto e più facile da toccare.
Gestire la tastiera
Sul telefono la tastiera del browser copre la metà inferiore dello schermo. Se il tuo modulo sta in fondo alla pagina, il pulsante di invio resta nascosto. L'utente deve scorrere in basso o chiudere la tastiera per vedere il pulsante.
Tieni il modulo vicino all'inizio della pagina. Oppure metti il pulsante di invio sia in alto sia in basso. Non nascondere i pulsanti importanti sotto la tastiera.
Conta anche il tipo di tastiera. Per un campo email usa <input type="email"> per mostrare una tastiera per le email con il tasto @. Per un campo telefono usa <input type="tel"> per mostrare una tastiera numerica. Per un campo numerico usa <input type="number"> per mostrare una tastiera con i numeri. Con il tipo di campo giusto, il browser sceglie la tastiera in automatico.
Quando l'utente tocca un campo, il browser lo fa scorrere in vista. È un bene. Il campo è visibile quando serve scrivere. Ma a volte può scorrere oltre altro contesto. Prova il tuo modulo su un telefono vero per vedere come si comporta.
Posizione delle etichette sul telefono
Sul computer le etichette possono stare sopra, accanto o dentro i campi. Sul telefono quasi sempre è meglio sopra.
Un'etichetta sopra il campo è chiara. L'utente vede prima l'etichetta, poi il campo. Su uno schermo stretto, un'etichetta accanto al campo spreca spazio in orizzontale. Un testo segnaposto dentro il campo sparisce quando inizi a scrivere.
Buona pratica: metti le etichette sopra i campi. Sempre.
<label for="email">Email</label>
<input type="email" id="email">
Spaziatura e padding
I moduli responsive hanno bisogno di più spazio sul telefono, non di meno. Il tuo istinto è comprimere tutto per farlo stare nello schermo. Resisti a questo istinto.
Usa padding e margini generosi: almeno 1rem (16 pixel) tra i campi, almeno 0,75rem (12 pixel) su tutti i lati per il padding dei campi e almeno 1rem (16 pixel) su tutti i lati per il padding dei pulsanti. Una spaziatura generosa rende i moduli più facili da usare, riduce i tocchi sbagliati e migliora la leggibilità. Sul telefono, lo spazio libero vale più dello spazio dello schermo.
Dimensione del testo sul telefono
Usa almeno 16 pixel per i campi di input. Un testo più piccolo costringe a ingrandire o a strizzare gli occhi. 16 pixel è il valore predefinito e funziona.
Le etichette possono essere più piccole, intorno ai 14 pixel. Ma i campi di input devono avere almeno 16 pixel.
Alcuni browser ingrandiscono in automatico quando tocchi un campo con testo sotto i 16 pixel, e il modulo salta e si ingrandisce all'improvviso. Usa input { font-size: 16px; } per evitarlo.
Errori comuni nei moduli responsive
Usare due colonne su tutte le dimensioni di schermo
Sul telefono i moduli vengono schiacciati. I campi sono minuscoli. Le etichette si impilano male. Passa sempre a una colonna sui breakpoint più piccoli.
Fare aree di tocco troppo piccole
Caselle di controllo, pulsanti di opzione e pulsanti devono misurare almeno 44 per 44 pixel. Prova su un telefono vero. Se devi concentrarti per toccarlo, è troppo piccolo.
Usare il testo segnaposto come unica etichetta
Quando l'utente inizia a scrivere, il segnaposto sparisce. Si dimentica a cosa serve il campo. Usa sempre un vero elemento label. Tieni pure il segnaposto, ma non affidarti mai solo a quello.
Mettere il modulo in fondo a una pagina lunga
L'utente scorre fino a un modulo di contatto, tocca il campo email e la tastiera del telefono copre il modulo. Non vede cosa scrive e non raggiunge il pulsante di invio. Metti i moduli vicino all'inizio o assicurati che stiano nello schermo con la tastiera aperta.
Non provare su dispositivi mobili veri
Il browser del tuo computer ha una modalità di visualizzazione mobile. Serve per un controllo veloce. Ma non mostra come funziona davvero il modulo su un telefono. Prova su dispositivi reali. Fatti prestare un telefono se non ne hai uno.
Tecniche per moduli responsive
CSS Grid per layout flessibili
Usa .form-group { display: grid; gap: 0.5rem; } e .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; }. I valori auto-fit e minmax creano un layout che si adatta allo spazio disponibile: i campi si impilano quando lo spazio è stretto e stanno affiancati quando è largo.
Flexbox per il layout dei pulsanti
Usa .form-actions { display: flex; gap: 1rem; flex-wrap: wrap; } e .form-actions button { flex: 1; min-width: 150px; }. Sul computer i pulsanti stanno uno accanto all'altro, sul telefono vanno a capo su più righe e ogni pulsante cresce per riempire lo spazio disponibile.
Media query per breakpoint specifici
Usa @media (max-width: 480px) { label { display: block; margin-bottom: 0.5rem; } input { width: 100%; } } per forzare il layout a colonna singola sugli schermi sotto i 480 pixel.
Come i moduli WEMASY si adattano a ogni dimensione di schermo
Il creatore di moduli di WEMASY crea moduli responsive in automatico. Costruisci dal computer e il mobile è già gestito. Sui telefoni i moduli si impilano in una colonna. Le aree di tocco hanno le dimensioni giuste per il mobile. Etichette e campi hanno la giusta spaziatura. Non serve altro lavoro.
Scopri come funziona la responsività dei moduli nel tuo piano WEMASY.