Můj web

Jak na HTML email v Outlooku

Publikováno 3.7.2013

Kdo někdy kódoval HTML e-mail zvaný newsletter neboli direct mail ví, že největší potíže dělá správné zobrazení v Outlooku. I když vidíte všechno správně zformátováno v moderních prohlížečích, ve webových mailových klientech, v Thunderbirdu nebo dokonce v Internet Exploreru, není vůbec jisté, zda bude správně také HTML vykreslené v Outlooku. Naneštěstí se v českém prostředí – zejména korporátním – používá Outlook nejvíce. Tady je pár mých postřehů, jak se (nejen) s ním poprat.

Problém je v tom, že HTML zprávy v Outlooku (v současné době je na místě věnovat se verzi 2010) jsou vykreslovány Wordem, nikoliv Internet Explorerem. Z toho plyne první problém a to je stránkování. Koho by napadlo, že bude v Outlooku HTML zpráva stránkována? Běžně to vlastně nezjistíte, narazíte až ve chvíli, kdy vložíte dlouhý obrázek. Outlook ho zdeformuje. Pokaždé jinak, neočekávaně. Takže první rada zní – maximální výška obrázku 1728px. Problém popsán např. zde.

Pojďme k minimální výšce obrázku. Pokud nebude alespoň 10px doplní ji Outlook nežádoucím prázdným místem.

Známý trik jako tabulkový layout netřeba připomínat – toto platí i pro další mailové klienty. Pokud používáte v tabulce colspan, tak dejte alespoň jeden řádek bez colspanů (v nejhorším prázdný) a v něm nadefinujte šířky sloupců.

CSS zarovnání pomocí vertical-align případně přímo HTML atribut valign v podstatě nefungují. Pokud možno nepouživejte v tabulkách atribut rowspan. To trápení s laděním za to nestojí.

Obrázek na pozadí nastavený pomocí CSS vlastnosti background se v Outlooku nezobrazí. Na to není žádný trik, prostě to nejde.

I když je možné používat inline CSS, některé vlastnosti nefungují. Stejně tak moc nefunguje dědění z nadřazených bloků. Tu a tam je tedy potřeba zopakovat vlastnosti písma nebo řádkování. Vlastnost line-height udávejte v px přímo v bloku, kde je uzavřený text. Pokud zadáte v procentech, bude výsledné formátování jiné než v moderních prohlížečích.

Zapomeňte na značku FONT. Outlook má radši inline CSS formátování písma. V mailovém klientovi Evolution je to sice naopak, ale na počet uživatelů prohrává.

Nepočítejte s tím, že můžete udělat pozadí opakujícím se obrázkem a nastavením atributu height. Outlook si sám rozhodne, jak vysoký obrázek bude. Většinou je to jeho původní velikost. V kombinaci s atributem rowspan je to vůbec beznadějné.

Orámování obrázku nejde udělat ani přes atribut border ani přes CSS. Buď vložte obrázek do tabulky a vykreslete orámování tabulky nebo jednodušeji nakreslete rámeček přímo do obrázku. Totéž platí pro mezery mezi textem a obrázkem při obtékání. V Outlooku tam bude 0, i když se budete na hlavu stavět. Udělějte okraj přímo do obrázku.

A poslední trik tentokrát kvůli GMailu. Vkládáte-li obrázek, přidejte inline CSS vlastnost display: block; jinak bude obrázek v GMailu s nežádoucími okraji.

Pokud si někdy při kódování newsletteru rvete vlasy, tak nezoufejte, může být hůř. Občas si příjemci vzpomenou, že si chtějí zprávu z Outlooku vytisknout. Pak se teprve pořádně zapotíte 🙂

Komentáře

Komentáře jsou vypnuty.