Înțelegerea provocărilor (și frustrărilor) ale designului de e-mail HTML
Dacă deschideți un sistem de gestionare a conținutului pentru a construi pagini web, este un proces destul de simplu. Suport browsere web moderne HTML, CSSși JavaScript la standarde web stricte. Și sunt doar o mână de browsere de care designerii trebuie să își facă griji. Există, desigur, excepții... și câteva soluții simple sau funcții specifice acestor browsere.
Datorită standardelor generale, este ușor să dezvoltați generatori de pagini în sistemele de management al conținutului. Browserele respectă HTML5, CSS și JavaScript... iar dezvoltatorii pot construi soluții incredibil de robuste pentru a crea pagini web care răspund dispozitivelor și coerente între browsere. În urmă cu două decenii, aproape fiecare web designer folosea software desktop pentru a dezvolta pagini web. Acum, este destul de neobișnuit ca un designer web să dezvolte o pagină web – de cele mai multe ori, ei dezvoltă șabloane și folosesc editori în sistemele de conținut pentru a completa conținutul. Editorii de site-uri web sunt fantastici.
Dar editorii de e-mail sunt îngrozitor în urmă. Iata de ce…
Proiectarea e-mailurilor HTML este mult mai complexă decât pentru un site web
Dacă compania dvs. dorește un e-mail HTML frumos conceput, procesul este exponențial mai complex decât construirea unei pagini web din mai multe motive:
- Fără standarde – NU există o aderență strictă la standardele web de către clienții de e-mail care afișează e-mailuri HTML. Practic, fiecare client de e-mail și fiecare versiune a fiecărui client de e-mail acționează diferit. Unele vor onora CSS, fonturile externe și HTML modern. Alții onorează unele stiluri inline, afișează doar o colecție de fonturi și ignoră totul, cu excepția structurilor bazate pe tabel. Este destul de ridicol că nimeni nu lucrează la această problemă. Ca rezultat, proiectarea șabloanelor care redă în mod constant pe clienți și dispozitive a devenit o afacere mare și poate fi destul de costisitoare.
- Securitatea clientului de e-mail – Recent, Apple Mail s-a actualizat pentru a bloca în mod implicit toate imaginile din e-mailurile HTML care nu sunt încorporate în e-mail. Fie le acordați permisiunea de a le încărca un e-mail la un moment dat, fie trebuie să activați setările pentru a dezactiva această setare. Pe lângă setările de securitate ale clientului de e-mail, există și setări corporative.
- Securitate IT – Echipa dumneavoastră IT poate implementa seturi de reguli stricte cu privire la obiectele care pot fi redate într-un e-mail. Dacă imaginile dvs., de exemplu, provin dintr-un anumit domeniu care nu este inclus în lista albă într-un firewall corporativ, imaginile pur și simplu nu vor apărea în e-mailul dvs. Uneori, a trebuit să dezvoltăm e-mailuri și să găzduim toate imaginile pe serverul corporației, astfel încât angajații lor să poată vedea imaginile.
- Furnizori de servicii de e-mail – Pentru a înrăutăți lucrurile, constructorii de e-mail pe care furnizorii de servicii de e-mail (ESPs) să introducă de fapt probleme mai degrabă decât să le constrângă. În timp ce își promovează editorul este What You See Is What You Get (WYSIWYG), opusul este adesea adevărat cu designul de e-mail. Veți previzualiza e-mailul în platforma lor, iar destinatarul va vedea toate problemele de proiectare. Companiile optează adesea, fără să știe, pentru un editor bogat în funcții în loc de unul blocat, crezând că unul are mai multe funcții. Opusul este adevărat... dacă doriți e-mailuri care se redau în mod consecvent pentru toți clienții de e-mail, cu atât mai simplu, cu atât mai bine, pentru că mai puține pot merge prost.
- Redare client de e-mail – Sute de clienți de e-mail redau HTML diferit pe desktop-uri, aplicații, dispozitive mobile și clienți de webmail. În timp ce editorul dvs. de text inteligent de la furnizorul dvs. de servicii de e-mail poate avea o setare pentru a pune un titlu în e-mailul dvs., umplutura, marginile, înălțimea liniei și dimensiunea fontului pot diferi pentru fiecare client de e-mail. Ca rezultat, trebuie să amuțiți HTML-ul și să codificați fiecare element în mod diferit (a se vedea exemplul de mai jos) - și adesea să scrieți în excepții care sunt specifice clientului de e-mail - pentru a obține un e-mail care să fie redat în mod constant. Nu există tipuri simple de blocuri, trebuie să faceți machete bazate pe tabele care sunt echivalentul construirii pentru web acum treizeci de ani. Acesta este motivul pentru care orice aspect nou necesită atât dezvoltare, cât și testare încrucișată pentru client și dispozitiv. Ceea ce vedeți în căsuța dvs. de e-mail poate fi total diferit de ceea ce văd eu în căsuța mea de e-mail. De aceea instrumente de randare precum E-mail pe acid or Turnesol sunt o necesitate pentru a vă asigura că noile dvs. modele funcționează pe toți clienții de e-mail. Iată o listă scurtă de clienți de e-mail populari și motoarele lor de randare:
- Utilizarea Apple Mail, Outlook pentru Mac, Android Mail și iOS Mail WebKit.
- Utilizarea Outlook 2000, 2002 și 2003 Internet Explorer.
- Utilizarea Outlook 2007, 2010 și 2013 Microsoft Word (da, Word!).
- Clienții de webmail folosesc motorul respectiv al browserului lor (de exemplu, Safari folosește WebKit și Chrome folosește Blink).
Un exemplu de HTML pentru Web vs. E-mail
Dacă doriți un exemplu care ilustrează complexitatea proiectării în e-mail față de web, iată un exemplu perfect din articolul Mailbakery 19 diferențe mari între e-mail și HTML web:
E-mail HTML
Trebuie să construim o serie de tabele care să încorporeze toate stilurile inline necesare pentru a plasa butonul în mod corespunzător și pentru a ne asigura că arată bine între clienții de e-mail. O etichetă de stil însoțitoare va fi, de asemenea, în partea de sus a acestui e-mail pentru a încorpora cursurile.
<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
Putem folosi o foaie de stil externă cu clase pentru a defini cazul, alinierea, culoarea și dimensiunea unei etichete de ancorare care apare ca un buton.
<div class="center">
<a href="#" class="button">Find Out More</a>
</div>
Cum să evitați problemele de design de e-mail
Problemele de design de e-mail pot fi evitate urmând un proces decent:
- Testarea șablonului – Înțelegerea clienților de e-mail pe care abonații dvs. îi utilizează și asigurarea faptului că e-mailul dvs. HTML este testat complet pe dispozitive mobile și desktop este esențială înainte de a implementa orice șablon. Putem proiecta un e-mail literalmente dintr-un aspect Photoshop... dar tăierea și tăierea lui într-un client de e-mail încrucișat, bazat pe tabel, este esențială pentru implementarea modelelor de e-mail care sunt optime și consecvente.
- Testare internă – Odată ce șablonul dvs. este proiectat și testat, acesta ar trebui trimis la o listă internă de semințe din cadrul organizației pentru a fi revizuit și aprobat. Poate doriți chiar să începeți cu un subset foarte limitat de persoane pentru a vă asigura mai întâi că nu există probleme de firewall sau de securitate asociate cu redarea e-mailului intern. Dacă aceasta creează o instanță pe un nou furnizor de servicii de e-mail, este posibil să găsiți chiar unele probleme de filtrare sau blocare asociate chiar și cu trimiterea e-mailului în căsuța de e-mail.
- Versiune șablon – Nu vă schimbați machetele sau design-urile fără a lucra la o nouă versiune a șablonului, care poate fi proiectată, testată și implementată corespunzător. Multe companii iubesc modelele unice pentru fiecare campanie... dar asta necesită ca fiecare e-mail să fie proiectat, dezvoltat și implementat pentru fiecare campanie. Acest lucru adaugă mult timp procesului intern de marketing prin e-mail. Și, riști să nu înțelegi ce elemente din e-mailul tău funcționează mai bine decât elementele care nu. Consecvența nu este doar o modalitate de a ușura procesul, este și importantă pentru comportamentul abonaților tăi.
- Excepții ale furnizorului de servicii de e-mail – Practic, fiecare furnizor de servicii de e-mail are un mijloc de a rezolva problemele pe care le introduce generatorul lor de e-mail. Putem adăuga adesea CSS brut la un cont – sau chiar să avem un bloc de conținut care trebuie inclus în fiecare e-mail – pentru ca compania să utilizeze editorul de e-mail încorporat și să nu-l distrugă designul e-mailului. Desigur, acest lucru poate necesita o anumită instruire și control al procesului pentru a implementa acești pași pentru a se asigura că sunt respectați. Sau – poate doriți să vă dezvoltați designul de e-mail într-o soluție care s-a dovedit că funcționează pe clienți și dispozitive, apoi să o inserați înapoi în furnizorul dvs. de servicii de e-mail.
Platforme de design de e-mail
Deoarece platformele de servicii de e-mail au făcut o treabă proastă în construirea și întreținerea constructoarelor redate în mod consecvent între clienți și dispozitive, o serie de platforme grozave au apărut pe piață. Unul pe care l-am folosit pe scară largă este Stripo.
Stripo nu este doar un generator de e-mailuri, ele au și o bibliotecă de peste 900 de șabloane care pot fi importate cu ușurință. Odată ce ați proiectat e-mailul, puteți trimite e-mail către peste 60 de ESP-uri și clienți de e-mail, inclusiv Intuit Mailchimp, HubSpot, Monitor de campanie, AWeber, eSputnik, Perspectivă, și Gmail. Cel mai bun dintre toate șabloanele Stripo vin cu testele de randare a e-mailurilor incluse, astfel încât să vă puteți asigura că au fost testate și funcționează în mod constant pe peste 40 de clienți de e-mail.