Design e‑mailu: jak na písma, barvy, tlačítka a přístupnost

Design e-mailu zahrnuje vše, co ovlivňuje vizuální podobu a čitelnost zprávy: velikost písma, kontrast barev, tvar tlačítek i přístupnost pro různá zařízení a e-mailové klienty. Každý tento detail rozhoduje o tom, zda vaše sdělení přinese požadované výsledky. Tento článek vám ukáže, co v e-mailovém designu skutečně funguje a proč.

Struktura, která čtenáře provede až k nákupu

Dobrý e‑mail má jasné pořadí prvků. Každý z nich plní konkrétní úkol.

Předmět je první text, který zákazník vidí a rozhoduje o tom, zda si e‑mail otevře nebo ho smaže. Optimální délka je 30–50 znaků. Gmail na mobilu zobrazí jen prvních přibližně 35 znaků. Klíčové sdělení patří tedy na začátek věty.

Pre-header doplňuje předmět v inboxu. Dejte si záležet, aby předmět rozvíjel, nikoliv ho opakoval. Ideální délka je 85–100 znaků. Na mobilu se zobrazí jen prvních 40, takže nejdůležitější sdělení dejte opět na začátek.

Header (záhlaví) obsahuje typicky logo a případně přehlednou navigaci s maximálně 3–4 položkami. Více položek zákazníka spíše zmate.

Obsah tvoří páteř e‑mailu – hero obrázek, nadpis, krátký text, výzva k akci (CTA) a produktová nabídka.

Footer (zápatí) uzavírá e‑mail kontaktními údaji, odkazem na odhlášení a odkazy na sociální sítě. Odhlašovací odkaz není jen slušnost, jde zároveň o zákonnou povinnost.

Podrobný úvod do e‑mail marketingu získáte v tomto článku: E-mail marketing pro e-shopy: kompletní průvodce.

Jeden sloupec vítězí

Jednosloupcový layout je nejspolehlivější variantou. V rámci jednoho hlavního sloupce samozřejmě můžete vkládat např. bloky s produkty (většinou 2 až 3 produkty vedle sebe) – jedná se o responzivní mřížku uvnitř jednoho kontejneru, která se na mobilu automaticky přeskládá pod sebe. Šablona by neměla přesáhnout 600 px na šířku – právě nad touto hodnotou se u některých klientů (např. Outlooku) přestane zobrazovat barevné pozadí.

Email jako součást budování značky

Konzistentní design e‑mailů je součást budování značky. Zákazník, který dostane desátý e-mail od vašeho e‑shopu, by ho měl poznat ještě předtím, než si přečte jméno odesílatele – podle barev, stylu tlačítek, rozmístění loga nebo způsobu, jakým pracujete s fotografiemi. Tato vizuální konzistence posiluje důvěru a zapamatovatelnost značky dlouhodobě.

V praxi to znamená držet se v e‑mailech stejné barevné palety jako na webu, používat stejné písmo (nebo jeho bezpečnou alternativu), a nepodléhat pokušení každou kampaň vizuálně předělat od základu. Šablona, která vypadá pokaždé trochu jinak, zákazníkovi ztěžuje orientaci a oslabuje dojem ze značky.

Typografie: čitelnost není detail

Písmo v e‑mailu funguje trochu jinak než na webu. Ne všichni e‑mailoví klienti webfonty podporují – Gmail nebo Outlook zobrazí místo vašeho brandového písma vlastní výchozí font. Proto je dobré vždy nastavit i záložní variantu, tedy alternativní bezpečný font.

V Leadhubu nastavíte primární i záložní font přímo v editoru šablony.

Velikost a řádkování

Minimální velikost textu pro tělo e-mailu je 14 px, ideálně 16 px. Menší písmo snáze přehlédnete, hůře se čte na mobilu a část příjemců ho vůbec nepřečte. Nadpisy by měly mít alespoň 22–24 px a opravdu formát nadpisu, ne pouze zvětšený nebo tučný základní text.

Stejně důležité jako velikost je řádkování (line‑height). Doporučuje se 1,4–1,5 násobek velikosti písma. Text pak lépe „dýchá“ a není vizuálně přetížený.

Proč se vyhýbat „Caps Lock“ textům

Velká písmena snižují čitelnost. Slova totiž ztrácejí charakteristický tvar daný dotahy (tedy částmi písmen, které přesahují střední výšku nebo naopak jdou pod účaří). Díky dotahům náš mozek rozpoznává slova rychle.
Text v „Caps Lock“ proto čteme pomaleji. Navíc některé screen readery (asistenční software, který převádí vizuální obsah displeje do alternativní podoby) interpretují slova zapsaná velkými písmeny jako zkratky a hláskují je po písmenech. Pro zdůraznění použijte raději tučné písmo.

Vyzkoušejte jednoduchou tvorbu e‑mailů díky drag & drop editoru v Leadhubu.

Barevné schéma: méně je více

V e‑mailovém designu neplatí, že musíte otrocky zkopírovat celý vizuální styl webu. Klíčem k úspěchu je funkční adaptace vaší brand identity. Oborovým standardem je práce s omezenou paletou, kde dominantní roli hraje čisté, neutrální pozadí a vysoce kontrastní barva pro text. Naprosto zásadní je pak striktní konzistence akcentní barvy. Pokud pro Call To Action (CTA) prvky napříč všemi kampaněmi vyhradíte jednu konkrétní barvu z vašeho brand manuálu, vytvoříte v mysli zákazníka silný vizuální kotvící bod. Čtenář pak podvědomě ví, kam kliknout, aniž by musel e-mail složitě skenovat.

Kontrast jako základ čitelnosti

Nedostatečný kontrast textu vůči pozadí je jednou z nejčastějších chyb. Podle WCAG 2.1 (mezinárodní standard pro přístupnost webu) by měl poměr kontrastu u běžného textu dosahovat alespoň 4,5:1, u velkého textu (od 24 px nebo tučné od 18,66 px) alespoň 3:1.

Tmavě šedý text (#333333 na bílé) splňuje standard s přehledem – poměr přes 12:1. Světle šedý text (#999999 na bílé) má jen 2,8:1 a na standard nestačí.

Kontrast zkontrolujete např. v nástroji WebAIM Contrast Checker – stačí zadat HEX kódy textu a pozadí.

Dark mode

Podle globálních dat společnosti Litmus dává tmavému režimu (Dark Mode) přednost více než třetina uživatelů. Dává tedy čím dál větší smysl na tyto uživatele při tvorbě newsletterů myslet.

Základní pravidlo pro dark mode:

• Transparentní grafika s pojistkou: Loga a ikony ukládejte výhradně ve formátu PNG s průhledným pozadím. K tmavým prvkům (např. černému logu) přidejte neznatelný světlý polostín nebo tenký rámeček, aby v tmavém režimu nezmizely.

Tlačítka a CTA

Výzva k akci je nejdůležitější prvek každého e-mailu. Věnujte mu odpovídající péči.

Velikost pro mobil

Velikost tlačítka hraje hlavní roli na mobilech, kde se uživatel musí jednoduše trefit palcem ruky. Podle mobilních standardů společností Apple a Google by výška tlačítka měla být minimálně 44 až 48 px (ideálně až 56 px u hlavních konverzních prvků) s dostatkem prázdného prostoru kolem. Pokud je tlačítko příliš malé, utopené v textu nebo nalepené na jiný odkaz, riskujete tzv. „fat‑finger syndrom“. Uživatel se buď překlikne, nebo klikání frustrovaně vzdá. To jsou nejčastější příčiny, proč lidé na mobilech nekonvertují.

Bulletproof tlačítko – jen z HTML/CSS

Nikdy nevkládejte CTA jako obrázek. Pokud e-mailový klient obrázky zablokuje, vaše tlačítko prostě zmizí. Používejte tzv. bulletproof tlačítko – živý HTML/CSS prvek, který se zobrazí vždy. Leadhub toto řeší za vás, stačí využít příslušný blok z levého menu v editoru e‑mailu.

Text v tlačítku

Používejte konkrétní, akční formulace. Snažte se vyhnout „Klikněte zde“. Lepší varianty: „Zobrazit nabídku“, „Získat slevu", „Vybrat produkt“.
Jedno primární CTA v e‑mailu vede k jasnějšímu rozhodnutí zákazníka. Druhé CTA (pokud je nutné) dejte až ke konci e‑mailu a nezapomeňte je přidat i k jednotlivým produktům, které do e‑mailu vkládáte. Zde zpravidla bývá CTA součástí produktové šablony.

Barva tlačítka

Důležitější než konkrétní barva je kontrast a konzistence. Tlačítko musí být viditelné na pozadí e‑mailu a text v tlačítku musí splňovat kontrastní poměr 4,5:1. Barva, kterou použijete v prvním e‑mailu, by měla být stejná v pátém i padesátém. Zákazníci si ji zapamatují jako signál akce.

Přístupnost: e‑mail pro každého

Přístupný e‑mail čtou snáze i lidé bez postižení, například pokud mají menší displej, horší osvětlení nebo rozptýlení z okolí. Investice do přístupnosti se tak vyplácí pro všechny.

Alt texty u obrázků

Každý obrázek musí mít alt atribut. Pokud e‑mailový klient obrázky nezobrazí nebo pokud zákazník používá screen reader, alt text je jediné, co z obrázku zůstane.

Pravidla:

• Informativní obrázky (produkty, bannery) – popište, co obrázek sděluje, ne jak vypadá. Místo „fotografie bílých tenisek“ raději „Bílé tenisky Nike Air Max – nyní se slevou 20 %“.
• Nikdy nezačínejte alt text slovy „obrázek“ nebo „fotografie“ – screen reader to říká sám.

Sémantické nadpisy

Používejte skutečné HTML nadpisy (<h1>, <h2>), nikoli jen zvětšené nebo tučné písmo. Jeden <h1> na e-mail, nadpisy nepřeskakujte. Uživatelé screen readerů se podle nadpisů orientují v obsahu. Je to jejich způsob, jak „naskenovat“ e‑mail stejně, jako my skenujeme vizuálně.

Nespoléhejte jen na barvu

Barva nesmí být jediný nositel informace. Příklad: odkaz v textu by neměl být odlišen pouze barvou, přidejte tedy podtržení nebo jiný vizuální signál. Poruchou barvocitu trpí přibližně 8 % mužů a 0,5 % žen. To není zanedbatelný segment zákazníků.

Popisné texty odkazů

Vyhněte se výrazům „klikněte zde“ nebo „více“. Screen readery čtou seznam odkazů v e‑mailu mimo kontext ostatního textu, tedy každý odkaz musí dávat smysl sám o sobě. Místo „zde“ napište „Zobrazit celou kolekci“.

Shrnutí: checklist před odesláním

Než zmáčknete odeslat, projděte si tento seznam ✅:

• Šablona je jednosloupcová, max. 600 px na šířku
• Tělo textu je 16 px, nadpisy 22–24 px, řádkování min. 1,4
• Barvy jsou 2–3, kontrast textu vůči pozadí ≥ 4,5:1
• Primární CTA je bulletproof HTML tlačítko, výška pro mobil min. 44 px
• Každý obrázek má alt text
• Předmět má do 50 znaků, klíčové sdělení je v prvních 30
• Pre‑header doplňuje předmět, začíná nejdůležitějším sdělením
• Odkaz na odhlášení je v zápatí

Správný design e‑mailu nemusí být složitý, stačí dodržet několik ověřených pravidel. A pokud chcete zákazníkům posílat personalizované kampaně, které oslovují správné lidi ve správný čas, vyzkoušejte Leadhub zdarma po dobu 21 dní.

Časté otázky