Design e-mailů v roce 2025

Gradient: Ano, ale chytře

Gradientů se už nemusíte bát. Máme otestováno, že se korektně zobrazují ve všech hlavních e‑mailových klientech. A pokud by se gradient nezobrazil, vždy se zobrazí zástupná varianta. S dobře promyšleným designem je to tedy skvělá praktika, jak například donutit vaše zákazníky, aby doskrolovali v e‑mailu ještě dál.

Proč gradienty v e‑mailech použít?

• Upoutají pozornost a mohou přirozeně vést čtenáře k důležitému CTA.
• Podporují dynamický design a pomáhají vizuálně oddělit sekce.
• Zachovávají čitelnost, pokud zvolíte správný kontrast.
• Pro Outlook si pomůžeme zapoznámkováním VML (Vektor Markup Language).

Podívejte se na video ukázku:

Fonty: Jak dostat svůj korporátní font do e‑mailu?

Jasně, když už máte korporátní font, chcete ho nacpat všude. A my říkáme jen do toho! Stačí si pohlídat několik pravidel.

Na co si dát pozor?

1. Nezapomeňte na zástupný font – pro případy, kdy se vlastní font nenačte. Vybírejte z kategorie e‑mail safe fonts, to je bezpečná volba, kterou umí bezpečně zobrazit většina e‑mailových klientů. Pozor neplést s web safe fonts, kterých je trochu méně. 
2. Zvolte vhodný způsob nahrávání svého fontu:
   Link: Font se načítá současně s obsahem (zpomaluje načítání e‑mailu).
   Font‑face: Font se načítá asynchronně (lepší pro rychlost).

Podívejte se na video ukázku:

Pokud vás zajímá více o fontech přečtěte si náš článek Fonty v e-mailové komunikaci.

GIF: Jak jednoduše zvýšit CTR

GIF je skvělý formát, jak upoutat pozornost a podle výsledků u našich klientů i zvýšit CTR e‑mailové kampaně.

Pozor na zobrazení v Outlooku!

• Starší verze Outlooku neumí GIF zobrazit vůbec a příjemce vidí jen první frame jako statický obrázek.
• Outlook 19 zase přehraje GIF jednou a potom zobrazí play button pro další přehrání. 

Myslete tedy na to, jak vypadá první frame vašeho gifu, ale i toto se ale dá obejít pomocí další poznámky pro gte mso 9, tedy problémové Outlooky.

Podívejte se na video ukázku:

Background image místo bannerů

I dnes se najdou ti, kteří dávají do e‑mailů obrázkové bannery s textem. Co se ale stane, když se obrázek nenačte? Nikdo si nic nepřečte a uživatel ani nemusí udělat chtěnou akci. 

Řešení: Background image

• Umožní zobrazit text nezávisle na obrázku a zajistí čitelnost.
• Funguje ve všech moderních e‑mailových klientech.
• Pokud se obrázek nenačte, text bude stále viditelný.

Podívejte se na video ukázku:

Takto to vypadá, když se obrázek nenačte. V pohodě, ne?

Overlay: Moderní webový design v e‑mailu

Overlay efekt (text částečně překrývající obrázek) je skvělý způsob, jak se odlišit a přiblížit vzhled e‑mailu designu vašeho webu.

‍

Na co si dát pozor?

• Záporné hodnoty a z‑index mají v e‑mailech stále špatnou podporu.
• Position má už služnou podporu.
• Outlook position: relative nepodporují → musíte použít fallback s VML (Vector Markup Language).
• Použijeme menší div, než je velikost obrázku.
• Pomůžeme si pomocí opacity max 0.999. Pozor nejlépe funguje při použití max. 3 desetinných míst a pro lidské oko, tedy skoro neviditelné.
• Používáme jak v inline stylu, tak ve třídě.

Podívejte se na video ukázku:

Dynamické seznamy v automatických e-mailech

Chcete posílat automaticky generovaný e‑mail s grafickými prvky, které se přizpůsobují délce textu? Problémy s responzivitou jsou minulostí!

Řešení:

• Celé kouzlo zajistí chytré použití rowspanu a colspanu.
• Svislé čáry a další grafické prvky se mohou automaticky přizpůsobit délce textu.
• Obsah můžete automaticky generovat například z externích zdrojů a šablona se nerozbije ani ji nemusíte ručně upravovat.

Podívejte se na video ukázku:

‍

Tak vzhůru do tvorby sexy e-mailů. Nyní se v designu emailů můžete o další krok přiblížit tomu, jak vypadají vaše webové stránky, můžete uplatnit prvky z vašeho brand manuálu a díky tomu také upoutat pozornost více zákazníků.

‍

Pro další typy k designu e‑mailů si můžete přečíst také článek Zlepšete look&feel vašich e-mailů.

Pokud se vám e-maily se vám někde rozbíjí, nebo jen chcete nechat přípravu šablony na odbornících, dejte nám vědět.

‍

‍