23. 8. 2014 | Martin Halama | Kódování

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.

Zdroj

Vše v jednom dokumentu

photo credit: ryanoshea via photopin cc