Všechny články

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

Jak vytvořit HTML šablonu pro e-mail, tak, aby byla čitelná v co největším počtu e-mailových klientů?

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

Ve světě je používáno velké množství e-mailových klientů. Podobně jako u internetových prohlížečů se liší míra jejich rozšíření. Je potřeba zajistit, aby e-maily 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říct maximálnímu počtu příjemců, a to jak informační hodnotou e-mailu, tak technickým zpracováním e-mailu.

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

  • Pro layout e-mailu nepoužívejte CSS pozicování (floating), ale staré dobré tabulky. Jedině tak budete mít jistotu, že e-mail se bude korektně zobrazovat i lidem s prehistorickými e-mailovými klienty nebo s e-mailovými klienty, jejichž autoři ignorují vývoj doby a CSS nepodporují.
  • Pro nastavení barev a fontů používejte pouze inline CSS. Pozor na umístění stylů prostřednictvím tagu <style>. Běžně se tento tag umisťuje do hlavičky dokumentu <head>, u HTML e-mailů tomu tak ale není. Ptáte se proč? Webmaily totiž používají svou hlavičku, takže často z e-mailu odříznou vše, co je od tagu <body> nahoru. Tímto způsobem z e-mailu často vyseknou i CSS styly, které jsou uložené v části <head>.
  • Nepoužívejte zkrácené tvary u CSS stylů. Místo padding: 0; použijte radši tvar padding: 0 0 0 0; Místo font: 11px/14px Verdana, Arial; použijte radši samostatně font-family, font-size a line-height.
  • Nepoužívejte CSS styly odkazované z externího souboru, webmaily vám je odstraní, desktopové aplikace je ignorují. Využívejte CSS1 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 stylování bloků. Dají-li se tyto tagy nahradit celou tabulku TABLE, preferujte tabulky.
  • Vícesloupcové layouty řešte pomocí vnořených tabulek.
  • U tabulek pro layout využijte atributy cellpadding="0" cellspacing="0" border="0".
  • Pro pozicování tabulek využijte 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%. Yahoo má se stoprocentní šířkou problémy.
  • Informace o stylu vložte do buňky <td>. Ač 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>. To, zda je potřeba informace o stylu vložit nebo ne, poznáte při testování e-mailu.

Další důležité postupy

To, že e-mail vytvoříte podle základních rad, vám sice zjednoduší práci, ale nikdy nezajistí, že e-mail je nakódován opravdu korektně.  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 klientovi. Starší verze Microsoft Outlooku využívají starší renderovací jádro Internet Explorer.
  • HTML šablona je mnohdy rozbitá jen díky drobnostem. Zkuste, zda nepomůže místo procentuální šířky využít šířku pevnou.
  • Pokud se tabulky zobrazují s odsazením, prověřte nastavení atributů cellpadding a cellspacing na 0.
  • Pozice obrázku může být špatná, pokud je obrázek vložen na konci 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 javascript, e-mailoví klienti ho blokují.
  • Načítate-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, že e-mail 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ů tak e-mail sice přečte, ale nikdy nezhlédnou grafiku v e-mailu.
  • Před odesláním e-mailu ověřte, zda e-mail nebude vyhodnocován jako spam. Pokud je e-mail vyhodnocen jako spam, bude potřeba změnit jeho texty a mnohdy také HTML kódování (změnit pozice, velikosti, počet obrázků apod.)

Slovo závěrem

Stále více lidí preferuje příjem HTML e-mailů před nevzhlednými textovými e-maily. Výroba 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í korektně největšímu počtu příjemců.

Doufáme, že se Vám článek líbil a pokud na nás máte jakékoliv otázky, tak neváhejte a ozvěte se nám.

Jsme tu pro Vás!

Váš Mail Komplet

 

Mohlo by Vás zajímat:

Vytváříme HTML šablonu - 1. díl – Úvod a příprava

Příprava e-mailové šablony v MJML - 2. díl – Responzivní e-maily snadno a rychle

Sdílejte tento článek:

Okomentujte tento článek

Nejnovější články

  • Příprava e-mailové šablony v MJML - 2. díl – Responzivní e-maily snadno a rychle

    Nejste zdatní v HTML kódování, ale zároveň byste raději rozesílali e-maily v HTML kódu? V tomto díle zjistíte, jak je snadné vytvořit kódovanou šablonu takřka bez jakýchkoliv znalostí o HTML kódování.

  • Vytváříme HTML šablonu - 1. díl – Úvod a příprava

    Nevíte, jak si sami připravit krásnou e-mailovou šablonu? Neumíte kódovat v HTML jazyce? Právě pro Vás jsme připravili tento návod, který je zaměřený na základní tvorbu šablony.

  • Webhooks aneb zahákněte si všechny Vaše akce

    Webhooks, co to je a k čemu se Vám bude hodit? Webhooky se hodí mít, pokud chcete, aby Vám z Mail Kompletu bylo posíláno oznámení na Vaši URL adresu hned, jakmile dojde k nějaké akci, kterou v rámci Mail Kompletu chcete sledovat.

  • Věčné téma – jak zamezit tomu, aby e-maily nekončily v nevyžádané poště?

    Odpověď na tuto otázku Vás asi překvapí, ale přesný recept neexistuje. Antispamové filtry poskytovatelů e-mailových schránek se stále vyvíjí, stejně jako celý online svět. Stejně tak jako se stále více řeší bezpečné doručení e-mailu do schránky příjemce.

  • Segmentace

    Možná si pamatujete na minulý článek, ve kterém jsme řešili téma týkající se kvalitní databáze ve spojitosti se zákonem EU o ochraně osobních údajů. Pokud Vám tento článek utekl, tak se k němu můžete vrátit zde. Dnes si totiž toto téma ještě trochu rozšíříme. Podíváme se na problematiku segmentací.

Zpět
nahoru