Email Marketing & AutomatizaceMarketingová a prodejní videa

Pochopení výzev (a frustrace) návrhu HTML e-mailů

Pokud si otevřete redakční systém pro tvorbu webových stránek, je to docela jednoduchý proces. Podpora moderních webových prohlížečů HTML, CSSa JavaScript podle přísných webových standardů. A je to jen hrstka prohlížečů, o které se musí návrháři starat. Samozřejmě existují výjimky… a některá jednoduchá řešení nebo funkce specifické pro tyto prohlížeče.

Vzhledem k celkovým standardům je snadné vyvíjet tvůrce stránek v systémech pro správu obsahu. Prohlížeče splňují standardy HTML5, CSS a JavaScript… a vývojáři mohou vytvářet neuvěřitelně robustní řešení pro vytváření webových stránek, které reagují na zařízení a jsou konzistentní ve všech prohlížečích. Před dvěma desetiletími prakticky každý webový designér používal k vývoji webových stránek software pro stolní počítače. Nyní je pro webdesignéra poměrně neobvyklé vyvíjet webovou stránku – častěji vyvíjejí šablony a k vyplnění obsahu používají editory v systémech obsahu. Redaktoři webu jsou úžasní.

Ale redaktoři emailů jsou žalostně pozadu. Zde je důvod…

Navrhování HTML e-mailů je mnohem složitější než pro webové stránky

Pokud chce vaše společnost vytvořit krásný HTML e-mail, je tento proces exponenciálně složitější než vytváření webové stránky z několika důvodů:

  • Žádné standardy – NEEXISTUJE přísné dodržování webových standardů ze strany e-mailových klientů, kteří zobrazují e-maily ve formátu HTML. Prakticky každý e-mailový klient a každá verze každého e-mailového klienta funguje jinak. Někteří budou ctít CSS, externí písma a moderní HTML. Jiní dodržují nějaký inline styl, zobrazují pouze kolekci písem a ignorují vše kromě struktur řízených tabulkami. Je docela směšné, že se touto problematikou nikdo nezabývá. Výsledkem je, že navrhování šablon, které se konzistentně vykreslují napříč klienty a zařízeními, se stalo velkým byznysem a může být poměrně drahé.
  • Zabezpečení e-mailového klienta – Nedávno byl Apple Mail aktualizován tak, aby ve výchozím nastavení blokoval všechny obrázky v e-mailech HTML, které nejsou vloženy do e-mailu. Buď jim povolíte načítat e-maily najednou, nebo musíte povolit nastavení, abyste toto nastavení zakázali. Spolu s nastavením zabezpečení e-mailového klienta existují také firemní nastavení.
  • Bezpečnost IT – Váš IT tým může nasadit přísné sady pravidel pro to, jaké objekty lze skutečně vykreslit v e-mailu. Pokud vaše obrázky například pocházejí z konkrétní domény, která není na seznamu povolených v podnikovém firewallu, obrázky se ve vašem e-mailu jednoduše nezobrazí. Občas jsme museli vyvíjet e-maily a hostovat všechny obrázky na serveru společnosti, aby obrázky viděli jejich vlastní zaměstnanci.
  • Poskytovatelé e-mailových služeb – Aby toho nebylo málo, tvůrci e-mailu, které poskytovatelé e-mailových služeb (ESPs) ve skutečnosti problémy spíše zavádí, než aby je omezovaly. Zatímco oni propagují jejich editor je What You See Is What You Get (WYSIWYG), opak je často pravdou s e-mailovým designem. Náhled e-mailu zobrazíte na jejich platformě a příjemce uvidí všechny problémy s návrhem. Společnosti často nevědomky volí editor s bohatými funkcemi namísto uzamčeného editoru, protože si myslí, že má více funkcí. Opak je pravdou... chcete-li e-maily, které se vykreslují konzistentně napříč všemi e-mailovými klienty, čím jednodušší, tím lepší, protože méně se může pokazit.
  • Vykreslování e-mailového klienta – Stovky e-mailových klientů vykreslují HTML odlišně na počítačích, aplikacích, mobilních zařízeních a webových poštovních klientech. Zatímco váš šikovný textový editor u vašeho poskytovatele e-mailových služeb může mít nastavení pro vložení záhlaví do vašeho e-mailu, výplň, okraje, výška řádku a velikost písma se mohou u každého e-mailového klienta lišit. V důsledku toho musíte kód HTML ztlumit a každý jednotlivý prvek nakódovat jinak (viz příklad níže) – a často zapsat výjimky, které jsou specifické pro e-mailového klienta – abyste dostali e-mail k konzistentnímu vykreslování. Neexistují žádné jednoduché typy bloků, musíte dělat rozvržení řízená tabulkou, která jsou ekvivalentem vytváření pro web před třiceti lety. Proto každé nové rozvržení vyžaduje jak vývoj, tak testování napříč e-mailovým klientem a zařízením. To, co vidíte ve své doručené poště, se může zcela lišit od toho, co vidím ve své doručené poště. To je důvod, proč renderovací nástroje jako Email na Acid or Lakmus jsou nutností, aby vaše nové návrhy fungovaly ve všech e-mailových klientech. Zde je krátký seznam oblíbených e-mailových klientů a jejich vykreslovacích modulů:
    • Používání Apple Mail, Outlook pro Mac, Android Mail a iOS Mail WebKit.
    • Použití Outlook 2000, 2002 a 2003 Internet Explorer.
    • Použití Outlook 2007, 2010 a 2013 Microsoft Word (ano, Word!).
    • Webmailoví klienti používají příslušný engine svého prohlížeče (například Safari používá WebKit a Chrome používá Blink).

Příklad HTML pro Web vs. E-mailem

Pokud chcete příklad, který ilustruje složitost navrhování v e-mailu oproti webu, zde je dokonalý příklad z článku Mailbakery 19 Velké rozdíly mezi e-mailem a webovým HTML:

E-mail HTML

Musíme sestavit řadu tabulek, které budou obsahovat všechny inline styly nezbytné pro správné umístění tlačítka a zajištění, že bude vypadat dobře napříč e-mailovými klienty. Doprovodná značka stylu bude také v horní části tohoto e-mailu pro začlenění tříd.

<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

Můžeme použít externí šablonu stylů s třídami k definování velikosti písmen, zarovnání, barvy a velikosti kotevní značky, která se zobrazí jako tlačítko.

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

Jak se vyhnout problémům s designem e-mailu

Problémům s návrhem e-mailu se lze vyhnout dodržováním slušného procesu:

  1. Testování šablon – Před nasazením jakékoli šablony je zásadní porozumět e-mailovým klientům, které vaši předplatitelé používají, a zajistit, aby byl váš e-mail HTML plně otestován na mobilních zařízeních a počítačích. Můžeme navrhnout e-mail doslova z rozvržení Photoshopu... ale jeho rozřezání a rozřezání do tabulkového, křížového e-mailového klienta je nezbytné pro nasazení návrhů e-mailů, které jsou optimální a konzistentní.
  2. Interní testování – Jakmile je vaše šablona navržena a otestována, měla by být odeslána do interního seedlistu v rámci organizace ke kontrole a schválení. Možná budete chtít začít s velmi omezenou podskupinou jednotlivců, abyste se nejprve ujistili, že s interním vykreslováním e-mailu nejsou spojeny problémy s firewallem nebo zabezpečením. Pokud to vytváří instanci na novém poskytovateli e-mailových služeb, můžete dokonce najít nějaké problémy s filtrováním nebo blokováním spojené s tím, že dostanete svůj e-mail do doručené pošty.
  3. Verze šablony – Neměňte rozvržení nebo návrhy, aniž byste pracovali na nové verzi šablony, kterou lze navrhnout, řádně otestovat a nasadit. Mnoho firem miluje jednorázové návrhy pro každou kampaň… ale to vyžaduje, aby byl každý e-mail navržen, vyvinut a nasazen pro každou kampaň. To přidává spoustu času internímu procesu e-mailového marketingu. A riskujete, že nebudete rozumět tomu, které prvky ve vašem e-mailu fungují lépe než ty, které nikoli. Důslednost není jen způsob, jak proces usnadnit, je také důležitá pro chování vašich odběratelů.
  4. Výjimky poskytovatele e-mailových služeb – Prakticky každý poskytovatel e-mailových služeb má prostředky, jak vyřešit problémy, které jejich tvůrce e-mailů zavádí. Často můžeme k účtu přidat nezpracované CSS – nebo dokonce mít blok obsahu, který musí být součástí každého e-mailu –, aby společnost využila vestavěný editor e-mailů a nenarušila design vašeho e-mailu. Samozřejmě to může vyžadovat určité školení a řízení procesů k nasazení těchto kroků, aby bylo zajištěno, že budou dodrženy. Nebo – můžete doslova chtít vyvinout svůj e-mailový návrh v řešení, které prokazatelně funguje napříč klienty a zařízeními, a poté jej vložit zpět do svého poskytovatele e-mailových služeb.

Platformy pro návrh e-mailu

Protože platformy e-mailových služeb odvedly špatnou práci při vytváření a údržbě konzistentně vykreslovaných sestav mezi klienty a mezi zařízeními, na trh přišla řada skvělých platforem. Jeden, který jsme hojně používali, je Stripo.

Stripo není jen tvůrce e-mailů, má také knihovnu více než 900 šablon, které lze snadno importovat. Jakmile e-mail navrhnete, můžete jej poslat 60+ ESP a e-mailovým klientům včetně Intuit Mailchimp, HubSpot, Kampaň Monitor, AWeber, eSputnik, výhled, a Gmail. Nejlepší ze všech šablon Stripo jsou dodávány s testy vykreslování e-mailů, takže se můžete ujistit, že byly testovány a konzistentně fungují ve více než 40 e-mailových klientech.

Přihlaste se do ukázky Stripo Editor

Douglas Karr

Douglas Karr je CMO OpenINSIGHTS a zakladatelem Martech Zone. Douglas pomohl desítkám úspěšných MarTech startupů, pomohl s due diligence v hodnotě více než 5 miliard dolarů v akvizicích a investicích Martech a nadále pomáhá společnostem při implementaci a automatizaci jejich prodejních a marketingových strategií. Douglas je mezinárodně uznávaný odborník na digitální transformaci a MarTech a řečník. Douglas je také publikovaným autorem průvodce pro figuríny a knihy o obchodním vedení.

Související články

Tlačítko Nahoru
zavřít

Byl detekován Adblock

Martech Zone je schopna vám poskytnout tento obsah zdarma, protože naše stránky zpeněžujeme prostřednictvím příjmů z reklam, přidružených odkazů a sponzorství. Ocenili bychom, kdybyste při prohlížení našich stránek odstranili svůj blokovač reklam.