Rendere le tue newsletter leggibili su (quasi) tutti i client si può: la best practice per un template HTML di qualità
Una newsletter davvero efficace è una newsletter chiara, professionale e leggibile su ogni client e dispositivo di visualizzazione. Adottando gli strumenti giusti ci si può assicurare questo risultato, evitando problematiche come il disallineamento di foto e testi, l’assenza dei margini o parti di testo illegibili.
In questo post descriviamo come impostare un template HTML che sia compatibile con i principali client e le modalità per creare una newsletter con un codice in linea con gli standard più diffusi.
Non è raro che una newsletter con template HTML perfettamente visualizzata su un client di posta appaia invece spaginata se visualizzata attraverso un software differente. In questo caso, il problema è la mancanza di uno standard condiviso in materia di codice HTML nella e-mail, da cui ne scaturisce un’interpretazione diversa. Questo succede perché non tutti i client, applicazioni o programmi di posta elettronica decodificano allo stesso modo i tag HTML.
La prima cosa da fare è testare la newsletter prima dell’invio migliorandone, dove necessario, il codice. Come? Attraverso l’utilizzo di strumenti sviluppati appositamente. Esistono delle piattaforme per la gestione delle newsletter dotate di editor con tool per l’analisi del codice HTML che gli utenti stessi possono utilizzare per verificare la compatibilità della newsletter. In pratica, nel momento in cui viene creata la newsletter, l’editor segnala eventuali correzioni da effettuare o tag inappropriati da modificare.
Per avere altresì la certezza che ogni destinatario visualizzi correttamente la newsletter, si possono utilizzare strumenti (Email on Acid) che mostrano le anteprime del messaggio su client e dispositivi quali computer, notebook, tablet e smartphone, consentendo l’individuazione di eventuali problemi.
Il consiglio in più: Email on Acid e altri tool propongono client e supporti di vario genere tra cui anche quelli obsoleti come Outlook 2003. Si sconsiglia di puntare alla compatibilità a 360° prediligendo, invece, i client più diffusi.
Vogliamo fornire un elenco di consigli per creare un template HTML per una newsletter compatibile con i principali client di posta.
- non utilizzare il tag <style> in testa al codice HTML e ai fogli di stile, ma prediligi il CSS in-line. Diversi client di posta preferiscono questa soluzione e ignorano, invece, le indicazioni relative all’utilizzo di classi e id;
- prediligi i colori scuri per i font, meglio se grigio o nero, per massimizzare la visibilità;
- evita gli sfondi colorati o neri, soprattutto se abbinati a testi di colore bianco;
- i valori adeguati per la larghezza del template sono compresi tra 550 e 600 px. Questo aspetto assicura una visualizzazione intera della newsletter su schermi di qualsiasi dimensione;
- non superare i 50/100 kb di peso della newsletter;
- utilizza esclusivamente i tag di markup XHTML standard quali <p>, <br />, <strong>, <em>, ecc;
- prediligi i codici esadecimali per indicare i colori: color=”ffffff” invece di color=”red”;
- specifica sempre gli attributi “alt” e “title” dei file immagine, inclusa una frase descrittiva dei contenuti visivi, allo scopo di evitare che la newsletter appaia vuota in caso di blocco dei contenuti remoti (immagini);
- usa il tag <table> e non il CSS per la creazione delle tabelle;
- inserisci gli attributi giusti nei link quali “title”, “target”, “style”, ecc. Un collegamento ipertestuale adeguato avrà la seguente struttura: <a href=”www.sitodidestinazione.it” title=”Vai al sito”>
- inserisci l’attributo target=”_blank” nei link della newsletter affinché la pagina di destinazione venga aperta in una nuova finestra;
- tieni presente che non tutti i client supportano e che alcune informazioni all’interno di alcuni tag non verranno considerate quali <meta>, <head>, <link>, <frameset>, ecc;
- evita di aggiungere script come Flash, ActiveX o JavaScript in quanto non supportati dalla maggior parte dei client.
I suggerimenti appena elencati vanno a migliorare la compatibilità del template HTML e non solo, aiutano anche a ridurre il punteggio di spam, un aspetto determinante per assicurarti che la tua e-mail venga mostrata nella cartella inbox.
Dopo aver creato la newsletter è importante validarne il codice assicurandosi che non vi siano errori di sintassi che possano comprometterne la riuscita. Per la validazione si possono utilizzare diversi strumenti online come il Markup Validation Service W3C. Tuttavia, la cosa migliore è gestire direttamente questo aspetto tramite la piattaforma pensata ad hoc per l’e-mail marketing. Il già citato Opendem, ad esempio, mette a disposizione un editor dotato della funzione “HTML validator” che, durante la compilazione del messaggio, segnala direttamente eventuali anomalie nel codice nella visualizzazione “Sorgente”. Qualora venissero rilevate, l’editor di questa piattaforma andrà a correggere l’anomalia sostituendo il tag errato con uno che massimizzi la compatibilità del messaggio.