Fare e-mail HTML invece di quelle con tutte le immagini è più facile di quanto pensi

Le e-mail esistono da 50 anni a partire da quest'anno, ma all'inizio erano solo e-mail di testo normale. L'idea dell'email marketing è nata nel 1978, ma è stato solo negli anni '90 che l'email HTML è diventata una cosa. All'inizio del mondo dell'email marketing, lo SPAM e-mail era un fastidio comune e i client di posta elettronica utilizzavano molti filtri diversi per bloccare lo SPAM. Uno di quei filtri ha bloccato le email con tutte le immagini. Già nel 2007, Mailchimp ha scoperto che l'utilizzo di un'immagine gigante nella tua email potrebbe causare il blocco della tua email e aumentare la frequenza di rimbalzo fino al 23%.

Con l'evolversi dell'email marketing, anche i filtri SPAM si sono evoluti. Al giorno d'oggi un'e-mail con tutte le immagini non ti farà necessariamente contrassegnare come SPAM, ma solo perché puoi creare e-mail con tutte le immagini non significa che dovresti.

Penso che sia ora di avere una conversazione onesta sulle e-mail di tutte le immagini per affrontare le ragioni a favore e contro di loro. E già che ci siamo, daremo un'occhiata a quanto può essere facile convertire alcune e-mail di tutte le immagini in e-mail di testo in tempo reale.

Valutiamo le email con tutte le immagini

Professionisti

"Cosa vuoi dire, ci sono dei professionisti per le e-mail con tutte le immagini?!" tu chiedi. Bene, ci sono. Le e-mail con tutte le immagini non sono il passo falso delle e-mail che erano una volta. In effetti, cambiare le cose e inviare un'e-mail con tutte le immagini quando normalmente invii e-mail di testo in tempo reale può aumentare il tuo coinvolgimento. Qualsiasi novità probabilmente farà rinascere i tuoi abbonati. Ma ci sono altre cose che rendono le e-mail con tutte le immagini la scelta preferita per alcune aziende.

1. Mantenere gli stili del marchio
   Se stai lavorando per un marchio che è molto specifico sugli stili di marca utilizzati, allora le e-mail con tutte le immagini sono probabilmente la strada da percorrere. Puoi assicurarti che i caratteri siano corretti ovunque. E puoi assicurarti che tutti gli stili del marchio vengano mantenuti su tutti i client di posta elettronica. Con le e-mail con tutte le immagini, non devi preoccuparti della rottura dell'e-mail come faresti con un'e-mail di testo in tempo reale.
2. Di impatto visivo
   Personalmente non credo molto in questo, poiché credo che tu possa creare e-mail di grande impatto visivo senza ricorrere a e-mail con tutte le immagini. Ma ci sono alcune cose che non puoi fare ovunque con un'e-mail di testo in tempo reale (anche se non molto se hai un ottimo sviluppatore di e-mail). ReallyGoodEmails è pieno di fantastiche ispirazioni per le e-mail e gran parte di esse sono e-mail di tutte le immagini perché, onestamente, sono davvero carine.
3. Più economico
   Alcune persone sosterrebbero che le e-mail con tutte le immagini sono più economiche perché non è necessario pagare un designer e uno sviluppatore. (In alcuni casi, sono abbastanza sicuro che queste aziende non utilizzino nemmeno un designer). Puoi creare le immagini nel tuo programma di fotoritocco preferito, quindi salvarle e inserirle direttamente nel tuo ESP. È un modo semplice e veloce per inviare una bella email ai tuoi iscritti.

Contro

La nostra Magan Le mi ha chiesto cosa ne pensassi delle e-mail di tutte le immagini e, onestamente, non sono più le e-mail anti-immagine come una volta. Continuo a non pensare che tu possa fornire un'ottima esperienza di posta elettronica a tutti con un'e-mail interamente composta da immagini. Ma, per alcune aziende, un'e-mail con tutte le immagini può avere senso. Ma prima di prendere una decisione, assicurati di aver preso in considerazione gli aspetti negativi:

1. Scarsa accessibilità
   Le e-mail con tutte le immagini non sono accessibili come le e-mail di testo in tempo reale. "Ma ho inserito un testo ALT accurato, Carin!" È fantastico. E ci sono alcune aziende che fanno e-mail con tutte le immagini con un testo ALT davvero buono. Ma l'accessibilità non riguarda solo l'inserimento di testo ALT. Avere un'e-mail accessibile a tutti significa che può essere letta da tutti. Il testo ALT non è di alcun aiuto per chi soffre di dislessia o per gli utenti con problemi di vista che utilizzano le impostazioni per aumentare la dimensione del carattere. Questi sono solo alcuni dei problemi che le e-mail di testo in tempo reale possono gestire molto meglio delle e-mail con tutte le immagini.
2. Esperienza utente scadente
   Anche per gli abbonati che hanno le loro immagini abilitate, le e-mail con tutte le immagini possono essere un'esperienza utente peggiore di un'e-mail di testo in tempo reale. Gli abbonati con connessioni Internet più lente potrebbero riscontrare lunghi tempi di attesa per il caricamento delle immagini. L'utilizzo di immagini di grandi dimensioni non compresse può consumare i dati del tuo abbonato se sta controllando le sue e-mail durante la lettura sul cellulare. E pensa alla personalizzazione! Posso assicurarti che è molto più semplice inserire un tag di unione in un'e-mail di testo in tempo reale piuttosto che ottenere immagini personalizzate per l'intero elenco.
3. Inviti all'azione (CTA) mancanti o persi
   Con le e-mail con tutte le immagini, tutti gli abbonati che hanno le loro immagini disattivate perderanno tutti i CTA presenti nella tua immagine. Per non parlare di tutto il resto che potresti avere nella tua email. Potresti pensare che, poiché hai un basso numero di abbonati che fanno clic senza aprire la tua email, non devi preoccuparti di questo. Ma quanti abbonati stanno visualizzando la tua email con le immagini disattivate e non fanno clic perché non possono vedere il tuo CTA?

Questi sono solo un'ampia panoramica degli aspetti negativi. Se hai bisogno di essere più convincente (o il tuo cliente lo fa), Magan approfondisce il motivo per cui non dovresti inviare e-mail con tutte le immagini.

Cosa c'è di così bello nelle email in tempo reale?

Hai inviato e-mail con tutte le immagini per tutta la tua carriera di email marketing e hai sentito il ritornello "non inviare e-mail con tutte le immagini" più e più volte, ma non hai avuto altro che successo? È fantastico. Ma posso solo farti sapere alcune delle cose fantastiche sulle e-mail in tempo reale?

Professionisti

1. Più facile da aggiornare
   Le e-mail con tutte le immagini sono una seccatura da aggiornare. Devi aggiornare l'immagine, salvarla nuovamente, ricaricarla e quindi aggiungerla alla tua email. E probabilmente hai anche delle approvazioni lì dentro. Con un'e-mail in tempo reale, è semplice aggiornare una parola errata o una data errata. Tutto quello che devi fare è trovare l'errore e correggerlo. Non c'è bisogno di tornare al tavolo da disegno -letteralmente-.
2. Migliore esperienza per gli abbonati
   Con un'e-mail in tempo reale, la copia verrà ridimensionata per gli abbonati con schermi a risoluzione più elevata, il testo non diventa super piccolo sui dispositivi mobili e in modalità oscura hai un certo controllo su come si invertono i colori. E anche se i tuoi abbonati hanno le immagini disattivate per qualche motivo, il contenuto dell'email e i CTA saranno comunque visualizzabili.

Contro

1. Più costoso
   "È troppo costoso assumere uno sviluppatore per ogni email che facciamo." Sì, probabilmente lo è. Ecco perché non dovresti assumere uno sviluppatore per fare ogni email che invii. Assumi uno sviluppatore per creare un sistema modulare che puoi implementare da solo. Molti provider di servizi di posta elettronica (ESP) offrono sistemi di modelli, quindi assumi uno sviluppatore per creare un sistema di modelli personalizzato per la tua azienda. Se il tuo ESP non lo ha, puoi chiedere a uno sviluppatore di creare parziali e frammenti in Litmus Builder e quindi utilizzare la funzionalità Drag-and-Drop e Visual Editor per creare l'e-mail in Litmus. Ti prometto che a lungo termine risparmierai tempo con meno avanti e indietro per apportare modifiche alle tue e-mail.
2. Più difficile da creare
   O lo sono? Questo è uno di quegli svantaggi che sento da molte aziende. Non abbiamo uno sviluppatore, quindi non possiamo inviare email in tempo reale. Come sottolineato in precedenza, molti ESP hanno modelli e soluzioni di costruzione modulari. E se il tuo ESP non lo fa, Litmus ha un editor visivo e la community di Litmus ha molti modelli e frammenti che puoi usare per creare le tue e-mail. Abbiamo anche un modello modulare e frammenti per iniziare.
3. Il design non è identico in tutti i client di posta elettronica
   Ebbene no, la maggior parte delle email non è identica su tutti i client di posta. Se hai uno sviluppatore e molto tempo, probabilmente puoi avvicinarti molto. Ma hai davvero bisogno che le tue e-mail siano identiche su tutti i client di posta? Sì, i colori dovrebbero essere gli stessi, ma avere gli angoli arrotondati sui pulsanti, avere un carattere leggermente diverso o avere lo stesso layout su uno schermo più piccolo non sono problemi che influenzeranno le esperienze dei tuoi abbonati quanto illeggibili il testo sarebbe.

Conversione di email con tutte le immagini

Ora passiamo alla parte divertente. Conversione di quelle bellissime e-mail con tutte le immagini in testo live. Ci sono un paio di tecniche che puoi usare per assicurarti che la tua e-mail sia ancora sorprendente e accattivante come un'e-mail con tutte le immagini.

Immagini di sfondo

Uno dei motivi più comuni per fare un'e-mail con tutte le immagini è che avere sfondi interessanti che non sono solo bianchi o a tinta unita crea un'e-mail visivamente più interessante. Ma non è necessario utilizzare un colore a tinta unita come sfondo nella tua email. Puoi utilizzare le immagini di sfondo e sono supportate nella maggior parte dei client di posta elettronica se le codifichi correttamente. La posta di Windows 10 è la più grande eccezione. Se hai una grande base di abbonati che si apre sulla posta di Windows 10, dovresti evitare le immagini di sfondo.

C'è una grande differenza tra un'e-mail codificata con un'immagine di sfondo e un'e-mail codificata solo come immagine. Se stai utilizzando un'immagine di sfondo, tutto il testo è ancora visibile anche quando le immagini sono disattivate, quindi l'abbonato può ancora fare clic sull'invito all'azione iniziale, oltre a farsi un'idea di cosa tratta l'e-mail e da chi proviene :

Al contrario di un'e-mail in cui viene utilizzata un'immagine per creare un effetto immagine di sfondo. In questo caso si perde la CTA iniziale (così come il logo e il nome dell'azienda). L'e-mail non ha lo stesso impatto e, sebbene la sezione "best seller" sia ancora visibile e utilizzabile, il punto dell'e-mail - risparmiare denaro sui pacchetti organizzativi - è perso:

Il pezzo dell'eroe è creato con tutte le immagini: immagini attivate (fonte: email davvero buone )	Il pezzo dell'eroe è creato con tutte le immagini, le immagini disattivate

La codifica delle immagini di sfondo non è la cosa più semplice, ma abbiamo un post sul blog per aiutarti. Se disponi di modelli impostati con immagini di sfondo in Litmus, puoi modificare le immagini di sfondo in Visual Editor senza nemmeno toccare il codice. Assicurati che le dimensioni dell'immagine corrispondano all'immagine che stai sostituendo e di aver compresso l'immagine che stai utilizzando in modo che non sia troppo grande.

Immagini e testo offset

Tutto ciò che si discosta dal previsto o dal normale ha la tendenza ad attirare la nostra attenzione e puoi vedere esempi di questo ovunque, anche nelle e-mail.

L'esempio sopra ha l'offset dell'immagine, che puoi facilmente fare come un'intera immagine, ma cosa succede se vuoi compensare un blocco di testo? Bene, hai un paio di opzioni. Potresti sfalsarlo solo di un po' in modo che il testo non sia effettivamente sfalsato, fai semplicemente sembrare che l'elemento sia sfalsato come in questa email:

Qui la parte superiore dell'e-mail è sfalsata, ma come puoi vedere è solo un po' di blu nella parte bianca, non ci sono testo o immagini. Quindi puoi usare una cella di tabella vuota. Oppure, se desideri angoli arrotondati che funzionino ovunque, puoi utilizzare un'immagine decorativa. Ma più su quelle tecniche più tardi. In questo caso, il contenuto effettivo della tua email non è compensato, ma sembra esserlo.

L'altra opzione è quella di avere tutto sfalsato come in questa email:

Questa email ha l'intera sezione callout sfalsata in un blocco su un'immagine. Questo è facile da fare sul Web con il posizionamento assoluto, ma poiché non è supportato ovunque nell'e-mail, diventa un po' più complicato. Ci sono due metodi diversi di cui sono a conoscenza. Se ne hai di più, faccelo sapere nei commenti!

In primo luogo, c'è il finto posizionamento assoluto. Steven Sayo e Mark Robbins hanno scritto alcune fantastiche guide passo passo per imparare come eseguire questa tecnica. Steven e Mark forniscono fallback per farlo funzionare in Outlook e, dalla mia esperienza limitata con esso, ha un supporto abbastanza buono.

Se non ti senti a tuo agio con il codice, puoi anche creare questo effetto tagliando le immagini e posizionandole attorno all'elemento che desideri compensare. Un po' più disordinato, ma funziona. Devi assicurarti di testare, testare, testare poiché c'è una maggiore probabilità che qualcosa vada storto e un'immagine non allineata correttamente.

Sono un fan del falso posizionamento assoluto perché consente alle e-mail di avere quell'offset drammatico mantenendo il testo live dell'e-mail e non dovendosi preoccupare di allineare le immagini suddivise, ma entrambi i metodi funzioneranno.

Caratteri web e testo in tempo reale

Il mantenimento degli standard del marchio è un altro grande motivo per utilizzare le e-mail con tutte le immagini, perché non è possibile visualizzare i caratteri ovunque. Lo capisco. Tuttavia, ci sono molte più opzioni di fallback rispetto a Helvetica e Arial. Incoraggia la tua azienda o i tuoi clienti a cercare di avere un carattere di riserva standard nelle linee guida del tuo marchio in modo che tu possa assicurarti che il tuo messaggio venga trasmesso in tutti i client di posta elettronica.

Samsung lo rende interessante utilizzando Trebuchet MS come font di fallback per i titoli. Non proprio il carattere del marchio Samsung One, ma ancora più interessante e accattivante di Helvetica, Arial, testo ALT o niente:

Email con webfont abilitato e immagini attive	E-mail con fallback visualizzato e immagini disattivate

L'aggiunta di caratteri web con fallback interessanti è uno dei modi più rapidi per far risaltare la tua email quando non ti affidi alle immagini per la tua email. Sono facili da aggiungere una volta e quindi implementarli nell'intero sistema di progettazione della posta elettronica. E una volta che i tuoi modelli di email sono impostati con i caratteri web, anche i non programmatori possono trarne vantaggio se stai utilizzando un sistema basato su modelli.

Testo ALT con stile

Applicando uno stile al testo ALT, puoi fare in modo che l'e-mail mantenga in parte il suo aspetto anche con le immagini disattivate. Usiamo il testo ALT in stile qui a Litmus per mantenere una versione approssimativa del nostro logo, ma puoi anche usarlo su quei pulsanti basati su immagini per farli risaltare se devi creare e-mail con tutte le immagini. Puoi dare uno stile al testo ALT aggiungendo CSS al tag dell'immagine e puoi cambiare i colori di sfondo e la maggior parte degli aspetti del carattere per il testo ALT. Non è supportato ovunque, ma vai alla nostra guida definitiva al testo ALT con stile per vedere dove è supportato e come farlo.

Immagini, celle di tabella vuote e regole orizzontali stilizzate come elementi di design

Non è necessario disporre dell'intera immagine per creare elementi interessanti. A volte è possibile utilizzare solo parti dell'immagine per completarla e combinarla con le celle della tabella per creare interesse visivo.

Per creare angoli arrotondati che vengono visualizzati in tutti i client di posta elettronica, aggiungerò immagini di angoli arrotondati alla parte superiore e inferiore dei contenitori. Puoi fare cose simili per creare angoli o forme come transizioni tra le sezioni della tua email. Invece di creare l'intera forma con un'immagine, usa i colori di sfondo per la parte con il testo e poi aggiungi un'immagine nella parte superiore o inferiore di una sezione per farla risaltare.

Puoi anche modellare le tue regole orizzontali per creare transizioni o divisori interessanti tra le sezioni. Usiamo stili semplici in Litmus per creare una linea, ma ci sono molte tecniche diverse che puoi provare per creare divisori interessanti con solo una riga orizzontale. (Fateci sapere come va!).

Abbiamo anche un divisore colorato che usiamo per suddividere il contenuto. Questo viene fatto completamente con i colori di sfondo e le celle della tabella:

Diventa creativo con il tuo codice e scopri cosa puoi fare senza le immagini!

Pulsanti antiproiettile

Questo è il mio più grande cruccio riguardo alle e-mail con tutte le immagini. Gli inviti all'azione basati su immagini sono difficili da eseguire per i tuoi abbonati se non possono vederli. Se tutto il resto è troppo difficile da implementare, per favore, inizia almeno a utilizzare i pulsanti di testo in tempo reale per i tuoi inviti all'azione.

Si tratta di due e-mail diverse, una che utilizza un pulsante di testo live e l'altra è un'e-mail con tutte le immagini con il pulsante in una delle immagini. L'e-mail a sinistra è molto più fruibile dell'e-mail a destra.

E-mail con pulsante di testo live con immagini disattivate (Fonte: Email davvero buone )	E-mail con pulsante basato su immagini con immagini disattivate (Fonte: Email davvero buone )

Se la tua argomentazione per l'utilizzo di e-mail con tutte le immagini è che non ottieni molti clic senza aperture, quindi non devi avere un vasto pubblico con le immagini disattivate, guarda come appaiono i tuoi CTA con le immagini disattivate. Non molte persone farebbero clic se non sapessero su cosa stanno facendo clic.

Esistono diversi modi per creare pulsanti di testo live, quindi assicurati di utilizzare un metodo che funzioni per il tuo pubblico e, come sempre: prova, prova, prova!

Conversione di quelle e-mail con tutte le immagini

Ho contattato alcuni altri sviluppatori di e-mail per aiutarmi a mostrarti come alcune di queste tecniche possono essere utilizzate per convertire le e-mail di tutte le immagini in testo live. Noterai che la conversione di queste e-mail in testo live non ha solo migliorato la versione dell'e-mail con le immagini disattivate, ma ha anche migliorato la versione mobile e la versione Dark Mode dell'e-mail.

Buona conversione e-mail

Anne K. Tomlin è la fondatrice di Y'all di Email. Una programmatrice esperta che conosce i dettagli delle stranezze delle e-mail, si è occupata di mostrare la differenza che il testo live può fare in un'e-mail.

Con le sue stesse parole: le e-mail con tutte le immagini non ricevono il tuo messaggio alle persone che hanno immagini bloccate per impostazione predefinita e a chiunque utilizzi uno screen reader o un assistente digitale (Siri, Alexa, ecc.). Se il tuo obiettivo sono le conversioni, non hai nemmeno dato a quelle persone la possibilità di convertirsi. L'e-mail di S'well era 10 volte più brutta di una normale e-mail di sole immagini perché non c'era alcun testo alternativo. Uno screen reader o un assistente digitale leggerebbe ad alta voce: "Festeggia mosse audaci, grandi idee e gioia! Guarda questa e-mail sul tuo browser. Negozio. Storie. Chi siamo. Rigonfiamento." e poi salta immediatamente per leggere il piè di pagina. Che esperienza orribile! Gli abbonati che hanno le immagini bloccate vedono letteralmente una pagina vuota. Nessuno guarderà una pagina vuota e penserà: "Dovrei verificarlo in un browser!" e fare clic sul collegamento "visualizza nel browser". Hai 5 secondi per catturare l'attenzione di un abbonato, quindi se hai un'e-mail con tutte le immagini e quelle immagini non vengono caricate per impostazione predefinita, potresti anche non aver inviato alcuna e-mail. In effetti, quell'abbonato potrebbe vederlo mentre non gli stai inviando nulla, quindi dovrebbe semplicemente annullare l'iscrizione.

E-mail originale:

Versione live-text di Anne:

Preferisco di gran lunga la versione di Anne, soprattutto per via dei gatti, ma anche per la maggiore accessibilità su mobile e in Dark Mode. Il testo non è intrappolato in un'immagine, quindi invece di rimpicciolirsi rimane leggibile. La versione in modalità oscura è in realtà scura e non sarà una luce accecante se la guardo in una stanza buia, inoltre, chiunque abbia il telefono impostato in modalità oscura per ridurre l'affaticamento degli occhi, non dovrà confrontarsi con la modalità luce che stavano cercando di evitare.

Versione mobile originale	Versione mobile di Anne
Versione originale in modalità oscura	Versione Dark Mode di Anne

E per la conversione di tutte le immagini... [rullo di tamburi prego]

Tada! Nulla viene perso quando le immagini sono disattivate (tranne i simpatici gattini). Gli abbonati possono ancora agire e, cosa più importante: possono ancora leggere il tuo messaggio .

Guarda come fa Anne

Conversione e-mail di Magic Spoon

Carin Slater è l'Email Marketing Specialist e lo sviluppatore di email dietro tutte le email di Litmus. Aspetta, sono io! Bene, conosci la mia posizione sulle email con tutte le immagini.

Adoro le e-mail di Magic Spoon (e anche i cereali di Magic Spoon, così buonissimi) ma sono sempre triste quando arrivano nella mia casella di posta come e-mail con tutte le immagini. Di solito sono abbastanza buoni con l'inclusione del testo dell'immagine come testo ALT in modo che tu possa ancora sapere cosa sta succedendo nell'e-mail se non ci sono immagini, ma questa e-mail non era descrittiva o inclusiva come altre e-mail che hanno inviato. Ho pensato di affrontare questo perché c'è un pulsante GIF che è davvero divertente e può sembrare difficile da fare senza usare le immagini.

E-mail originale:

Versione live-text di Carin:

Ho dovuto fare un compromesso in quanto non sembra perfetto in Dark Mode sui client desktop di Outlook 365 su Windows, quindi sarebbe qualcosa che potrebbe o meno essere importante a seconda di dove gli abbonati di Magic Spoon aprono le loro e-mail. E poiché stavo lavorando da un'e-mail di tutte le immagini e non dal file di progettazione, non sono stato in grado di creare una modalità oscura o una versione mobile della GIF, entrambe le quali avrei chiesto in modo che potessero essere scambiate se Stavo lavorando con i file originali. Nonostante questi problemi, la modalità oscura e le versioni mobili sono migliorate nella versione live-text. L'animazione GIF viene mantenuta nella versione mobile e il testo è più leggibile, anche se solo di poco poiché Magic Spoon ha creato una versione con immagini che hanno sostituito con il cellulare (sì per il cellulare, ma boo per aver codificato l'e-mail due volte).

Versione mobile originale	Versione mobile convertita
Versione originale in modalità oscura	Versione convertita in modalità oscura

Per la versione con tutte le immagini, ho usato il testo ALT stilizzato per mantenere una parvenza del logo e della tagline nel piè di pagina, quindi l'e-mail sembra simile alla versione dell'immagine quando le immagini sono disattivate. La versione live-text, ancora una volta, è molto più visivamente avvincente, fruibile e coinvolgente rispetto alla versione con tutte le immagini.

Guarda come fa Carin

*Tutte le email per la conversione sono state estratte dalla mia casella di posta

Fai brillare le tue e-mail indipendentemente dalle circostanze

Una cosa che ho imparato dai miei anni nelle e-mail è che gli abbonati faranno sempre l'imprevisto. Che si tratti di cercare nelle e-mail invece di utilizzare le cartelle o di aprire un'e-mail in un browser sul proprio telefono, non sai come le persone vivranno la tua e-mail. Quindi fai del tuo meglio per assicurarti che diano ai tuoi abbonati un'esperienza ottimale, indipendentemente da dove stanno aprendo la tua email.