Píšeme Boldem blog

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

Publikováno 5 min. čtení

černý plochý počítačový monitor

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.

Autor: Klára
Publikováno: 26. srpna 2021

Jste připraveni?

Je to snadné. Začít můžete rovnou.

Vyzkoušejte Boldem

  • Zubařka a její pacientka
  • Prodavačka v obchodě s oblečením
  • Žena se usmívá před notebookem
  • Portrét mladé ženy
  • Lidé chatují na obchodní schůzce
  • Muž přemýšlí v kanceláři
  • Automechanici
  • Lidé, kteří se účastní konference
  • Farmář drží dýně
  • Rodina v poli
  • Tým sjíždí řeku během raftingu
5 důvodů, proč se e-mailing vyplatí

18. května 2022

5 důvodů, proč se e-mailing vyplatí

Máte napnuté rozpočty a vedení po vás chce škrty v marketingovém rozpočtu? My vám nabízíme 5 důvodů, proč se e-mailing vyplatí podporovat i v těchto dobách. 5 důvodů, proč se e-mailing vyplatí: Vysoká návratnost investic…

E-commerce

10. května 2022

E-commerce v česku a proč začít s e-mail marketingem?

Lidé stále více nakupují zboží a služby přes internet a do budoucna se tento trend jen tak nezmění. Potvrzuje to především obrat české e-commerce (elektronického obchodování), který již dosáhl 62 miliard…

Jak budovat e-mailové databáze

28. dubna 2022

Jak budovat e-mailové databáze?

E-mailová databáze vám pomůže komunikovat s publikem napřímo. Což je největší výhoda e-mail marketingu. Žádný jiný marketingový nástroj vám toto nenabídne. Nicméně, abyste mohli tuto výhodu využívat, musíte mít k dispozici e-mailové adresy zákazníků. Databáze e-mailových adres musí…