Creare un template email in html che funzioni

Libro Questo sito funziona

L’email marketing ormai è alla portata di tutti, cosi come l’ADSL per tanto le problematiche sempre meno diffuse su questioni di banda e pesantezza si fanno sentire meno. Questa situazione di vantaggio fa si che le email html iniziano a diffondersi sempre di più. Non è affatto raro ricevere una email tutta impaginata anzichè una mail di solo testo. no?

C’è però un problema: come creare un template html per email?

Per certi creare un template per email ci costringe a tornare un pò indietro che le tecniche di design. Non è sbagliato dire che si ritorna un pò agli anni novanta come style strutturale.

Questo avviene perchè moltissimi provider di webmail come Libero, Gmail, Yahoo, hotmail e compagnia bella, per questioni legate alla sicurezza ignorano le informazioni inviate tramite l’header di pagine <head>.

Questo invece non avviene per la stragrande maggioranza di client di posta come, thunderbird, Apple Mail, Windows mail ecc.

Il punto è che il 90% delle persone per una questione di mobilità utilizza proprio servizi di email online. Quindi come risolvere questo problema?

Dopo una esperienza corposa sull’argomento, ecco quelle che ritengo le linee guida, ancora oggi funzionanti sulla stragrande maggioranza di servizi di webmail, che devi adottare per creare un template email in html.

1. Creati un account per tutti i servizi di webmail più diffusi

emails

Il primo passo da fare prima di pensare alla creazione di un template email è proprio questo.

Iscriviti a tutti i servizi più diffusi di webmail. Te ne elenco qualcuno:

  • Gmail
  • Yahoo mail
  • Hotmail
  • Libero, Tiscali e Virgilio, Fastwebmail

Creati installazioni multiple di client di posta (se puoi usa le macchine virtuali per simulare i sistemi operativi)

  • Outlook
  • Outlook Express
  • Windows Mail
  • Appla Mail
  • Thunderbird
  • Incredimail (anche se odiatissimo per le sue pubblicità lo usano in molti)

Questo toolkit di partenza ti garantisce un asset di testing inviadiabile.

Perchè facciamo questo? Perchè alcuni di questi servizi appena elencati visualizzano l’html e il css in maniera diversa.

 

2. Da oggi agli anni 90 si…. ma un passo alla volta

Vediamo alcune accortezze da utilizzare:

  • Non fare mai affidamento sulle immagini per comunicare importanti informazioni.
    Non sono pazzo. Soprattutto non fare affidamento sulle immagini se sono grandi.
    La stragrande maggioranza dei client di posta elettronica hanno per default le immagini disattivate. Se l’utente non prende iniziativa cliccando su mostra immagini l’immagine non la vedrà.
    Adesso anche i client software come Windows mail hanno queste impostazioni.
  • Non affidare il contrasto del testo all’immagine.
    Utilizza il più delle volte un testo nero su sfondo chiaro. Assicurati che il tuo testo abbia sufficiente contrasto con o senza immagini abilitati. Outlook 2007, ad esempio, non verrà visualizzata immagini di sfondo nelle celle della tabella, anche se le immagini sono accesi.
  • [facoltativo] Fornisci un link per vedere la mail come pagina web da qualche parte.
    Ok, questo non è assolutamente necessario, e infatti l’ho taggato com efacoltativo, serve solo per dare ai vtuoi iscritti e abbonati la possibilità di visualizzare il messaggio nel proprio browser (soprattutto se si tratta di un design particolarmente HTML pesante).
  • Utilizza sempre i tag ALT intelligentemente sulle immagini IMPORTANTI (non su tutte).
    Con le immagini disattivati ​​per impostazione predefinita, i tag ALT descrittive sono l’ultimo, migliore occasione per convincere un utente ad abilitare le immagini.
    Se il tuo visitatore non vede le immagini perchè non le ha abilitate troverai un orrendo spazio vuoto.

 

3. Usa – purtroppo – le tabelle e il css inline

Hai presente quella bella tecnica che ti fa abbandonare le tabelle per impaginare un sito web e che al posto delle tabelle ti fa usare i div? Bene, non serve.

“Ma come, tanti anni a studiare webdesign e css e poi non devo usare i div?”

Ebbene si, purtroppo non tutti supportano bene questo design e quindi siamo costretti, per una questione di sicurezza e nient’altro, almeno per ora, ad utilizzare le tabelle.
Sono rimasto un pò scioccato quando ho scoperto dei tecnicismi obsolete nell’email design.

Ho provato più volte a creare un template e scrivere il css inline all’interno dei div ma non tutti i servizi visualizzano bene e cosi sono arrivato a questa conclusione.

  • Assicurarti di impostare tutti gli attributi della tabella disponibili, ove possibile. Questo include cellpadding, cellspacing, bordo, valign, larghezza e altezza.
  • Anche se sarebbe sempre meglio evitarle, le tabelle nidificate possono essere di aiuto. Assicurarti di utilizzare l’indentazione corretta per una pulizia e semplicità di lettura del codice.
  • Utilizza l’attributo background su una cella per impostare immagini di sfondo.
    Questo è il modo più semplice per ottenere sfondi in Gmail.  Nota: Le immagini di sfondo verranno affiancate quindi occhio a come le crei.
  • Utilizza solo indirizzi assoluti. Hosta le tue immagini da qualche parte sul tuo dominio e falle puntare proprio li.
  • Le immagini di sfondo applicate a tabelle o div non sono supportati da Outlook 2007, infatti, l’unico modo per utilizzare un’immagine di sfondo in Outlook 2007 è quello di applicarle al corpo, al <body> per intenderci, di una e-mail, che ovviamente non è supportato da altri client di posta elettronica come Gmail, Yahoo o Windows Live Hotmail.

E’ un panorame agghiacciante se si pensa a quanta tecnologia viene utilizzata per fare meno.

Creare un template email html è però uno sforzo necessario.
Hanno dimostrato di saper vendere bene, quindi il gioco vale a candela.

Come sempre spero di esserti stato utile.

Ne approfitto per chiederti di rispondere a una sola domanda:

Libro Questo Sito Funziona