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. Moderní webové prohlížeče podporují HTML, CSS a JavaScript přísný soubor webových standardů. A je to opravdu 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 opravdu 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 poměrně neobvyklé, že webový designér vyvíjí 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 žádné přísné dodržování žádného webu Normy e-mailovými klienty, které zobrazují e-maily ve formátu HTML. Vlastně virtuálně každý e-mailový klient a každá verze každého e-mailového klienta působí jinak. Někteří budou ctít CSS, externí fonty a moderní HTML. Jiní dodržují nějaký inline styl, zobrazí pouze kolekci písem a ignorují vše kromě struktur řízených tabulkami. V tuto chvíli je vlastně docela směšné, že se tímto problémem 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 – Zrovna tento týden se Apple Mail aktualizoval 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 To, co vidíte, je to, co dostanete (WYSIWYG), opak je často pravdou s návrhem e-mailu. Zobrazíte náhled e-mailu na jejich platformě a příjemce e-mailu pak uvidí všechny druhy problémů s návrhem. Společnosti často nevědomky volí editor s bohatými funkcemi namísto uzamčeného editoru, který si myslí, že jeden má více funkcí než druhý. Opak je pravdou... chcete-li e-maily, které se vykreslují konzistentně napříč všemi e-mailovými klienty, čím jednodušší, tím lépe, protože méně se může pokazit.
• Vykreslování e-mailového klienta – Existují stovky e-mailových klientů, z nichž každý vykresluje HTML odlišně na desktopech, aplikacích, mobilních zařízeních a webových poštovních klientech. I když 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... odsazení, okraje, výška řádku a velikost písma se mohou u každého jednotlivého e-mailového klienta lišit. Výsledkem je, že musíte ztlumit HTML a nakódovat každý jednotlivý prvek 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 vytvářet 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ými klienty a zařízeními. 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:

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

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. Návrh šablony – Vytvořte šablonu s různými rozvrženími a bloky obsahu, které zahrnují každý styl, který byste kdy chtěli vytvořit ve svých e-mailových návrzích. Když implementujeme klienta, vždy ho k tomu dotlačíme navrhnout e-mail pro budoucnost – nejen další rozeslaná e-mailová kampaň. Tímto způsobem můžeme plně navrhnout, vyvinout, otestovat a implementovat potřebná řešení před kdy pošlou ten první e-mail.
2. 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é využívají, a zajistit, aby byl váš e-mail HTML plně otestován na mobilních zařízeních a počítačích. Dokáž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 zásadní pro nasazení návrhů e-mailů, které jsou optimální a konzistentní.
3. 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.
4. 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ů.
5. 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ě MailChimp, HubSpot, Campaign Monitor, AWeber, eSputnik, Outlook a Gmail. Nejlepší ze všech šablon Stripo jsou součástí testů 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

Zveřejnění: Odkazuji na můj marketingová poradenská firma který navrhuje a nasazuje e-maily mezi klienty pro přední značky prakticky u jakéhokoli poskytovatele e-mailových služeb. Jsem také affiliate of Stripo a já používám svůj odkaz v tomto článku.