Kódování newsletterů, HTML podpisů a jiných e-mailových šablon

Kódování e-mailových šablon je disciplína sama osobě, jedná se o poměrně komplexní problematiku a platí zde dvojnásob, že zkušenosti a know-how jsou to nejdůležitější.

Mezi frontend developery / kodéry není kódování HTML newsletterů, podpisů a jiných e-mailových šablon příliš populární a to zejména z jednoho důvodu – s kódováním moderních webových šablon to nemá nic společného.

Základní problematika e-mailových šablon

Prvním problémem, proč se tvorba e-mailových šablon komplikuje, je obrovské množství klientů, ve kterých můžeme své e-mailové zprávy zobrazovat. Ty se navíc dělí na webové, desktopové a mobilní a aby toho nebylo málo, většinou jsou také závislé na operačním systému. Když se nad tím tedy zamyslíme, existuje stovky kombinací klientů, pro které bychom měli naše šablony optimalizovat.

Co je ovšem horší, je technická zastaralost, především desktopových, e-mailových klientů. Při kódování newsletterů se tak vrátíme zhruba o 15 let zpět, kdy se používalo CSS1 a tabulky vládly všem layoutům. A právě tabulky budou pro nás základním prvkem, které využijeme téměr na vše.

Pravidla a doporučení při psaní newsletterů

Existuje spousta rad a hacků, na které postupně při kódování a testování e-mailových šablon narazíte. Zde uvádím několik tipů a triků, které vycházejí z mé několika leté zkušenosti s tvorbou HTML newsletterů.

Tabulky

Tabulky se stanou naším velkým pomocníkem, použijeme je téměř na vše. Základní layout s nastavením šířky našeho newsletteru, zobrazení obsahu ve sloupcích apod. Jen díky tabulkám zajistíme správné zobrazení napříč všemi klienty.

• U všech tabulek nastavte atributy cellpadding=“0″ cellspacing=“0″ border=“0″.
• Pro zarovnání tabulek využívejte atributy align a valign.

Fonty

Vlastním fontům se určitě vyhněte. V rámci e-mailových šablon nemáme možnost, jak nalinkovat custom fonty tak, jak jsme zvyklí z webových šablon. Když už se nám tam linkování fontu podaří dostat, poštovní klient to bude stejně ignorovat a místo našeho fontu zobrazí nějaký výchozí.

Písma, které můžeme bezpečně použit a jsou dostupná na většině zařízeních, si můžeme zjistit ve službě CSS Font Stack. Obecně ale doporučuji používat Arial, kterým nic nezkazíte.

Obrázky

Jelikož většina poštovních klientů při výchozím načtení e-mailové zprávy obrázky blokuje, měly by se používat pouze pro netextové prvky, kde to jinak nejde. Pokud bychom totiž měli vše přes obrázky (což se také děje), včetně všech textů, tlačítek apod., uživatel po zobrazení e-mailu uvidí prázdnou zprávu – obrázky musí nejdříve povolit a stáhnout je.

• Všechny obrázky by měly mít display: block, někteří poštovní klienty obrázky s display: inline ořezávají na výšku
• Po centrování obrázku ho obalte elementem <center><img …></center>

Dekorativní prvky

Pokud jsou v grafice nějaké dekorativní prvky, typicky např. border-radius, snažte se je vyřešit přes obrázky. Border-radius totiž většina klientů nezobrazí.

To samé platí například pro různé rámečky, přechody, transformace apod.

Odsazení

Snažte se vyhnout všem horizontálním marginům, vertikální marginy většinou fungují pouze u odstavců a seznamů, občas u tabulek. Padding nastavujte pouze na buňky tabulky.

Někteří klienti deklarace marginů úplně vyhodí, někdy pomůže trik s nastavením vlastnosti 2x, kdy druhá vlastnost má velké počáteční písmeno. První vlastnost klient sice smaže, ale tu s velkým písmenem na začátku ponechá. Někdy k tomu je dobré také přidat deklaraci !important.

Osobně se snažím všechny marginy resetovat na 0 a vertikální odsazení jednotlivých prvků řeším pomocí tzv. spacerů. Opět se jedná o tabulku, která má jednu buňku s výškou nastavenou na tu hodnotu, jak vysokou mezeru chceme mít.

Line-height

Na Outlooku se může objevovat problém s výpočtem line height. Nefunguje zde vždy správně line height násobky (např. line-height: 1.5), místo toho je doporučeno používat procenta. Ideální nastavení napříč klienty může být takové:

Odkazy

Všechny odkazy doporučuji navrhnout tak, že budou mít podtržení. Někteří poštovní klienti totiž podtržení přidají automaticky a zajistíme tak alespoň, že se budou odkazy zobrazovat napříč klienty jednotně.

Pokud přeci jen potřebujeme mít odkazy bez podtržení, zkuste následující:

Pokud u odkazu necháme prázdný atribut href nebo ho nastavíme na #, někteří klienti daný odkaz smažou.

CTA tlačítka

V případě, že potřebujeme nakódovat CTA tlačítko, doporučuji sáhnout po nástroji Buttons.cm. Jedná se o generátor kódu, který nám zaručí správné zobrazení tlačítek napříč všemi poštovními klienty.

Obrázky na pozadí

Obecně se snažím obrázkům na pozadí pod textem v e-mailových šablonách vyhnout nebo použit celý obrázek i s textem – jedině tak můžu mít jistotu, že se zobrazí správně všude.

V některých případech lze využít nástroj Backgrounds.cm, který nám vygeneruje HTML kód, díky kterému by se mělo pozadí zobrazit správně napříč poštovními klienty.

Další tipy a triky

• Používejte pouze CSS1
• Nepoužívejte elementy <div> a <span>
• Všechny styly pište jako inline CSS u daného elementu
• Místo zkrácených zápisů CSS vlastností rozepište jednotlivé hodnoty samostatně. Místo padding: 0; pište tedy padding: 0 0 0 0;
• Vyhněte se používání CSS vlastnosti float
• Nebojte se používat deklaraci !important – v mnoha případech se jí nevyhneme
• Hover a focus stavy se neřeší
• Místo text-transform: uppercase je mnohdy lepší napsat text rovnou velkými písmeny a transformaci přes CSS se tak vyhnout
• Vše, co vložíte mezi značky <head></head> poštovní klient s největší pravděpodobností úplně zahodí
• Nepoužívejte Javascript

Testování e-mailových šablon a newsletterů

Pokud vypustíme newsletter do světa, není už cesty zpět a možnost, jak případné chyby opravit. Proto je potřeba šablony řádně otestovat ještě před samotnou rozesílkou.

1. Zobrazení ve webovém prohlížeči
Během kódování e-mailové šablony ji budeme nejspíše zobrazovat v našem webovém prohlížeči průběžně. Pokud se nám bude zobrazovat špatně zde, je téměř jisté, že v e-mailových klientech to bude ještě horší. Proto je nejprve potřeba zajistit 100% zobrazení v klasických webových prohlížečích.

2. Testování v poštovních klientech
Vždy je potřeba provést otestování na reálných klientech, které máme k dispozici. Na desktopu doporučuji mít nainstalovaný Outlook, Thunderbird, Windows klienta Pošta a MAC klienta Apple Mail. Na mobilu Outlook, Gmail, Email.cz, Apple Mail a případně jiného výchozího poštovního klienta ve vašem zařízení. Z těch webových klientů pak doporučuji testovat minimálně pro Gmail, Email.cz a Centrum.cz. Tímto dokážeme pokrýt velkou část klientů používaných v Česku.

Pro testovací rozesílku můžeme využít nástroj Putsmail od Litmus, který je dostupný zdarma. Stačí zadat cílové e-mailové adresy, předmět a vložit HTML kód s šablonou. Při testování je potřeba myslet na to, že všechny obrázky musí mít absolutní URL a směřovat na veřejně dostupný web server, odkud se budou v poštovním klientu obrázky načítat.

3. Testování v emulátorech poštovních klientů
Jak jsem už zmínil v úvodu článku, jedním z hlavních problémů je obrovské množství klientů, pro které je potřeba e-mailové šablony optimalizovat a zaručit tak jejich správné zobrazení. Není však v našich silách provést ruční testování zobrazení ve všech poštovních klientech – jednak bychom museli mít všechny nainstalované, v případě webových klientů zřízený účet v dané služby a celé by to zabralo spoustu času, který nám nikdo nezaplatí.

Proto je potřeba sáhnout po nějakém emulátoru, který nám testování zjednoduší. Oblíbenou službou, kterou mohu také doporučit, je Litmus.com.

Litmus nabízí otestování e-mailové šablony v desítkách desktopových, mobilních i webových poštovních klientů. Stačí zde vložit náš HTML kód, vybrat klienty, ve kterých chceme provést otestování a Litmus už vygeneruje náhledy zobrazení ve zvolených klientech.