Tutto ciò che gli sviluppatori hanno bisogno di sapere sull'invio di email transazionali

Immaginate che state sviluppando una nuova funzione o applicazione. La fine è vicina. Tutte le infrastrutture complicate, i database, le API, i test stanno andando bene. Poi vi rendete conto che ci sono punti chiave nel sistema verso cui è necessario che inviate delle email "transazionali"; reimpostazione della password, email di benvenuto, ricevute, fatture.

Sapete che ci sono servizi e API che potete utilizzare per gestire questo per voi, ma come iniziate a guardare all'invio di email vi rendete conto che sta per diventare più difficile di quanto pensavate. Soprattutto se volete utilizzare i disegni che il vostro designer, product manager o responsabile marketing aveva in mente.

Si tratta di uno scenario comune. Come sviluppatori pensiamo raramente alle email transazionali fino a dopo la costruzione del prodotto. Ma è OK, poiché ci sono un sacco di soluzioni che vi coprono le spalle. È passato molto tempo dall'ultima volta che dovevate affidarvi per l'impostazione alla vostra infrastruttura di posta elettronica per gestire invio, ricezione, rifiutate, disdette ecc.

Detto questo, ci sono alcune cose fondamentali che dovete sapere sulla creazione di email in formato HTML, l'invio di email e per mantenere una buona reputazione come mittente. Questa lista di controllo vi aiuterà a preparare il vostro prossimo progetto che ha email transazionali. Copriremo:

1. Cosa sono le email relative transazionali?
2. Scegliete il vostro Email Service Provider (ESP)
3. Una guida per la recapitabilità e la reputazione
   
4. Programmare una email HTML responsive
   
5. Risorse sull'email per gli sviluppatori
   

Nota: qusto tutorial è parte di un'intera settimana di contenuto di valore per le email su Tuts+ Web Design – controllate la guida di apprendimento di Diventare esperto di email HTML per saperne di più!

Cosa sono le email transazionali?

Potreste classificare le email che le aziende e le applicazioni inviano in:

• Email transazionali
• Email marketing

Potreste dividerli ulteriormente in sotto-categorie, ma ai fini di ciò di cui stiamo parlando occupiamoci di questi due.

Le email di marketing sono in genere di natura promozionale e gestite dal team di marketing. Comprendono newsletter mensili, promozioni stagionali,  aggiornamenti sull'azienda e sul prodotto, nuove uscite ecc. C'è una strategia di contenuto e di ciclo vitale dietro quando e quanto spesso inviarle.

Le email transazionali sono quelle innescate dal comportamento dell'utente e in genere implementate dagli sviluppatori o dal team del prodotto. L'utente fa qualcosa nella vostra app che causa un'email da inviare. Questi includono:

• Email di benvenuto
• Email di conferma
• Reimpostazione della password
• Nuove fatture/ricevute
• ecc.

La maggior parte di queste email probabilmente le potrete inviare voi stessi, ma potreste anche inviarle attraverso servizi di terze parti, ad esempio Stripe per le ricevute, Shopify per l'e-commerce.

Le regole per le email transazionali e le email di marketing differiscono leggermente. Il GDPR è entrato in vigore il 25 maggio 2018, pertanto chiunque invii email di marketing deve raccogliere un'autorizzazione esplicita da parte degli abbonati e mantenere un documento di tale autorizzazione. Allo stato attuale non avete bisogno di un'autorizzazione esplicita per inviare email transazionali, ad esempio una ricevuta a qualcuno che ha appena acquistato qualcosa dal vostro negozio. Tuttavia ci sono vantaggi per mantenersi in linea con le normative del GDPR qualunque tipo di email stiate inviando.

Scegliete il vostro Email Service Provider (ESP)

È possibile impostare il proprio server di posta e gestire l'invio delle email. Se siete in una grande azienda come Google o Facebook potete anche avere la vostra squadra per l'infrastruttura delle email dedicata al supporto di email transazionali.

Per la maggior parte di noi non consiglio di impostare e gestire il proprio server di posta. Ci sono un sacco di spese coinvolte nell'assistenza e manutenzione. Utilizzate invece uno degli ESP esistenti. Hanno fantastiche API per gli sviluppatori e hanno prezzi ragionevoli, solitamente con generosi piani gratis.

Ognuno di questi ESP è ricco di funzionalità con tutto il necessario per gestire email transazionali:

• L'invio di email via API o SMTP.
• Ricezione e analisi della posta elettronica in arrivo.
• Metriche per email inviate, ricevute, rifiutate, aperte, cliccate.
• Gestione delle disdette e degli elenchi soppressioni.
• Monitoraggio della reputazione.
• Gestione del ciclo di feedback.
• Conformità al GDPR e altro ancora.

Una volta che avete scelto il vostro ESP è il momento di sistemare le cose.

Una guida per la recapitabilità e la reputazione

I fornitori di mailbox (come Gmail e Outlook) guardano a una piccola cosa chiamata reputazione. Volete una buona reputazione per garantire la che vostra email finisca nelle caselle di posta dei destinatari. Se avete una cattiva reputazione, allora il vostro indirizzo email andrà nello spam o il provider di posta elettronica potrà respingerlo e rifiutarlo.

Secondo Talos, a luglio 2018 la quantità media giornaliera di spam inviato a livello globale era di 305,95 miliardi. Non volete che la vostra posta cada in questo secchio.

Cose che possono contribuire a una cattiva reputazione:

• I destinatari segnalano la vostra email come spam.
• I destinatari non aprono o non interagiscono con la vostra email.
• Inviate toppe email.
• Inviate email da un indirizzo IP che ha un cattivo punteggio.
• Non avete impostato DKIM, SPF e DMARC.
• Il contenuto che inviate sembra spam.

I tre metodi di autenticazione principali da considerare sono SPF (Sender Policy Framework), DKIM (DomainKeys Identified Mail) e DMARC (Domain-based Message Authentication, Reporting and Conformance).

SPF è un modo per i provider di mailbox per autenticare che l'email in realtà è venuto dal vostro dominio. È un record TXT DNS che dovrete aggiungere manualmente tramite la gestione del DNS.

1

domain.com. TXT "v=spf1 include:domain ~all"

DKIM utilizza coppie di chiavi pubbliche/private per firmare ogni messaggio con una firma crittografica unica, progettata per rilevare l'email spoofing. Quando si preme invio, il vostro ESP aggiungerà una firma privata, quindi sul vostro DNS c'è la vostra firma pubblica, alla quale il provider del mailbox del destinatario chiamerà per garantire che tutto sembri buono.

1

_domainkey.domain.com. TXT "v=DKIM1; k=rsa; p=PUBLIC_KEY"

DMARC non è un protocollo di autenticazione, ma vi consente di impostare un criterio per sapere cosa fare con i messaggi che non passano SPF o DKIM, sia che siano rifiutati o in quarantena.

1

_dmarc.domain.com. TXT "v=DMARC1; p=reject; pct=100; rua=postmaster@domain.com"

Ecco un esempio di come l'autenticazione dell'email tutto si incastri alla perfezione. È molto semplificato, ma vi dà un'idea di come funziona.

La reputazione è legata sia al vostro dominio di invio che all'indirizzo IP che si utilizza, quindi volete che questo sia statico. Verificare il vostro indirizzo IP è il metodo più semplice di cui dispone un provider di mailbox (Gmail, Outlook, Hotmail, Yahoo, AOL ecc.) quando controlla la vostra reputazione. Quando inviate oltre 50.000 email alla settimana dovreste considerare di utilizzare un IP dedicato così non lo state condividendo con altri, dandovi un maggiore isolamento. E tenete a mente che è necessario un "riscaldamento" dell'IP. Non dovreste solo iniziare a inviare milioni di email da un nuovo IP dedicato fin da subito. La maggior parte ESPs offre questa funzionalità.

Un'altra cosa da considerare è di utilizzare IP e sottodomini separati per le vostre email transazionali e di marketing. In genere impostate qualcosa come send.mydomain.com per il marketing e notifications.mydomain.com per le email transazionali.

Non inviate da un indirizzo email "no-reply@". Prima di tutto sembra brutto ai vostri destinatari poiché sembra che a voi non importi e non volete sentirli. In secondo luogo, è una cosa fantastica quando i destinatari rispondono e si impegnano. Questo è quello che piace vedere ai fornitori di mailbox.

Utilizzate strumenti come SenderScore e SenderBase per monitorare la vostra reputazione.

Programmare una email HTML responsive

MIME Multipart

Quando inviate un'email è costituita da intestazioni e da diverse parti. Questo è noto come Multipurpose Internet Mail Extensions (MIME). Questo combina testo normale, HTML e/o altre parti e lascia al cliente destinatario di decidere cosa e come visualizzarlo.

• Le intestazioni contengono coppie di valori chiave come chi era il mittente originale, l'oggetto, l'indirizzo di risposta e un mucchio di altri dati interessanti. All'interno del vostro corpo avete diverse "parti".
• text è la forma più semplice per inviare un'email con solo testo e nessuna formattazione.
• text/html abilita l'HTML. È dove va la vostra email HTML.
• text/watch-html è per gli orologi, come Apple Watch, e ha un supporto limitato per l'HTML.
• text/x-amp-html è una nuova parte che porta contenuti interattivi a Gmail con AMP per l'email.

Per la maggior parte delle email potrete inviare una parte di testo normale e una parte HTML. Ai fornitori di mailbox piace vedere entrambi. La buona notizia è che gli ESP gestiscono tutto questo per voi. Probabilmente non è qualcosa a cui dovete pensare a meno che non state cercando di fare qualcosa di più avanzato con le email.

Se siete curiosi di come appare, su Gmail, fate clic su Visualizza originale (o Mostra originale) e vi mostrerà di che pasta è fatto. Mettere questi tutti insieme è abbastanza complicato che è un'altra buona ragione per usare un ESP che fa tutto questo per voi.

Tabelle e CSS Inline

Quando programmate le email in HTML è (ancora) consigliabile che usiate le tabelle (<table>), le righe della tabella (<tr>) e le celle della tabella (<td>). Un sacco di client di posta elettronica sono sempre migliore nel supportare HTML e CSS moderni, ma rischiate che si sgretolino in alcuni client di posta elettronica.

Ci sono un sacco di client di posta elettronica. Litmus, uno strumento di test per email, attualmente supporta più di 90 clienti su desktop, web e mobile. Questi client di posta elettronica usano tutti motori di rendering diversi. Alcuni usano Webkit, alcuni Internet Explorer, alcuni Microsoft Word. E tutti aggiungono alcuni dei loro stili e classi personali oltre a quello che stabilite.

^{Leggete di più sui motori di rendering delle email.}

Con questo in mente si consiglia di giocare sul sicuro e di rispettare alcune regole quando si programma per le email.

• Usate <table> invece di <div>
• Utilizzate i colori esadecimali interi #ff6600 invece delle abbreviazioni #f60
• Utilizzate padding invece di margin
• Usate background-color invece di background
• Utilizzate il CSS inline anziché il CSS incorporato
• Attenetevi ai tipi di carattere web safe e di sistema
• Aggiungete role="presentation" a ogni tabella così che sia chiaro agli screen reader che la tabella viene utilizzata per il layout
• Utilizzate i tag HTML semantici, come <p> e <h1> dove applicabili

Ad esempio, ecco come in genere programmo i pulsanti per le email HTML, utilizzando una tabella esterna per l'allineamento e una tabella interna per la forma del pulsante.

È una soluzione abbastanza a prova di proiettile:

Scrivere il CSS inline può essere monotono, per non parlare di quanto sia duro da mantenere e non scalabile, soprattutto per le grandi squadre. Questo è dove volete utilizzare un CSS inliner o alcuni set di strumenti di automazione per aiutarvi a costruire e rendere inline i vostri modelli. I framework come MJML e Inky offrono agli sviluppatori un linguaggio più amichevole di template con cui lavorare.

Nota: potete utilizzare le media query e le istruzioni condizionali per alcuni client di destinazione – con loro potete avere dei layout speciali per Outlook o usare di tipi di carattere web nei client Webkit. Controllate questo semplice modello di email responsive open source per farvi iniziare o leggete di più su queste tecniche per programmare modelli di posta elettronica HTML più avanzati.

È davvero necessario utilizzare tabelle e CSS Inline nel 2018?

Dipende. Se volete giocare sul sicuro e assicurarvi che le email siano a prova di proiettile, allora sì.

• 
  Email Design
  Creare una semplice Email HTML responsive
  Nicole Merlin

Se avete una buona intuizione sui vostri destinatari e sapete che utilizzano client di posta elettronica che hanno il supporto per i CSS incorporati e il box model, allora forse no. Potete sicuramente prendervi il rischio e potrebbe non essere un problema. Personalmente mi attengo alle vecchie abitudini e utilizzo tabelle e CSS inline, ma molti altri stanno iniziando a sperimentare con l'opzione "non inline".

Immagini, gif, video & media

Alcuni client (in particolare Outlook) bloccherà il rendering delle immagini per impostazione predefinita, costringendo i destinatari a dare l'opt-in per visualizzare le immagini. Con questo in mente date sempre alle vostre immagini un testo ALT significativo.

• 
  HTML
  Suggerimento rapido: Ricordatevi di dare uno stile al vostro testo ALT
  Nicole Merlin

Vorrete fornire immagini di alta qualità per gli schermi retina (ad es. iPhone) pertanto le immagini dovrebbero essere almeno 2x le dimensioni che volete visualizzare. Con questo in mente, date sempre alla vostra immagine un attributo width per fermare l'eccedenza su alcuni client.

1

<img src="https://your-cdn.com/image.png" alt="Descriptive text" width="600px" height="300px" border="0" style="display:block; max-width: 100%;">

Le Gif animate sono supportate nella maggior parte dei client. I video sono supportati su iOS, Apple Mail e Outlook.com. Potete anche sperimentare le Emoji nelle vostre righe dell'oggetto per ottenere l'attenzione dei destinatari 🤯�