Proč většina newsletterů končí v koši
Radicati Group odhaduje, že v roce 2025 odesílá průměrný zaměstnanec a přijímá 121 e-mailů denně. Litmus ve svém Email Analytics Report uvádí, že čtenář věnuje jednomu e-mailu v průměru 8,97 sekundy. To je méně, než trvá přečtení tohoto odstavce.
V té chvíli rozhoduje design. Ne obsah, ne nabídka. Čistě vizuální dojem, hierarchie informací a čitelnost na konkrétním zařízení. Podle dat Campaign Monitoru otevírá 42 % příjemců e-maily na mobilním telefonu. Pokud newsletter na čtyřpalcovém displeji vypadá jako zmenšená verze desktopového layoutu, čtenář ho zavře.
Firmy jako Mailchimp, Substack nebo Beehiiv investují značné prostředky do výchozích šablon právě proto, že design přímo ovlivňuje metriky. Open rate, click-through rate, konverzní poměr: všechny tři závisejí na tom, jak snadno čtenář pochopí, co od něj e-mail chce.
Šířka a rozložení: základ, který nelze obejít
E-mailový design se řídí omezeními, která webový designér běžně neřeší. Outlook 2019 a starší verze renderují HTML pomocí engine Microsoft Word. Gmail ořezává e-maily delší než 102 kB. Yahoo Mail ignoruje některé CSS vlastnosti.
Standardní šířka newsletteru je 600 pixelů. Tento rozměr vychází z historických limitů e-mailových klientů a dodnes funguje jako spolehlivý základ. Jednosloupcové rozložení (single column layout) je nejbezpečnější volba, protože se přirozeně přizpůsobí menším obrazovkám bez složitých media queries.
Dvousloupcový layout má smysl u e-shopů, kde chcete zobrazit produktovou mřížku, ale vyžaduje pečlivé testování. Litmus ve svém průvodci doporučuje fluid hybrid coding: kombinaci procentuálních šířek a podmíněných komentářů pro Outlook. Pro většinu firemních newsletterů je ale jeden sloupec s jasnou vertikální hierarchií dostačující.
Vizuální hierarchie: co čtenář vidí jako první
Nielsen Norman Group opakovaně potvrdil, že uživatelé skenují obsah ve tvaru písmene F. V e-mailech je tento vzorec ještě výraznější, protože čtenář aktivně hledá důvod, proč e-mail zavřít.
Hierarchii budujete třemi nástroji: velikostí, barvou a prostorem. Nadpis by měl mít minimálně 22 px (ideálně 24 až 28 px). Tělo textu 14 až 16 px, řádkování 1,5. Mezi sekcemi nechte alespoň 24 px padding, aby obsah „dýchal". Mailchimp ve svých design guidelines doporučuje minimálně 20 px okraje po stranách, aby text na mobilech nesahal až k hraně displeje.
Barvy používejte střídmě. Dva, maximálně tři odstíny z vaší brandové palety stačí. CTA tlačítko (call-to-action, tedy výzva k akci) by mělo být jedinou výrazně kontrastní plochou v celém e-mailu. Pokud je všechno důležité, nic důležité není.
CTA tlačítko: jeden e-mail, jedna akce
Campaign Monitor analyzoval přes miliardu odeslaných e-mailů a zjistil, že e-maily s jedním CTA tlačítkem mají o 371 % vyšší click-through rate než e-maily s více odkazy. Tento údaj opakují i další platformy (Mailchimp, HubSpot), protože potvrzuje základní princip rozhodování: čím méně možností, tím vyšší pravděpodobnost akce.
CTA tlačítko by mělo splňovat čtyři podmínky. Za prvé: minimální velikost 44 × 44 px, což odpovídá doporučení Apple pro dotykové cíle. Za druhé: kontrastní barva vůči pozadí. Za třetí: srozumitelný text, který říká, co se stane po kliknutí („Stáhnout průvodce", „Zobrazit nabídku"), ne vágní „Více" nebo „Klikněte zde". Za čtvrté: dostatek prostoru kolem tlačítka, aby na něj šlo snadno klepnout palcem.
Pokud newsletter obsahuje více sekcí (přehled článků, aktuality, nabídka), každá sekce může mít vlastní odkaz, ale primární CTA by mělo být vizuálně odlišené od sekundárních.
Typografie: čitelnost před estetikou
E-mailová typografie je omezená. Na rozdíl od webových stránek, kde můžete načíst libovolný font přes Google Fonts nebo lokální soubory, e-mailové klienty podporují jen systémové fonty a několik webových fontů s omezenou spolehlivostí.
Bezpečné volby pro tělo textu: Arial, Helvetica, Georgia, Verdana. Tyto fonty najdete na většině operačních systémů. Gmail a Apple Mail podporují i webové fonty přes @font-face, ale Outlook je ignoruje a zobrazí fallback.
Campaign Monitor doporučuje font stack ve formátu: „preferovaný font, bezpečná alternativa, generická rodina". Příklad: `font-family: 'Helvetica Neue', Arial, sans-serif`. Pro nadpisy můžete zkusit webový font (například Inter nebo IBM Plex Sans), ale vždy s definovaným fallbackem.
Velikost textu pod 14 px je na mobilech nečitelná. Apple ve svých Human Interface Guidelines uvádí 17 px jako výchozí velikost pro čtení na iOS, což je užitečná reference i pro e-mailový design.
Obrázky: méně je více
Každý obrázek v newsletteru přidává kilobajty, prodlužuje načítání a zvyšuje riziko, že e-mail skončí ve složce spam. Zároveň platí, že e-mail bez jakéhokoli vizuálu působí neúplně.
Mailchimp ve své analýze doporučuje poměr 60 % textu a 40 % obrázků. Obrázky by měly mít vždy vyplněný atribut `alt`, protože řada klientů (Outlook, Gmail s vypnutými obrázky) zobrazí místo vizuálu prázdný obdélník s alternativním textem. Dobře napsaný `alt` text dokáže přenést sdělení i bez načteného obrázku.
Formát obrázků: PNG pro grafiku s textem a ostrými hranami, JPEG pro fotografie. Celková velikost e-mailu by neměla přesáhnout 100 kB (bez obrázků) respektive 1 MB (s obrázky). Gmail e-maily nad 102 kB ořezává a zobrazí odkaz „Zobrazit celou zprávu", což většina čtenářů ignoruje.
Animované GIFy fungují jako pozornostní magnet, ale používejte je opatrně. Outlook zobrazí pouze první snímek GIFu, takže první frame musí být srozumitelný i jako statický obrázek.
Testování: kde se teorie láme s praxí
Největší rozdíl mezi amatérským a profesionálním newsletterem není v designu, ale v testování. Email on Acid a Litmus jsou dva nástroje, které zobrazí váš e-mail v desítkách klientů najednou. Litmus testuje přes 100 kombinací klient/zařízení. Bez tohoto kroku posíláte e-mail naslepo.
Minimální testovací sada pro český trh: Gmail (web i mobilní aplikace), Apple Mail (macOS i iOS), Outlook 2019/365 a Seznam.cz Email. Každý z těchto klientů renderuje HTML jinak. Gmail například odstraňuje `<style>` tagy v hlavičce a vynucuje inline styly. Outlook nepodporuje `background-image`. Seznam.cz má vlastní renderovací zvyklosti.
Před odesláním zkontrolujte tři věci. Zobrazuje se CTA tlačítko správně ve všech klientech? Jsou obrázky opatřeny `alt` textem? Funguje e-mail i bez načtených obrázků? Pokud na všechny tři odpovíte ano, newsletter je připravený k odeslání.
Předmět a preheader: první kontakt
Předmět e-mailu (subject line) rozhoduje o open rate víc než cokoli jiného. Mailchimp ve své studii doporučuje délku 40 až 50 znaků. Delší předměty se na mobilech ořezávají. Příliš krátké (pod 20 znaků) zase neposkytnou dost kontextu.
Preheader je text, který se zobrazí vedle předmětu v seznamu doručené pošty. Pokud ho nevyplníte, e-mailový klient zobrazí první řádek HTML kódu, což bývá odkaz na webovou verzi nebo logo. To je zbytečně promarněný prostor.
SuperOffice analyzoval 12 milionů komerčních e-mailů a zjistil, že personalizované předměty (se jménem příjemce) zvyšují open rate o 26 %. Ale personalizace neznamená jen jméno. Segmentovaný obsah podle zájmů odběratele funguje ještě lépe, protože řeší konkrétní potřebu.
Emojis v předmětu jsou kontroverzní téma. Return Path zjistil, že 56 % značek, které používají emoji v subject line, má vyšší open rate. Záleží ale na cílové skupině: B2B publikum reaguje na emojis méně pozitivně než B2C.
Časté chyby a jak se jim vyhnout
Několik problémů se opakuje u naprosté většiny firemních newsletterů. Za prvé: příliš mnoho témat v jednom e-mailu. Newsletter není časopis. Soustřeďte se na jedno hlavní sdělení a případně dva až tři doplňkové odkazy.
Za druhé: chybějící responzivní design. Pokud newsletter nepoužívá media queries nebo fluid layout, na mobilním telefonu bude vyžadovat horizontální scrollování. To je pro čtenáře nepřijatelné.
Za třetí: nekonzistentní branding. Každý newsletter by měl vizuálně odpovídat vaší značce. Barvy, typografie, tón komunikace. Pokud odběratel nepozná odesílatele do dvou sekund, pravděpodobnost, že e-mail přečte, výrazně klesá.
Za čtvrté: ignorování metrik. Sledujte open rate, click-through rate a míru odhlášení. A/B testování předmětů, layoutu nebo CTA tlačítek vám dá konkrétní odpovědi na to, co funguje pro vaše publikum. Mailchimp, Brevo i MailerLite nabízejí A/B testy přímo v základní verzi.
Za páté: nezobrazitelné fonty. Pokud váš newsletter používá font, který e-mailový klient nepodporuje, zobrazí se Times New Roman. To zničí i jinak dobrý design.
