Anteprima nella casella
Prima che qualcuno apra la tua e-mail, vede solo una riga in un elenco: chi la manda, l’oggetto e qualche parola in grigio. Scrivi i tuoi e guarda come li mostrano sette layout di casella di posta, e dove li tagliano.
Le parole grigie dopo o sotto l’oggetto. Lascialo vuoto per vedere cosa mostra la casella di posta quando un messaggio non ne ha.
Il primo testo visibile dell’e-mail, dall’alto in basso, compresi un link «visualizza nel browser» o le descrizioni delle immagini. I client di posta lo usano quando il testo di anteprima manca o è troppo corto.
L’anteprima viene disegnata dal tuo browser mentre scrivi. Nulla di ciò che inserisci qui viene inviato a noi o salvato.
Nella casella di posta
Sette righe di casella di posta ridisegnate in HTML a larghezze tipiche, mostrate come messaggio non letto. Sono buone approssimazioni: il taglio reale cambia con la larghezza della finestra, l’impostazione di densità, la dimensione del carattere e i font installati sul dispositivo. Il conteggio dei caratteri è misurato su questi disegni.
Cosa guardare
Preheader nascosto da incollare
Metti questo blocco per primo dentro <body>, prima di qualsiasi altro testo. Il div è invisibile nel messaggio aperto, ma gli elenchi della posta in arrivo lo leggono perché è il primo testo dell’HTML. La lunga serie di ‌ dopo la tua frase è il riempimento: caratteri a larghezza zero e spazi vuoti che occupano il resto dell’area di anteprima, così il client non ha più spazio per aggiungere «Visualizza questa e-mail nel browser» o un link di menu.
Le tre parti di una riga della casella
Una casella di posta è un elenco di righe, e ogni riga è costruita con gli stessi tre pezzi del messaggio.
- Nome del mittente
- Il nome visualizzato nell’header
From, la parte prima dell’indirizzo:From: Harbor Books <orders@harborbooks.example>. Di solito viene per primo o in grassetto, ed è quello su cui le persone si basano per capire se ti conoscono. - Oggetto
- L’header
Subject. Una riga in ogni layout, tagliata con i puntini di sospensione quando finisce lo spazio. - Testo di anteprima
- Questo non è affatto un header. Il client di posta legge l’inizio del corpo del messaggio e mostra le prime parole che trova. Quando chi fa marketing ci mette apposta una frase, la chiama preheader.
I primi due li controlli direttamente. Il terzo lo controlli solo decidendo qual è il primo testo del tuo HTML.
Il taglio dipende dalla larghezza, non dal numero di caratteri
Probabilmente hai letto che l’oggetto dovrebbe restare sotto i 50 caratteri. È una regola empirica, perché nessun client di posta conta i caratteri. Ognuno dà all’oggetto un riquadro di una certa larghezza e lascia traboccare il testo. Una riga di lettere strette ci sta più di una riga di maiuscole. «il filo di lilla» è molto più corto sullo schermo di «WOW MAMMA MIA», e i due hanno più o meno lo stesso numero di caratteri.
Questa pagina funziona allo stesso modo. Ogni simulazione è un vero layout HTML a una larghezza tipica, con i font richiesti da quel client, e il browser taglia il testo come farebbe il client. Lo script misura poi quanti dei tuoi caratteri sono sopravvissuti. Prendi i numeri come «circa», perché chi legge può avere un font più grande, una finestra più stretta o un dispositivo senza quel font.
| Layout | Come è costruita la riga |
|---|---|
| Gmail e Yahoo Mail in un browser desktop | Una riga. Una colonna fissa per il mittente, poi oggetto e anteprima si dividono la larghezza restante, quindi un oggetto lungo spinge fuori l’anteprima. |
| Outlook su desktop, Apple Mail su Mac | Una colonna stretta di elenco accanto al riquadro di lettura. Mittente, oggetto e anteprima hanno ciascuno la propria riga. Apple Mail dà all’anteprima due righe. |
| Gmail e Outlook su telefono | Tre righe impilate di una riga ciascuna, accanto a un’iniziale rotonda. |
| Apple Mail su iPhone | Mittente, oggetto, poi due righe di anteprima di default. Chi legge può impostarle da zero a cinque. |
Impostare il testo di anteprima, e riempirlo
Per scegliere il testo di anteprima, rendi la tua frase il primo testo del corpo e nascondila nel messaggio aperto. Il blocco generato da questa pagina lo fa con un div che non occupa spazio e non ha un colore visibile.
C’è un problema. Se la tua frase è lunga 60 caratteri e il client ha spazio per 110, continua a leggere e aggiunge quello che viene dopo: «Visualizza questa e-mail nel browser», il testo alternativo del tuo logo, «Home | Shop | Contatti». Per fermarlo, fai seguire la frase da una lunga serie di caratteri che occupano spazio nell’anteprima ma non disegnano nulla, cioè uno zero-width non-joiner e uno spazio non divisibile, ripetuti (‌ ). Il client riempie con questi la sua area di anteprima e si ferma.
I client di posta cambiano il modo in cui costruiscono le anteprime senza avvisare nessuno, e alcuni comprimono i caratteri vuoti. Prima di un invio importante, mandati un test e guardalo su un telefono.
Su cosa si basano le osservazioni
L’elenco sotto le simulazioni viene da semplici misure di ciò che hai scritto:
- Punti di taglio per l’oggetto e il nome del mittente, presi dai disegni, con il layout per telefono più corto riportato a te.
- Testo di anteprima: assente, che ripete l’oggetto (stesso inizio, o almeno l’80% delle stesse parole), o più corto dello spazio, così che il testo del corpo lo segue.
- Forma: più del 70% di lettere maiuscole, due o più punti esclamativi, il numero di emoji, un «Re:» o «Fwd:» su un messaggio che non è una risposta.
- Lessico da spam: un breve elenco in inglese («free», «act now», «guaranteed»…), segnalato a titolo informativo.
Niente di tutto questo decide dove arriva il tuo messaggio. I provider di posta filtrano soprattutto in base a chi invia, cioè se il dominio supera SPF, DKIM e DMARC e come i destinatari hanno trattato la sua posta in passato. Puoi controllare quel lato con il controllo di autenticazione e-mail. Le parole contano per quello che viene dopo la consegna, quando una persona decide se aprire il messaggio.
Domande frequenti
Quanto deve essere lungo l’oggetto di un’e-mail?
I telefoni mostrano circa da 30 a 45 caratteri dell’oggetto, secondo le lettere e il client. Metti in quello spazio le parole che identificano il messaggio. Un oggetto più lungo va bene quando il resto è un dettaglio che vedrà chi legge da desktop.
Cos’è il testo preheader in un’e-mail?
La frase mostrata dopo o sotto l’oggetto nell’elenco della casella. È il primo testo nel corpo del messaggio, di solito nascosto con CSS nell’e-mail aperta, così compare solo nell’elenco.
Perché la mia e-mail mostra «Visualizza questa e-mail nel browser» nella casella?
Perché quel link è il primo testo del tuo HTML e nessun testo di anteprima viene prima. Aggiungi un preheader nascosto come primo elemento del corpo, e riempilo così che il client non prosegua fino al link.
Quanti caratteri di anteprima mostra Gmail?
Non c’è un numero fisso. In un browser desktop Gmail mette oggetto e anteprima su una sola riga, quindi l’anteprima riceve quello che l’oggetto lascia, da niente a più di 100 caratteri. Su telefono ha una riga tutta per sé, circa da 35 a 45 caratteri.
A cosa serve ‌ in un preheader?
È un riempitivo che non disegna nulla. Uno zero-width non-joiner seguito da uno spazio non divisibile, ripetuto molte volte dopo la frase di anteprima, occupa il resto dell’area di anteprima, così nessun altro testo del messaggio viene aggiunto.
Le emoji o parole come «gratis» mandano un’e-mail nello spam?
Raramente da sole. I filtri pesano l’autenticazione e la reputazione del mittente molto più del lessico. Un oggetto che accumula maiuscole, punti esclamativi e parole da venditore sembra però spam a chi lo legge, e questo basta come motivo per moderarlo.