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Í

Spuštění kampaně po najetí kurzorem nebo dotykem na konkrétní místo ve stránce

Označte místo, které spustí kampaň ve chvíli, kdy na něj uživatel umístí kurzor nebo se jej dotkne na dotykovém zařízení

Rozesílejte e-maily profesionálně: s přesným trackingem a segmentací

Špičkový e-mailingový nástroj nabízí maximální doručitelnost, přesnou segmentaci a vysokou míru automatizace.

Zkopírování dárkového kódu do clipboardu

Propisování libovolných polí do obsahu kampaní, včetně ovlivnění jmen CSS tříd, lze v Mailocatoru udělat několika způsoby.

Mailocator Events

Pomocí událostí můžete chytře řídit sled kampaní v celém workflow scénáře a zobrazovat mnohem relevantnější a přesně cílený obsah v reálném čase.

Notifikace

Nastavení zobrazení notifikací ve vašich stránkách pomocí Mailocatoru

Zpracování formuláře (kampaně) vložené do stránky

Jak na odeslání dat z formuláře umístěného ve vašich stránkách do 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.