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
I 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í attributy
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