E-mail marketing e automazioneVideo di marketing e vendite

Comprendere le sfide (e le frustrazioni) della progettazione di e-mail HTML

Se apri un sistema di gestione dei contenuti per creare pagine web, è un processo piuttosto semplice. Supporto dei browser Web moderni HTML, CSSe JavaScript secondo rigorosi standard web. E sono solo una manciata di browser di cui i progettisti devono preoccuparsi. Ci sono delle eccezioni, ovviamente... e alcune semplici soluzioni alternative o funzioni specifiche per quei browser.

A causa degli standard generali, è semplice sviluppare page builder nei sistemi di gestione dei contenuti. I browser sono conformi a HTML5, CSS e JavaScript... e gli sviluppatori possono creare soluzioni incredibilmente robuste per creare pagine Web reattive ai dispositivi e coerenti tra i browser. Due decenni fa, praticamente tutti i web designer utilizzavano software desktop per sviluppare pagine web. Ora, è piuttosto raro che un web designer sviluppi una pagina web: il più delle volte sviluppa modelli e utilizza editor nei sistemi di contenuti per compilare il contenuto. Gli editor del sito web sono fantastici.

Ma gli editor di posta elettronica sono tristemente indietro. Ecco perché…

La progettazione di email HTML è molto più complessa di un sito web

Se la tua azienda desidera progettare una bella email HTML, il processo è esponenzialmente più complesso rispetto alla creazione di una pagina web per diversi motivi:

  • Nessuno standard – NON esiste una rigorosa aderenza agli standard web da parte dei client di posta elettronica che visualizzano e-mail HTML. Praticamente ogni client di posta elettronica e ogni versione di ogni client di posta elettronica agisce in modo diverso. Alcuni onoreranno CSS, caratteri esterni e HTML moderno. Altri rispettano alcuni stili in linea, visualizzano solo una raccolta di caratteri e ignorano tutto tranne le strutture guidate da tabelle. È abbastanza ridicolo che nessuno stia lavorando su questo problema. Di conseguenza, la progettazione di modelli che vengano visualizzati in modo coerente su client e dispositivi è diventata un grande business e può essere piuttosto costosa.
  • Sicurezza del client di posta elettronica – Recentemente, Apple Mail è stata aggiornata per bloccare per impostazione predefinita tutte le immagini nelle e-mail HTML che non sono incorporate nell'e-mail. Puoi dare il permesso di caricare loro un'e-mail alla volta o devi abilitare le impostazioni per disabilitare questa impostazione. Oltre alle impostazioni di sicurezza del client di posta elettronica, esistono anche impostazioni aziendali.
  • Sicurezza IT – Il tuo team IT può implementare severi set di regole su quali oggetti possono essere effettivamente visualizzati in un'e-mail. Se le tue immagini, ad esempio, provengono da un dominio specifico che non è nella whitelist in un firewall aziendale, le immagini semplicemente non verranno visualizzate nella tua e-mail. A volte, abbiamo dovuto sviluppare e-mail e ospitare tutte le immagini sul server dell'azienda in modo che i propri dipendenti potessero vedere le immagini.
  • Fornitori di servizi e-mail – A peggiorare le cose, i costruttori di posta elettronica che i fornitori di servizi di posta elettronica (ESPs) introdurre effettivamente problemi anziché limitarli. Sebbene promuovano il loro editor What You See Is What You Get (WYSIWYG), spesso è vero il contrario con il design delle e-mail. Visualizzerai l'anteprima dell'e-mail nella loro piattaforma e il destinatario vedrà tutti i problemi di progettazione. Le aziende spesso optano inconsapevolmente per un editor ricco di funzionalità invece di uno bloccato, pensando che ne abbia più funzionalità. È vero il contrario... se desideri che le e-mail vengano visualizzate in modo coerente su tutti i client di posta, più è semplice, meglio è, perché meno possono andare storti.
  • Rendering del client di posta elettronica – Centinaia di client di posta elettronica eseguono il rendering dell'HTML in modo diverso su desktop, app, dispositivi mobili e client di posta web. Sebbene il tuo elegante editor di testo sul tuo fornitore di servizi di posta elettronica possa avere un'impostazione per inserire un'intestazione nella tua email, il riempimento, i margini, l'altezza della riga e la dimensione del carattere possono differire per ogni client di posta elettronica. Di conseguenza, è necessario semplificare l'HTML e codificare ogni singolo elemento in modo diverso (vedere l'esempio seguente) – e spesso scrivere eccezioni specifiche del client di posta elettronica – per ottenere un'e-mail da visualizzare in modo coerente. Non esistono tipi di blocchi semplici, devi creare layout guidati da tabelle che equivalgono alla creazione per il Web trent'anni fa. È per questo motivo che qualsiasi nuovo layout richiede sia lo sviluppo che il test di client e dispositivi di posta elettronica incrociati. Ciò che vedi nella tua casella di posta potrebbe essere completamente diverso da quello che vedo nella mia casella di posta. Ecco perché strumenti di rendering come E-mail sull'acido or Tornasole sono indispensabili per garantire che i tuoi nuovi progetti funzionino su tutti i client di posta elettronica. Ecco un breve elenco dei client di posta elettronica più diffusi e dei relativi motori di rendering:
    • Utilizzo di Apple Mail, Outlook per Mac, Android Mail e iOS Mail WebKit.
    • Utilizzo di Outlook 2000, 2002 e 2003 Internet Explorer.
    • Utilizzo di Outlook 2007, 2010 e 2013 Microsoft Word (sì, Parola!).
    • I client Webmail utilizzano il rispettivo motore del browser (ad esempio, Safari utilizza WebKit e Chrome utilizza Blink).

Un esempio di HTML per Web vs. E-mail

Se desideri un esempio che illustri la complessità della progettazione nell'e-mail rispetto al Web, ecco un esempio perfetto dall'articolo di Mailbakery 19 grandi differenze tra e-mail e Web HTML:

Invia un messaggio HTML per e-mail

Dobbiamo creare una serie di tabelle che incorporino tutti gli stili in linea necessari per posizionare correttamente il pulsante e garantire che abbia un bell'aspetto su tutti i client di posta elettronica. Nella parte superiore di questa email sarà presente anche un tag di stile di accompagnamento per incorporare le lezioni.

<table width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td align="left">
         <table border="0" cellspacing="0" cellpadding="0" bgcolor="#43756e">
            <tr>
               <td class="text-button"  style="padding: 5px 20px; color:#ffffff; font-family: 'Oswald', Arial, sans-serif; font-size:14px; line-height:20px; text-align:center; text-transform:uppercase;">
                  <a href="#" target="_blank" class="link-white" style="color:#ffffff; text-decoration:none"><span class="link-white" style="color:#ffffff; text-decoration:none">Find Out More</a>
               </td>
            </tr>
         </table>
      </td>
   </tr>
</table>

HTML Web

Possiamo utilizzare un foglio di stile esterno con classi per definire il caso, l'allineamento, il colore e la dimensione di un tag di ancoraggio che appare come un pulsante.

<div class="center">
   <a href="#" class="button">Find Out More</a>
</div>

Come evitare problemi di progettazione dell'e-mail

I problemi di progettazione dell'e-mail possono essere evitati seguendo un processo decente:

  1. Prova del modello – Comprendere i client di posta elettronica utilizzati dai tuoi abbonati e garantire che la tua email HTML sia completamente testata su dispositivi mobili e desktop è fondamentale prima di distribuire qualsiasi modello. Possiamo progettare un'e-mail letteralmente da un layout di Photoshop... ma suddividerla e suddividerla in un client di posta elettronica incrociato basato su tabella è essenziale per distribuire progetti di posta elettronica ottimali e coerenti.
  2. Test interni – Una volta che il tuo modello è stato progettato e testato, dovrebbe essere inviato a un elenco seme interno all'interno dell'organizzazione per la revisione e l'approvazione. Potresti anche voler iniziare con un sottoinsieme molto limitato di persone per assicurarti prima che non ci siano problemi di firewall o sicurezza associati al rendering dell'e-mail internamente. Se si sta costruendo un'istanza su un nuovo provider di servizi di posta elettronica, potresti persino riscontrare alcuni problemi di filtro o blocco associati alla ricezione della posta elettronica nella posta in arrivo.
  3. Versione modello – Non modificare i layout oi progetti senza lavorare su una nuova versione del modello che può essere progettata, testata correttamente e distribuita. Molte aziende adorano progetti unici per ogni campagna... ma ciò richiede che ogni email sia progettata, sviluppata e distribuita per ogni campagna. Questo aggiunge un sacco di tempo al processo di email marketing interno. E rischi di non capire quali elementi nella tua e-mail hanno un buon rendimento rispetto a quali elementi non lo sono. La coerenza non è solo un modo per semplificare il processo, è anche importante per il comportamento dei tuoi iscritti.
  4. Eccezioni del provider di servizi di posta elettronica – Praticamente ogni provider di servizi di posta elettronica ha un mezzo per aggirare i problemi introdotti dal loro generatore di posta elettronica. Spesso possiamo aggiungere CSS grezzi a un account, o anche avere un blocco di contenuti che deve essere incluso in ogni e-mail, affinché l'azienda possa utilizzare l'editor di posta elettronica integrato e non fargli interrompere il design della tua e-mail. Naturalmente, ciò potrebbe richiedere un po' di formazione e controllo del processo per implementare questi passaggi per garantire che siano rispettati. Oppure, potresti semplicemente voler sviluppare il tuo design di posta elettronica in una soluzione che ha dimostrato di funzionare su client e dispositivi, quindi incollarlo di nuovo nel tuo provider di servizi di posta elettronica.

Piattaforme di progettazione e-mail

Poiché le piattaforme di servizi di posta elettronica hanno svolto un lavoro scadente nella creazione e nel mantenimento di builder con rendering coerente cross-client e cross-device, sono arrivate sul mercato numerose grandi piattaforme. Uno che abbiamo usato ampiamente è spogliarello.

Stripo non è solo un generatore di email, ha anche una libreria di oltre 900 modelli che possono essere facilmente importati. Una volta progettata l'e-mail, puoi inviare l'e-mail a oltre 60 ESP e client di posta elettronica, inclusi Intuito Mailchimp, HubSpot, Campaign Monitor, AWeber, eSputnik, Outlooke Gmail. Soprattutto, i modelli Stripo sono dotati di test di rendering delle e-mail inclusi, così puoi assicurarti che siano stati testati e funzionino in modo coerente su oltre 40 client di posta elettronica.

Accedi alla demo di Stripo Editor

Douglas Karr

Douglas Karr è CMO di ApriINSIGHTS e il fondatore della Martech Zone. Douglas ha aiutato dozzine di startup MarTech di successo, ha assistito nella due diligence di oltre 5 miliardi di dollari in acquisizioni e investimenti Martech e continua ad assistere le aziende nell'implementazione e nell'automazione delle loro strategie di vendita e marketing. Douglas è un esperto e relatore di trasformazione digitale e MarTech riconosciuto a livello internazionale. Douglas è anche autore di una guida per manichini e di un libro sulla leadership aziendale.

Articoli Correlati

Torna a pulsante in alto
Chiudi

Blocco annunci rilevato

Martech Zone è in grado di fornirti questi contenuti gratuitamente perché monetizziamo il nostro sito attraverso entrate pubblicitarie, link di affiliazione e sponsorizzazioni. Ti saremmo grati se rimuovessi il blocco degli annunci mentre visiti il ​​nostro sito.