Punti chiave

• Progettare un’email è come progettare per una stampante molto rigida. Quello che sta bene in un browser o in uno strumento di design non sempre appare uguale nella casella di posta.
• Un’email «pronta per la casella di posta» viene visualizzata correttamente in ogni client, si legge bene da mobile, carica le immagini e supera i filtri antispam.
• Molti errori di design comuni si risolvono facilmente: usa immagini JPEG o PNG, testo ad alto contrasto e font web-safe, e fai sempre un test prima dell’invio.
• Non ti serve uno sviluppatore. Strumenti come Stripo e Benchmark Email permettono anche ai team più piccoli di creare e inviare email HTML professionali senza scrivere codice.

Se ti è mai capitato di creare un’email che sul tuo schermo sembrava perfetta e poi di vederla scomporsi in Outlook o rimpicciolirsi fino a diventare illeggibile sullo smartphone, non sei il solo. Succede sia ai principianti sia ai marketer più esperti.

Per questo abbiamo deciso di collaborare con Stripo. Insieme vediamo perché il design delle email HTML è importante, come creare un template nel modo giusto in Stripo e come importarlo nel nuovo HTML Editor di Benchmark Email per inviarlo.

Perché il design delle email HTML è importante (anche se non scrivi mai codice)

Sarò sincero: non ho alcuna intenzione di scrivere una sola riga di codice. Però invio tantissime email, quindi capire come funzionano le email HTML conta ancora.

Ecco il concetto chiave: l’HTML delle email segue regole diverse dal resto del web. Molti marketer danno per scontato che, se qualcosa sta bene in uno strumento di design o in un browser, starà bene anche nella casella di posta. Non è sempre così, e non vuoi certo scoprirlo a tue spese. Outlook, in particolare, è famoso perché elimina gli stili e visualizza gli elementi in modo imprevisto.

Progettare un’email è un po’ come progettare per una stampante molto rigida. Alcune cose semplicemente non vengono riprodotte, ed è voluto. Gmail, Outlook e Apple Mail possono visualizzare la stessa email in modo diverso. Ecco perché le email si basano ancora su layout a tabelle, stili inline e font web-safe. Se affronti il lavoro con la mentalità del «progettare entro dei vincoli», ti risparmierai parecchi grattacapi.

Cosa significa davvero «pronta per la casella di posta»

Un’email pronta per la casella di posta non è solo un’email che sta bene sul tuo schermo. Deve:

• Essere visualizzata correttamente ovunque: su Gmail, Outlook e Apple Mail, sia da desktop sia da mobile.
• Essere leggibile sullo smartphone: più della metà delle persone legge le email sullo smartphone. Se gli iscritti devono ingrandire con le dita per leggere, è meno probabile che interagiscano.
• Caricare le immagini: e avere comunque senso se non vengono caricate. Evita di costruire un’email attorno a una sola immagine.
• Restare intatta: niente testo invisibile, layout rotti o stili eliminati.
• Superare i filtri antispam: così arriva nella casella di posta prima ancora di tutto il resto.

5 errori comuni nel design delle email (e cosa fare invece)

Possono capitare a chiunque. Ne ho commessi alcuni anch’io.

1. Usare immagini SVG o WebP. Molti client di posta non le supportano. Usa invece JPEG o PNG.
2. Testo chiaro su sfondi chiari. Per una buona leggibilità, usa colori ad alto contrasto per testo e sfondo.
3. Affidarsi ai web font. Spesso vengono sostituiti con i font predefiniti. Usa font web-safe come Arial o Georgia.
4. Dimenticare i test. Visualizza l’anteprima e invia email di prova prima di ogni campagna per vedere come viene visualizzata la tua email nei diversi client.
5. Copiare l’output dello strumento di design direttamente nel tuo ESP. Crea l’email in uno strumento pensato apposta per le email oppure ripulisci il codice prima di incollarlo.

Perché creare da solo le tue email HTML?

Non tutti hanno uno sviluppatore a disposizione, soprattutto se lavori da solo o fai parte di un piccolo team di marketing. Creare da solo le tue email HTML con gli strumenti giusti ti offre:

• Campagne più rapide, senza dover aspettare i tempi di qualcun altro
• Pieno controllo sul design, senza continui botta e risposta su cosa funziona meglio a livello visivo
• Maggiore coerenza del brand su tutti i canali, email comprese
• Costi di produzione più bassi per i team che non dispongono di grandi budget

Come si crea un’email in Stripo

Stripo si concentra su una sola cosa: il flusso di lavoro per la produzione delle email. È lo strumento in cui crei l’email prima di esportarla sulla tua piattaforma di invio:

• Un editor visivo drag-and-drop, con un editor HTML/CSS integrato per chi vuole mettere mano al codice
• Oltre 1.600 template per settori, stagioni e tipi di email diversi, così non parti mai da una pagina bianca
• Scorciatoie per i contenuti, come importare il contenuto di un link in un blocco articolo del blog o inserire il link di un video che genera automaticamente una miniatura e un pulsante di riproduzione
• Collaborazione in tempo reale e link di approvazione condivisibili per i team che hanno bisogno di un via libera prima dell’invio
• Esportazione verso oltre 90 ESP, tra cui Benchmark Email

Stripo è progettato in modo che la parte davvero difficile sia creare un’email fatta male.

Poi importala in Benchmark Email.

Quando il tuo template è pronto, devi importarlo in Benchmark Email, nel suo nuovo HTML Editor. Incolla il codice o carica il file, poi visualizza l’anteprima sia su desktop sia su mobile. Il selettore Personalize ti permette di aggiungere campi di unione come il nome senza toccare il codice, e Benchmark aggiunge automaticamente il link di disiscrizione e il tuo indirizzo postale, così la conformità è garantita.

Provalo tu stesso: una checklist rapida.

Prima di inviare la tua prossima email HTML:

• Un obiettivo, un messaggio principale, una CTA
• Messaggio chiave e CTA in testo reale, non in immagini
• Immagini JPEG o PNG con testo alternativo descrittivo
• Colori ad alto contrasto e font web-safe
• Anteprima su mobile verificata
• Email di test aperta in Gmail, Apple Mail e Outlook

Non hai ancora un account Benchmark? Registrati gratis e prova l’editor HTML con il tuo primo design.

Domande frequenti

Perché la mia email appare diversa in Outlook rispetto a Gmail?

Ogni client di posta usa un proprio motore di rendering e Outlook è noto per eliminare gli stili e ignorare molte proprietà CSS moderne. Ecco perché l’HTML delle email si basa su tabelle, stili inline e test su più client.

Devo saper programmare per inviare un’email HTML?

No. I builder visuali come Stripo creano per te codice HTML adatto alle email, mentre l’editor HTML di Benchmark Email ti permette di importarlo, visualizzarne l’anteprima e personalizzarlo senza modificare il codice.

Quali formati di immagine funzionano meglio nelle email?

JPEG e PNG sono le scelte più sicure. Molti client di posta non supportano SVG e WebP.

Come porto la mia email di Stripo su Benchmark Email?

Stripo può esportare direttamente su Benchmark Email, oppure puoi esportare il codice HTML e incollarlo o caricarlo nell’editor HTML di Benchmark.