Doporučené postupy při tvorbě e-mailové šablony v editoru Boldem

Úvod

Většina uživatelů umí napsat obsah e-mailu. Mnohem méně uživatelů však umí navrhnout e-mail, který skutečně funguje.

Úspěšný e-mail totiž musí splnit několik základních cílů:

1. Doručit se do schránky příjemce.
2. Přimět příjemce k otevření.
3. Správně se zobrazit na všech zařízeních.
4. Být přístupný všem uživatelům.
5. Vést k požadované akci.

Při tvorbě šablony v editoru Boldem je proto důležité myslet nejen na vzhled, ale také na technická omezení e-mailových klientů a na uživatelskou zkušenost.

E-mail není webová stránka

Jedna z nejčastějších chyb spočívá v tom, že uživatelé přistupují k e-mailu stejně jako k webové stránce.

E-mailoví klienti (Gmail, Outlook, Apple Mail a další) však nepodporují stejné technologie a každý z nich zobrazuje HTML kód jiným způsobem. To znamená, že šablona může vypadat správně v jednom klientovi a zároveň vykazovat problémy v jiném.

Někteří e-mailoví klienti například:

• ignorují některé styly,
• odlišně zobrazují obrázky,
• různě implementují tmavý režim.

Proto platí jednoduché pravidlo:

Testujte. A poté testujte znovu.

Každou šablonu je vhodné ověřit minimálně v Gmailu, Outlooku a Apple Mailu, a to jak na desktopu, tak na mobilních zařízeních.

Konzistentní firemní identita

Dobrá e-mailová šablona by měla být okamžitě rozpoznatelná jako součást vaší značky.

Příjemce by měl již během několika sekund poznat, od koho zpráva pochází, a to i bez čtení odesílatele nebo obsahu.

Proto doporučujeme zachovávat konzistentní:

• firemní barvy,
• tón komunikace,
• styl ilustrací a fotografií,
• způsob práce s CTA tlačítky.

Konzistence napříč kampaněmi posiluje důvěryhodnost značky a pomáhá budovat dlouhodobou rozpoznatelnost.

Je však důležité najít správnou rovnováhu mezi firemní identitou a použitelností. Design by nikdy neměl být na úkor čitelnosti, přístupnosti nebo výkonu e-mailu.

Pokud si musíte vybrat mezi estetickým efektem a snadnou čitelností, vždy upřednostněte čitelnost.

Typografie

Typografie je důležitou součástí firemní identity, ale v prostředí e-mailů je potřeba počítat s určitými technickými omezeními.

Na rozdíl od webových stránek většina e-mailových klientů podporuje vlastní (custom) fonty pouze omezeně nebo vůbec. Pouze velmi malý počet e-mailových klientů dokáže vlastní fonty zobrazit správně, zatímco ostatní je zcela ignorují a automaticky je nahrazují svými výchozími písmy.

Výsledkem může být nekonzistentní zobrazení e-mailu mezi jednotlivými zařízeními a e-mailovými klienty.

Proto doporučujeme používat především tzv. web-safe fonty, tedy písma, která jsou standardně dostupná ve většině operačních systémů a e-mailových klientů.

Mezi nejčastěji používané web-safe fonty patří například:

• Arial
• Helvetica
• Verdana
• Tahoma
• Georgia
• Times New Roman

Při návrhu e-mailových šablon je obecně vhodnější upřednostnit spolehlivé a konzistentní zobrazení před použitím specifických firemních fontů, které nemusí být podporovány všemi příjemci.

Předmět e-mailu (Subject)

Předmět je nejdůležitějším faktorem ovlivňujícím otevření e-mailu.
Příjemce se během několika sekund rozhoduje, zda zprávu otevře, nebo ignoruje.

Doporučení

• Optimální délka je přibližně 4 až 7 slov.
• Nejdůležitější informace uvádějte na začátku.
• Jasně komunikujte přínos zprávy.

Nevhodné příklady

• „Newsletter duben“
• „Důležité informace“
• „Novinky“

Lepší varianty

• „Objevte dubnové novinky“
• „Vaše faktura je připravena“
• „Sleva 20 % platí pouze do neděle“

Čemu se vyhnout

• CELÝM VELKÝM PÍSMENŮM
• Nadměrnému používání vykřičníků
• Přemíře emoji
• Výrazům často spojovaným se spamem

Například: „zdarma“, „vydělejte peníze“, „100 % zdarma“, „úžasná nabídka“ nebo „urgentní“.

Preheader

PreheaderPreheader je krátký text, který se v programu k prohlížení e-mailů zobrazuje obvykle pod předmětem e-mailu. Pok... More je text zobrazovaný za předmětem ve schránce příjemce.
Přestože jde o jeden z nejviditelnějších prvků e-mailu, bývá často opomíjen.

Doporučení

• Délka přibližně 6 až 12 slov.
• Rozsah přibližně 40 až 100 znaků.
• Má doplňovat předmět, nikoli jej opakovat.

Nevhodný příklad

Předmět:
„Objevte naši novou kolekci“

Preheader:
„Pokud se e-mail nezobrazuje správně, klikněte zde.“

Správný příklad

Předmět:
„Objevte naši novou kolekci“

Preheader:
„Doprava zdarma pouze do neděle.“

Jasná vizuální hierarchie

Příjemce by měl pochopit hlavní sdělení během několika sekund.

Doporučená struktura:

1. Logo
2. Hlavní nadpis
3. Podnadpis
4. Hlavní obrázek
5. Text obsahu
6. Hlavní CTA tlačítko
7. Doplňující informace
8. Footer

Jeden e-mail = jeden hlavní cíl

E-mail by zpravidla měl obsahovat:

• jeden hlavní cíl,
• jednu hlavní výzvu k akci (CTA).

Příliš mnoho informací vede ke ztrátě pozornosti.

Doporučení

• Umístěte hlavní sdělení nad přehyb obrazovky.
• Pište stručně (většina příjemců e-maily pouze rychle přelétne očima, nebo je vůbec nečte).
• Používejte krátké odstavce.
• Umožněte rychlé skenování obsahu.
• Nezapomínejte na dostatek „bílého prostoru“ a dopřejte obsahu prostor k nadechnutí.

Call to Action (CTA) tlačítka

Každý e-mail by měl obsahovat jasnou a jednoznačnou výzvu k akci.

Vhodné CTA

• Objevit novinky
• Stáhnout průvodce
• Potvrdit registraci
• Aktivovat účet

Nevhodné CTA

• Klikněte zde
• Zjistit více
• Více informací

CTA musí jasně vysvětlovat, co se stane po kliknutí.

Mobile First

Dnes probíhá většina otevření e-mailů na mobilních zařízeních. Při tvorbě šablony je proto nutné vycházet z mobilního zobrazení.

Doporučení

• Maximální šířka e-mailu 600–640 px.
• Výška CTA tlačítek minimálně 44 px.
• Text minimálně 14–16 px.
• Nadpisy minimálně 22 px.
• Preferujte jednosloupcové rozložení.

Pozor na media queries

Media queries jsou speciální CSS pravidla, která umožňují měnit vzhled e-mailu podle velikosti obrazovky nebo typu zařízení.
Díky nim lze například:

• zmenšit velikost písma na mobilu,
• změnit rozložení z více sloupců na jeden sloupec,
• upravit velikost obrázků,
• skrýt nebo zobrazit určité prvky.

Na webových stránkách jsou media queries běžně podporovány a představují základ responzivního designu.

V prostředí e-mailů je však situace složitější. Ne všichni e-mailoví klienti podporují media queries stejným způsobem a některé je nepodporují vůbec. Typickým příkladem je část verzí aplikace Outlook.

To znamená, že e-mail navržený s důrazem na media queries nemusí v některých klientech fungovat podle očekávání.

Proto doporučujeme navrhovat šablony tak, aby byly použitelné i bez podpory media queries. Nejbezpečnějším řešením bývá jednoduché jednosloupcové rozložení, které funguje spolehlivě na většině zařízení i e-mailových klientů.

Čemu se vyhnout

• Příliš malému textu
• Komplexním vícesloupcovým layoutům
• Obrázkům obsahujícím drobný text

Optimalizace obrázků

Správná práce s obrázky má zásadní vliv na rychlost načítání i doručitelnost.

Doporučené formáty

JPEG

Používejte pro:

• fotografie,
• produktové snímky,
• obrázky s mnoha barevnými přechody.

Výhody:

• velmi nízká velikost souboru,
• ideální pro fotografický obsah.

PNG

Používejte pro:

• loga,
• ikony,
• infografiky,
• obrázky s průhledností.

Výhody:

• ostré hrany,
• podpora transparentního pozadí.

Rozměry obrázků

Velmi častou chybou je nahrávání obrázků o šířce několik tisíc pixelů.
Pokud je obrázek zobrazován v e-mailu na šířce 600 px, nemá smysl nahrávat verzi širokou 3000 nebo 4000 px.

Doporučuje se:

• připravovat obrázky v rozlišení 2× oproti zobrazované velikosti,
• následně je zmenšit pomocí atributů šířky v editoru.

Například:

• zobrazení 600 px
• zdrojový obrázek 1200 px

Tím zůstane obraz ostrý i na displejích s vyšším rozlišením.

Doporučená velikost souborů

• Ideálně méně než 120 kB na obrázek
• Maximálně do 300 kB

Volba „Optimalizovat velikost obrázku“ v Boldem

V bloku Obrázek naleznete možnost: „Optimalizovat velikost obrázku“:

Kdy ji zapnout

Pokud nahráváte příliš velký obrázek a nemáte jej předem optimalizovaný.
Boldem automaticky vytvoří menší verzi odpovídající rozměrům kontejneru.

Kdy ji vypnout

Pokud jste obrázek již připravili a optimalizovali sami, například jako Retina verzi 2×.
V takovém případě další optimalizace není potřebná.

Optimalizace obrázků pomocí Photopea

Chcete-li optimalizovat obrázky přesně podle jejich reálné velikosti v e-mailu, můžete tak učinit plně pod svou kontrolou prostřednictvím nástroje Photopea. Jedná se o bezplatný online nástroj umožňující:

• změnu rozměrů,
• kompresi,
• export do JPEG nebo PNG.

Doporučený postup:

1. Přejděte na adresu https://www.photopea.com.
2. V aplikaci Photopea otevřete svůj obrázek: „Soubor“ > „Otevřít“.
3. Klikněte na „Soubor“ > „Uložit jako“.
4. Vyberte JPEG nebo PNG (Pamatujete? Vyberte JPG formát, pokud je obrázek komplexní fotografie).

5. Snižte velikost obrázku (který vidíte dole v kB) snížením šířky nebo snížením kvality.
   Záleží pak na vás, abyste našli dobrý kompromis mezi kvalitou a velikostí obrázku. Obecně je lepší mít větší obrázek (v pixelech) s nižší kvalitou (v kB).

6. Zkontrolovat výslednou velikost souboru.

Nevkládejte celý obsah do jednoho obrázku

Jedna z nejčastějších chyb. Toto řešení se často používá k zachování vizuální identity značky a jejích fontů, ale ve skutečnosti nadělá více škody než užitku.

Proč je to problém

• Obrázky mohou být blokovány.
• Obsah není přístupný pro čtečky obrazovky.
• Text nelze označit ani kopírovat.
• Zvyšuje se riziko spamu.
• Mobilní zobrazení bývá problematické.

Tento příklad ukazuje e-mailovou šablonu sestavenou pouze z obrázků v případě, kdy e-mailový klient blokuje jejich zobrazení. Výsledkem je obsah, který není příliš přitažlivý ani informativní, a výrazně zhoršuje uživatelskou zkušenost.

Správný přístup

Kombinujte:

• HTML text,
• obrázky.

Veškeré důležité informace by měly být obsaženy v textové podobě.

Alternativní texty obrázků (ALT)

V aplikaci Boldem máte možnost doplnit alternativní texty k obrázkům v blocích Obrázek, Logo, GIF a Video.

ALT texty jsou důležité pro:

• přístupnost,
• čtečky obrazovky,
• situace, kdy jsou obrázky blokovány.

Nevhodný příklad

alt=„obrázek“

Správný příklad

alt=„Turistické boty model X“

ALT text by měl popisovat skutečný obsah obrázku.

Dark Mode

Tmavý režim (Dark Mode) se stal standardní součástí většiny moderních e-mailových klientů. Každý klient však přistupuje k jeho implementaci jinak.

Důležité je si uvědomit, že jako tvůrci e-mailu máme nad výsledným chováním Dark Mode pouze omezenou kontrolu. Ve většině případů totiž o úpravě barev rozhoduje samotný e-mailový klient.

Někteří klienti mění pouze část barev, jiné mohou automaticky invertovat prakticky celý design. Výsledné zobrazení proto nemusí vždy odpovídat původnímu návrhu.
Rozlišujeme zejména dva přístupy:

Partial Color Invert

Klient upravuje pouze některé prvky e-mailu, například pozadí nebo barvy textu.

Full Color Invert

Klient automaticky převrací většinu barev včetně pozadí, textů i některých obrázků. Jedná se o nejinvazivnější barevné schéma: nejenže převrací oblasti se světlým pozadím, ale ovlivňuje také tmavá pozadí. Pokud jste tedy své e-maily již navrhli v tmavém režimu, toto schéma je paradoxně přinutí zobrazovat se ve světlém režimu.

Pokud však e-mail používá barvy ve středních tónech, nepředstavuje to obvykle větší problém, protože tyto odstíny zůstávají dobře čitelné jak na světlém, tak na tmavém pozadí:

Situace se ale komplikuje ve chvíli, kdy motiv využívá například tmavě šedé nebo černé barvy. Výsledkem je, že se e-mail stává nečitelným:

Full Color Invert je nejen nejagresivnější způsob úpravy vzhledu e-mailu, ale e-mailoví klienti využívající tuto metodu zatím ani nepodporují specifické úpravy obsahu pro tmavý režim (Dark Mode). Proto není cílem dosáhnout perfektní kontroly nad výsledným zobrazením e-mailu, ale spíše minimalizovat možné problémy a zajistit co nejlepší čitelnost.

Optimalizovat ikony a loga pro všechny režimy zobrazení

• Je-li například logo černé na průhledném pozadí, přidejte kolem písmen jemný halo efekt v barvě pozadí světlého režimu, aby zůstalo čitelné i při zobrazení v dark mode:

• Pokud obrázky obsahují vlastní pozadí a nejsou průhledné, ponechte kolem hlavního motivu dostatečný prostor. Zabráníte tak neestetickému kontrastu nebo nežádoucímu navázání na okolní pozadí, zejména při zobrazení v tmavém režimu:

Při návrhu barev a grafiky je vhodné počítat s tím, že některé klienty mohou výsledné zobrazení upravit podle vlastních pravidel. Testování v Gmailu, Outlooku a Apple Mailu je proto nezbytnou součástí každé kampaně.

Přístupnost

Přístupnost bývá často podceňována. Přístupnost pomáhá zajistit, aby byl váš obsah pohodlně čitelný a použitelný pro co nejširší okruh uživatelů. Díky tomu můžete oslovit širší spektrum zákazníků a zlepšit jejich uživatelskou zkušenost.

Kontrast

Dostatečný barevný kontrast výrazně zlepšuje čitelnost obsahu a usnadňuje orientaci v e-mailu všem příjemcům, zejména osobám se zrakovým postižením nebo zhoršeným viděním.

Kontrast barev můžete ověřit pomocí specializovaných nástrojů, například na adrese:
webaim.org/resources/contrastchecker.

Pro zjištění přesné hodnoty barvy libovolného prvku na obrazovce můžete využít nástroj Kapátko (Eyedropper) dostupný v nástroji pro výběr barev (Color Picker).

Nevhodné

• světle šedá na bílé,
• bílý text na světlém pozadí.

Vhodné

• tmavě šedá nebo černá na bílé,
• bílý text na tmavém pozadí.

Velikost písma

• minimálně 14–16 px,
• pro základní text nastavte řádkování v rozmezí 1.4 až 1.6; pro nadpisy 1.2 až 1.3,
• preferujte web-safe fonty. Mnoho e-mailových klientů vlastní fonty ignoruje (viz kapitola Typografie).

Odkazy

Z hlediska přístupnosti by text odkazu měl jasně popisovat jeho cíl nebo akci. Odkazy typu „Klikněte zde“ nebo „Více“ neposkytují dostatek informací o tom, kam uživatele zavedou.

To je problém zejména pro osoby používající čtečky obrazovky, které si často nechávají zobrazit nebo přečíst seznam všech odkazů na stránce. Pokud se v seznamu opakuje několik odkazů s názvem „Klikněte zde“, uživatel nedokáže poznat, který odkaz vede k faktuře, objednávce nebo jiné informaci.

Popisné odkazy, jako například:

• „Stáhnout fakturu“
• „Zobrazit objednávku“

Webová verze

Doporučuje se umístit odkaz: „Zobrazit v prohlížeči“.

Tento odkaz otevře HTML verzi e-mailu ve webovém prohlížeči, kde nedochází k omezením ani problémům s interpretací kódu ze strany e-mailových klientů. Šablona se zde zobrazí v podobě, která nejvěrněji odpovídá originální verzi vytvořené v editoru.

Tento odkaz by měl být ideálně umístěn na začátku e-mailu, aby k němu měl uživatel okamžitý přístup hned po otevření zprávy.

V aplikaci Boldem lze proměnnou {{webMailUrl}} snadno vložit z panelu nástrojů textového bloku pomocí tlačítka „Proměnné“.

Textová verze e-mailu

Každý e-mail by měl mít také textovou variantu. Ta zajistí, že si příjemci budou moci přečíst obsah zprávy i v případě, že jejich e-mailový klient nepodporuje HTML formát nebo má jeho zobrazování zakázané.

Výhody:

• lepší přístupnost,
• kompatibilita se staršími klienty,
• lepší podpora čteček obrazovky,
• pozitivní vliv na doručitelnost.

V systému Boldem najdete textovou verzi na kartě „Textová verze“.

K dispozici jsou možnosti:

• přenačíst z obsahu e-mailu,
• automaticky přenačíst při změně obsahu.

Doručitelnost a antispamová pravidla

Poměr textu a obrázků

Doporučený poměr:

• 60 % text,
• 40 % obrázky.

Nevhodné jsou e-maily obsahující:

• pouze obrázky,
• pouze odkazy.

Vyhněte se

• nadměrnému používání vykřičníků,
• spamovým výrazům (příklady rizikových výrazů: „zdarma“, „100 % zdarma“, „garantovaný zisk“, „vydělejte peníze rychle“, „klikněte ihned“, „neuvěřitelná nabídka“, „pouze dnes“, „poslední šance“, „vyhráli jste“, „okamžitá půjčka“, „bez rizika“, „exkluzivní nabídka“, „akce končí dnes“, „kupte hned“),
• přílohám,
• neviditelný text nebo skrytý obsah, které mohou negativně ovlivnit doručitelnost.

Nezapomeňte na povinné prvky

Doporučujeme uvádět následující údaje, zpravidla umístěné v patičce e-mailu:

• odhlašovací odkaz (povinné z hlediska souladu s GDPR, s výjimkou specifických případů, jako jsou například potvrzení objednávky),
• identitu odesílatele,
• kontaktní údaje,
• fyzickou adresu společnosti.

Velikost HTML

Velikost HTML kódu e-mailu má přímý vliv na jeho zobrazení v některých e-mailových klientech.

Gmail například po překročení přibližně 102 kB HTML kódu automaticky zkrátí obsah zprávy a zobrazí odkaz „Zobrazit celou zprávu“. Příjemce tak nemusí vidět celý obsah e-mailu ani všechny sledovací prvky.

Proto doporučujeme:

• používat co nejjednodušší strukturu,
• vyhýbat se zbytečně složitým layoutům,
• nepoužívat nadměrné množství vnořených tabulek,
• omezovat množství duplicitního nebo nepoužívaného kódu,
• pokud je to možné, preferovat jednodušší jednosloupcové rozložení.

Je důležité si uvědomit, že velikost obrázků nemá přímý vliv na velikost HTML e-mailu. Obrázky totiž nejsou součástí HTML kódu samotného, ale načítají se prostřednictvím externích URL adres.

Velké obrázky proto nezvyšují velikost HTML a nepřispívají k překročení limitu 102 kB. Mohou však významně ovlivnit uživatelskou zkušenost, protože zvyšují objem dat, který musí e-mailový klient stáhnout při načítání zprávy. Výsledkem může být pomalejší načítání e-mailu, vyšší spotřeba mobilních dat a horší uživatelský komfort.

Reputace databáze

Přestože toto téma přesahuje rámec samotné tvorby šablony, stojí za to jej zde připomenout.

Pravidelně:

• odstraňujte neplatné adresy,
• čistěte databázi,
• nenakupujte kontaktní seznamy.

Správa odkazů

Před odesláním vždy zkontrolujte:

• funkčnost všech odkazů,
• HTTPS protokol,
• správné měření kliknutí.

Vyhněte se zobrazování dlouhých URL adres přímo v textu.

Testování před odesláním

Každý e-mail by měl projít závěrečnou kontrolou. Testujte!

E-mailové klienty:

• Gmail
• Outlook
• Apple Mail

Zařízení:

• Desktop
• Mobil

Ověřte:

• obrázky – zda se správně načítají, mají odpovídající rozlišení a zobrazují se i na mobilních zařízeních,
• odkazy – zda vedou na správné cílové stránky a neobsahují chyby,
• personalizaci – zda se správně zobrazují personalizační proměnné (jméno, příjmení, název společnosti apod.),
• CTA tlačítka – zda jsou dobře viditelná, funkční a odkazují na správnou URL,
• dark mode – zda e-mail zůstává čitelný a grafické prvky se správně zobrazují i v tmavém režimu.