Hai testato la newsletter appena impaginata inviandola ad indirizzi Gmail, Hotmail, Yahoo e simili e visualizzandola attraverso Outlook e app per smartphone, scoprendo che il template scelto non sempre appare come dovrebbe: foto e testi disallineati, margini assenti o addirittura parti di messaggio incomprensibili.
Una newsletter efficace è in primis una newsletter chiara, leggibile e professionale su tutti i client e i device.
Come ottenere questo risultato? Semplice, scegliendo strumenti che ti aiutino a impostare template HTML compatibili e adottando tutte le best practice per la creazione di newsletter con un codice in linea con gli standard più diffusi.
Problemi nella visualizzazione delle newsletter: perché il template HTML non funziona con Gmail/Hotmail/Outlook?
Non si tratta di un problema insolito: una newsletter basata su un template HTML perfettamente visualizzato da un certo client di posta elettronica appare invece spaginata per destinatari che ne impiegano altri.
La causa di questo fenomeno è legata alla mancanza di uno standard condiviso per quanto riguarda l’interpretazione del codice HTML nelle email, al contrario di quanto oggi avviene nel caso del web con i principali browser. In sostanza, non tutti i client/software/app interpretano allo stesso modo i tag HTML, falsando il risultato finale.
I tool per ottimizzare la compatibilità delle newsletter
Il modo più pratico ed efficace per testare una newsletter basata su un template HTML prima dell’invio e migliorarne il codice consiste nell’utilizzare strumenti online sviluppati ad hoc.
Piattaforme per la gestione delle newsletter come Opendem, ad esempio, mettono a disposizione degli utenti editor che integrano tool per l’analisi del codice HTML. In sostanza, nel corso della composizione della newsletter, è l’editor stesso a segnalare tag poco appropriati e a suggerire possibili modifiche.
In più, per avere la certezza che tutti i destinatari visualizzino la newsletter nel migliore dei modi, è possibile sfruttare tool come Email on Acid, che genera anteprime del messaggio basate su client e dispositivi diversi (computer desktop, notebook, tablet e smartphone con display di varie dimensioni), permettendo di individuare per tempo eventuali criticità.
Attenzione: Email on Acid e altri strumenti simili propongono per completezza client e supporti di ogni tipologia, inclusi quelli scarsamente diffusi o ormai obsoleti (ad esempio Outlook 2003). Il consiglio è quello di evitare di puntare alla “newsletter perfetta”, compatibile con il 100% dei client, ma di concentrarsi solo su quelli più comuni.
Gli accorgimenti per newsletter HTML ottimizzate per tutti i client
Di seguito, alcune delle principali best practice da rispettare nella creazione di un template HTML per newsletter compatibili con tutti i principali client:
- evita il ricorso al tag <style> in testa al codice HTML e ai fogli di stile, preferendo invece il CSS in-line. Al contrario di quanto avviene nel caso delle pagine web, molti client di posta prediligono questa soluzione, ignorando invece le indicazioni fornite con l’utilizzo di classi ed id.
- Evita la scelta di sfondi colorati o neri, specie in abbinamento con testi in colore bianco. Sono molti i client che di default impostano uno sfondo bianco per le email in arrivo; il rischio è che il messaggio non venga visualizzato correttamente o, peggio, che appaia completamente vuoto.
- Scegli sempre colori scuri per i font (preferibilmente grigio scuro oppure nero), così da garantire sempre il massimo della visibilità su sfondo chiaro.
- Nella definizione della larghezza del template HTML, opta per valori compresi tra i 550 e i 600 px. In questo modo, avrai la certezza che la newsletter appaia sempre nella sua interezza su schermi di qualunque dimensione, evitando fastidiosi scroll orizzontali.
- Poni la massima attenzione al peso della newsletter, evitando di oltrepassare la soglia dei 50/100 kb.
- Ricorri solo ai tag di markup XHTML standard (ad esempio, <p>, <br />, <strong>, <em>, ecc.).
- Per indicare i colori, utilizza sempre i codici esadecimali (quindi, utilizza color=”ffffff” invece di color=”white”).
- Per evitare che la newsletter appaia vuota in caso di blocco dei contenuti remoti (ovvero delle immagini), specifica sempre gli attributi “alt” e “title” dei file di immagine, inserendo una frase descrittiva dei contenuti visivi.
- Nella creazione di tabelle, ricorri al tag <table> e non al CSS.
- Fai attenzione ad inserire eventuali attributi dei link (“title”, “target”, “style”, ecc.) dopo l’href (la struttura corretta è dunque <a href=”www.sitodidestinazione.it” title=”Visita il sito”>).
- Utilizza l’attributo “target=”_blank”” per tutti i link inseriti all’interno della newsletter, così che la pagina di destinazione venga sempre mostrata all’interno di una nuova finestra.
- Ricorda che alcuni client non supportano e di conseguenza non considerano le informazioni specificate all’interno di particolari tag (come ad esempio <meta>, <head>, <link>, <frameset>, <frame>, ecc.)
- Non aggiungere script di alcun tipo (ad esempio Flash, ActiveX, JavaScript, ecc.), dal momento che nella maggior parte dei casi non sono supportati dai principali client.
Attenzione: rispettare le best practice sopra riportate non solo migliora la compatibilità del template HTML delle newsletter con i vari client, ma riduce anche il punteggio di spam che i filtri antispam stimano per decidere se mostrare o meno un’email in arrivo nella cartella inbox.
Validare un template HTML per una newsletter: i tool online
Una volta completata la creazione di una nuova newsletter in formato HTML è sempre opportuno “validare” il codice, ovvero assicurarsi che non siano presenti errori di sintassi in grado di comprometterne il funzionamento.
Online sono disponibili diversi tool utili allo scopo, tra cui il Markup Validation Service W3C, ma per rendere ancora più rapido e pratico il lavoro è sempre possibile affidarsi a piattaforme online progettate appositamente per l’email marketing, come il già citato Opendem.
L’editor newsletter di questo servizio, infatti, integra una funzione “HTML validator” automatica, che durante la compilazione del messaggio (nella visualizzazione “Sorgente”) segnala in diretta eventuali errori presenti nel codice. Non solo, sempre in modo automatico, Opendem permette di correggere il problema rilevato con un click, affidando al sistema il compito di modificare il tag errato e/o di sostituirlo con una soluzione più indicata per massimizzare la compatibilità del messaggio.