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Í

Tagy pro nahrazení obsahu

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.

Akce setval – změna hodnot ve formulářích Mailocatoru

Pro dynamické změny výchozí hodnoty v pop-upech lze použít akci setval

Automatické opravy překlepů v e-mailových adresách

Mailocator dokáže na základě strojového učení opravit řadu běžných překlepů v e-mailové adrese a upozornit na ně uživatele.

Změny v importu slevových kódů od 1. 12. 2020

Pokud používáte v Mailocatoru slevové kódy, prosím, věnujte pozornost následující informaci

E-mailing: Fénix, který povstal z popela

Pokud byste se v roce 2009 zeptali marketingových specialistů na budoucnost e-mailingu, nepochybně by řada odpovědí předvídala ústup ze slávy a nevalnou perspektivu.

Losování náhodného slevového kódu

Potřebujete losovat náhodnou výhru anebo kód ke gamifikačnímu pop-upu? Mailocator umožňuje jednoduše nastavit pravděpodobnost na setinu procenta, náhodně vybrat výhru a doručit ji do e-mailového nástroje.

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.