Il layout HTML rende sicuramente i messaggi più efficaci e, benché a volte non vengano aperti correttamente a causa del blocco dei contenuti remoti (immagini), ricevere una e-mail che si intravede essere formattata in modo professionale, è sicuramente più rasserenante rispetto alle e-mail contenenti solo testo (di quelle cui ci hanno abituato gli spammers o le e-mail fasulle di phishing).
Il problema più comune nella costruzione di newsletter html è la resa, non sempre uniforme tra i vari client di posta dei riceventi. Capita spesso infatti che testando l’invio sulle proprie caselle di posta, la formattazione “salti” su Gmail pur avendo su Outlook una formattazione corretta.
Benché esistano standard universali per la costruzione del telaio html, i client di posta decidono autonomamente di inibire alcuni tag HTML nella posta elettronica.
In questo senso, quando si realizza un template HTML, è fondamentale fare dei tentativi di invio su client di posta diversi, che spesso interpretano il codice in modo differente.
Cosa fare quando un template non si mostra correttamente ai vari client di posta?
La soluzione migliore è quella di utilizzare tool come e-mail on acid (strumento che nasce appositamente per il testing dei layout su tutti i mix tra i dispositivi e i client software), o impiegando l’editor di OpenDEM, il quale restituisce a video una diagnostica dei tag da rimuovere al fine di garantire la compatibilità massima con i client.
Volendo impiegare e-mail on acid (che restituisce la compatibilità su ciascun singolo client, anche nella versione trial), merita un ragionamento il fatto che non ha molto senso tentare l’ottimizzazione sui client di posta più obsoleti (microsoft outlook 2003 per citarne uno) poiché la riduzione del codice HTML utile ad ottenere una semplicità di sviluppo, complicando la realizzazione del template, non produrrebbe benefici importanti, su client che hanno uno 0.02% di share.
Altri accorgimenti:
Altri accorgimenti possono però essere utili per rendere il più compatibile possibile l’impaginazione di una e-mail HTML.
- E’ sempre preferibile utilizzare stili css in linea. Anche se i fogli di stile inclusi con lo <style> in testa al codice ci permettono soluzioni grafiche più rapide e più versatili, spesso vengono ignorati dai client di posta o dalle web mail (come hotmail), compromettendo in tal modo l’aspetto del messaggio.
- Tenere a mente che alcuni client non accettano colori e immagini di sfondo quindi preferire il fondo bianco, tenendo bene a mente questo aspetto che può essere estremamente penalizzante qualora lo sfondo (es: nero) che non verrà correttamente applicato, prevedeva sopra un testo bianco, che nel caso peggiore, risulterà quindi illegibile poiché “bianco su bianco”.
- Il consiglio in questi casi è quello di utilizzare sempre sfondi chiari e font del testo scuri in modo da rendere sempre visibili i contenuti. Utilizzando un font chiaro, se il colore di sfondo non fosse visibile, si rischierebbe di inviare un
messaggio completamente bianco. - Non includere script: evitare JavaScript, ActiveX, Flash, Video,
Embedding, Include, Form perché non funzionano su la maggior parte dei
client. - Mantenere il peso file contenuto (50-100kb)
- La larghezza ideale del messaggio dovrebbe essere compresa tra i 550 e i 600px, per consentire una corretta visualizzazione del messaggio senza scolling orizzontale e ottenere la compatibilità con tutti i web-client (alcuni tagliano la parte in eccesso soprattutto nella visualizzazione mobile).
- Impostare i colori sempre con i codici esadecimali e non con stringhe (per esempio, inserire color=”#ffffff” e non color=”white”).
- Utilizza solo tag di markup XHTML come p, strong, em, li, ul, img ecc…
- Impiegare il tag title=”Nome contenuto” e alt=”descrizione immagine” sia nei tag delle immagini, sia nel tag dei link. Questo mostrerà un tooltip, cioè una breve legenda in sovraimpressione al passaggio del mouse, consentendo di comprendere il contenuto degli oggetti anche in caso di assenza di attivazione dei contenuti remoti.
- Alcuni tag possono risultare superflui ed essere rimossi automaticamente dal client ricevente, tra questi: <body>, </body>, <meta>, <head>, </head>, <base>, <link>, <script>, </script>, <applet>, </applet>, <frameset>, </frameset>, <frame>, </iframe>, </iframe>, <li>, </li>, <!– …commenti… –>
- Per la struttura delle tabelle è consigliabile usare <table> e non gli stili, perché i parametri float, margin e padding sono in generale supportati male.
- Gli attributi dei link (per esempio class, name) devono essere posti alla fine, dopo HREF
- I link devono avere il tag target=”_blank” per aprire il collegamento in una pagina esterna.
- Per evitare che alcuni client di posta trasformino il colore di un link in blu o viola, è sempre meglio usare il codice: style=”color: #000001;” nel tag <a>
I client di posta sono molto più sensibili dei browser per quanto riguarda l’interpretazione del codice. Un codice validato facilita la corretta visualizzazione dell’e-mail. Inoltre, il corretto utilizzo dell’html migliora il punteggio dell’e-mail (anche se minimamente) riducendo il rischio che l’e-mail venga filtrata dai sistemi antispam.
Come verificare il codice HTML delle newsletter?
Esistono online diversi servizi di verifica del codice html di una newsletter, e molte piattaforme DEM hanno integrato nei loro editor dei sistemi automatici di controllo, tramite i quali è possibile accertarsi che non siano presenti errori nel codice del messaggio.
OpenDEM, ad esempio, integra un sistema di controllo dell’html in tempo reale direttamente nella pagina di creazione della newsletter. In questo modo, durante la lavorazione del codice HTML è possibile verific are che non siano presenti errori tali da compromettere l’impaginazione del messaggio.
Accedendo alla pagina di creazione di una nuova newsletter (Newsletter > Crea nuova newsletter) è visibile alla destra dell’editor la funzione HTML validator. Questo tool, oltre ad informarti di eventuali errori nel codice, ti consente di risolvere i problemi rilevati con un semplice clic. Facendo clic su uno degli errori segnalati dal validator, infatti, il sistema apporta le modifiche più opportune al codice, al fine di rendere il messaggio perfettamente leggibile sulla maggior parte dei
client di posta.
Html validator di OpenDEM è attivo ogni volta che si lavora al codice sorgente della newsletter, e quindi quando la voce “sorgente” è selezionata.