Gli errori di codifica e-mail più comuni e come evitarli

Nonostante tutte le campane e i fischietti della tua e-mail, gli errori di codifica possono rovinarla completamente. Solo un collegamento accorciato in modo errato o un formato colore errato e la tua e-mail sembrerà infelice, soprattutto se un utente decide di controllarla tramite uno smartphone anziché un client di posta elettronica Web o passa a un gadget con una risoluzione dello schermo diversa.

In questo post parleremo degli errori comuni di codifica delle e-mail HTML e condivideremo alcuni consigli per evitarli.

Da dove vengono i problemi di visualizzazione della posta elettronica?

Per dirla semplicemente, ci sono due possibili ragioni per cui un utente vede la tua email al di fuori del modo che hai pianificato. Il primo è relativo alle caratteristiche tecniche del dispositivo dell'utente. Il secondo è il client di posta elettronica, per essere più precisi, il suo motore di rendering.

Caratteristiche tecniche del dispositivo di un utente

Ci sono almeno due caratteristiche tecniche di qualsiasi dispositivo che dovresti prendere in considerazione:

1. Risoluzione dello schermo : la dimensione dello schermo, espressa in pixel. Ad esempio, l'iPhone X ha una risoluzione dello schermo di 1125×2436 pixel. Se la tua email contiene due colonne di testo, 600 pixel ciascuna, non verrà visualizzata correttamente.
2. PPI, o pixel per pollice : il numero di pixel in un pollice dello schermo. Il PPI dell'iPhone X è 458. Immagina: devi aggiungere un pulsante di azione alla tua email. Se il pulsante è inferiore a 44 punti, che per iPhone X significa 132×132 pixel, occuperà meno di un terzo di pollice quadrato dello spazio dello schermo e l'utente difficilmente sarà in grado di toccarlo.

Un'altra cosa da tenere a mente: gli utenti spesso ruotano i loro dispositivi mobili, quindi la tua email dovrebbe apparire ordinata e avere tutte le funzionalità sia in verticale che in orizzontale.

Per prevenire problemi associati alle caratteristiche tecniche del dispositivo dell'utente, dovresti utilizzare un design di posta elettronica reattivo.

In primo luogo, si dovrebbe aggiungere le media query nella head della vostra email. Ad esempio, lo @media screen e la @media screen (max-width: 600px) @media screen (max-width: 600px) indicano che il design dell'e-mail verrà ottimizzato se la larghezza dello schermo è inferiore a 600 pixel. Se la larghezza dello schermo è superiore a 600 pixel, l'utente vedrà la versione a larghezza fissa di questa email.

In secondo luogo, dovresti creare un'e-mail sotto forma di tabella con celle al suo interno:

 <tabella>
<tr>
    <td>...</td>
</tr>
</table>

Quindi, aggiungi uno stile per ogni cella, ad esempio:

 <td><img src="http://somewebsite.com/someimage.jpg" width="600" alt=""></td>

Tuttavia, anche dopo aver adottato queste misure, puoi ancora avere problemi con la visualizzazione delle tue e-mail. La fonte del problema è il motore di rendering del client di posta elettronica.

Un client di posta elettronica

La seconda fonte di possibili problemi di visualizzazione è il client di posta elettronica utilizzato dai destinatari per aprire le tue campagne. La parte centrale di un client di posta elettronica è un motore di rendering. Riceve un'e-mail come un lungo script di codice, la elabora e produce nel modo in cui siamo abituati a ricevere le e-mail: testo comprensibile, strutturato e formattato con immagini, collegamenti e altri media.

Dai un'occhiata all'esempio qui sotto. È una parte di codice di un'e-mail promozionale, come la vede il motore di rendering di Gmail. Se questa e-mail è stata visualizzata in questo modo a un potenziale cliente, difficilmente taglierà il codice e capirà che esiste un codice promozionale per il 40% di sconto.

Ogni client di posta ha il proprio motore di rendering, il che significa che la stessa e-mail, aperta tramite client di posta diversi, può avere un aspetto completamente diverso.

Ecco un elenco dei client di posta elettronica più popolari in tutto il mondo. Ovviamente, i tuoi destinatari ne usano uno o anche un gruppo di essi per aprire le e-mail che invii.

Tutti questi client di posta elettronica hanno alcune peculiarità che dovresti prendere in considerazione durante la codifica delle email HTML.

Ad esempio, Apple Mail per iOS non supporta:

• proprietà CSS inline-size ;
• @media (orientation) media query;
• collegamenti di ancoraggio;
• Formati di immagine HDR, PPM e SVG e altro ancora.

Gmail supporta varie proprietà CSS e media query oltre a:

• box-shadow, text-shadow, e alcune altre proprietà CSS;
• @media (prefers-color-scheme) media query e altro.

Errori comuni di codifica della posta elettronica e come evitarli

Il miglior consiglio generale per evitare errori di codifica della posta elettronica è limitare il tuo inventario al codice supportato dalla maggior parte dei client di posta elettronica, indipendentemente dall'età delle loro versioni. In parole semplici, fare un passo indietro e programmare come se fosse il 1999. Ad esempio, è ampiamente consigliato utilizzare:

• CSS2 invece di CSS3,
• HTML4 invece di HTML5,
• colore invece delle immagini di sfondo,
• table-layout della table-layout invece di <div> ,
• CSS in linea invece di set di stili o blocchi <style> .

Si ritiene che questo approccio prevenga la maggior parte dei problemi con la visualizzazione delle e-mail. Ma diamo un'occhiata più da vicino ad alcuni particolari errori di codifica che possono rovinare la tua email e cercare di trovare soluzioni ad essi.

Nessuna versione in testo normale

Potenziali problemi. Alcuni client di posta elettronica, come Outlook e Gmail, possono definire la tua posta come spam se non ha una versione di testo normale. Inoltre, a volte i client di posta hanno problemi con il rendering del codice HTML. Per questo motivo, le e-mail HTML possono essere visualizzate in modo errato, mentre le e-mail di testo normale hanno sempre lo stesso aspetto.

Prevenzione. Aggiungi una versione di testo normale alla tua email. Fortunatamente, la maggior parte dei provider di servizi di posta elettronica lo aggiunge automaticamente.

Puoi implementare email di testo normale nella tua strategia di email marketing. Prima di tutto, tali e-mail sembrano più personali e quindi possono migliorare la tua comunicazione con gli abbonati. Inoltre, alcune persone preferiscono arrivare direttamente al punto dell'e-mail e un layout colorato li scoraggia.

Utilizzo di JavaScript, ActiveX, Flash e altro del genere

Potenziali problemi. La maggior parte dei client di posta elettronica non supporta questi linguaggi, framework e plug-in, quindi una parte della tua email non verrà visualizzata e i tuoi iscritti non vedranno altro che uno spazio vuoto. Inoltre, l'e-mail potrebbe essere bandita dal software antivirus.

Prevenzione. Conserva le lingue che usi per codificare le email in HTML e CSS. Se devi aggiungere un video o un audio, caricalo su un sito Web e fornisci un collegamento.

Dai un'occhiata a come NiftyImages presenta le nuove funzionalità del prodotto: l'azienda ha scelto una sequenza di immagini anche se potrebbe essere un video esplicativo.

Troppi reindirizzamenti

Potenziali problemi. I reindirizzamenti, sebbene necessari per l'analisi, possono fare più male che bene alla tua email. Ad esempio, allungano notevolmente il tempo di caricamento di una pagina web. Quindi, esiste la possibilità che il browser di un utente blocchi i reindirizzamenti, quindi l'URL sarà inaccessibile.

Prevenzione. Cerca di evitare i reindirizzamenti. Ma se devi ancora usarli, controlla quanto tempo impiega il caricamento di un URL di destinazione: prova la tua email prima di lanciare l'intera campagna. Considera l'esperienza dei tuoi iscritti: se sono disposti ad aspettare il caricamento dell'URL o meno.

Link abbreviati

Potenziali problemi. I collegamenti abbreviati mettono le tue e-mail a rischio di finire nella cartella spam. Il fatto è che nei collegamenti abbreviati l'URL di destinazione non è chiaro. In parole semplici, potrebbe portare ovunque. Naturalmente, hacker e spammer ne approfittano.

Prevenzione. Non utilizzare collegamenti abbreviati. Se il tuo obiettivo è rendere la tua email ordinata, senza URL lunghi, è meglio utilizzare il seguente tag HTML: <a href="URL">...</a> . Puoi inserire qualsiasi URL qui, non importa quanto sia lungo.

Se sei ancora desideroso di collegamenti abbreviati, abbrevia i tuoi URL invece di utilizzare strumenti di terze parti. Almeno scansiona in anticipo le liste nere degli abbreviatori di link.

Grandi dimensioni del file del corpo dell'e-mail

Potenziali problemi. Sia i client di posta elettronica che i provider di servizi di posta elettronica hanno limiti di dimensione del corpo della posta elettronica poiché sono progettati per trasferire volumi di informazioni relativamente piccoli. Se non rientri in questi limiti, la tua email potrebbe essere troncata: la sua fine sarà nascosta.

Dai un'occhiata a una newsletter di un'etichetta musicale. Quando viene aperto tramite Gmail, viene ritagliato.

Per vedere la sua versione completa, l'abbonato deve toccare un collegamento.

Anche un file di grandi dimensioni del corpo dell'e-mail può causare problemi di consegna. Inoltre, a causa delle grandi dimensioni, l'e-mail può essere considerata una minaccia alla sicurezza dal software antivirus dell'utente.

Prevenzione. Controlla i limiti delle dimensioni del corpo dell'email del tuo provider di servizi di posta elettronica e dei client di posta elettronica utilizzati dai tuoi abbonati. Ad esempio, Google richiede un limite di 200 KB per le dimensioni del corpo dell'email. Ma è ampiamente consigliato limitare le tue e-mail a 100 KB per soddisfare i requisiti della maggior parte dei client di posta elettronica. In realtà, l'e-mail dell'esempio sopra ha una dimensione di 136 KB.

Troppi caratteri e colori

Potenziali problemi. A causa delle differenze tra i client di posta elettronica, non tutti i caratteri e i colori possono essere visualizzati correttamente. Inoltre, non tutti i caratteri e i colori si combinano bene tra loro, quindi rischi di creare un design di posta elettronica debole.

Dovresti anche tenere presente che i dispositivi dei tuoi abbonati hanno impostazioni dello schermo diverse, come la luminosità, ad esempio. E mentre stai cercando di rendere la tua email più vivida, gli utenti potrebbero soffrire di questo tripudio di colori.

Questo è un esempio discutibile di design della posta elettronica: ogni blocco ha i suoi colori; questa abbondanza distrae l'utente dalle informazioni più importanti.

Prevenzione . Scegli caratteri compatibili con le email, come Arial, Comic Sans MS, Courier New, Times New Roman o Verdana: sono supportati dai client di posta più diffusi. La dimensione del carattere del tuo testo non deve essere inferiore a 12-13 px; in caso contrario, un utente dovrà ingrandire la tua email o affaticare gli occhi.

Per quanto riguarda i colori, non dovresti usarne più di due: uno per il blocco di testo generale e un altro per evidenziare cose importanti, nonché per collegamenti e pulsanti. Assicurati che i colori che hai scelto corrispondano allo sfondo e abbiano un bell'aspetto se un utente passa alla modalità scura.

Copia del codice HTML del modello di posta elettronica da un editor di testo o da un sito Web

Potenziali problemi. Se usi Microsoft Word o qualcosa del genere per creare il testo per la tua e-mail e poi semplicemente copiarlo, rischi di prendere una formattazione non necessaria, che può rovinare il layout della tua e-mail. E se copi immagini o alcune parti di testo da un sito web, alla tua email potrebbero essere aggiunti elementi JavaScript o Flash.

Prevenzione. Per codificare un'e-mail, usa editor di testo che non aggiungono la propria formattazione, come Blocco note per Windows o TextEdit per Mac. Esistono anche alcuni strumenti online che possono ripulire la formattazione, come TextCleanr. Puoi anche utilizzare uno strumento HTML Cleaner, che ti consente di creare un'e-mail in un editor intuitivo e di controllare il codice allo stesso tempo.

Utilizzo di codici colore HEX a tre cifre

Potenziali problemi. Sebbene i formati di colore a tre e sei cifre dovrebbero essere equivalenti, a volte i client di posta elettronica rendono un formato a tre cifre in un modo leggermente diverso. Ad esempio, con Gmail, rischi di ottenere il viola invece del nero che avevi pianificato: color: #000 si trasforma in color: #500050 .

Prevenzione . Come regola generale, attenersi al formato di colore a sei cifre e assicurarsi di utilizzarlo in tutta l'e-mail.

Allegati

Potenziali problemi. Di solito, spammer e hacker allegano alcuni file alle loro e-mail. Se aggiungi un allegato, potrebbe essere considerato una minaccia alla sicurezza.

Prevenzione. Fornisci un collegamento a una pagina di caricamento del file invece di aggiungere il file direttamente all'e-mail.

Ecco un esempio di come puoi concedere agli utenti l'accesso al file che hai promesso. Presta attenzione a come è designato il collegamento: dovrebbe essere un pezzo di testo comprensibile cliccabile in modo che l'utente sappia cosa accadrà quando tocca il collegamento.

Testo alternativo mancante

Potenziali problemi . Alcuni utenti disabilitano il download delle immagini nel proprio browser. Se ricevono un'e-mail, incluse immagini senza testo alternativo, vedranno solo spazi vuoti invece di immagini e non capiranno il senso dell'e-mail.

Funziona allo stesso modo quando la connessione Internet di qualcuno è troppo bassa per scaricare le immagini abbastanza velocemente. Il testo alternativo aiuta a risolvere questo problema in un certo senso: quando il download delle immagini va male, un utente può invece vedere un testo.

Prevenzione. Aggiungi un attributo alt a tutte le immagini che usi. Assicurati di farlo correttamente, aggiungendolo a un tag img : <img alt="text"> . Limita il testo alternativo a 125 caratteri, spazi inclusi. Di solito è sufficiente aggiungere solo un paio di parole che descrivono l'immagine con precisione. Se hai ancora spazio, puoi aggiungere un po' di contesto a questa descrizione.

Dai un'occhiata a un estratto di un'e-mail di Sephora.

Se controlli il codice di questa email, puoi trovare un CTA come testo alternativo per l'immagine. Anche se gli utenti non vedono l'immagine, capiranno comunque cosa offre il marchio.

Layout solo immagine

Potenziali problemi. Se la tua email è composta solo da immagini e non ha testo, puoi riscontrare problemi con la consegna, la visualizzazione e altro ancora. Ad esempio, se un utente blocca il download delle immagini, non vedrà letteralmente nulla nella tua email. In secondo luogo, molte immagini aumentano le dimensioni del corpo dell'e-mail ed è probabile che i client di posta elettronica la ritaglino. Terzo, un utente non sarà in grado di trovare la tua email in una cartella tramite la ricerca per parola.

Prevenzione. Quando crei un'email, combina testo e immagini. Non dimenticare di aggiungere una versione in testo normale dell'e-mail e un testo alternativo per le immagini; prendere in considerazione gli altri consigli che abbiamo dato sopra.

Dai un'occhiata a questa email da Ecwid. Ha un design reattivo che include il layout della tabella e le query multimediali, come max-width: 570px . L'e-mail combina diversi tipi di contenuto: un'immagine e un testo colorati e accattivanti. Viene utilizzato il formato colore a sei cifre, ad esempio color:#979797 o color:#4A4A4A . Non ci sono molte immagini nell'e-mail, quindi la sua dimensione corporea non è troppo grande. Inoltre, non trova né collegamenti abbreviati né reindirizzamenti nell'e-mail. Nel complesso, questa e-mail soddisfa la maggior parte delle raccomandazioni fornite sopra.

Quindi, abbiamo dato un'occhiata agli errori di codifica e-mail HTML più comuni. Applica i nostri consigli e non dimenticare di testare le tue e-mail prima di inviarle: usa almeno tre client di posta elettronica popolari per aprire la tua posta; se possibile, controllalo anche tramite dispositivi diversi. Anche gli emulatori torneranno utili.

Un altro modo per evitare errori di codifica della posta elettronica

C'è una verità: non commetterai errori di codifica HTML se non codificherai. Fortunatamente, la progettazione di e-mail senza codice ti sta aspettando con SendPulse.

Con il nostro intuitivo editor drag and drop, ti abbiamo già impedito di commettere errori di codifica delle email. Basta aggiungere immagini, testo o video alla tua e-mail, impostare i caratteri e i colori in modo che corrispondano allo stile del tuo marchio e aggiungere collegamenti alle pagine dei tuoi social media.

Per rendere il tutto ancora più semplice, puoi scegliere tra i nostri modelli di email gratuiti. Tutte le e-mail create con SendPulse sono reattive, quindi avranno un bell'aspetto indipendentemente dal dispositivo che un utente sceglie di aprirle.

Elenco di controllo per evitare errori di codifica e-mail HTML comuni

Di seguito troverai le regole principali su come evitare i comuni errori di codifica delle email HTML. Seguendo queste regole, puoi evitare problemi con la consegna e la visualizzazione delle tue e-mail.

• Aggiungi una versione di testo normale alle tue e-mail.
• Non utilizzare JavaScript, ActiveX, Flash o altro del genere. Se devi aggiungere un video o un audio, caricalo su un sito Web e fornisci un collegamento.
• Cerca di evitare i reindirizzamenti per non aumentare il tempo di caricamento di una pagina web.
• Non utilizzare collegamenti abbreviati: trasforma un pezzo di testo o un'immagine in un collegamento utilizzando HTML.
• Prova a limitare le dimensioni del corpo della tua email a 100 KB o almeno controlla i limiti del tuo provider di invio e i client di posta elettronica più utilizzati dai tuoi abbonati.
• Scegli caratteri compatibili con la posta elettronica, come Arial, Comic Sans MS, Courier New, Times New Roman o Verdana.
• Cerca di non combinare più di due colori in un'e-mail, altrimenti sembrerà una distrazione.
• Non copiare testo e immagini per la tua email da editor di testo come MS Word o siti Web: c'è il rischio di catturare alcune formattazioni non necessarie.
• Usa un formato di colore a sei cifre.
• Non allegare file: fornire invece un collegamento a una pagina di caricamento file.
• Non dimenticare di aggiungere il testo alternativo alle immagini.
• Non inviare email solo di immagini: aggiungi sempre del testo.
• Non dimenticare di testare un'e-mail prima di iniziare una campagna. Utilizza almeno tre client di posta elettronica e dispositivi diversi.

E per non dover pensare a tutto questo, inizia a utilizzare SendPulse gratuitamente!