Mailkit 

Optimalizace emailu: Není HTML jako HTML

Rozhodli jste se, že už se do toho e-mailového marketingu konečně pustíte. Máte databázi, máte co posílat, máte i čím, ale nemáte formu. Přišel čas si nechat připravit HTML kód šablony e-mailu. Co ale po kodérovi chtít a jak si práci zkontrolovat? On totiž není HTML kód jako HTML kód.

Optimalizace emailu: Není HTML jako HTML

Rozhodli jste se, že už se do toho e-mailového marketingu konečně pustíte. Máte databázi, máte co posílat, máte i čím, ale nemáte formu. Přišel čas si nechat připravit HTML kód šablony e-mailu. Co ale po kodérovi chtít a jak si práci zkontrolovat? On totiž není HTML kód jako HTML kód.

"Chci HTML e-mail"

HTML má mnoho verzí - dnes se nejčastěji pracuje s HTML5, dynamickým obsahem, javascripty, a dalšími technologiemi, které se obvykle nazývají Web 2.0 a umožňují vytvářet úžasně dynamické stránky, animovat obsah a používat efektní přechody. Nic z toho není v e-mailech možné... Webový kodér tak narazí na historickou bariéru, se kterou vetšinou nemá žádné zkušenosti.

Setkáváme se s tím skoro každý den - grafik připraví klientovi šablonu pro jeho nový e-mail, dodá ji v HTML a výsledek je moderní, krásný, ... a nepoužitelný. Návrh a kódování pro e-mail má svá velmi striktní pravidla a zároveň mnoho výjimek pro jednotlivé e-mailové klienty. Pokud si grafik a kodér nejsou těchto pravidel a omezení vědomi, výsledek obvykle skončí velmi špatně a vede ke kompletnímu redesignu.

Řešením není ani realizace e-mailových kampaní v čistě grafické podobě, neboť tento druh kampaní je nutné dávkovat velmi opatrně. U čistě grafické kampaně je výrazně náročnější příjemce zaujmout a docílit tak požadované akce a dochází tak mnohem rychleji k ignoraci e-mailů ze strany příjemců.

Naopak při použití kampaní obsahujících jak textové informace, tak grafické prvky má odesílatel mnohem větší možnost příjemce obsahem zaujmout. Tato varianta si však vyžaduje pečlivou přípravu a zpracování. Zarovnání, odsazení, barvy textu a odkazů, zobrazování obrázků, celková koncepce... - zde všude pak může dojít k výraznému rozdílu ve vzhledu e-mailu napříč různými poštovními klienty. Ačkoli výsledný e-mail nemusí být nutně zcela nečitelný, rozhodně kazí dojem a snižuje účinnost kampaně.

Zobrazování e-mailové zprávy napsané v HTML kódu neoptimalizovaném pro poštovní klienty:

Optimalizovaná HTML šablona

Oproti tomu stejný návrh s použitím optimalizované šablony myslí na všechny poštovní klienty napříč všemi možnými zařízeními, kde jde e-mail číst. Počítá s jejich specifiky a přizpůsobuje se jim. Pokud je HTML kód "správně" napsán pro poštovní klienty, tak se odesílaná zpráva zobrazí všude čitelně a bezvadně. E-mail tak bude perfektní jak v Outlooku, tak ve webové poště freemailové služby, tak i v mobilu či tabletu.

Zobrazování e-mailové zprávy napsané v HTML kódu optimalizovaném pro poštovní klienty:

V některých případech se klient rozhodne pro optimalizaci s cílem vytěžit maximum podporovaných možností na určité skupině e-mailových klientů, které nejčastěji používají jeho příjemci na úkor kompatibility s méně rozšířenými klienty. Na tomto přístupu není nic špatného, pokud mu předchází dostatečná analýza používaných zařízení a klientů. Bohužel se často setkáváme s tím, že klient upřednostňuje zobrazení kampaně ve svém specifickém e-mailovém klientu na úkor kvality zobrazení v klientech příjemců - optimalizace zobrazení by se měla proto vždy provádět s ohledem na finální příjemce a nikoliv na jednotlivce v rozhodovacím procesu, který může používat zcela atypické prostředí.

Kontrola zobrazování

Už tedy víte, že je vhodné se obrátit na kodéra, který má zkušenosti s kódováním e-mailů, než na webdesignera, jehož specializace je někde jinde. Ale jak si dodaný HTML kód zkontrolovat? Jak zjistit, jak se e-mailová zpráva zobrazuje v jakých poštovních klientech. Jednoduše. V Mailkitu použijte náhledy - Mailkit vám zdarma ukáže, jak se vaše e-mailová kampaň zobrazuje v následujících e-mailových klientech:

  • Seznam.cz
  • Centrum.cz
  • Azet.sk
  • Zoznam.sk
  • Outlook 2003
  • Gmail

Pro pokročilejší testování je pak k dispozici sada zpoplatněných náhledů (pro uživatele Syndicate & Agency je 50 vygenerování kompletní sady náhledů za měsíc zdarma), ve které naleznete dalších více jak 40 poštovních klientů:

  • Android 2.3 *
  • Android 4.2 *
  • AOL Mail (Explorer)
  • AOL Mail (Firefox)
  • AOL Mail (Chrome)
  • Apple Mail 7
  • Apple Mail 8
  • BlackBerry 4 OS *
  • BlackBerry 5 OS *
  • Color Blindnes (simulovaná barvoslepost)
  • Gmail (Android) *
  • Gmail (Firefox)
  • Gmail (Chrome)
  • Google Apps (Explorer)
  • Google Apps (Firefox)
  • Google Apps (Chrome)
  • iPad (Retina displej) *
  • iPad Mini *
  • iPhone 5s (iOS 7) *
  • iPhone 5s (iOS 8) *
  • iPhone 6 *
  • iPhone 6 Plus *
  • Lotus Notes 7
  • Lotus Notes 8
  • Lotus Notes 9
  • Office 365 (Explorer)
  • Office 365 (Firefox)
  • Office 365 (Chrome)
  • Outlook 2000
  • Outlook 2002/XP
  • Outlook 2007
  • Outlook 2010
  • Outlook 2013
  • Outlook 2016 (Mac OS)
  • Outlook.com (Explorer)
  • Outlook.com (Firefox)
  • Outlook.com (Chrome)
  • Mozilla Thunderbird
  • Windows Phone 7.5 *
  • Windows Phone 8 *
  • Yahoo! Mail (Explorer)
  • Yahoo! Mail (Firefox)
  • Yahoo! Mail (Chrome)

* Jedná se o náhledy zobrazení na mobilních zařízeních.


Nezapomeňte, že kontrola zobrazení není otázkou estetiky, ale především účinnosti - tak, jako má znění předmětu vaší zprávy vliv na míru otevření, tak má struktura, vzhled a obsah vaší kampaně zásadní vliv na její úspěšnost co do počtu prokliků a tím i vaše obchodní výsledky.

Ani sebezajímavější sdělení nebude úspěšné, pokud ho příjemce neuvidí - zamyslete se proto již ve fázi návrhu vaší kampaně nad tím, jakou formu zvolíte, kde a jak budou prezentovány prvky, kterými budete zaujímat pozornost vašeho příjemce a zda budou vždy dobře viditelné. Vyhněte se plně grafickým e-mailovým kampaním se zbytečně rozsáhlou nabídkou a délkou - e-mail není leták ani katalog.

Pokud vaše kampaň nezaujme v prvních cca 10 centimetrech, příjemce o obsah ztratí zájem. Je jen velmi málo vyjímek z tohoto pravidla a ty jsou postavené především na dlouhodobé a systematické práci s příjemci a budování značky. Přípravu kampaně proto rozhodně nepodceňujte a od počátku pracujte na budování vaší image a komunikaci se zákazníky.

Pokud potřebujete pomoc s přípravou či optimalizací vaší kampaně, nebo potřebujete poradit, neváhejte nás kontaktovat.