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.

WT100

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?
Vitalia.cz: Tohle jsou nejlepší česká piva podle odborníků

Tohle jsou nejlepší česká piva podle odborníků

Lupa.cz: Patička e-mailu závazná jako vlastnoruční podpis?

Patička e-mailu závazná jako vlastnoruční podpis?

Podnikatel.cz: Udělali jsme velkou chybu, napsal Čupr

Udělali jsme velkou chybu, napsal Čupr

Vitalia.cz: Dostal malý pivovar ze Slovenska do Tesca

Dostal malý pivovar ze Slovenska do Tesca

DigiZone.cz: Nova opět stahuje „milionáře“

Nova opět stahuje „milionáře“

Lupa.cz: Další Češi si nechali vložit do těla čip

Další Češi si nechali vložit do těla čip

DigiZone.cz: ČT začne vysílat z Hradce Králové

ČT začne vysílat z Hradce Králové

Podnikatel.cz: Kalousek chce odklad EET. Předvolební tah?

Kalousek chce odklad EET. Předvolební tah?

120na80.cz: Hrbatá prsa aneb mýty o implantátech

Hrbatá prsa aneb mýty o implantátech

Podnikatel.cz: Babišovy firmy a registr smluv. Co odhalil?

Babišovy firmy a registr smluv. Co odhalil?

Podnikatel.cz: Byla finanční manažerka, teď cvičí jógu

Byla finanční manažerka, teď cvičí jógu

Vitalia.cz: Test dětských svačinek: Tyhle ne!

Test dětských svačinek: Tyhle ne!

Podnikatel.cz: Babišovi se nedá věřit, stěžovali si hospodští

Babišovi se nedá věřit, stěžovali si hospodští

Lupa.cz: Kde leží hardwarový pupek světa?

Kde leží hardwarový pupek světa?

DigiZone.cz: Pure má tři nové přijímače DAB

Pure má tři nové přijímače DAB

Vitalia.cz: Jak Ondra o astma přišel

Jak Ondra o astma přišel

DigiZone.cz: Parlamentní listy: kde končí PR...

Parlamentní listy: kde končí PR...

Vitalia.cz: Když bílkoviny, tak jíme ty nekvalitní

Když bílkoviny, tak jíme ty nekvalitní

DigiZone.cz: Digi2GO: výborný základ, ale...

Digi2GO: výborný základ, ale...

120na80.cz: Co je padesátkrát sladší než cukr?

Co je padesátkrát sladší než cukr?