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ů?

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

Mail Komplet bude končit. Přesuňte svůj účet do Boldem co nejdříve

Doba jde dopředu. A my též. Už nějakou dobu pracujeme na tom, aby tvorba vašich e-mailingových kampaní byla rychlejší, jednodušší a efektivnější. A právě proto jsme pro vás vytvořili nový nástroj Boldem.
Finanční plánování v podnikání – jak na něj?

Ve spolupráci s partnerem Lemonero specializujícím se na chytré financování e-shopů jsme pro vás připravili základní informace k finančnímu plánování pro váš byznys.
Mail Komplet ve zcela novém kabátě

Svět technologií se neustále vyvíjí a rok co rok se tempo „zrychluje“. Zrychluje se natolik, že je někdy obtížné udržet se všemi změnami krok. Pokud nepůjdete „s dobou“, jednoduše řečeno, ujede Vám vlak.
Marketingové trendy pro rok 2022

V posledních letech došlo k dramatické digitální transformaci marketingu. Současná světová situace tento trend ještě více zvýraznila. Prostředí online marketingu je dynamičtější než kdykoli předtím.
Změny cookies v roce 2022

Znáte to, přijdete na stránky a hned na Vás vyskakuje lišta s informacemi o tom, že se ukládají nějaké cookies. Většina z nás bezmyšlenkovitě kliká na souhlasím a pokračuje na obsah. Co se změní v novém roce?
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í.