Pochopenie výziev (a frustrácií) HTML e-mailového dizajnu

Ak si otvoríte redakčný systém na vytváranie webových stránok, je to celkom jednoduchý proces. Moderné webové prehliadače podporujú HTML, CSS a JavaScript prísny súbor webových štandardov. A je to naozaj len hŕstka prehliadačov, o ktoré sa dizajnéri musia starať. Samozrejme, existujú výnimky... a niekoľko jednoduchých riešení alebo funkcií špecifických pre tieto prehliadače.

Vzhľadom na celkové štandardy je skutočne jednoduché vyvinúť tvorcov stránok v systémoch na správu obsahu. Prehliadače sú v súlade s HTML5, CSS a JavaScript... a vývojári môžu vytvárať neuveriteľne robustné riešenia na vytváranie webových stránok, ktoré reagujú na zariadenia a sú konzistentné vo všetkých prehliadačoch. Pred dvoma desaťročiami prakticky každý webový dizajnér používal na vývoj webových stránok softvér pre stolné počítače. Teraz je pre webového dizajnéra dosť nezvyčajné, aby vytvoril webovú stránku – častejšie vyvíja šablóny a na vyplnenie obsahu používajú editory v systémoch obsahu. Redaktori webových stránok sú fantastickí.

Ale editori e-mailov sú žalostne pozadu. Tu je dôvod, prečo…

Navrhovanie HTML e-mailov je oveľa zložitejšie ako pre webové stránky

Ak vaša spoločnosť chce vytvoriť krásny HTML e-mail, tento proces je exponenciálne zložitejší ako vytvorenie webovej stránky z niekoľkých dôvodov:

• Žiadne štandardy – Neexistuje žiadne prísne dodržiavanie žiadneho webu Normy e-mailovými klientmi, ktoré zobrazujú e-maily vo formáte HTML. Vlastne virtuálne každý e-mailový klient a každá verzia každého e-mailového klienta koná inak. Niektorí budú ctiť CSS, externé fonty a moderné HTML. Iní rešpektujú nejaký vložený štýl, zobrazia iba kolekciu písiem a ignorujú všetko okrem štruktúr riadených tabuľkou. V tejto chvíli je vlastne celkom smiešne, že sa tejto problematike nikto nevenuje. Výsledkom je, že navrhovanie šablón, ktoré sa konzistentne vykresľujú naprieč klientmi a zariadeniami, sa stalo veľkým biznisom a môže byť dosť drahé.
• Zabezpečenie e-mailového klienta – Len tento týždeň sa Apple Mail aktualizoval tak, aby predvolene blokoval všetky obrázky v e-mailoch HTML, ktoré nie sú vložené do e-mailu. Buď im povolíte načítať e-maily naraz, alebo musíte povoliť nastavenia, aby ste toto nastavenie zakázali. Spolu s nastaveniami zabezpečenia e-mailového klienta existujú aj firemné nastavenia.
• IT bezpečnosť – Váš IT tím môže nasadiť prísne súbory pravidiel o tom, aké objekty možno v e-maile skutočne vykresliť. Ak napríklad vaše obrázky pochádzajú z špecifickej domény, ktorá nie je na zozname povolených v podnikovej bráne firewall, obrázky sa vo vašom e-maile jednoducho nezobrazia. Občas sme museli vytvoriť e-maily a umiestniť všetky obrázky na server spoločnosti, aby ich vlastní zamestnanci mohli vidieť.
• Poskytovatelia e-mailových služieb – Aby toho nebolo málo, tvorcovia e-mailov, ktorí poskytovatelia e-mailových služieb (ESPs) v skutočnosti problémy skôr spôsobujú, ako ich obmedzujú. Zatiaľ čo oni propagujú ich editor je To, čo vidíte, je to, čo dostanete (WYSIWYG), opak je často pravdou pri návrhu e-mailu. Zobrazíte si ukážku e-mailu na ich platforme a príjemca e-mailu uvidí všetky druhy problémov s dizajnom. Spoločnosti sa často neznáme rozhodnú pre editor s bohatými funkciami namiesto zablokovaného editora, ktorý si myslí, že jeden má viac funkcií ako druhý. Opak je pravdou... ak chcete, aby sa e-maily zobrazovali konzistentne vo všetkých e-mailových klientoch, čím jednoduchšie, tým lepšie, pretože menej sa môže pokaziť.
• Vykresľovanie e-mailového klienta – Existujú stovky e-mailových klientov, z ktorých každý vykresľuje HTML odlišne v počítačoch, aplikáciách, mobilných a webových poštových klientoch. Aj keď váš šikovný textový editor u vášho poskytovateľa e-mailových služieb môže mať nastavenie na vloženie nadpisu do vášho e-mailu... výplň, okraje, výška riadku a veľkosť písma sa môžu v každom jednotlivom e-mailovom klientovi líšiť. V dôsledku toho musíte kód HTML potlačiť a každý jednotlivý prvok nakódovať inak (pozri príklad nižšie) – a často napísať výnimky, ktoré sú špecifické pre e-mailového klienta – aby ste dostali e-mail na konzistentné vykresľovanie. Neexistujú žiadne jednoduché typy blokov, musíte robiť rozloženia riadené tabuľkou, ktoré sú ekvivalentom vytvárania pre web pred tridsiatimi rokmi. To je dôvod, prečo každé nové rozloženie vyžaduje vývoj aj testovanie e-mailových klientov a zariadení. To, čo vidíte vo svojej doručenej pošte, sa môže úplne líšiť od toho, čo vidím v doručenej pošte. To je dôvod, prečo renderovacie nástroje ako Email na Acid or Lakmus sú nevyhnutné na zabezpečenie toho, aby vaše nové návrhy fungovali vo všetkých e-mailových klientoch. Tu je krátky zoznam obľúbených e-mailových klientov a ich vykresľovacích nástrojov:
  • Používanie Apple Mail, Outlook pre Mac, Android Mail a iOS Mail WebKit.
  • Používanie programu Outlook 2000, 2002 a 2003 internet Explorer.
  • Používanie programu Outlook 2007, 2010 a 2013 Microsoft Word (áno, Word!).
  • Klienti webovej pošty používajú príslušný nástroj prehliadača (napríklad Safari používa WebKit a Chrome používa Blink).

Príklad HTML pre web vs. Email

Ak chcete príklad, ktorý ilustruje zložitosť navrhovania v e-maile v porovnaní s webom, tu je dokonalý príklad z článku Mailbakery 19 veľkých rozdielov medzi e-mailom a webovým HTML:

<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>

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

Ako sa vyhnúť problémom s dizajnom e-mailu

Problémom s návrhom e-mailu sa dá vyhnúť dodržiavaním slušného procesu:

1. Návrh šablóny – Vytvorte šablónu s rôznymi rozloženiami a blokmi obsahu, ktoré zahŕňajú každý štýl, ktorý by ste kedy chceli vytvoriť vo svojich e-mailových návrhoch. Keď implementujeme klienta, vždy ho k tomu dotlačíme navrhnite e-mail pre budúcnosť – nielen pri ďalšej e-mailovej kampani, ktorá sa odošle. Týmto spôsobom môžeme plne navrhnúť, vyvinúť, otestovať a implementovať potrebné riešenia pred poslali ten prvý e-mail.
2. Testovanie šablón – Pred nasadením akejkoľvek šablóny je rozhodujúce porozumieť e-mailovým klientom, ktoré vaši odberatelia využívajú, a zabezpečiť, aby bol váš e-mail HTML plne otestovaný v mobilných zariadeniach a stolných počítačoch. Dokážeme navrhnúť e-mail doslova z rozloženia photoshopu... ale jeho krájanie a krájanie do tabuľkovo riadeného, ​​krížového e-mailového klienta je nevyhnutné pre nasadenie návrhov e-mailov, ktoré sú optimálne a konzistentné.
3. Interné testovanie – Keď je vaša šablóna navrhnutá a otestovaná, mala by byť odoslaná do interného počiatočného zoznamu v rámci organizácie na kontrolu a schválenie. Môžete dokonca chcieť začať s veľmi obmedzenou podskupinou jednotlivcov, aby ste sa najskôr uistili, že s interným vykresľovaním e-mailu nie sú spojené problémy s firewallom alebo bezpečnosťou. Ak to vytvára inštanciu u nového poskytovateľa e-mailových služieb, môžete dokonca nájsť nejaké problémy s filtrovaním alebo blokovaním spojené s tým, že dostanete svoj e-mail do doručenej pošty.
4. Verzia šablóny – Nemeňte svoje rozloženia alebo návrhy bez toho, aby ste pracovali na novej verzii vašej šablóny, ktorú možno navrhnúť, správne otestovať a nasadiť. Mnoho firiem miluje jednorazové návrhy pre každú kampaň... ale to si vyžaduje, aby bol každý e-mail navrhnutý, vyvinutý a nasadený pre každú kampaň. To pridáva veľa času internému procesu e-mailového marketingu. A riskujete, že nepochopíte, ktoré prvky vo vašom e-maile fungujú lepšie ako tie, ktoré nie. Konzistentnosť nie je len spôsob, ako uľahčiť proces, je tiež dôležitá pre správanie vašich odberateľov.
5. Výnimky poskytovateľa e-mailových služieb – Prakticky každý poskytovateľ e-mailových služieb má prostriedky na riešenie problémov, ktoré predstavuje ich tvorca e-mailov. Často môžeme do účtu pridať nespracované CSS – alebo dokonca mať blok obsahu, ktorý musí byť súčasťou každého e-mailu – aby spoločnosť využila vstavaný e-mailový editor a neporušila dizajn vášho e-mailu. Samozrejme, že to môže vyžadovať určité školenie a kontrolu procesu nasadenia týchto krokov, aby sa zabezpečilo, že budú dodržané. Alebo – môžete doslova len chcieť vyvinúť svoj e-mailový dizajn v riešení, ktoré sa osvedčilo na všetkých klientoch a zariadeniach, a potom ho vložiť späť do svojho poskytovateľa e-mailových služieb.

Platformy pre návrh e-mailov

Pretože platformy e-mailových služieb odviedli zlú prácu pri vytváraní a udržiavaní konzistentne vykresľovaných zostavovateľov medzi klientmi a zariadeniami, na trh prišlo množstvo skvelých platforiem. Jeden, ktorý sme vo veľkej miere používali, je Stripo.

Stripo nie je len nástroj na vytváranie e-mailov, má tiež knižnicu viac ako 900 šablón, ktoré možno ľahko importovať. Keď navrhnete e-mail, môžete ho poslať 60+ ESP a e-mailovým klientom vrátane MailChimp, HubSpot, Campaign Monitor, AWeber, eSputnik, Outlook a Gmail. Najlepšie zo všetkých šablón Stripo sú dodávané s testami vykresľovania e-mailov, takže sa môžete uistiť, že boli testované a fungujú konzistentne vo viac ako 40 e-mailových klientoch.

Prihláste sa do ukážky Stripo Editor

Zverejnenie: Odkazujem na moje marketingová poradenská firma ktorý navrhuje a nasadzuje e-maily medzi klientmi pre popredné značky prakticky u každého poskytovateľa e-mailových služieb. Som tiež pridružená spoločnosť Stripo a ja používam svoj odkaz v tomto článku.