Jak donutit Outlook express 2010 přijmout html e-mail s obrázkem na pozadí

Možná si po přečtení nadpisu řeknete a co je na tom tak těžkého. Přeci vložit pozadí do html editoru je záležitost pár sekund. Kdo někdy vytvářel HTML e-mail a posílal ho na různé emailové klienty, asi bude vědět o čem píšu. 

To, že je Outlook express 2010 nejrozšířenějším emailovým klientem (proboha proč) není potřeba rozebírat. Myslí si to bohužel i klienti a nejen oni. Ikdyž je tento článek trošku offtopic našeho serveru, je tu proto, aby vám ušetřil hodně času, pokud byste někdy řešili podobný požadavek na vytvoření html e-mailu s obrázkem na pozadí. Podmínka klienta byla, že se musí vše dobře zobrazit hlavně na Outlooku 2010. A jelikož platí – náš zákazník – náš pán jdeme na to :-). Připomeneme si v krátkosti o jaký problém v Outlooku 2010 a nejenom v této verzi jde. 

Html mail s obrázkem na pozadí Outlook nechce zobrazit
Ano je to tak. Ať zvolíte starý nebo nový zápis html outlook se tváří, že jste na pozadí prostě zapomněli. Je to věc na webu celkem známá a velmi diskutovaná. Mnoho lidí se s touto skutečností prostě smířilo a udělali html email tak, aby se umístění pozadí vyhnuli. Já osobně preferuji asi taky tuto variantu, ale popíšu vám dnes řešení, jak pozadí v outlooku zobrazit pomocí “vml” kódu. 

– Stáhněte si kompletní tutoriály kanálu dtpko.cz bez reklam –

Co se týká všeobecného návrhu emailu je známo, že je lepší používat pouze tabulkový layout. Mám to odzkoušené na thunderbird (kde mimo jiné funguje i krásně CSS) outlooku i na mnoha freemailových serverech jako je seznam, atlas, gmail, hotmail aj. Pokud je to možné, tak se vyvarujte stylizování a pozicování. Pokud už používat styly, tak vše vytvářejte do tzv. inline stylů. Nevýhodou tohoto řešení je velmi nečistej kód (slušně řečeno).

Zde je kód, který vyřeší problém se zobrazením pozadí v outlooku. Jde vlastně o zápis pro různé verze emailových klientů. V místě kde je napsána url adresa k obrázku na našem serveru musíte nahradit za cestu k vašemu pozadí, které má být ve vašem html mailu. Vždy ho nahrajte v plném formátu tzn. v našem příkladu je to obrázek v rozměru 800px na šířku a 1250 na výšku. 

<br /><br /><br /> <table width=”800″ height=”1250″ background=”https://www.dtpko.cz/images/img/pozvankaback.png” style=”width:800px;height:1250px;margin:0px;padding:0px;overflow:hidden;background-image:url(‘https://www.dtpko.cz/images/img/pozvankaback.png’);” cellspacing=”0″ cellpadding=”0″>

<!–[if gte mso 9]> <v:image xmlns:v=”urn:schemas-microsoft-com:vml” id=”theImage” style=’behavior: url(#default#VML); display: inline-block; position: absolute; width: 800px; height: 1250px; top: 0; left: 0; border: 0; z-index: -1;’ src=”https://www.dtpko.cz/images/img/pozvankaback.png” /> <v:shape xmlns:v=”urn:schemas-microsoft-com:vml” id=”theText” style=’behavior: url(#default#VML); display: inline-block; position: absolute; width: 800px; height: 1250px; top: -5px; left: -10px; border: 0; z-index: -2;’><br /><br /> <div> <![endif]–>

<!–[if gte mso 9]> </div><br /><br /> <p> </v:shape> <![endif]–>

Zde vložte obsah vašeho html mailu

A toto dejte úplně na konec.

</td><br /><br /> </tr><br /><br /> </table><br /><br /> <p>

Když byste potřebovali poradit, neváhejte mě kontaktovat v diskusi pod článekem