Partendo dal presupposto che abbiate conoscenze di HTML e CSS.
Ci sono differenze enormi tra gli HTML utilizzati per le pagine web e quelli utilizzati per l’email marketing, per quest’ultimi non esistono regole universali, considerando che ogni client mail (Gmail, Yahoo, Outlook etc.) hanno norme proprie e possono reagire differentemente ai template.
Ecco perchè in questa guida, vi diamo regole generali e consigli per far sì che il template possa essere il più corretto possibile e si adegui il più possibile ai vari clients:
Formato Standard:
Da MDirector inviamo con un max-width di 600px, la media della larghezza dei template è tra 550px e 650px. Nel corso del tempo sono cambiati dispositivi e schermi, ma il più utilizzato e quello che più si adatta rimane il template da 600px.
<!DOCTYPE>
Prima di tutto, tutti gli HTML devono inziare sempre con una dichiarazione <!DOCTYPE>.
La dichiarazione non è un tag HTML. E`un informazione per il browser per far sì che sappia che tipo di documento stia ricevendo.
È obbligatorio aggiungere il doctype perchè altrimenti molti clients non possono leggere correttamente il contenuto e non lo visualizzano come voi desiderate, uno di questi esempi è Outlook che ha un motore ormai in disuso.
Questo sono le linee <!DOCTYPE>. che utilizziamo in MDirector:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
In secondo luogo, si devono aggiungere i tags <meta> all’interno dell’ elemento <head> questi tags ci danno le informazioni del documento HTML: Keywords, tipo di carattere. Autore configurazione della finestra grafica etc.
Tanto il doctype come i metadati non si visualizzano dentro del template, ma sono fondamentali perchè vengono analizzati dai clients e dai motori di ricerca.
Struttura e organizzazione
Esistono molti tipo di codificazione e strutture HTML, pero i template HTML per l’emailling si caratterizzano per una strutture più semplice:
<table>
<tbody>
<tr>
<td> ...
Con le loro rispettive caratteristiche W3C, qualsiasi altro HTML senza questa struttura (tavole per srutturare il disegno del template, per centrare gli elementi. Stilizzare il testo, riempimenti e margini, dividere il contenuto in colonne etc.) non è assicurata la corretta visualizzazione nei differenti clients.
CSS Inline
I fogli di stile (CSS) si utilizzano per formattare il disegno di una pagina web o template email, nonostante questo quando aggiungi CSS in un HTML per mail bisogna considerare che la maggior parte dei clients non ammettono CSS separati, quindi i CSS devono essere aggiunti in línea, attraverso i tags <style> e possibilmente all’interno di ogni elemento.
Responsiveness
Il proceso che permette a una mail HTML di essere responsive è differente a quello che permette che una pagina web sia responsive.
Il livello di compatibilità con gli standard HTML e CSS cambia moltissimo tra i vari server e app di posta elettronica, così come il tipo di dispositivo. Una delle più grandi differenze è che anche se possiamo aggiungere media query di flexbo, grid nel web, queste non saranno sempre compatibili con l’email HTML, così come Java Script che è di utilizzo comune per il disegno web non si può utilizzare mai e poi mai per il disegno HTML nelle emails, perchè rappresenta un rischio sulla sicurreza, quindi qualsiasi template che contenga jvs sarà sempre scartata dai server email.
Bottoni
L’email HTML, i bottoni non sempre si visualizzano uguale in tutti i clients mail, sia per il tipo di reindirizzazione o per il tipo di bottone che utilizziamo, ecco perchè esisotno delle regole specifiche per far sì che tutti i bottoni siano ben visualizzati da tutti i client mail:
- Non usare immagini come bottoni
- Utilizare condizionali specifici <!--[if mso]> específicos per Outlook
- Aggiungere lo stile CSS in-line
Per avere più info su come creare bottoni funzionali:
https://www.litmus.com/blog/a-guide-to-bulletproof-buttons-in-email-design/
Fonts e sfondi
Quando parliamo di fonts, la maggior parte dei clients di posta elettronica non ha un support di fonts come le pagina web. Per questo consigliamo di utilizzare fonts web sicuri, questi tipi di fonts sono preinstallati di default nei sistema operativi, includendo clients di posta e web, Alcuni di questi fonts sono: Arial, Helvetica, Verdana, Georgia y Times New Roman.
È possibile aggiungere Web Fonts como quelli di Google Fonts, ma funzionano solo in alcuni clients di posta elettronica:
Fonte: Litmus
https://www.litmus.com/blog/the-ultimate-guide-to-web-fonts/
Video
Non raccomendiamo aggiungere video nel codice HTML per mail, perchè sono molti di più i clients mail che non leggono i video, rispetto a quelli che lo leggono.
Fuente: Litmus
Come alterntiva ti raccomendiamo utilizzare GIF video che facciano riferimento al video in concreto
Commenti