Un rapido quiz a sorpresa: come si chiama il linguaggio che si usa nello sviluppo web per creare le strutture dei siti che visitate ogni giorno?
L’Hypertext Markup Language (HTML) è uno standard sempreverde, presente fin dalla nascita del web. Tuttavia, questo non vale solo per le pagine web. La vostra casella di posta elettronica è un terreno fertile per la progettazione di email in HTML.

Questo ha senso se considerate quante immagini, GIF, video e contenuti brandizzati vedete comparire quasi ogni ora nelle vostre email. Sebbene possiate offrire un’email in testo semplice, una versione in HTML vi offrirà maggiori vantaggi e vi darà più opportunità di promuovere e commercializzare il vostro brand e la vostra attività.

In questo articolo parleremo di come creare e inviare email in HTML e del perché dovreste farlo. In alcuni punti ci addentreremo nel modo in cui si codifica un’email, ma non avrete bisogno di queste conoscenze per creare la vostra.

Cos’È un’Email HTML?

Le email che arrivano nella vostra casella di posta elettronica possono essere di due tipi:

  • Testo semplice: È quasi un telegramma per l’era moderna. Non ci sono stili o formattazioni minime e il destinatario vedrà le parole escludendo tutto il resto.
  • HTML: Rispetto al testo semplice è un vero e proprio razzo, ed è più ricco di elementi di design. Usa il codice HTML per presentare un’email, anche se, come vedremo, non sempre si affida ai moderni standard web.

Per esempio, se ricevete un’email in testo semplice, vedrete che ha lo stesso aspetto di un documento in testo semplice. Al contrario, un’email in HTML ha quasi lo stesso aspetto di una moderna pagina web (più o meno con qualche accorgimento di stile e formattazione):

Un'email HTML visualizzata all'interno del browser, con un titolo contenente l'emoji di un cookie e un testo che contiene immagini, emoji e formattazione tipografica..
Un’email HTML nel browser.

Nella maggior parte dei casi, un’email HTML non è in grado di offrire il massimo dell’interattività o del coinvolgimento dinamico. Anche di questo caso parleremo più avanti, ma le email in HTML sono in ritardo rispetto al web, dal punto di vista degli standard. Per questo motivo, l’HTML è uno strumento più orientato al design che all’esperienza utente. Questo però fa sorgere una domanda: Perché usare le email in HTML se l’unico motivo è quello visivo? Cercheremo di rispondere a questa domanda.

Perché Usare l’Email in HTML Piuttosto che la Formattazione in Testo Semplice

È raro vedere un’email in testo semplice da parte di un’azienda, per diversi motivi. Non perché il testo semplice sia sbagliato di per sé, quanto piuttosto per il fatto che non offre nessuno dei vantaggi della formattazione HTML delle email. Per esempio:

  • Potete usare gli elementi visivi intrinseci per aiutare a focalizzare l’attenzione sulle varie parti del contenuto della vostra email.
  • Per estensione, un’email HTML è un formato ricco per presentare i vostre contenuti. Ciò significa che potete sfruttare gli elementi che gli utenti si aspettano di ricevere, come immagini, video e altro.
  • Combinati insieme, questi due aspetti possono offrirvi un’ottima opportunità di brandizzare i vostri contenuti, proprio come fareste con il vostro sito web principale.

Tuttavia, decidere di usare un’email in HTML non è tutto rose e fiori. Ci sono anche alcuni svantaggi da considerare. Innanzitutto, dovete considerare l’esperienza utente, proprio come quando progettate un sito web. Questo potrebbe non riguardare solo il browser: molti utenti preferiscono leggere le email in un client dedicato.

Inoltre, dovete considerare anche alcuni problemi di privacy e sicurezza che dominano lo sviluppo del web. Questo vale soprattutto se volete includere JavaScript, se usate font di terze parti e altri aspetti.

Per questo motivo, dovete combattere battaglie per l’accessibilità e gli standard quasi su più fronti rispetto al web. È difficile creare un’email HTML che funzioni su più browser e client. Naturalmente è possibile farlo e tratteremo l’aspetto tecnico in una prossima sezione. Per il momento, dovete decidere i vari elementi della vostra email e poi cercare di implementarli.

Gli Elementi Essenziali (e le Pratiche Tipiche) di un’Email HTML

Questo articolo farà riferimento al web design in diversi punti, a causa delle somiglianze intrinseche. Un aspetto che presenta un flusso di lavoro simile è il modo in cui progettate le sfaccettature e le sezioni della vostre email HTML.

Proprio come nel web, ci sono alcuni elementi che non sono praticamente negoziabili per le vostre email. Ovviamente, avete bisogno di contenuti. Ci sono alcuni elementi tipici da considerare:

  • L’oggetto dell’email è importante perché è la prima impressione che il vostro messaggio darà a chi legge.
  • Come nel caso del web design, anche in questo caso è utile pensare a quali elementi vengono visualizzati nella prima parte della pagina.
  • Il contenuto del corpo del testo è fondamentale perché, dopo tutto, è per questo che le persone si iscrivono alle vostre email.
  • Anche il footer delle vostre email HTML offre molto valore a voi e alle persone che si abbonano e può essere un elemento sottovalutato delle vostre email.

Ci sono alcuni punti che possiamo approfondire. Innanzitutto, considerate quanto le emoji siano presenti nel nostro uso quotidiano del web. Anche se non sono un elemento HTML rigoroso, un’applicazione accurata delle emoji può fare miracoli per i vostri contenuti, soprattutto per l’intestazione:

Una sezione di un'email con uno sfondo nero che recita: How quick videos help us share thoughts, e l’emoji lampadina.
Una selezione di emoji utilizzate nell’oggetto dell’email.

Il footer è anche il posto migliore per alcune informazioni legali essenziali. Due dei maggiori problemi legati alle email sono lo spam e il fatto che un’email raggiunga le caselle di posta giuste (se mai le raggiungerà). Questo aspetto verrà analizzato in una sezione successiva, poiché è una parte fondamentale della creazione e dell’invio di email HTML.

Considerate Alcune Pratiche Tipiche per le Vostre Email HTML

Ci sono molti punti in comune con l’email marketing quando si tratta di alcune delle pratiche più ottimali da utilizzare per i vostri progetti e layout. Ce n’è una che dovrete includere quasi come elemento non negoziabile: Il doppio opt-in.

Uno dei più grandi trucchi dell’email marketing è quello di far arrivare le vostre email a chi legge. In altre parole, è necessario fornire un modulo di opt-in su un sito web, in quanto questo ha un alto tasso di conversione. Tuttavia, non dovrebbe essere l’unico momento in cui chiedete una conferma. È un’ottima pratica inviare anche un secondo opt-in via email:

Una parte di un messaggio double opt-in di un'email HTML, che spiega all'utente perché sta ricevendo un'email e gli chiede di verificarla cliccando su un pulsante verde con la scritta Verify Email.
Un’email di doppio opt-in.

Le ragioni sono molteplici:

  • In primo luogo, crea un rapporto di fiducia con i vostri lettori, perché ottenete il permesso esplicito di inviare le email.
  • Per estensione, avete anche il consenso esplicito nel caso di una segnalazione per spam (per saperne di più, vedi più avanti).
  • Contribuite a fermare l’abuso di email e spam per gli altri, perché devono scegliere espressamente di abbonarsi alle vostre email.

Infatti, poiché il doppio opt-in prevede l’invio di un’email all’indirizzo in questione, è il modo migliore per convalidare l’indirizzo email.

Ci sono anche altre buone pratiche da considerare. Tuttavia, le seguenti sono più opzionali, nel senso che otterrete risultati fantastici, ma ci saranno momenti in cui non vorrete seguire queste linee guida:

  • L’oggetto della vostra email deve essere perfetto e il contenuto della vostra email deve essere chiaro. Considerando l’avvento e l’attuale dominio della navigazione da mobile, questo aspetto è particolarmente importante.
  • A questo proposito, dovete assicurarvi che le vostre email HTML si leggano senza problemi anche sugli schermi più piccoli: questo significa che non dovete inserire banner o loghi troppo grandi.
  • Se includete una forte chiamata all’azione (CTA) all’interno di ogni email, avete buone possibilità di migliorare il coinvolgimento degli utenti.
  • Il tracciamento è una questione controversa, ma vi aiuterà a capire cosa fanno i vostri utenti quando inviate loro un’email. Alcuni provider includono un solido set di analisi come standard.

Altrettanto importante del modo in cui presentate e impostate la vostra email è il modo in cui create il design e il layout. Nelle prossime sezioni vedremo come costruire un’email HTML e concluderemo con alcuni consigli per l’invio.

L’Approccio Tecnico per Creare un’Email HTML

Se avete un po’ di esperienza nello sviluppo web, senza dubbio userete l’HTML5 come linguaggio di markup. Questo è un mondo a parte rispetto alle precedenti versioni di HTML e XHTML e prevede una maggiore divisione tra stile (di cui non esistono praticamente elementi validi) e struttura.

Per fare un esempio di quest’ultima, HTML5 offre una serie di tag diversi per definire le aree di contenuto del vostro sito.

Uno snippet HTML nell’app Onivim2 che mostra diversi tag che aiutano a definire le aree di contenuto, come <html>, <head>, <body>, e altro.
Una serie di tag strutturali HTML.

Tuttavia, l’HTML delle email è una bestia diversa, in quanto è un po’ in ritardo sui tempi. Per questo motivo, dovrete usare tutte le vecchie tabelle HTML4 e lo stile in linea per creare il vostro layout. Per capire il motivo di questa scelta, dovete rivolgervi a chi sviluppa i client di posta elettronica, che spesso modificano l’email HTML quando arriva nella vostra casella di posta. Una delle azioni più comuni è quella di eliminare CSS e JavaScript dalle email per motivi di sicurezza (tra gli altri).

Ciò significa che dovrete fornire un altro modo per aggiungere lo stile alle vostre email HTML: l’opzione inline è l’unica per garantire la compatibilità. A proposito di compatibilità, questa è una considerazione importante. Dovete bilanciare uno stile unico con le funzionalità del client di posta elettronica dell’utente finale. Per questo motivo, ci sono alcune altre considerazioni tecniche da tenere in considerazione:

  • L’utilizzo di font di sistema piuttosto che di font di terze parti vi farà risparmiare una richiesta HTTP, caricherà velocemente l’email per l’utente e fornirà un’email dall’aspetto uniforme.
  • Potreste anche andare oltre e fornire una versione in testo semplice della vostra email per coloro che non possono visualizzare le email HTML nel loro client. Molti siti offrono una versione HTML a cui è possibile accedere online, sia per questo motivo che come backup.
  • L’alt-text è importante sia per le email HTML che per il web. Per questo motivo, usate l’alt text ogni volta che aggiungete un’immagine ai vostri contenuti per garantire l’accessibilità.

C’è un aspetto tecnico di un’email HTML a cui dovreste pensare di più, perché può essere a cavallo tra lo stile in linea, i CSS e altri fattori. Parliamo brevemente dei “condizionali”.

Usare i Condizionali

Un retaggio delle email HTML che faceva parte del kit di strumenti dello sviluppo web HTML di vecchio stampo è quello dei condizionali. Si tratta di specificare quale browser userà un particolare frammento di codice.

In tutta onestà, questo è quasi sempre un problema di Microsoft. Per chi fa sviluppo web, Internet Explorer (IE) era il browser del demonio. Per le email HTML, invece, è Outlook. Tra le diverse versioni, potreste notare che il vostro stile viene visualizzato in un modo che non vi aspettavate.

Per questo motivo, potete aggiungere blocchi di condizioni al vostro codice e definire questi elementi. Per esempio, potete puntare sia alla versione di Outlook basata su Word che a quella basata su IE.

In primo luogo, Word:

<!--[if mso]>

Questo è per le versioni di Outlook basate su Word:

<![endif]-->

Per Internet Explorer si usa un tag diverso:

<!--[if (IE)]>

Questo è per le versioni di Outlook basate su IE:

<![endif]-->

Se il browser a cui vi rivolgete è basato su WebKit (come Apple Safari, il browser PlayStation, il Kindle di Amazon e altri), potete usare una media query per fornire uno stile specifico:

.html-email-webkit {
  display: none;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
  ..html-email-webkit {
    display: block !important;
  }
}

Questo vi offre un modo leggermente migliore per adattare la vostra email HTML al display dell’utente finale. Nel complesso, lo stile HTML per le email non è perfetto, ma ogni client di posta elettronica è in grado di aiutarvi a creare layout straordinari.

Le Vostre Opzioni per Creare Email HTML

Nonostante quanto abbiamo già detto, avete a disposizione una serie di opzioni flessibili per creare email HTML. Per esempio, potete costruire da zero usando un editor di testo e l’HTML.

Tuttavia, ci sono altre opzioni che possiamo prendere in considerazione:

  • Potete usare un servizio dedicato, come un’applicazione di email marketing, per creare le vostre email. Molte app forniscono un builder visivo, ma vi danno anche la possibilità di scrivere il vostro codice e di creare il vostro template.
  • A questo proposito, potete scaricare un template per le vostre email HTML. Questo template è molto simile a un tema di WordPress, in quanto fornisce una base per il resto del vostro design. Da lì potrete personalizzarlo a vostro piacimento. È una buona via di mezzo tra le opzioni di codifica e quelle di costruzione.

Più avanti costruiremo la nostra email usando l’HTML. Tuttavia, prima di questo, diamo un’occhiata ad alcuni fornitori di servizi di posta elettronica che potreste prendere in considerazione, indipendentemente dal metodo scelto per creare le vostre email.

3 Fornitori di Servizi Email Perfetti per Creare Email in HTML

Dato che l’obiettivo di questo articolo è la creazione di email HTML, non è il caso di approfondire troppo la questione dei provider di servizi email. Tuttavia, ce ne sono alcuni che probabilmente prenderete in considerazione.

Non possiamo trattarli tutti, quindi ne citeremo tre tra i più popolari. Vediamo di elencarli tutti.

1. Mailchimp

Il logo di Mailchimp, con la mascotte Freddie che fa l'occhiolino e la scritta Intuit Mailchimp.
Il logo di Mailchimp.

Questo fornitore di servizi di posta elettronica è la soluzione ideale, quasi una scelta obbligata per molti. Agli occhi di molte persone, Mailchimp è lo standard di riferimento per le applicazioni di email marketing e ci sono molte buone ragioni per questo:

  • Include molte funzioni tipiche che troverete in diverse altre applicazioni simili.
  • C’è molta assistenza quando si tratta di promuovere un’attività, come per esempio l’automazione del marketing, gli strumenti di gestione del pubblico e molto altro ancora.
  • Avete a disposizione una suite di strumenti creativi di prim’ordine per aiutarvi a creare email HTML.

Naturalmente, in questa sede vogliamo soffermarci su quest’ultimo aspetto. Il Creative Assistant è uno strumento con cui Mailchimp impara a conoscere il vostro brand e vi aiuta a costruire e personalizzare le vostre email. Potete anche collegare applicazioni di terze parti come Adobe Photoshop per aiutarvi a creare l’email perfetta.

È anche semplice lavorare con l’HTML esistente, soprattutto se usate il Classic Builder di Mailchimp. In ogni caso, avete la possibilità di importare template HTML se ne avete bisogno.

Mailchimp usa un complicato ibrido di livelli di abbonamento mensile e numero di contatti per arrivare a un prezzo finale. Secondo noi, le piccole imprese avrebbero bisogno di un piano di circa 35 dollari al mese, fino a 2.500 contatti. Tuttavia, dovrete cercare il piano migliore per voi in base alle funzionalità di cui avete bisogno e al numero di contatti che pensate di portare a bordo.

2. AWeber

Per alcuni, AWeber rappresenta l’apice dell’email marketing. È una piattaforma fantastica e potente e include un set di funzioni probabilmente più mirato rispetto a Mailchimp.

L'interfaccia di AWeber, che mostra l'interfaccia di Canva sovrapposta al visual builder. Il canvas mostra il logo di Tara's Healthy Eats, mentre la barra laterale contiene una serie di grafici e immagini.
Il logo di AWeber.

Include una serie di funzioni essenziali di cui avrete bisogno per inviare email:

  • La possibilità di automatizzare e programmare messaggi, campagne e altro ancora.
  • Avete a disposizione ottimi strumenti organizzativi, come il tagging e la segmentazione degli iscritti.
  • AWeber vi permette anche di automatizzare i contenuti che create per le vostre email. Per esempio, potete trasformare gli articoli del blog in mailing con un minimo di lavoro.

Quando si tratta di creare le vostre email, AWeber ha alcuni assi nella manica. Usa un visual builder drag-and-drop e include una libreria di template personalizzati per iniziare. Inoltre, potete collegare AWeber al vostro account Canva e usare quest’ultimo per progettare le vostre email.

C’è anche un editor HTML dedicato, cosa che non accade con Mailchimp. Tutto questo è disponibile anche nel livello gratuito di AWeber. A questo proposito, i prezzi sono più semplici. Pagherete circa 25 dollari al mese per un massimo di 2.500 contatti.

3. Constant Contact

Constant Contact è un’eccezione tra i fornitori di servizi di posta elettronica, ma è più che altro un’arma segreta. Offre una fantastica gamma di caratteristiche e funzionalità e vi permette anche di lavorare con l’HTML quando ne avete bisogno.

Il logo di Constant Contact è un circolo blu in cui uno spicchio è di colore giallo.
Il logo di Constant Contact.

Come AWeber, Constant Contact si concentra sull’email marketing rispetto ad altre aree aziendali. Per questo motivo, ha una serie di funzionalità che vi piaceranno:

  • Avete a disposizione strumenti di gestione degli elenchi di clienti e funzionalità di marketing automation.
  • Ci sono ampie opzioni di reportistica.
  • Potete integrare programmi di promozione ad di Facebook, Instagram e Google.
  • Ci sono molti modi per coinvolgere e attirare nuovi iscritti alle vostre liste.

Anche la funzionalità di progettazione di Constant Contact è buona. Potete scegliere un template e lavorare con un editor visivo per creare l’intero design. Tuttavia, potete anche lavorare con l’HTML, a volte in modo avanzato rispetto ad altri strumenti.

Anche i prezzi sono ragionevoli. Pagherete circa 35 dollari al mese per il piano Core e 2.500 contatti, oppure 70 dollari per il piano Plus.

Cosa Vi Serve per Creare un’Email HTML

Prima di iniziare a creare le vostre email in HTML, dovrete avere a portata di mano alcuni strumenti e competenze. Ecco cosa dovreste procurarvi prima di iniziare a lavorare:

  • Dovrete usare un editor di codice che trovate comodo perché dovrà supportarvi durante il processo. Se non sapete quale scegliere, molti utenti optano per Visual Studio Code, anche se Brackets sarebbe l’ideale per questo particolare compito. Useremo Onivim2, un editor in stile Vim basato sull’infrastruttura principale di VS Code.
  • Anche se avrete bisogno di conoscenze di HTML, non dovrete avere le stesse conoscenze di un moderno sviluppatore web (anche se non guasta).
  • Avrete bisogno di un modo per testare le vostre email: MailHog è una soluzione che abbiamo presentato altrove sul blog di Kinsta.
  • Anche se non useremo un template precostituito, in futuro potreste voler usare uno di questi.
  • Avrete anche bisogno di un provider di posta elettronica, perché vi servirà un modo per inviare l’email HTML finita.

Con tutti questi elementi, avrete tutto pronto per aprire un editor di testo e iniziare a scrivere. Di seguito vi illustreremo il procedimento per creare un’email HTML di base.

Come Creare un’Email HTML da Zero

Prima di iniziare, è bene sottolineare che non useremo un servizio dedicato come Mailchimp o AWeber. Creeremo invece un semplice template da zero che potrete importare dove volete.

Divideremo il processo in diverse sezioni perché, sebbene un’email HTML sia semplicemente relativa a un sito web, c’è ancora molto da considerare.

1. Create le Basi per un’Email HTML

È una buona idea iniziare con lo scheletro del vostro modello di email. Questo seguirà alcune pratiche tipiche dell’HTML in generale:

<!DOCTYPE PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title></title>
  </head>
  <body>
  </body>
</html>

Ci sono alcune cose che dobbiamo menzionare. Innanzitutto, specifichiamo un “doctype” per Transitional XHTML 1.0, una pratica comune tra chi sviluppa le email. Da qui, specifichiamo uno spazio dei nomi XML, che sarà importante in seguito.

Noterete anche alcuni meta tag, che definiscono il set di caratteri e il modo in cui il browser deve rendere l’HTML che segue nel suo viewport.

Il resto dello scheletro è semplice: ci sono i tag title e body che useremo più avanti.

2. Aggiungete la Struttura del Vostro Template di Email

Tornando alla nostra discussione sui tag HTML da usare, ricorderete che non ci servono i <div> o altri elementi strutturali tipici. Al contrario, vogliamo usare le tabelle, perché rendono bene all’interno dei client e dei servizi di posta elettronica.

Tutto inizierà con una semplice serie di tag <table> all’interno del corpo del testo:

<body>
  <table role="presentation">
    <tr>
      <td>
      </td>
    </tr>
  </table>
</body>

L’attributo che abbiamo impostato all’interno del tag <table> aiuta gli screen reader ad analizzare il testo al suo interno, quindi è utile per l’accessibilità.

Da qui, dovrete aggiungere nuove righe e colonne alla tabella per costruire il template HTML dell’email. Il modo in cui farlo dipende da voi, ma è bene iniziare con una base di sezioni di header, footer e body. Non le ripeteremo qui per brevità, ma le citeremo man mano che procederemo.

La buona notizia è che potete continuare ad aggiungere nuove righe alla vostra tabella se avete bisogno di aggiungere altre sezioni. Tuttavia, da qui in poi, dovrete iniziare a introdurre lo stile e altri elementi.

3. Includete lo Stile per i Vostri Elementi

Il bello dell’HTML è che è quasi del tutto indipendente dallo stile. Il markup è semplice, ma gli stili che applicate potrebbero non esserlo. È qui che vedrete la vostra email HTML prendere vita.

Come guida durante la progettazione, aggiungeremo un tag <style> all'<head> per visualizzare un bordo generale:

<style>
  table, td {border:2px solid #000000 !important;}
</style>

Per iniziare, ci assicureremo che non ci siano spazi inaspettati nel corpo o nella tabella principale (che qui funge da corpo perché alcuni client di posta elettronica rimuovono questo tag):

<body style="margin:0;padding:0;">
  <table role="presentation" style="width:100%;border-collapse:collapse;border:0;border-spacing:0;background:#ffffff;">
</body>

Inoltre, aggiungeremo un po’ di centratura e rimuoveremo qualsiasi padding extra dalle celle delle varie sezioni:

<tr>
  <td align="center" style="padding:0;">Header
  </td>
</tr>

Se date un’occhiata nel vostro browser, non sembrerà granché:

Una finestra del browser mostra il testo nero su sfondo bianco: header, body, footer. Ogni cella ha un bordo nero.
Una finestra del browser che mostra lo scheletro dell’email HTML.

Tuttavia, da qui potete sviluppare ulteriormente il vostro template di email usando tabelle e tag di stile. Per esempio, abbiamo creato una sezione hero per l’header e abbiamo ampliato il footer e il body:

Un'email HTML che mostra una busta di posta aerea completa di adesivi, francobollo e macchie rosse e blu, il testo del corpo del sito web di Kinsta e una sezione a piè di pagina contenente i link all'informativa sulla privacy, al supporto e ai termini. C'è anche una nota sul copyright di Kinsta e un link per annullare l'iscrizione.
Creazione di un template di email mockup (fonte: Settergren).

Probabilmente creerete un modello migliore e più adatto alle vostre esigenze, ma usando le tabelle annidate e alcune conoscenze di base di HTML, potete creare un template di email HTML responsive e personalizzato che colpisce nel segno.

4. Testate la Vostra Email

Prima di concludere, dovrete testare la vostra email per assicurarvi che venga visualizzata bene su diversi dispositivi. Ci sono diversi servizi che possono aiutarvi in questo senso.

Per esempio, Email on Acid include una lista di controllo completa prima della distribuzione che vi permette di verificare che il vostro template non crea problemi:

L'interfaccia di Email On Acid, che mostra un'email, una barra laterale nera, un elenco di controllo pre-deployment in corso e il codice relativo a un elemento dell'email.
Il sito web di Email on Acid.

Gli utenti di Litmus conosceranno PutsMail, ma è accessibile a chiunque:

Il sito web di Litmus con tre pannelli mockup - uno in modalità scura - che mostrano le opzioni per la creazione e la condivisione delle email, insieme alle icone che visualizzano un lucchetto e una busta.
Il sito web di Litmus.

Per usare il servizio è necessario registrare un account, ma l’utilizzo è semplice. Potete sfruttare la funzionalità di anteprima delle email su diversi browser e su vari dispositivi.

Mailgun offre anche un fantastico servizio collegato alla sua offerta principale. Attraverso l’interfaccia potete testare client di posta elettronica, browser e molto altro. Inoltre, potete testare elementi come gli oggetti, per assicurarvi di mantenere alti i tassi di apertura.

Due pannelli che mostrano un grafico colorato e una raccolta di metriche relative a deliverability, rischio e altre informazioni.
Lo strumento Email Tester di Mailgun.

Tuttavia, una volta testata la vostra email, dovrete assicurarvi che arrivi nella casella di posta del destinatario. Nell’ultima sezione parleremo di questo aspetto.

Inviare un’Email HTML: Cosa C’è da Sapere

Un vantaggio dell’utilizzo di un servizio di email marketing che non abbiamo ancora menzionato è la gestione degli aspetti legali dell’invio delle email. Questo aspetto è importante perché se sbagliate qualcosa, non solo non riuscirete a raggiungere un destinatario, ma vi metterete nei guai.

Un servizio di email marketing avrà già un buon rapporto di collaborazione con le organizzazioni che si occupano dello spam e degli aspetti correlati all’invio di un’email. Per questo motivo, spesso è una buona idea scegliere uno di questi se non volete preoccuparvi di ricevere spam.

Tuttavia, ci sono alcuni consigli che possiamo dare a prescindere dalla piattaforma che usate:

  • Seguite tutte le linee guida della legge CAN-SPAM, soprattutto se il vostro pubblico principale si trova negli Stati Uniti. Naturalmente, i diversi Paesi avranno le loro direttive legali.
  • Includete un doppio opt-in per gli iscritti. In questo caso chiedete agli iscritti di confermare l’iscrizione, ma inviate anche una seconda conferma. Questo protegge voi e chi si abbona in caso di richieste di spam o di privacy.

La deliverability è un elemento chiave delle vostre email e lo trattiamo in modo approfondito in un altro articolo. Tuttavia, questo concetto è un mix di diversi aspetti, come l’uso di un buon codice, l’ottenimento del giusto livello di autorizzazione e altro ancora.

Questo si collega a un altro aspetto: il vostro punteggio di invio, o sending score. Si tratta di un punteggio simile a quello del credito e serve a misurare la vostra reputazione. Ci sono diversi componenti che formano l’insieme:

  • La frequenza di rimbalzo del vostro sito.
  • Il numero di reclami ricevuti dal vostro sito in relazione alle email inviate.
  • La reputazione del vostro indirizzo IP.
  • La firma del vostro nome di dominio.

Quest’ultimo riguarda il vostro DomainKeys Identified Mail (DKIM) e il Sender Policy Framework (SPF). Inoltre, potete verificare la reputazione del vostro IP attraverso servizi come SenderScore o IPQualityScore.

Se prima di tutto scegliete il giusto fornitore SMTP (che sta per simple mail transport protocol provider), potete spuntare alcune di queste caselle in un colpo solo. Proprio come la scelta di una soluzione di email marketing, questo servizio capirà di cosa avete bisogno per mantenere alta la vostra deliverability e per essere in regola con le autorità.

Mailgun è una soluzione che abbiamo menzionato in precedenza e potrebbe essere l’ideale. Tuttavia, ce ne sono altre come Mailjet, Sendinblue e persino il servizio di Gmail.

Riepilogo

La posta elettronica non sta per morire. Per questo motivo, usare le email per le vostre esigenze, come la promozione e il marketing, è un modo fantastico ed economico per raggiungere potenziali abbonati, utenti e clienti.

Sebbene possiate acquistare un template HTML dedicato, creare le vostre email HTML non è poi così difficile. Potrebbe essere il modo per avere successo se avete in mente una visione specifica. Tuttavia, dovrete tirare fuori i vostri vecchi trucchi HTML, come i condizionali e le tabelle annidate. Il design delle email in HTML non è ancora al livello del moderno web design, ma potete ancora ottenere molto con poco.

Avete bisogno di creare email in HTML e, se sì, quali domande avete? Fatecelo sapere nella sezione commenti qui sotto!

Salman Ravoof

Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.