Se apri un sistema di gestione dei contenuti per creare pagine Web, è un processo piuttosto semplice. I browser Web moderni supportano HTML, CSS e JavaScript per a rigoroso insieme di standard web. E sono davvero solo una manciata di browser di cui i designer devono preoccuparsi. Ci sono delle eccezioni, ovviamente... e alcune semplici soluzioni alternative o funzioni specifiche per quei browser.
A causa degli standard generali, è davvero facile 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 che siano 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, stanno sviluppando modelli e utilizzano editor nei sistemi di contenuti per compilare il contenuto. Gli editor di siti 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 una bella e-mail HTML progettata, il processo è esponenzialmente più complesso della creazione di una pagina Web per una serie di motivi:
- Nessuno standard – NON esiste una stretta aderenza a qualsiasi web standard da client di posta elettronica che visualizzano e-mail HTML. In effetti, virtualmente 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, visualizzeranno solo una raccolta di caratteri e ignoreranno tutto tranne le strutture guidate da tabelle. In realtà è abbastanza ridicolo a questo punto che nessuno stia lavorando su questo problema. Di conseguenza, la progettazione di modelli che eseguono il rendering su client e dispositivi in modo coerente è diventata una grande attività e può essere piuttosto costosa.
- Sicurezza del client di posta elettronica – Proprio questa settimana, Apple Mail si è aggiornato per bloccare per impostazione predefinita tutte le immagini nelle e-mail HTML che non sono incorporate nell'e-mail. Puoi concedere loro il permesso di caricare un'e-mail alla volta oppure devi abilitare le impostazioni per disabilitare questa impostazione. Oltre alle impostazioni di sicurezza del client di posta elettronica, ci sono anche le 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 piuttosto che vincolarli. Mentre promuovono il loro editore è Quello Che Vedi È Quello Che Hai (WYSIWYG), è spesso vero il contrario con il design dell'e-mail. Visualizzerai l'anteprima dell'e-mail nella loro piattaforma, quindi il destinatario dell'e-mail vedrà tutti i tipi di problemi di progettazione. Le aziende spesso optano in modo sconosciuto per un editor ricco di funzionalità invece di un editor bloccato pensando che uno abbia più funzionalità dell'altro. È vero il contrario... se vuoi e-mail che vengono visualizzate in modo coerente su tutti i client di posta elettronica, più semplice è, meglio è perché meno può andare storto.
- Rendering del client di posta elettronica – Esistono centinaia di client di posta elettronica, ognuno dei quali esegue il rendering HTML in modo diverso su client desktop, app, mobili e webmail. Mentre il tuo elegante editor di testo sul tuo provider di servizi di posta elettronica potrebbe avere un'impostazione per inserire un'intestazione nella tua e-mail ... il riempimento, i margini, l'altezza della linea e la dimensione del carattere possono differire su ogni singolo client di posta elettronica. Di conseguenza, devi ridurre l'HTML e codificare ogni singolo elemento in modo diverso (vedi l'esempio seguente) - e spesso scrivere eccezioni specifiche del client di posta elettronica - per ottenere un rendering coerente di un'e-mail. Non esistono tipi di blocchi semplici, devi creare layout basati su tabelle che equivalgono alla creazione per il Web trent'anni fa. Ecco perché qualsiasi nuovo layout richiede sia lo sviluppo che il test di client e dispositivi di posta elettronica incrociati. Quello che vedi nella tua casella di posta potrebbe essere completamente diverso da quello che vedo nella mia casella di posta. Ecco perché gli 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:
Dobbiamo creare una serie di tabelle che incorporino tutto lo stile in linea necessario per posizionare correttamente il pulsante e assicurarci che appaia bene su tutti i client di posta elettronica. Ci sarà anche un tag di stile di accompagnamento nella parte superiore di questa email per incorporare le classi.
<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>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:
- Modello di progettazione – Crea un modello con diversi layout e blocchi di contenuto che comprendano ogni stile che vorresti mai produrre nei tuoi progetti di posta elettronica. Quando implementiamo un cliente, lo spingiamo sempre a farlo progettare un'e-mail per il futuro – non solo la prossima campagna e-mail che viene inviata. In questo modo, possiamo progettare, sviluppare, testare e implementare completamente le soluzioni alternative necessarie prima hanno mai inviato quella prima e-mail.
- Prova del modello – Comprendere i client di posta elettronica utilizzati dai tuoi abbonati e garantire che la tua posta elettronica 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 tagliarla e tagliarla in un client di posta elettronica incrociato basato su tabelle è essenziale per implementare progetti di e-mail che siano ottimali e coerenti.
- 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.
- 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.
- 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 Mailchimp, HubSpot, Campaign Monitor, AWeber, eSputnik, Outlook e Gmail. Il meglio di tutti i modelli Stripo include i 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
Divulgazione: mi sto collegando al mio società di consulenza in marketing che progetta e distribuisce e-mail cross-client per marchi leader praticamente in qualsiasi provider di servizi di posta elettronica. Sono anche un affiliato di spogliarello e sto usando il mio link in questo articolo.
