Často se nás ptáte, jak vytvořit HTML šablonu pro e-mail tak, aby byla čitelná v co největším počtu e-mail klientů. Proto jsme pro vás vytvořili tento návod.

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í.
  • Umísťujete-li obrázky e-mailu na webový server, 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ů.
 

Našli jste odpověď?