Realizzare un template email in HTML è facile con lo strumento gratuito di Infomail.
Infomail mette a disposizione, gratuitamente per i propri utenti, numerosi template pronti all’uso, testati ed ottimizzati per le attività di Email Marketing.
Si tratta di modelli grafici che possono essere liberamente modificati e personalizzati a seconda delle proprie esigenze e costituiscono un’ottima base di partenza per creare, ad esempio, delle newsletter veramente efficaci.
Oltre a questo, Infomail permette ai propri utenti di caricare i propri template personalizzati e realizzati secondo le proprie preferenze.
L’obiettivo di questo post è dare alcune semplici linee guida che siano di aiuto a chiunque voglia creare dei template per Infomail partendo da zero, avendo però un livello di conoscenza medio-base di HTML.
INTRODUZIONE: IL MONDO DELLE EMAIL
Scrivere un template email in HTML costituisce una specialità che sfugge agli standard ormai definiti per la scrittura di codice finalizzato alla creazione di pagine web.
Quando si realizza un modello grafico per email in HTML bisogna infatti tenere conto di una serie di elementi:
1. Diversi tipi di email client
L’email client è il mezzo che permette di interfacciarsi con il servizio di posta elettronica.
Ogni client accetta ed elabora differentemente il codice HTML e le regole CSS, in maniera spesso soggettiva, generando interpretazioni inattese del codice e creando differenze di visualizzazione, alle volte sostanziali.
Tra le diverse tipologie di client troviamo:
– I client Web Based permettono di accedere alla propria casella di posta da qualsiasi dispositivo che abbia accesso alla connessione internet con il proprio browser, senza la necessità che venga installato alcun software o applicativo dedicato.
Sono client web based Gmail (visualizzata dal proprio browser), Hotmail, Yahoo, Tiscali mail etc.
– I client Desktop Based sono quegli applicativi che, installati ed eseguiti localmente sul proprio computer, permettono di visualizzare le email e scaricare la posta elettronica sul proprio PC.
Tra i desktop client più diffusi troviamo: Microsoft Outlook, Mozilla Thunderbird, Opera Mail, Windows Live Mail.
2. Compatibilità cross-browser
Nel caso di email client web based, il servizio di posta elettronica verrà visualizzato tramite browser.
Nonostante nel tempo siano stati fissati degli standard che determinano come debba essere renderizzato il codice HTML, ogni browser ha delle sue peculiarità che influiscono sulla visualizzazione del messaggio di posta. Non è da escludere inoltre la persistenza nel mercato di browser obsoleti, seppur in percentuale sempre minore, non adeguati quindi ai nuovi standard fissati.
3. I dispositivi dai quali l’email verrà fruita
La posta elettronica può essere visualizzata da diversi dispositivi quali computer desktop, laptop e notebook, tablet e smartphone etc.. Per ognuno di questi ci saranno client e browser che si comportano in maniera differente; gli schermi e i monitor avranno necessariamente diverse risoluzioni.
HTML E CSS PER LE EMAIL
Realizzare template email in HTML è un’arte che riporta indietro al modo in cui si scriveva HTML alla fine degli anni 90.
Non esistono degli standard universalmente accettati e condivisi ma solo delle regole comuni e delle best practices che permettono di ottenere dei risultati omogenei ed efficaci, dettate dallo studio della difformità di ogni attore che compone questo ecosistema.
Tali regole quindi sono principalmente frutto di studio sul campo e di sperimentazione applicata.
Le regole CSS devono essere dichiarate in linea nel codice HTML.
Sebbene sia possibile utilizzare un CSS esterno, per questioni di compatibilità con i vari browser è preferibile:
- che ogni elemento abbia le sue dichiarazioni CSS in linea nel tag, all’interno dell’attributo style
- evitare di utilizzare dichiarazioni CSS sintetiche e composte
- dichiarare i colori in formato esadecimale esteso piuttosto che in rgb.
Il layout HTML deve essere strutturato utilizzando le tabelle.
Sono da evitare i DIV flottanti perché non vengono elaborati correttamente dalla maggior parte dei client.
Per creare dei layout complessi è necessario annidare le tabelle una dentro l’altra e strutturare lo spazio in righe e colonne.
È possibile controllare i bordi, il padding e altre qualità della tabella tramite gli attributi del tag “border” “cellspacing” “cellpadding”; utilizzare l’attributo “align” per l’allineamento del testo e l’attributo “bgcolor” per il colore di sfondo delle tabelle.
È preferibile che le stesse regole vengano ripetute come dichiarazione CSS all’interno dell’attributo style della tabella.
Esempio:
<table style=”border-collapse: collapse; border-spacing: 0; margin: 0; padding: 0; width: 100%; background-color: #FFFFFF;text-align: center;” border=”0″ cellspacing=”0″ cellpadding=”0″ align=”center” bgcolor=”#FFFFFF”>
È buona regola dichiarare la dimensione della tabella, in pixel o in percentuale, qualora essa debba avere una dimensione precisa.
È possibile dare del padding agli elementi <td> della tabella, soprattutto per generare delle spaziature verticali, attraverso la dichiarazione di stile “padding-top” o “padding-bottom”. È possibile fare la stessa cosa per il padding laterale degli elementi <td>, tuttavia è sempre meglio gestire questa spaziatura orizzontale attraverso la creazione di colonne vuote; in alcuni client il padding laterale delle celle potrebbe interferire con la larghezza delle tabelle.
Non utilizzare script e snippet di codice
All’interno della email non è permesso:
- inserire contenuti generati da script.
- usare Javascript, php o elementi in flash
- inserire iframe.
Tutti questi elementi non sono supportati dai client o lo sono in maniera marginale.
Allineamento delle immagini al testo e attributi del tag <img>
In alcuni dei client di posta più diffusi, un bug di visualizzazione crea delle spaziature fantasma in corrispondenza delle immagini. Per ovviare a questo inconveniente è obbligatorio inserire la dichiarazione di stile “display: block” per il tag <img> di tutte le immagini. Come conseguenza le immagini non possono essere flottanti o avere proprietà di allineamento al testo ottenute tramite l’attributo “align”.
Nel caso si vogliano avere immagini allineate a sinistra o a destra del testo è necessario quindi utilizzare le tabelle per creare una divisione in colonne e per affiancarle al testo.
Evitare di utilizzare il tag <p>
La gestione della spaziatura del tag <p> varia nei diversi client e non è di facile gestione. È preferibile utilizzare il tag <br /> per creare la divisione tra i paragrafi e gestire gli spazi bianchi tra diversi blocchi di testo.
In alternativa si possono creare più blocchi di testo inserendo quest’ultimo all’interno di tabelle.
