Přejít k obsahu  Přejít k hlavnímu menu

Blog / Knowledge base

Aktualizace: 16. květen 2020

Úskalí s Outlookem (počínaje verzí 2007)

Naneštěstí to nevypadá, že bychom byli ušetřeni posledních verzí e-mailového klienta Outlook, stejně tak nemůžeme očekávat, že by Outlook začal být minoritou mezi e-mailovými klienty příjemců našich newsletterů.

Proto se v následujících odstavcích podělím o řešení někdy důležitých a jindy opomíjených odlišností ve vykreslování oproti běžným „standardům“. Nezbývá podotknout, že o uváděných řešeních jsme při kódování a stylování newsletterů pro Outlook ve verzi 2003 neměli ani ponětí…

Uváděné příklady mají platnost pro Outlook ve verzích 2007, 2010 a 2013.

Jedno pixelový okraj buněk tabulky
Pokud nechcete, abyste okolo buněk tabulky měli 1px okraj, který nejvíce vynikne v případě použití background color v jiné barvě než bílé, máte dvě možnosti řešení:

v embedovaném CSS uvnitř tagů style:
table td { border-collapse: collapse; } 
užitím inline stylu přímo v prvku tabulky:
<td style="border-collapse: collapse;">

Výška řádku
Chcete-li mít pod kontrolou výšku řádku, postačí jednoduché vložení mso-line-height-rule před samotnou definici výšky řádku:
<td style="mso-line-height-rule:exactly; line-height:50px;">


Obrázek na pozadí
Vložení obrázku na pozadí je na samostatnou kapitolu. Nicméně netroufáte-li si vše rovnou nakódovat, můžete vyzkoušet Stigův generátor, který udělá většinu práce za vás:

http://emailbg.net/
Použitím VML tak můžete i v Outlooku docílit řešení, kdy máte čistě textovou vrstvu nad obrázkem. Důležité je ale nezapomenout, že toto řešení není možné dále kombinovat s použitím background color!

Výška bloku tabulky či obrázku
Protože Outlook od verze 2007 začal používat renderovací jádro Wordu, můžete narazit na chybu, kdy vám na první pohled bezchybný kód bude v Outlooku generovat nevysvětlitelnou bílou mezeru. Tohoto stavu snadno docílíte, pokud budete mít obsáhlejší newsletter v jedné tabulce, která svou výškou přesáhne 1 790px. Abyste si ušetřili zbytečné starosti s laděním této vskutku nepříjemné vlastnosti, je lepší si zvyknout rozdělovat delší newsletter do několika po sobě jdoucích tabulek.

U obrázků pak pamatujte na maximální výšku, která je pro Outlook hraniční na 1 728px.

Marginy a padding u tabulek
Na okraje a výplně u tabulek zapomeňte. Nejjednodušší cestou je použití paddingu např. na nadřazeném elementu td.

Bezpečnou metodou, jak se zavit případných nepříjemností, je důsledné používání cellpadding a cellspacing (ať již pro eliminaci nežádoucích mezer a odsazení nebo prr nastavení vlastního odsazení dle uvážení a grafického návrhu):
<table cellpadding="0" cellspacing="0" border="0">

Používáte-li responzivní newslettery a potřebujete mít v Outlooku vedle sebe horizontálně sousedící tabulky překlopené v responzivní verzi do stavu, kde tabulky na sebe navazují vertikálně, musíte mít tabulky na sebe navázané. A aby se správně srovnaly i v Outlooku, doporučuji používat align:
<table align="left" cellpadding="0" cellspacing="0" border="0">

Budete-li chtít zkoušet odsazení u obrázků, v Outlooku také nepochodíte. A jestli nebudete chtít nebo z nějakých důvodů nebudete mít možnost odsazení přesunout na prvek, u kterého je tato vlastnost v Outlooku podporovaná, může použít vspace anebo hspace:
<img src="uskali-s-outlookem.jpg" align="left" vspace="7" hspace="7">

Správné zalomení textu
Řešení se vám může hodit v momentě, kdy potřebujete zalomit byť jen výplňkový „dummy“ text, otestovat si tuto vlastnost, nebo zjistit, proč vám text vytéká z bloku nebo jej na šířku roztahuje:
<td style="word-break:break-all;">


Animované GIFy

S animací v Outlooku také nepochodíte. Resp. Outlook vám zobrazí pouze první frame animovaného GIFu. Pokud chcete používat moderní animované GIFy, měli byste si dát pozor a nejdůležitější sdělení umístit právě do prvního framu.

Alternativou je použití podmínky v kódu, kdy v Outlooku necháte zobrazit odlišný obrázek na rozdíl od všech ostatních emailových klientů, které správně nejen zobrazí ale i interpretují všechny framy animace.

POMOHL VÁM TENTO ČLÁNEK?

SOUVISEJÍCÍ

Návod na vlastní design pro kolo štěstí

Postup pro vytvoření kola štěstí s vlastním HTML a CSS kódem

Jak na Thank you page v Mailocatoru?

Podívejte se jak lépe přivést své budoucí zákazníky zpátky na svůj web pod dokončení ověřovacího procesu.

Kolo štěstí

Oblíbeným gamifikačním prvkem je kolo štěstí, ve kterém je uživateli nabídnutá odměna za poskytnutí údajů nebo přihlášení odběru k newsletterů.

Označení konverze kampaně pomocí akcí

Kde nedochází k automatickému označení kampaně jako konvertované (např. přihlášení k newsletteru), je možné konverzi přidat pomocí akce a lépe tak vyhodnotit úspěšnost kampaně.

Laboratoř pro testování scénářů

Snadná cesta, jak si ověřit funkčnost scénáře v Mailocatoru je spustit laboratoř, kde vidíte celý průběh zpracování v čase včetně vyhodnocení podmínek a akcí uživatele

Vypnutí a zapnutí Mailocatoru parametrem v URL

Pokud potřebujete načas omezit kampaně a není k dispozici UTM parametr, můžete použít interní parametr Mailocatoru

Stojíte na začátku?

Individuální poradenství

Nevíte, jak zlepšit výsledky vašich kampaní, anebo máte pochybnosti o efektivitě vaší práce? Rádi vám poradíme přímo s vašimi daty a ve vašich kampaních.

Vyberte si, s čím chcete poradit, která data vašich kampaní zlepšit a které novinky vás zajímají.

Zeptejte se...

Školení

Vyberte si z nabídky našich školení, nejsou omezená platformou, mohou být pojatá obecně ale i přesně zacílená na vaše potřeby. Místo školení nerozhoduje.

- obecné školení
- školení na míru
- on-line školení

Nabídka školení

Technická podpora

Pracovníci naší technické podpory jsou vám ochotni kdykoli poradit s vašimi dotazy. Ať již se týkají vlastního nastavení nebo jeho kontroly.

Jsme vám k dispozici on-line - e-mail, instant messaging - i prostřednictvím telefonu.