Píšeme Boldem blog

Jak na kódování HTML e‑mailů

Šablony

Publikováno 26. srpna 2021 5 min. čtení

Ve světě je používáno velké množství e-mailových klientů (programů k přijímání, odesílání a ke správě elektronické pošty). Podobně jako u internetových prohlížečů se liší míra jejich rozšíření a tím také kompatibility. Vaším cílem při rozesílání e-mailů by mělo být, aby byly čitelné pro co největší počet příjemců, tedy v co největším počtu e-mailových klientů.

To, že je některý e-mailový klient rozšířenější než druhý, ještě neznamená, že můžeme ty méně rozšířené ignorovat. Pamatujte, že i v malém procentu oslovených příjemců se může ukrývat množství nových zákazníků. Proto doporučujeme snažit se vždy vyjít vstříc maximálnímu počtu příjemců, a to jak informační hodnotou e-mailu, tak i technickým zpracováním celé zprávy.

Základy kódování pro HTML e-maily

Při navrhování e-mailových zpráv nepoužívejte k pozicování jednotlivých prvků kaskádové styly (CSS), ale staré dobré tabulky. Jedině tak budete mít jistotu, že se e-mail správně zobrazí i lidem s archaickými e-mailovými klienty, nebo s e-mailovými klienty, jejichž autoři ignorují vývoj doby a jazyk CSS nepodporují.
K nastavení barev a písem používejte pouze tzv. inline CSS, tedy způsob, při kterém vlastnosti zapíšete přímo do tagu HTML pomocí parametru style. Příklad:

<h1 style=“text-align: center;“>

Přestože se běžně styly zapisují do hlavičky dokumentu <head>, v případě HTML e-mailů tomu tak není. Ptáte se proč? Některé prohlížeče e-mailů, typicky webové aplikace, používají svou vlastní hlavičku, takže často z e-mailu odříznou vše od tagu <body> nahoru. Tímto způsobem z e-mailu odstraní i kaskádové styly, které jsou uložené v části <head>.
Nepoužívejte zkrácené tvary u kaskádových stylů CSS:
- Místo padding: 0; použijte raději tvar padding: 0 0 0 0;
- Místo font: 11px/14px Verdana, Arial; rozepište jednotlivé vlastnosti samostatně jako font-family, font-size a line-height.
Nepoužívejte kaskádové styly CSS odkazované z externího souboru, webové prohlížeče e-mailů je odstraní a desktopové aplikace je ignorují.
Používejte verzi CSS 1 a ne vyšší; množství klientů CSS podporuje pouze ve velmi jednoduché a omezené verzi.
Snažte se minimalizovat použití tagů SPAN a DIV pro návrh bloků. Dají-li se tyto tagy nahradit celou tabulkou TABLE, preferujte tabulky.
Rozvržení s více sloupci řešte pomocí vnořených tabulek.
U tabulek pro základní rozvržení využijte atributy cellpadding=“0″ cellspacing=“0″ border=“0″.
Při pozicování tabulek využívejte atribut align. Pro vertikální pozicování v buňce využijte atribut valign.
Aby hlavní tabulka s obsahem měla zachován prostor kolem okrajů, nastavte jí šířku na 95 % nebo méně. Nikdy nedávejte šířku vnější tabulky na celých 100 %. Kupříkladu Yahoo má se stoprocentní šířkou problémy.
Informace o stylu vložte do buňky <td>. Ačkoli to bude mít za následek duplikování stylů, neexistuje jiná možnost. Množství e-mailových klientů totiž při přechodu do jiné buňky tabulky nastavení stylů zapomíná.
Pokud je to potřeba, vložte informace o stylu také do tagů <h1>, <h2>, …, <h8>, <p> a <a>. Zda je potřeba informace o stylu vložit tímto způsobem poznáte při testování e-mailu.

Další důležité postupy

Vytvoření e-mailové zprávy podle základních rad vám sice zjednoduší práci, ale nikdy nezajistí, že bude kód zprávy opravdu bezchybný. Proto si před rozesláním nové šablony osvojte pravidelné testování na co největším počtu e-mailových klientů.

Novou HTML šablonu otestujte v první řadě v internetových prohlížečích. Pokud se HTML šablona zobrazuje správně, jste na dobré cestě. Pokud se však zobrazuje špatně v internetovém prohlížeči, je téměř jisté, že se bude zobrazovat špatně i v e-mailovém klientu. Kupříkladu starší verze Microsoft Outlooku využívají vykreslování pomocí Internet Exploreru, je tedy potřeba počítat se všemi alternativami.
HTML šablona je mnohdy rozbitá jen díky drobnostem, jako je například použití procentuální šířky místo šířky pevné a naopak.
Pokud se tabulky zobrazují s odsazením, prověřte nastavení atributů cellpadding a cellspacing na hodnotu 0.
Pozice obrázku může být špatná, pokud jste obrázek vložili na konec buňky před ukončovacím tagem </td>. Aby se pozice spravila, umístěte ukončovací tag </td> ihned za obrázek bez jakýchkoliv mezer.
Nepoužívejte jazyk JavaScript, e-mailové aplikace ho z bezpečnostních důvodů blokují.
Načítáte-li obrázky do e-mailu z webového serveru, nechejte je na serveru uložené dostatečně dlouhou dobu. Někteří příjemci e-mail otevřou třeba i po půl roce.
Ověřte si, že vaše e-mailová zpráva bude čitelná i při vypnutých obrázcích. Mnoho e-mailových klientů stahování obrázků ve výchozím nastavení blokuje. Mnoho příjemců si tak e-mail sice otevře, ale nikdy nezhlédnou grafickou část e-mailu.
Před odesláním e-mailu ověřte, zda e-mail nebude vyhodnocován jako nevyžádaný, tedy jako SPAM. Pokud je e-mail vyhodnocen jako SPAM, bude potřeba změnit jeho texty a mnohdy také HTML kódování (např. změnit pozice, velikosti, počet obrázků a podobně).

Slovo závěrem

Většina uživatelů dnes preferuje HTML e-maily před jejich nevzhlednými textovými verzemi. Výroba správného HTML e-mailu ale není jednoduchá a je potřeba jí věnovat určitý čas. Pokud navrhnete krásný e-mail, ale příjemci se zobrazí špatně, získáte pouze mínusové body.

Snažte se mít vždy na mysli, aby HTML e-mail byl co nejjednodušší. Jen tak zajistíte, že se zobrazí bezchybně největšímu počtu příjemců.

Doufáme, že se vám článek líbil, a pokud budete mít jakékoliv otázky, neváhejte se ozvat. Rádi s vámi probereme nejen problematiku e-mailů ve formátu HTML.