Designujte e-maily správně

Obrázky

Používejte, ale nepřehánějte

Obrázky jsou důležitou součástí zpráv, jsou mocnou silou, která pomáhá směrovat pozornost uživatele a vést ho ke konverzi. Pokud jsou použité správně.

Podle některých výzkumů až 43 % příjemců nevidí obrázky při prvním načtení zprávy. V tom lepším případě si je načtou, pokud je zpráva zajímá a v tom horším si je prostě nezobrazí. Celoobrázkové e-maily se v takovém případě stávají naprosto neúčinnými a zbytečně se za ně jen utrácejí peníze. Zpráva se i při doručení k příjemci prostě nedostane.

Také antispamové systémy počítají poměr obrázků k textům a pokud je příliš vysoký, přidávají mínusové body, čímž snižují doručitelnost zprávy.

Důležitou zprávu napište do textu (nebo aspoň do Alt-textu)

Často se setkáváme se zprávami, které mají důležité informace vepsané v obrázcích. Obrázky však nemají být nositeli informací, ale podporou pro texty.

Alt-texty jsou skvělou příležitostí, jak:

1. nalákat lidi na stažení obrázků,
2. předat informaci, která je na obrázku.

Alt-texty totiž můžete nastylovat a tím se alespoň trochu přiblížit tomu, jak by měla zpráva vypadat s obrázky.

Také doporučujeme vždy v rámci <img> tagu stanovovat velikost obrázků, aby vymezily v layoutu své místo a zpráva se v případě, že se obrázky nenačtou, nerozpadne.

První obrázek

První obrázek stojí často v cestě úspěchu e-mailové kampaně. Pokud si adresát klikne na zprávu a v náhledovém okně jeho e-mailového klienta se objeví kousek nicneříkajícího obrázku (který se někdy ani nezobrazí), nic ho nepřesvědčí o tom, aby si zprávu přečetl celou a hned kliká na další.

Do náhledového okna se totiž vejde pouhých 300 až 500 pixelů ze začátku e-mailu. Pokud se v tomto prostoru objeví něco, co člověka zaujme, má pak motivaci k přečtení celé zprávy. Proto je dobrý nápad umístit tam textový nadpis zprávy.

Fonty

Buďte web-safe

Při designování zpráv mějte na paměti, že fonty, které v e-mailu použijete, musejí být buďto již nainstalované v počítači příjemce nebo umístěné někde na webu. Doporučujeme proto používat tzv. bezpečné fonty:

Webové fonty (např. Google fonts) nepodporují zdaleka všichni e-mailoví klienti, proto je doporučujeme používat jako příjemné zpestření pro ty, které je dokáží zobrazit.

Výška a šířka, responzivita

Šířka

Nejčastěji používanou šířkou obrazovky je dnes v případě osobních počítačů 1399 pixelů a v případě mobilních telefonů je to 320 až 360 pixelů.

Šířka, ve které se zobrazují e-mailové zprávy na počítačích je prakticky šířkou náhledového okna e-mailového klienta. V současné době lze říci, že bezpečná šířka je 600-650 pixelů, pokud máte chuť experimentovat, doporučujeme nepřekračovat 950 pixelů, ale nezapomeňte, že okno pro zobrazení zprávy není nikdy 100% šířky obrazovky.

Výška

Výška závisí na účelu a stylu zprávy. Může být i předmětem A/B testování.

Responzivita

Podle posledních průzkumů je přes 50 % e-mailových zpráv otevíraných na mobilních zařízeních. Na tyto uživatele bychom rozhodně neměli zapomínat, protože přes 40 % z nich označí zprávu za spam, pokud se jim nezobrazí správně na mobilu. A až 80 % z nich tyto zprávy okamžitě maže.

Šablona e-mailu by tedy měla být nakódována tak, aby byla na menších obrazovkách stále přehledná a čitelná. Čtenář nechce při čtení zprávy otáčet displayem a zoomovat. Prostě si chce zprávu přečíst a my bychom mu to měli co nejvíce ulehčit. Proto v mobilní verzi někdy vyhazujeme celé obrázky, některé zmenšujeme nebo měníme rozložení prvků na stránce, aby se texty nezmenšily a informace nezalezly “za roh”.

Dnes existuje celá řada přístupů ke kódování responzivních šablon. Liší se ve složitosti kódování a v podpoře e-mailovými klienty. Proto doporučujeme si zjistit ve kterých prohlížečích si bude většina Vašich adresátů zprávu otevírat a podle toho si zvolit.

Volání do akce

Pokud chceme, aby adresát něco udělal, musíme mu to říct. CTA (Call-To-Action) prvky jsou tlačítka nebo odkazy v textu, například “Zjistěte podrobnosti”.

CTA na začátku zprávy mají řádově větší proklikovost, než ty umístěné dále, proto doporučujeme jako první CTA vybrat to nejdůležitější a dát si záležet s jeho provedením. Můžeme zde zkusit i A/B testování. Testovat lze znění textu, barva tlačítka nebo umístění CTA v rámci zprávy.

S množstvím CTA prvků to nepřeháníme, může totiž dojít k rozhodovací paralýze - uživatel má tolik možností, že si nakonec nevybere žádnou. Nejúspěšnější e-mailové kampaně mají jeden jediný cíl a celá zpráva a všechny prvky v ní tento cíl podporují.

Tlačítka pokud možno děláme textová, nikoliv obrázková, aby se nám zobrazila za všech okolností.

Specifickým CTA je odkaz na on-line verzi e-mailu. Umisťujeme jej do hlavičky nebo patičky zprávy.

Tipy na závěr

• Při designování myslete na to, že základní technologií pro kódování šablon jsou staré dobré tabulky (čili <table>).
• Design by neměl mít malé, překrývající se prvky - upřednostňujeme čistý design bez zbytečných složitostí - lépe se pak čte, hlavně v responzivní verzi pro malé displeje.
• Udržujte přiměřenou vzdálenost mezi jednotlivými prvky - vzdušný design zlepšuje orientaci pro lidské oko.
• Aktivní prvky (linky, tlačítka) by měly být dostatečně velké, aby se pohodlně klikaly - tedy žádné odkazy např. na textu “zde”.