Č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.
Připravili jsme pro vás nový seriál o kódování e-mailové šablony, který vás provede kompletní tvorbou profesionální HTML šablony. Již nyní si můžete přečíst 1. díl - Úvod a příprava.
Úvod do problematiky HTML e-mailů a e-mailových klientů
Ve světě je používáno 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.
Co lidé nejčastěji používají
Mezi nejrozšířenější e-mailové klienty patří desktopové aplikace Outlook, Thunderbird, Eudora a Lotus Notes. Na poli web mailů vládne Google Mail (GMail), Yahoo, Hotmail, Seznam.cz a Centrum.cz.
Pokud jste v minulosti kódovali XHTML šablony a proklínali nedodržování standardů, pak se připravte na zcela novou výzvu. Vytvořit HTML e-mail tak, aby se zobrazoval ve všech e-mailových klientech stejně, je často o nervy.
Zatímco na poli internetových prohlížečů se situace ohledně standardů pomalu zlepšuje, na poli e-mailových klientů je situace stále špatná.
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></style>. Běžně se tento tag umísťuje do hlavičky dokumentu <head></head>, u HTML e-mailů tom tak ale není. Prá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></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. Protože starší verze Microsoft Outlooku využívají starší renderovací jádro Internet Explorer, doporučujeme pro testování využít IE6.
- 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 nejjendodušší. Jen tak zajistíte, že se zobrazí korektně největšímu počtu příjemců.
Nenašli jste, co jste hledali?
Nenašli jste, co jste hledali v našem výukovém centru ani v našich videonápovědách?
Pokud potřebujete více pomoci, napište nám na e-mail nebo zavolejte na 517 070 000.
