| |
|
Meridian Press · Číslo 47 | |
Archiv je ten produktPřed třemi týdny jsem hledal text, který jsem napsal v roce 2019, a nenašel jsem ho. Ani na webu, ani v exportu, ani ve vyhledávání samotné platformy. Dvanáct set čísel a jediný fungující rejstřík byla moje paměť. To je ta část, kterou vám o šesti letech newsletteru nikdo neřekne. Odesílat je snadné. Uchovávat ne. | |
| |
|
Tenhle týden jsem tedy starší čísla přestavěl na skutečný archiv, se štítky, fulltextovým vyhledáváním a trvalými adresami. Zabralo to devět dní. Počet odběratelů se nehnul. Čas strávený na webu se ztrojnásobil. Všechno je níže, včetně částí, které nevyšly. | |
| Přečíst celé číslo → | |
|
Psáno rukou každý čtvrtek. Odpovězte a já si to přečtu. Meridian Press, 14 Harbour Lane, Bristol BS1 4TT |
```
**Špatný alternativní text:**
```html
```
## Psychologie a použití barev
Barvy ovlivňují emoce, vedou pozornost a posilují identitu značky.
### Psychologie barev v e-mailu
| Barva | Asociace | Nejlepší pro |
| --- | --- | --- |
| Modrá | Důvěra, stabilita, klid | Finance, technologie, zdravotnictví |
| Červená | Naléhavost, vzrušení, vášeň | Výprodeje, CTA, naléhavost |
| Zelená | Růst, zdraví, příroda | Udržitelnost, zdraví, úspěch |
| Oranžová | Energie, kreativita, teplo | CTA, značky zaměřené na mladé |
| Fialová | Luxus, kreativita, moudrost | Prémiové značky, kosmetika |
| Žlutá | Optimismus, jasnost, teplo | Zvýraznění, pozornost |
| Černá | Sofistikovanost, luxus | Prémiové, móda |
| Bílá | Čistota, minimalismus, ryzost | Prostor, pozadí |
### Pravidla poměru barev
Dodržujte pravidlo 60-30-10:
- **60 %:** primární barva/barva pozadí
- **30 %:** sekundární barva
- **10 %:** akcentní barva (CTA, zvýraznění)
### Barevný kontrast pro přístupnost
Zajistěte dostatečný kontrast mezi textem a pozadím:
- **Běžný text:** minimální kontrastní poměr 4,5:1
- **Velký text (18 px+):** minimální kontrastní poměr 3:1
- **Použijte nástroje:** WebAIM Contrast Checker
**Příklady vysokého kontrastu:**
- Černá (#000000) na bílé (#FFFFFF) - 21:1
- Tmavě modrá (#003366) na bílé - 12,6:1
- Bílá na tmavě fialové (#4A154B) - 10,8:1
### Barvy CTA tlačítek
Vaše tlačítka výzvy k akci by měla okamžitě vystupovat:
- Použijte akcentní barvu s nejvyšším kontrastem
- Udržujte konzistenci napříč všemi e-maily
- A/B testujte různé barvy pro optimalizaci výkonu
- Zajistěte, aby se barva lišila od textových odkazů v těle
## Přístupnost e-mailů
Přístupný design e-mailů zajišťuje, že se s Vaším obsahem mohou zapojit všichni odběratelé, včetně těch, kteří používají asistivní technologie.
### Pravidla WCAG pro e-mail
Pravidla přístupnosti webového obsahu (WCAG) platí i pro e-mail:
#### 1. Vnímatelnost
- Poskytněte textové alternativy k obrázkům (alternativní text)
- Nespoléhejte se jen na barvu při sdělování informací
- Zajistěte dostatečný barevný kontrast
- Umožněte změnu velikosti textu bez rozbití rozvržení
#### 2. Ovladatelnost
- Veškerá funkčnost dostupná z klávesnice
- Dejte uživatelům dost času na přečtení obsahu
- Nepoužívejte blikající obsah, který by mohl vyvolat záchvaty
#### 3. Srozumitelnost
- Používejte jasný, jednoduchý jazyk
- Udržujte konzistentní navigaci
- Poskytujte jasné chybové zprávy
#### 4. Robustnost
- Používejte validní HTML
- Testujte napříč různými e-mailovými klienty
- Zajistěte kompatibilitu s asistivními technologiemi
### Kontrolní seznam přístupného e-mailu
- Všechny obrázky mají popisný alternativní text
- Barevný kontrast splňuje standardy WCAG AA (4,5:1)
- Odkazy jsou popisné („Přečtěte si našeho průvodce”, ne „Klikněte zde”)
- Velikost písma je alespoň 14 px (preferováno 16 px)
- E-mail má logické pořadí čtení
- Tabulky se používají jen pro rozvržení, ne pro data (nebo mají správné hlavičky)
- V HTML je deklarován jazyk
- Indikátory fokusu jsou u interaktivních prvků viditelné
### Ohledy na čtečky obrazovky
Strukturujte e-mail pro uživatele čteček obrazovky:
- Používejte sémantické HTML, kde je to možné (h1, h2, p atd.)
- Poskytněte verzi v prostém textu
- Zahrňte odkaz „Zobrazit v prohlížeči”
- Vyhněte se e-mailům složeným jen z obrázků
- Testujte s VoiceOver, NVDA nebo JAWS
## Účinný design CTA
Vaše výzva k akci je místem, kde se design setkává s konverzí. Udělejte ji správně.
### Osvědčené postupy pro CTA tlačítka
#### Velikost a tvar
- **Minimální velikost:** výška 44 px, šířka 120 px
- **Odsazení:** alespoň 12 až 16 px svisle, 24 až 32 px vodorovně
- **Tvar:** Použijte tvar tlačítka, který odpovídá značce a zůstává snadno rozpoznatelný
#### Barva a kontrast
- Použijte akcentní barvu značky, která vystupuje z okolní sekce
- Zajistěte vysoký kontrast s pozadím
- Text tlačítka musí být velmi dobře čitelný
#### Pravidla pro text
- Používejte slovesa orientovaná na akci: „Nakupujte nyní”, „Začněte”, „Stáhnout”
- Vytvářejte naléhavost tam, kde je na místě: „Uplatněte svou slevu”
- Držte ho krátký: 2 až 5 slov
- Vyhněte se obecnému textu: „Klikněte zde”, „Odeslat”, „Více informací”
### Umístění CTA
- **Hlavní CTA:** nad ohybem (viditelné bez posouvání)
- **Sekundární CTA:** po podpůrném obsahu
- **Jedno hlavní CTA na e-mail** (vyhněte se rozhodovací paralýze)
### Příklady textů CTA
| Obor | Účinné CTA |
| --- | --- |
| E-commerce | „Nakupte ve výprodeji” |
| SaaS | „Vyzkoušejte zdarma” |
| Obsah | „Přečtěte si celého průvodce” |
| Akce | „Rezervovat mé místo” |
| Newsletter | „Získejte týdenní tipy” |
### Tlačítko vs. textové odkazy
Používejte tlačítka pro hlavní akce a textové odkazy pro sekundární akce:
```
[NAKUPUJTE NYNÍ] Hlavní tlačítko (vysoká vizuální váha)
nebo si prohlédněte naše novinky Sekundární textový odkaz
```
## Příklady e-mailových newsletterů podle oboru
Podívejme se na účinné designy newsletterů v různých oborech.
### Design e-commerce newsletteru
**Klíčové prvky:**
- Kvalitní produktová fotografie
- Jasné zobrazení cen
- Přehlídka více produktů
- Silné propagační sdělení
- Snadno klepnutelná tlačítka „Nakupovat”
**Doporučené rozvržení:** Modulární mřížka s produktovými kartami
```
BANNER VÝPRODEJE
[HERO PRODUKT]
SLEVA 30 %
[NAKUPUJTE NYNÍ]
[PROD 1] [PROD 2]
49,99 $ 79,99 $
DOPRAVA ZDARMA NAD 75 $
```
### Design SaaS/technologického newsletteru
**Klíčové prvky:**
- Čistá, minimalistická estetika
- Zvýraznění funkcí s ikonami
- Zaměření na vzdělávací obsah
- Jasné hodnotové nabídky
- Profesionální obrazový materiál
**Doporučené rozvržení:** Jeden sloupec s bloky funkcí
```
OZNÁMENÍ NOVÉ FUNKCE
[SNÍMEK OBRAZOVKY FUNKCE]
Přínos jedna
Přínos dva
Přínos tři
[VYZKOUŠEJTE HNED]
```
### Design mediálního/vydavatelského newsletteru
**Klíčové prvky:**
- Silná typografická hierarchie
- Náhledy článků s obrázky
- Organizace podle kategorií
- Jména autorů
- Údaje o době čtení
**Doporučené rozvržení:** Obsahová mřížka s kartami
```
HLAVNÍ ČLÁNEK
[VELKÝ OBRÁZEK]
Text titulku
Krátký úryvek...
[ČLÁNEK 2] [ČLÁNEK 3]
Titulek Titulek
DALŠÍ ČLÁNKY
```
### Design B2B newsletteru / newsletteru profesionálních služeb
**Klíčové prvky:**
- Konzervativní, profesionální design
- Obsah typu thought leadership
- Případové studie a data
- Propagace akcí
- Zdroje ke stažení
**Doporučené rozvržení:** Profesionální jeden sloupec
```
[LOGO SPOLEČNOSTI]
POZNATKY TOHOTO MĚSÍCE
Oborová zpráva
Klíčová zjištění z naší nejnovější
analýzy trhu...
[ČÍST DÁLE]
Nadcházející webinář
15. března ve 14:00 EST
[REGISTROVAT SE]
```
## Nástroje a zdroje pro design e-mailů
### Designové platformy
**Drag-and-drop editory:**
- Mailchimp
- Klaviyo
- Campaign Monitor
**Profesionální designové nástroje:**
- Figma (design a prototypování)
- Adobe XD
- Sketch
### Zdroje šablon
**Bezplatné šablony:**
- Knihovna šablon Brevo
- Šablony komunity Litmus
- Šablony Email on Acid
**Prémiové šablony:**
- E-mailové šablony ThemeForest
- Envato Elements
- Creative Market
### Testovací nástroje
- **Litmus** - náhled e-mailu ve více než 90 klientech
- **Email on Acid** - testování napříč klienty
- **Mail Tester** - kontrola spamového skóre
- **Accessible Email** - validace přístupnosti
## Běžné chyby v designu e-mailů, kterým se vyhnout
### 1. E-maily přeplněné obrázky
**Problém:** Některé e-mailové klienty obrázky standardně blokují. E-maily složené jen z obrázků se zobrazí prázdné.
**Řešení:** Vždy zahrňte živý text. Obrázky používejte k obohacení obsahu, ne jako jeho náhradu.
### 2. Příliš mnoho CTA
**Problém:** Více konkurenčních CTA vytváří rozhodovací paralýzu.
**Řešení:** Jedno hlavní CTA na e-mail. Pro sekundární akce používejte textové odkazy.
### 3. Ignorování mobilu
**Problém:** Designy, které na desktopu vypadají skvěle, na mobilu selhávají.
**Řešení:** Navrhujte s mobilem na prvním místě. Před odesláním testujte na více zařízeních.
### 4. Špatný kontrast
**Problém:** Text s nízkým kontrastem se špatně čte a nesplňuje standardy přístupnosti.
**Řešení:** Používejte nástroje pro kontrolu kontrastu. Udržujte minimální poměr 4,5:1.
### 5. Přeplněná rozvržení
**Problém:** Husté designy čtenáře zahlcují a snižují zapojení.
**Řešení:** Přijměte bílý prostor. Soustřeďte se na méně kvalitnějších obsahových prvků.
### 6. Nekonzistentní branding
**Problém:** E-maily, které neodpovídají Vašemu webu, odběratele matou.
**Řešení:** Vytvořte pravidla značky pro e-mail. Používejte šablony pro udržení konzistence.
### 7. Pomalu se načítající e-maily
**Problém:** Velké soubory se načítají příliš dlouho, zejména na mobilu.
**Řešení:** Komprimujte obrázky. Celkovou velikost e-mailu držte pod 1 MB.
## Závěr
Design e-mailového newsletteru je umění i věda zároveň. Principy popsané v tomto průvodci, vizuální hierarchie, optimalizace pro mobil, přístupnost, typografie a strategické umístění CTA, tvoří základ newsletterů, které zapojují a konvertují.
Pamatujte na tyto klíčové závěry:
1. **Navrhujte s mobilem na prvním místě** - Vaše vlastní reporty se mohou lišit, ale použitelnost na malé obrazovce musí být zajištěna
2. **Upřednostňujte jasnost** - každý prvek by měl mít svůj účel
3. **Udržujte konzistenci značky** - budujte rozpoznatelnost s každým odesláním
4. **Testujte průběžně** - malá zlepšení se v čase násobí
5. **Zaměřte se na přístupnost** - navrhujte pro všechny odběratele, ne jen pro většinu
Skvělý design newsletteru neznamená následovat každý trend, znamená vytvářet jasnou, poutavou komunikaci v souladu se značkou, která respektuje čas a pozornost Vašich odběratelů.
Chcete zlepšit své newslettery pro Shopify v Brevo?
## Kde se uplatní Tajo
Tajo je agentní nástroj pro tvorbu integrací. Ponechte si své poskytovatele. Agenti propojí vše ostatní a vy schválíte každou synchronizaci. Tajo je v předběžném přístupu. [Požádat o přístup](https://tajo.io/cz/#early-access)
## Často Kladené Otázky
**Jak začít s e-mailovým newsletterem?**
Vyberte platformu, definujte slib newsletteru, vytvořte registrační formuláře založené na souhlasu, připravte jednoduchou šablonu s mobilem na prvním místě, odešlete testovací kampaně a vyhodnoťte zapojení, než přidáte složitá rozvržení nebo personalizaci.
**Jak často mám newsletter posílat?**
Neexistuje univerzálně nejlepší frekvence. Začněte s rytmem, který dokážete udržet, například týdně, jednou za dva týdny nebo měsíčně, a poté ho upravte podle zapojení, odhlášení, stížností, kvality obsahu a očekávání odběratelů.
**Co má newsletter obsahovat?**
Zahrňte jedno jasné hlavní sdělení, užitečný obsah, přehlednou strukturu, živý text, přístupné obrázky s alternativním textem, jasné CTA, údaje o odhlášení a odesílateli a dynamický produktový nebo zákaznický obsah pouze tehdy, když jsou data spolehlivá.
**Jaká je ideální šířka e-mailového newsletteru?**
Standardní a doporučená šířka e-mailových newsletterů je \*\*600 pixelů\*\*. Tato šířka funguje dobře ve většině e-mailových klientů a zařízení a zároveň poskytuje dostatek prostoru pro obsah. Na mobilu by e-maily měly být responzivní a přizpůsobit se šířce obrazovky, obvykle skládáním vícesloupcových rozvržení do jednoho sloupce.
**Kolik obrázků mám do newsletteru zahrnout?**
Neexistuje pevný počet obrázků. Použijte tolik obrazového materiálu, kolik podporuje sdělení, ale e-mail musí zůstat srozumitelný i při zablokovaných obrázcích. Většina newsletterů by měla používat živý text pro klíčové sdělení, popisný alternativní text pro významné obrázky, komprimované soubory a záložní verzi v prostém textu. Vyhněte se newsletterům složeným jen z obrázků.
**Jaká písma fungují v e-mailových newsletterech nejlépe?**
Webově bezpečná písma jako \*\*Arial, Helvetica, Georgia a Verdana\*\* se vykreslují konzistentně ve všech e-mailových klientech. Můžete použít webová písma (Google Fonts, Adobe Fonts) se správnými záložními písmy, ale počítejte s tím, že některé klienty jako Outlook zobrazí záložní písmo. Pro čistý, profesionální design se držte maximálně 1 až 2 rodin písma.
**Jak udělám své e-maily přístupné?**
Mezi klíčové postupy přístupnosti patří: \*\*alternativní text\*\* u všech obrázků, \*\*barevný kontrast 4,5:1\*\* pro text, \*\*popisné texty odkazů\*\* (ne „klikněte zde“), \*\*minimální velikost písma 14 až 16 px\*\*, \*\*verze v prostém textu\*\* a strukturování obsahu se \*\*správnou hierarchií nadpisů\*\*. Pokud je to možné, testujte se čtečkami obrazovky.
**Mám pro newslettery používat design pro tmavý režim?**
Ano, tmavý režim byste měli zvážit, protože hlavní e-mailové klienty mohou barvy měnit různými způsoby. Mezi designové tipy patří: nespoléhat se jen na barvu pozadí, v případě potřeby poskytnout varianty loga, opatrně používat průhledné PNG, kontrolovat kontrast v obou režimech a testovat důležité šablony v klientech, které Vaše publikum skutečně používá.
**Jaký je nejlepší formát obrázků pro e-mail?**
\*\*JPEG\*\* je nejlepší pro fotografie a složité obrázky s mnoha barvami. \*\*PNG\*\* je ideální pro grafiku s průhledností, loga a obrázky s textem. \*\*GIF\*\* funguje pro jednoduché animace. \*\*WebP\*\* nabízí lepší kompresi, ale má omezenou podporu v e-mailových klientech, vždy poskytněte záložní variantu. Velikost hlavních obrázků držte pod 200 KB a celkovou velikost e-mailu pod 1 MB.
**Jak zlepším míru prokliku svého e-mailového newsletteru?**
Pro zlepšení míry prokliku: udělejte hlavní CTA snadno viditelné, používejte popisný text tlačítek, udržujte dotykové cíle dostatečně velké pro mobil, omezte konkurenční akce, pište sdělení odpovídající záměru odběratele a testujte vždy jednu smysluplnou designovou nebo textovou proměnnou. Otevření a prokliky berte jako diagnostické signály a důležité newslettery propojte s konverzními nebo tržbovými výsledky, kde je to možné.
**Jak často mám aktualizovat design newsletteru?**
Udržujte \*\*konzistentní branding\*\* pro rozpoznatelnost a zároveň \*\*průběžně dělejte drobné optimalizace\*\* na základě výkonnostních dat. \*\*Větší redesign\*\* zvažte každých 12 až 18 měsíců, abyste drželi krok s designovými trendy. Významné změny vždy A/B testujte, než je nasadíte na celý seznam. Sezónní varianty a speciální edice mohou přinést rozmanitost bez ztráty konzistence značky.
## Související články
### [10 nejlepších newsletterových platforem pro tvůrce a firmy (2026)](https://tajo.io/cz/blog/best-newsletter-platforms/)
22\. 3. 2026 · 14 min čtení
8 sekcí
### [12 nejlepších softwarů pro e-mailové newslettery v roce 2026](https://tajo.io/cz/blog/email-newsletter-software/)
8\. 3. 2026 · 11 min čtení
10 sekcí
### [12 nejlepších newsletterových builderů v roce 2026: Kompletní srovnávací průvodce](https://tajo.io/cz/blog/newsletter-builder-guide/)
8\. 3. 2026 · 11 min čtení
10 sekcí