Hlavní navigace

Posíláte maily v HTML? Měli byste vědět, že je to tak trochu věda

 Autor: Isifa
Daniel Dočekal 30. 7. 2015

E-mailový marketing je bezva věc, ale co když zapomenete na to, že e-maily v HTML mohou být pořádně komplikovaná záležitost?

HTML E-mail, takhle nějak to vypadá na počátku, než to někam odešlete

HTML E-mail, takhle nějak to vypadá na počátku, než to někam odešlete

E-mailový marketing je jedním z nejstarších nástrojů  internetového marketingu. A pokud se dělá správně, je jedním z dobře fungujících nástrojů. Potřebujete zvládnout řadu profesí, ale ve výsledku se to může vyplatit. 

testDobré texty od copywritera, dobré fotky produktů i nějaké ty ilustrační, kvalitní databáze (zapomeňte na to, že si někde koupíte rozesílku spamu) a na ni ideálně navázané dobré cílení, segmentace. Připočítejte sledování konverzí, propojení na PPC (přes remarketing či retargeting) a dobré propojení s e-shopem (pokud zrovna něco prodáváte).

Jenže, tohle všechno můžete ovládat, a přesto můžete tvrdě narazit. Pokud podceníte to, jak budete e-maily vytvářet, může se stát, že sice odešlete perfektně „vymazlený“ (ano, tohle hrozné slovo je v roce 2015 opravdu součástí slovníků marketérů) e-mail, který ovšem u příjemce bude vypadat zcela jinak. A všechno to ostatní, co máte perfektně připravené, nebude fungovat.

Posílat HTML e-maily či neposílat?

V roce 2015 už je tato otázka vlastně docela dost nepatřičná, dnes prostě HTML maily posílat potřebujete, bez nich nedáte dohromady rozumně vypadající nabídku služeb či zboží. Neznamená to ale, že můžete vzít zvyklosti z tvorby webu a použít je na vytvoření nějakého toho HTML mailu. 

Podobné představy jsou navíc běžné – ideálně, aby se to animovalo, bylo tam video, aby bylo možné sledovat všechno, co tam lidé dělají, aby se vědělo, že si to přečetli, kdo si to přečetl, kdy si to přečetl. Narvat tam co nejvíce skriptů, ještě lépe nějaký ten Flash.

HTML E-mail po poslání na Seznam.cz. Na první pohled budete mít co řešit.

HTML E-mail po poslání na Seznam.cz. Na první pohled budete mít co řešit.

Ve skutečnosti e-mailingový marketing neustále naráží na to, že příjemci mají desítky velmi různorodých míst, kde e-mail čtou. Ať už jde o různé poštovní klienty (Outlook, Thunderbird, a řada dalších), webové služby (Seznam, Centrum, Gmail, Yahoo, Hotmail, atd) či mobilní zařízení (mobily, tablety).

HTML E-mail a Gmail? Opět nedostatky, jiné než u Seznam.cz. A nejinak tomu bude i u dalších služeb.

HTML E-mail a Gmail? Opět nedostatky, jiné než u Seznam.cz. A nejinak tomu bude i u dalších služeb.

Setkáváme se s tím skoro každý den – grafik připraví klientovi šablonu pro jeho nový e-mail, dodá ji v HTML a výsledek je moderní, krásný… a nepoužitelný. Návrh a kódování pro e-mail má svá velmi striktní pravidla a zároveň mnoho výjimek pro jednotlivé e-mailové klienty,“ upozorňuje Jakub Olexa ze společnosti Mailkit.eu

Paradoxem tvorby e-mailingových kampaní je, že případné neúspěchy v tvorbě dobře vypadajících a fungujících HTML mailů vedou k tomu, že vznikne čistě grafický e-mail. Někdo prostě vezme ideálně vypadající obrázek z Photoshopu, rozseká ho na kousky, některé udělá klikací a pak to pošle. Což v řadě případů narazí na to, že příjemce neuvidí nic – dokud si nestáhne obrázky, nebo dokud si to neprohlédne někde jinde.

Připravit kvalitní šablonu a testovat a testovat

HTML E-mail na Androidu (starší verze 4.2) dopadne ještě hůř. Tady už je vidět, že nedostatek prostoru na šířku může být poměrně fatální.

HTML E-mail na Androidu (starší verze 4.2) dopadne ještě hůř. Tady už je vidět, že nedostatek prostoru na šířku může být poměrně fatální.

Pokud chcete dělat e-mail marketing dobře a dlouhodobě, potřebujete jednu zásadní věc – připravit si (nebo nechat si připravit) kvalitní šablonu HTML mailu. Což bude hlavně vyžadovat otestování v řadě cílových systémů. Výrazně vám v tom může pomoci to, že profesionální systémy na rozesílání e-mailů umí s něčím takovým pomoci – umí vygenerovat náhledy na to, jak vámi připravený e-mail bude vypadat. Umí to již zmíněný Mailkit.eu stejně jako v Česku další poměrně rozšířený Maichimp.

Podceňovat to, že e-mail u příjemce bude vypadat „divně“, je chyba. Má to dost zásadní vliv na konverzi a na to, jestli vůbec e-mail zaujme. Takže i pokud dodržíte všechna pravidla (správné texty, správná barevnost, umístěné call-to-action prvků, cílení, atd), může „rozsypaný“ e-mail přinést více problémů než užitku.

E-mail a HTML jsou a nejdou dohromady

Jak dopadnou e-maily v některých klientech a systémech, můžete vidět na několika podstatných příkladech vložených do článku. Je k tomu nutno dodat, že připravená šablona je poměrně jednoduchá a vlastně by „měla“ přinést poměrně bezpečně bezproblémový výsledek. Jenže, jak můžete vidět sami, ne vždy tomu tak je.

Ve většině případů naráží tvorba HTML mailů na neznalost toho, jak cílová platforma takovéto maily zobrazuje – narazíte na řadu omezení, zejména v tom, že některé prvky se prostě zobrazovat nebudou (o nespouštění JavaScriptu a dalších tomu podobných věcí ani nemluvě). Ale také na to, že zobrazení vlastního mailu ovlivní tamní styly, šířka dostupného prostoru či již zmíněné záměrné vynechání některých prvků, Zásadní omezení potkáte i při používání vlastních kaskádových stylů (CSS) a je nutné správně používat obrázky (zejména tak, že budou umístěné někde, kde je příjemci snadno a rychle stáhnout).

HTML E-mail v Office 365 bude mít také chybičky, třeba v obtékání a zarovnání obrázku.

HTML E-mail v Office 365 bude mít také chybičky, třeba v obtékání a zarovnání obrázku.

HTML E-mail může ale dopadnout ještě hůře, třeba v Ooutlooku 2013 (ale podobně to dopadne v Outlooku 2010 i 2007)

HTML E-mail může ale dopadnout ještě hůře, třeba v Outlooku 2013 (ale podobně to dopadne v Outlooku 2010 i 2007)

Čas od času se navíc podmínky změní. Třeba tím, že Microsoft přestane pro práci s HTML maily používat Internet Explorer a místo toho k tomu použije vykreslovací jádro z Wordu. Nebo si nějaký ten hodně používaný freemail prostě nasadí novou verzi.

Vámi vytvořený e-mail tak na cílovém místě může přijít (a většinou přijde) o všechno, co je před (a za) značkou <BODY>, CSS bude fungovat v zásadě hlavně pouze to, které je použité jako inline (součást prvků). Většinou stejně skončíte na používání tabulek a formátování s pomocí GIFů (vyhnout se 1×1 GIFu je mimochodem docela dobrý nápad). Zapomeňte rovnou na Javascript a u obrázků si velmi pečlivě hlídejte, jestli za nimi nenecháváte odřádkování. Zapomeňte i na obrázky na pozadí, ty se v řadě míst vůbec nezobrazí, byť background u tabulek má šanci projít.

Pokud zapomenete na důsledné uvádění velikostí u obrázků a doplnění popisku v podobě alt informace, tak se vám to také vymstí. HTML e-maily navíc většinou budete navrhovat pro zobrazení na zhruba 600 bodů šířky, ale s mobilními telefony a dalšími věcmi i tento rozměr může být příliš široký (tam musíte počítat spíš s 320 body a podle toho upravit styly). Responzivní HTML e-maily se sice „dají“ udělat, ale tam už budete muset přistoupit na velké množství omezení.

Pokud tohle všechno zvládnete, tak vám mimochodem hrozí ještě to, že některé antispamové filtry váš HTML e-mail budou považovat za spam. Částečně tomu pomáhá to, že zároveň s HTML verzí posíláte i čistě textovou verzi. Ale můžete tomu trochu předejít i tím, že nebudete používat věci, které obvykle dělají spammeři – třeba již zmíněný 1×1 bod velké GIFy, ale také velké obrázky.

Bát se HTML e-mailů, či nebát?

Trochu záludná otázka, protože HTML e-mailů byste se neměli bát, ale měli byste vědět, že pokud si e-mail „napíšete“ (vytvoříte) v Outlooku nebo Gmailu, tak ho za správně vytvořený HTML e-mail považovat nemůžete. Raději ani nemluvě o těch, co si e-mailing vytvoří třeba právě ve Wordu. A pak se už jenom diví.

Yahoo si s HTML E-mailem taky moc dobře neporadilo. A to přitom šlo o jednoduchou šablonu, která by neměla mít příliš problémů.

Yahoo si s HTML E-mailem taky moc dobře neporadilo. A to přitom šlo o jednoduchou šablonu, která by neměla mít příliš problémů.

Konec dobrý, všechno dobré. Původní šablona prošla optimalizací a HTML E-mail nakonec funguje všude prakticky stejně. Dokonce i v Outlooku 2013.

Konec dobrý, všechno dobré. Původní šablona prošla optimalizací a HTML E-mail nakonec funguje všude prakticky stejně. Dokonce i v Outlooku 2013.

HTML e-mailing je vhodné používat tam, kde nestačí prostý text – což znamená, že mnohdy stačit bude. 

Třeba právě proto, že posíláte něco tak jednoduchého, že by bylo zbytečné to obalovat věcmi. Nebo tak důležitého, že to vyžaduje, aby se čtenář nerozptyloval. Čistým textovým mailem navíc šetříte čas (sobě i příjemci) a také přenesená data.

Právě velikost HTML e-mailů je také jednou z hodně podceňovaných vlastností. 

Vaši příjemci na mobilech a mobilním internetu vás prostě nebudou mít v oblibě, pokud jim budete posílat e-maily se stovkami kilobajtů obrázků. Nejenom proto, že jim dopomůžete k vyčerpání FUP, ale také proto, že se mohou viditelně pomalu natahovat. A to, věřte, nechcete.

Další dobrá rada týkající se tvorby mailů v HTML je tedy ta, že byste měli důsledně prověřit, jestli posílané obrázky jsou optimalizovány na velikost. Nebo to dopadne tak, že vám někde zůstane pár stovek kilobajtů či dokonce pár megabajtů.

Bát se? Nebát? Jednoznačně nebát, ale musíte si být jistí, že skutečně dodržíte potřebné podmínky k tomu, aby vaše HTML e-maily dobře fungovaly. 

Našli jste v článku chybu?

30. 7. 2015 9:41

Starous (neregistrovaný)

Posíláte spam ? Nedělejte to .

30. 7. 2015 8:22

Michal Kubeček (neregistrovaný)

Posíláte maily v HTML? Nedělejte to.

Vitalia.cz: Vláknina: Rozpustná, nebo nerozpustná?

Vláknina: Rozpustná, nebo nerozpustná?

Podnikatel.cz: Prodává přes internet. Kdy platí zdravotko?

Prodává přes internet. Kdy platí zdravotko?

Podnikatel.cz: Přehledná titulka, průvodci, responzivita

Přehledná titulka, průvodci, responzivita

Podnikatel.cz: K EET. Štamgast už peníze na stole nenechá

K EET. Štamgast už peníze na stole nenechá

Vitalia.cz: Jak koupit Mikuláše a nenaletět

Jak koupit Mikuláše a nenaletět

DigiZone.cz: Recenze Westworld: zavraždit a...

Recenze Westworld: zavraždit a...

120na80.cz: Bojíte se encefalitidy?

Bojíte se encefalitidy?

Podnikatel.cz: Zavře krám u #EET Malá pokladna a Teeta?

Zavře krám u #EET Malá pokladna a Teeta?

Root.cz: Telegram spustil anonymní blog Telegraph

Telegram spustil anonymní blog Telegraph

120na80.cz: Pánové, pečujte o svoje přirození a prostatu

Pánové, pečujte o svoje přirození a prostatu

Vitalia.cz: Tesco: Chudá rodina si koupí levné polské kuře

Tesco: Chudá rodina si koupí levné polské kuře

Lupa.cz: Google měl výpadek, nejel Gmail ani YouTube

Google měl výpadek, nejel Gmail ani YouTube

120na80.cz: Rovnátka, která nejsou vidět

Rovnátka, která nejsou vidět

Vitalia.cz: Znáte „černý detox“? Ani to nezkoušejte

Znáte „černý detox“? Ani to nezkoušejte

Měšec.cz: U levneELEKTRO.cz už reklamaci nevyřídíte

U levneELEKTRO.cz už reklamaci nevyřídíte

120na80.cz: 5 poporodních problémů a jejich řešení

5 poporodních problémů a jejich řešení

Vitalia.cz: Chtějí si léčit kvasinky. Lék je jen v Německu

Chtějí si léčit kvasinky. Lék je jen v Německu

Měšec.cz: Platby do zahraničí: pozor na tučné poplatky

Platby do zahraničí: pozor na tučné poplatky

Měšec.cz: Air Bank zruší TOP3 garanci a zdražuje kurzy

Air Bank zruší TOP3 garanci a zdražuje kurzy

Vitalia.cz: To není kašel! Správná diagnóza zachrání život

To není kašel! Správná diagnóza zachrání život