Email Marketing & AutomatizáciaMarketingové a predajné videá

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. Podpora moderných webových prehliadačov HTML, CSSa JavaScript podľa prísnych webových štandardov. A je to len hŕstka prehliadačov, o ktoré sa musia dizajnéri 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 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é vyvinúť webovú stránku – častejšie vyvíja šablóny a na vyplnenie obsahu používajú editory v systémoch obsahu. Redaktori webu 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 chce vaša spoločnosť 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 – E-mailoví klienti, ktorí zobrazujú e-maily vo formáte HTML, NEBUDÚ prísne dodržiavať webové štandardy. Prakticky každý e-mailový klient a každá verzia každého e-mailového klienta funguje inak. Niektorí budú ctiť CSS, externé fonty a moderné HTML. Iní rešpektujú nejaký vložený štýl, zobrazujú iba zbierku písiem a ignorujú všetko okrem štruktúr riadených tabuľkou. Je 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 – Nedávno 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 prinášajú, ako ich obmedzujú. Zatiaľ čo oni propagujú ich editor je What You See Is What You Get (WYSIWYG), opak je často pravdou s dizajnom e-mailov. Ukážku e-mailu zobrazíte na ich platforme a príjemca uvidí všetky problémy s dizajnom. Spoločnosti sa často nevedomky rozhodnú pre editor bohatý na funkcie namiesto uzamknutého editora, pretože si myslia, že jeden má viac funkcií. Opak je pravdou... ak chcete e-maily, ktoré sa vykresľujú 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 – Stovky e-mailových klientov vykresľujú HTML odlišne na desktopoch, aplikáciách, mobilných zariadeniach 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 u každého e-mailového klienta 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:

E-mail HTML

Musíme zostaviť sériu tabuliek, ktoré budú obsahovať všetok inline štýl potrebný na správne umiestnenie tlačidla a zabezpečenie toho, aby vyzeralo dobre naprieč e-mailovými klientmi. Sprievodná značka štýlu bude tiež v hornej časti tohto e-mailu na začlenenie tried.

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

Môžeme použiť externú šablónu so štýlmi s triedami na definovanie veľkosti písmen, zarovnania, farby a veľkosti kotviacej značky, ktorá sa zobrazí ako tlačidlo.

<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. Testovanie šablón – Pred nasadením akejkoľvek šablóny je dôležité 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. Môžeme navrhnúť e-mail doslova z rozloženia Photoshopu... ale jeho krájanie a krájanie do tabuľkového, krížového e-mailového klienta je nevyhnutné na nasadenie návrhov e-mailov, ktoré sú optimálne a konzistentné.
  2. 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.
  3. 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.
  4. 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 Intuit Mailchimp, HubSpot, Kampaň Monitor, AWeber, eSputnik, výhľada 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

Douglas Karr

Douglas Karr je CMO OpenINSIGHTS a zakladateľ spoločnosti Martech Zone. Douglas pomohol desiatkam úspešných startupov MarTech, asistoval pri due diligence v hodnote viac ako 5 miliárd dolárov v akvizíciách a investíciách Martech a naďalej pomáha spoločnostiam pri implementácii a automatizácii ich predajných a marketingových stratégií. Douglas je medzinárodne uznávaný odborník na digitálnu transformáciu a MarTech a rečník. Douglas je tiež publikovaným autorom príručky Dummie a knihy obchodného vedenia.

súvisiace články

Tlačidlo späť nahor
Zavrieť

Zistený blok reklám

Martech Zone vám tento obsah môže poskytnúť bezplatne, pretože naše stránky speňažujeme prostredníctvom príjmov z reklám, pridružených odkazov a sponzorstiev. Ocenili by sme, keby ste pri prezeraní našej stránky odstránili blokovanie reklám.