Jak správně připravit HTML e-mail

Direct mailové kampaně skrývají potenciál ve smyslu oslovení a přivedení nových návštěvníků. Pravidelné newslettery jsou zase mocným prostředkem pro komunikaci s vašimi zákazníky, patří mezi nejúčinnější nástroje pro podporu loajality. Úspěch či neúspěch rozesílky vedle mnoha dalších faktorů ovlivňuje i technická realizace samotného e-mailu.

MP3 podcast Poslechněte si podcast (mluvená verze článku)
MP3, 5,4 MB, 5 min 56 sec

Plaintext nebo HTML?

Základní otázka zní, zda posílat plaintextové (čistě textové), či HTML e-maily. Nespornou výhodou těch prvních je výrazně nižší náročnost na přípravu a téměř zaručené správné zobrazení v jakémkoliv cílovém klientovi. Hodí se tedy pro časté rozesílky, kde se nevyplatí trávit pokaždé hodiny nad testováním výsledného vzhledu. Dále by se takto měly zasílat veškeré klíčové informace, jako jsou různé přístupové údaje, potvrzování provedené objednávky apod.

HTML e-maily v případě, že jsou dobře a pečlivě připraveny, mohou zase znatelně zvýšit přesvědčivost sdělení, mívají vyšší míru prokliku a často ve výsledku přinášejí lepší obchodní výsledky. Aby se ale spolehlivě zobrazily všem příjemcům a splnily tak svůj cíl, je nutné věnovat dostatek času jejich pečlivému vyladění a testování. Následující článek shrnuje základní pravidla pro technické zpracování HTML e-mailů.

Mějte kód pod kontrolou

Vyhněte se různým WYSIWYG editorům a e-mail kódujte "ručně". Jedině tak budete mít pod kontrolou všechny důležité aspekty. Některé WYSIWYG editory navíc do zdrojáku přidávají svůj podpis, což vám může přitížit v některých spam filtrech - váš mail pak místo u příjemce skončí v koši.

Tvorba HTML mailů představuje pro moderní kodéry utrpení, protože je při tom záhodno porušovat celou řadu zásad dobrého webdesignu. Je například potřeba používat tabulkový layout či inline kaskádové styly. Nenechte se strhnout platonickou touhou po čistém kódu, účel zde světí prostředky.

Nestylové stylování

Pro definici vzhledu zprávy je nejlepším řešením používat kaskádové styly. Musíte je ovšem psát přímo ke každému elementu do atributu style. Nepoužívejte nikdy definici pomocí elementu style, natož pak pomocí externího CSS souboru.

Pokud byste totiž měli stylopis oddělený a jednotlivé styly vázali přes selektory, pak se v případě webových klientů můžete dostat do kolize s jejich vlastními definicemi. Protože si toho jsou provozovatelé webmailů vědomi, obvykle se před tím preventivně brání - například ořezávají hlavičky HTML zdrojáku včetně samotné značky body. Drtivá většina dnešních klientů zase ve výchozím nastavení nestahuje žádné externí soubory.

Starší články na toto téma doporučují navíc používat i formátovací prvky jazyka HTML, jako je například značka font. V dnešní době relativně dobré podpory CSS to ale pomalu ztrácí smysl. Samozřejmě vždy přihlédněte k technickému vybavení vaší cílové skupiny, které může být v některých případech dost specifické.

Rozvržení zprávy

Styly nikdy nepoužívejte pro definici rozvržení zprávy. Absolutní pozicování či složitější floatované konstrukce nemusí fungovat a v mnoha klientech se při výsledném zobrazení rozsypou. Pokud máte jen jeden průběžný sloupec, pak ani žádné pozicování nepotřebujete. Pro více sloupců je nutné použít starý dobrý tabulkový layout.

Počítejte s tím, že typická zobrazená šířka e-mailu je výrazně menší, než je tomu u běžných webových stránek. Jako orientační maximum můžete brát 600 bodu, spíš ale ještě méně. Nejlepším řešením je definovat pružnou šířku přizpůsobující se velikosti okna. Každopádně se snažte, aby se nejdůležitější sdělení nacházela v levé části e-mailu.

Obrázky mohou pomoci

Obrázky mohou pomoci celkovému estetickému vyznění a přesvědčivosti zprávy. Nepřikládejte je ale přímo do e-mailu. Zbytečně byste tím zvětšili jeho velikost, přitížili si ve spam filtrech a navíc část klientů neumí přiložené obrázky vhodně zpracovat a zobrazit. Namísto toho uložte obrázky někam na svůj server a z e-mailu je adresujte pomocí absolutních URL.

Nikdy se ale na obrázky nespoléhejte. Drtivá většina klientů je ve výchozím nastavení nezobrazuje. Poskytněte všechny důležité informace primárně textově a obrázky berte spíš jako doplněk. Nedefinujte také u obrázků vlastnosti width a height. Pokud se obrázek nepovede stáhnout, nezůstane vám místo něj ve zobrazeném mailu zbytečné prázdné místo.

Testovat, testovat, testovat

Vyhněte se použití jakýchkoliv JavaScriptů, Flashů, vložených video či audio souborů. Jednak vám v řadě klientů stejně nebudou fungovat, navíc představují další faktory, které vám mohou uškodit ve spamových filtrech či serverových antivirech.

Nezanedbatelná část uživatelů má zakázané zobrazování HTML e-mailů, případně používá klienty, které HTML zprávy vůbec nepodporují. Proto společně s HTML verzí posílejte vždy ekvivalentní plaintextovou alternativu. Ta by měla obsahovat celé sdělení, nikoliv například jen odkaz na váš web.

Základem celého úspěchu je předem otestovaný HTML mail. Založte si účty na všech běžně používaných freemailech, nainstalujte si nejběžnější desktopové klienty. Ve všech si zkuste svůj mail zobrazit, a to i při různých nastaveních, jako jsou třeba zakázané obrázky. Pečlivě vyladěný e-mail pak můžeme bez obav rozeslat všem příjemcům.

Aplikace pro rozesílání

Běžné mailové programy, jako je například Outlook, nejsou pro hromadné rozesílky příliš vhodné. Nepodporují totiž některé důležité funkce, jako třeba posílání HTML i alternativní plaintextové verze najednou. Lepší je proto místo nich využít speciální aplikaci, případně služby některé společnosti, která se e-mailovým marketingem zabývá.

Vhodných programů existuje celá řada. Jednou z možností je vlastní instalace některé aplikace, ať už webové či desktopové. Také si od svého dodavatele můžete nechat naprogramovat rozesílací aplikaci přímo na míru, například s přímým propojením do vaší databáze klientů.

Další možností je využít buď některé již nainstalované služby anebo se obrátit na některou agenturu, která celou rozesílku se všemi souvisejícími záležitostmi zajistí za vás.

Související odkazy:


Jan Tichý, 5. listopadu 2007 11:49


Vytisknout stránku


Kontakt |  O webu H1.cz  |  RSS  |  Mapa webu

Copyright © H1.cz s.r.o., člen skupiny Ataxo