Dělat HTML do mailu je mnohem složitější než dělat HTML na web - pro prohlížení webu slouží jen prohlížeče a pro optimalizaci HTML kódu lze často pomocí analytics zjistit ty nejpoužívanější, podle kterých zjistit které uživatelé využívají nejvíc. U e-mailu je situace složitější - nejen, že bývá trackování o trochu složitější, uživatel může otevřít mail v prohlížeči (tedy stejné množství možností jako web), ale zároveň může používat e-mailové aplikace (desktop i mail), které dodávají další komplexitu do správného zobrazení HTML. Tím pádem je důležité zvolit nejbezpečnější možnost, která u mailů rozhodně není ta nejestetičtější, co se týká kódu a způsobu tvorby. 

Mezi věci, na které si dávat pozor, patří:


  • Používání tabulek (<table> tag) pro rozvržení (layout)
    • Způsobeno hlavně staršími mailovými klienty (nebo těmi, které jsou na nich postavené)
    • Kód kvůli tomu nabobtnává, je těžkopádný, ale cena za to, že se zrovna blbě zobrazí klíčové osobě, za to stojí
  • Nepoužívat nové CSS atributy (např. CSS grid)
    • CSS se vyvíjí rychleji, než prohlížeče a emailoví klienti zvládnou implementovat (viz předchozí bod), tím pádem je třeba pokorně používat staré a zaběhlé atributy, které budou fungovat u všech klientů
    • Pro kontrolu, zda se daný atribut dá bezpečně použít, slouží skvěle stránka https://www.caniemail.com/
    • I tak je třeba mít na paměti, že není stoprocentní (ne vždy je zcela aktuální, což je pochopitelné), takže je třeba testovat i jinak (ideálně přímo na zařízení, viz dále)
  • Externí zdroje
    • Můžou zlobit, nejčastěji to jsou obrázky (někteří mají vypnuté načítání obrázků, někdo má vypnuté obrázky z jiné domény než adresáta) nebo CSS styly (nebývá tak často)
    • Je malinko vhodnější používat inlinový styly a vyvarovat se používáním externím zdrojům, co to jde (třeba u CSS nakopírovat kód přímo do mailu, u obrázků je třeba akceptovat riziko, že se případně nemusí načíst ve zlomku mailů - třeba používat alt description, pokud to vadí hodně).
  • Dobří umělci kopírují, nejlepší kradou
    • Jedním z best practices je kouknout se, jak to mají ty služby, co se specializují na HTML v mailu (ať už mailchimp nebo naše signatures templaty) a dělat to podle toho
    • případně v mailchimpu (nebo jiných mail newsletterů) si udělat podpis dle jejich šablon a pak zkopírovat kód do MS
  • Testovat v reálných mailových klientech
    • sebelepší kontrolor atributů plně nezastoupí to poslat si pár mailů
    • Ideálně vědět, co adresáti používají
    • Zkusit co nejvíce kombinací (poptat se lidí, kteří zařízeními disponují)
      • Mobil vs. Desktop
      • OS - iOS, Android, MacOS, Windows, Linux, ChromeOS
      • Prohlížeč vs. nativní appka
      • Také dávat pozor na vlákna - první mail může být ok, ale v rámci vlákna se může podpis deformovat, nebo může deformovat vlákno (to dělají často široké podpisy)


Podpisy v MS

Vlastní atributy

Kromě nejčastějších proměnných lišící se od uživatele, které v podpisech můžou být, jako jméno, foto, osobní e-mail a další, lze přidat i vlastní atributy (CUSTOM_ATTRIBUTE). Ty umožňují přizpůsobit si podpisy na základě vlastních atributů, které jsou vytvářeny přímo v GWS lidmi v organizaci, kteří mají dostatečná práva.


Příklad - dejme tomu, že se vytvoří atribut SignaturePartners, ve kterém budou atributy P1_Link a P2_Link (vytvořeno organizací). Každý účet bude mít hodnoty těchto atributů jiné.



Pro přidání této proměnné do MS podpisů je třeba využít formátovanou proměnnou CUSTOM_ATTRIBUTE. Jako každá formátovaná proměnná, je třeba ji obalit do dvou složených závorek - {{ CUSTOM_ATTRIBUTE }}. Tímto způsobem MS pochopí, že se nejedná o text, ale proměnnou, která se naformátuje dle dat z GWS. Pro získání konkrétní proměnné (např. P1_Link) je však ještě třeba přidat cestu složenou z názvu (SignaturePartners) a jména klíče v něm (P1_Link). Tyto dvě hodnoty se vkládají za sebou v tomto pořadí do hranatých závorek a v uvozovkách. Výsledná proměnná bude tedy vypadat takto: {{ CUSTOM_ATTRIBUTE['SignaturePartners']['P1_Link'] }}


Mezi časté problémy patří:

  • Nesprávný/neúplný název cesty - nelze mít pouze {{ CUSTOM_ATTRIBUTE }} nebo
    {{ CUSTOM_ATTRIBUTE['P1_Link'] }}
  • Špatné uvozovky - někdy zlobí apostrofy ‘’, je třeba používat ‘’, případně lze vyzkoušet dvojité “” -
    {{ CUSTOM_ATTRIBUTE[‘SignaturePartners’][‘P1_Link’] }} nemusí vyhodit požadovaný výsledek