Osvědčené postupy designu e-mailů

K osvědčeným postupům designu e-mailů patří jednosloupcové rozvržení, velké plochy pro klepnutí a alternativní text u obrázků. Tato kapitola vysvětluje design e-mailů a jak ho využít na webu i v materiálech značky.

Koncept

Drobný šedý text na rušivém pozadí. Oči se namáhají už před koncem první věty. Právě proto je design e-mailů pro vaši značku důležitý. Když se rozvržení a barvy perou se sdělením, lidé odejdou, aniž by vám řekli proč.

K osvědčeným postupům designu e-mailů patří jednosloupcové rozvržení, velké plochy pro klepnutí a alternativní text u obrázků. Tato kapitola srozumitelně vysvětluje, co to znamená, proč to ovlivňuje váš web i marketing a jak to uplatnit, aniž byste se ztratili v odborných výrazech. Uvidíte také, jak do stejného obrazu zapadá design e-mailových newsletterů. Projděme si to krok za krokem.

Co design e-mailů znamená v praxi

K osvědčeným postupům designu e-mailů patří jednosloupcové rozvržení, velké plochy pro klepnutí a alternativní text u obrázků.

Mnoho odběratelů čte e-maily v telefonu v tmavém režimu.

Design e-mailových newsletterů by měl zrcadlit vzhled webu bez složitého kódu.

Jak design e-mailů uplatnit na svém webu

Důležitý text nechte mimo obrázky pro případ, že se obrázky zablokují.

Začněte jednou stránkou, třeba úvodní nebo hlavní vstupní stránkou (landing page). Nejdřív opravte největší problém a stejný postup pak přeneste na další šablony.

Tuto kapitolu spojte s designem e-mailových newsletterů jako základem a s designem brožur jako dalším krokem v tomto modulu.

Praktický kontrolní seznam na dnešek

Důležitý text nechte mimo obrázky pro případ, že se obrázky zablokují.

Když procházíte jakoukoli stránku, ptejte se, zda je design e-mailů na mobilu vidět hned při prvním posunu. Pokud ne, přeskupte sekce dřív, než začnete ladit detaily.

Uložte si snímky obrazovky před změnami a po nich, abyste poznali, co na vašem webu skutečně pohnulo výsledky u designu e-mailů.

Sdílejte tento kontrolní seznam s každým, kdo váš web upravuje, aby design e-mailových newsletterů zůstal jednotný i na nových stránkách.

Vyberte si jedno číslo, které budete tento měsíc sledovat, například čas na stránce nebo zahájená vyplnění formuláře. Změny designu pak svážete s výsledky podnikání, a ne jen s vkusem.

Jak toto téma souvisí s celou vaší značkou

Vizuální rozhodnutí málokdy platí jen pro jednu stránku. Design e-mailových newsletterů by měl zrcadlit vzhled webu bez složitého kódu.

Vaše příspěvky na sociálních sítích, e-maily i tištěné materiály by měly opakovat stejnou hierarchii, barvy a pravidla písma jako váš web.

Když se vizuální podoba značky rozchází, zákazníci cítí nenápadný nesoulad, i když nedokážou říct proč.

Použijte design brožur a porovnejte poznatky s příbuznou kapitolou v tomto modulu.

Mnoho odběratelů čte e-maily v telefonu v tmavém režimu.

Časté otázky, které lidé přehlížejí

Vedlejší pojmy jako design e-mailových newsletterů a marketingový design vám pomohou najít hlubší příklady a porovnat svou práci s běžnými standardy.

Design e-mailových newsletterů by měl zrcadlit vzhled webu bez složitého kódu.

Zapište si jednu změnu před a po, kterou tento týden otestujete na živé stránce. Malé změřené úpravy porazí vágní plány.

Když váš tým používá společnou slovní zásobu o designu e-mailů, ubude kol úprav s designéry a agenturami.

Nástroje, které usnadní vizuální úpravy

K řadě úprav rozvržení a stylu nepotřebujete vlastní kód. Vizuální editor vám umožní upravit mezery, barvy a písmo a přitom si prohlížet náhled pro mobil i počítač.

WEMASY obsahuje Tvůrce webů s vizuální úpravou, takže změny zveřejníte, aniž byste u každé drobnosti čekali na vývojáře. Až budete chtít využít, co jste se naučili, otevřete Tvůrce webů.

Až změny zveřejníte, znovu si projděte design e-mailových newsletterů a design webových bannerů, ať si celý modul drží pohromadě.

Teď máte k designu e-mailů funkční optiku. Použijte ji, když kontrolujete web, schvalujete marketingové podklady nebo zadáváte práci designérovi. Pokračujte kapitolami design webových bannerů a design brožur, ať v tomto modulu neztratíte tempo.

Učit se design e-mailů je postupná dovednost. Vraťte se k této kapitole poté, co nasadíte jedno vylepšení, aby se poznatky z čtení proměnily ve zvyk. Malé opakované kontroly porazí snahu nacpat si všechna pravidla najednou. Pište si poznámky, co zabralo u vašeho publika, aby další úprava šla rychleji.

Často kladené otázky

Jak dlouho trvá zlepšit design e-mailů?

Většina malých firem uvidí jasnější stránky během několika soustředěných sezení, jakmile uplatní základy z této kapitoly. Začněte úvodní stránkou a stejná pravidla pak přeneste na stránky služeb a kontaktů.

Potřebujete designéra pro design e-mailů?

Designér pomůže u složitých rebrandingů, ale řadu úprav kolem designu e-mailů zvládnete sami, jakmile víte, na co se dívat. Pro související rady použijte vedle této kapitoly design e-mailových newsletterů.

Může vám WEMASY pomoci s designem e-mailů na vašem webu?

WEMASY obsahuje v Tvůrci webů vizuální editor, takže rozvržení, barvy a písmo upravíte bez kódu. Otevřete Tvůrce webů, upravte šablony a zkontrolujte změny na mobilu.

Jaká je nejčastější chyba v designu e-mailů?

Lidé se snaží opravit všechno najednou místo jedné stránky po druhé. Vyberte si jednu prioritu, například čitelnost nebo kontrast, a pak se podívejte na design webových bannerů pro další zlepšení.

Jak souvisí design e-mailů s SEO?

Jasná vizuální hierarchie a čitelné písmo udrží návštěvníky na stránce déle, což podporuje signály zapojení, které vyhledávače sledují. Nejlepších výsledků dosáhnete, když úpravy designu spojíte s dobrou strukturou obsahu.

Co se učit dál po designu e-mailů?

Pokračujte kapitolami design e-mailových newsletterů a design webových bannerů v této knize, abyste pro svou značku online vybudovali ucelený vizuální systém.

Využijte to hned
na vlastním webu.

Začněte zdarma s WEMASY a postavte si web za pár minut.