Designujte e-maily správně

Grafický design newsletterů je něco, čemu se nelze vyhnout, nějak to prostě vypadat musí. Proto je lepší to rovnou udělat správně. Design totiž ovlivňuje nejen celkový dojem ze samotného newsletteru, ale také doručitelnost a hlavně pak konverze.

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:

Andale Mono
Arial
Arial Black
Book Antiqua
Comic Sans MS
Courier New
Georgia
Helvetica
Impact
Tahoma
Terminal
Times New Roman
Trebuchet MS
Verdana


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”.