Il design di un’email per dispositivi mobili parte dall’ordine di lettura: senza ingrandire, il cliente deve capire l’offerta, la condizione importante e l’azione successiva. Una griglia di prodotti Shopify spaziosa su desktop può diventare una fila di immagini minuscole sul telefono. Progetta prima per lo spazio di lettura più stretto, poi verifica cosa succede quando il testo si allunga, le immagini non sono disponibili o le colonne si impilano.
Crea un ordine di lettura chiaro
Usa una struttura semplice a colonna singola per il messaggio principale. Presenta promessa, spiegazione di supporto e azione principale in un ordine che resti comprensibile anche quando le immagini non si caricano. Gli altri blocchi prodotto dovrebbero sostenere l’azione, non competere con essa.
Mantieni il testo importante come testo vero. I lettori non dovrebbero dover ingrandire un’immagine promozionale per scoprire l’offerta o le condizioni. Scegli un font sicuro per le email e una dimensione del corpo comoda; circa 16 pixel è un punto di partenza utile, da verificare poi nel rendering reale. Una traduzione più lunga può richiedere più spazio verticale, non lettere più piccole.
Progetta la prima schermata intorno a una decisione
Abbozza prima la versione stretta, poi organizza la griglia desktop. Per il lancio di un prodotto, l’ordine può essere: nome, una frase che spiega a cosa serve, immagine di supporto, informazioni sul prezzo e pulsante. Il lettore dovrebbe capire l’offerta anche vedendo solo questa prima parte. Un grande banner decorativo non dovrebbe spingere ogni dettaglio utile molte schermate più in basso.
Parti da un testo del corpo vicino ai 16 pixel, con interlinea sufficiente a separare comodamente le righe, poi controlla l’email inviata. Sono riferimenti di progettazione, non una regola per assegnare la stessa dimensione a ogni etichetta e titolo. Distingui chiaramente corpo e intestazioni e lascia spazio sufficiente attorno all’azione principale. Ridurre tutto il modello per farlo entrare è di solito la risposta sbagliata a un layout troppo affollato.
Se mostri due schede prodotto, mantieni immagine, titolo, prezzo e link nello stesso componente. Quando le schede si impilano, il cliente deve vedere un prodotto completo prima del successivo. Evita di impilare prima entrambe le immagini e poi entrambe le descrizioni: costringeresti il lettore a capire da sé a quale prodotto appartengono i dettagli.
Lascia che i componenti si adattino al contenuto
Evita aree di testo con altezza fissa e interruzioni di riga inserite solo per bilanciare un titolo desktop. Lascia ai pulsanti spazio sufficiente per un’etichetta più lunga e rendi comoda da toccare tutta l’area cliccabile. Separa i link vicini affinché il dito non apra la destinazione sbagliata.
Usa testo alternativo descrittivo per le immagini informative ed evita che quelle decorative aggiungano rumore. Verifica il contrasto del testo sullo sfondo reale, comprese le modifiche della modalità scura. Un’etichetta pallida che sul monitor sembra elegante potrebbe essere difficile da leggere all’aperto, sul telefono.
Usa una matrice di anteprime che evidenzi i punti deboli
Una matrice utile comprende una vista stretta da telefono, una più ampia, le immagini non disponibili, la modalità scura dove supportata e dati cliente realistici. Per le traduzioni, includi la versione più lunga anziché testare solo quella breve. Osserva il messaggio nel suo insieme e poi controlla le aree più esposte agli errori: titoli prodotto, prezzi, pulsanti e link nel piè di pagina.
- Se l’etichetta di un pulsante va a capo, lascia crescere la sua altezza e controlla il padding: non tagliare la parola che descrive l’azione.
- Se il nome del prodotto tocca il blocco seguente, rimuovi l’altezza fissa e lascia che il testo vada a capo.
- Se un’informazione importante scompare quando mancano le immagini, spostala nel testo reale e usa l’immagine come supporto.
- Se i link vicini sono difficili da toccare separatamente, aumentane la distanza o riduci il numero di azioni concorrenti.
Simula deliberatamente i casi di errore
In Sendvio, visualizza il modello con dati cliente reali e controllalo a larghezza ridotta. Prova un nome lungo, un campo di personalizzazione mancante, un prezzo più lungo e un prodotto con titolo insolitamente esteso. Poi invia test alle app email usate più spesso dai tuoi clienti.
Per una promozione con due prodotti, controlla l’ordine quando le schede si impilano: immagine, nome, prezzo e azione di ciascun prodotto devono restare insieme. Se si separano, semplifica il blocco. L’obiettivo non è riprodurre a ogni costo la disposizione desktop, ma conservarne il significato e rendere chiara l’azione successiva senza zoom, tentativi o scorrimento orizzontale.
Controlla il contrasto tra testo e sfondo effettivi. Per il testo normale, un rapporto di contrasto di almeno 4,5:1 è un riferimento utile per l’accessibilità; per testo sufficientemente grande il minimo è 3:1. Questi valori non sostituiscono una valutazione completa, ma rendono meno soggettive le decisioni sul colore. Verifica le piccole etichette grigie con la stessa attenzione del titolo principale.
Salva il componente corretto nel modello riutilizzabile e riprovalo dopo modifiche importanti. Un buon modello mobile non si limita a evitare lo scorrimento orizzontale: preserva l’ordine di lettura, la comprensione dell’offerta e un’azione successiva chiara e utilizzabile negli ambienti email che supporti davvero.