Průvodce designem e-mailového newsletteru: Best practices pro 2026

Newsletter design rozhoduje, zda čtenář scrolluje nebo zavře. Vizuální polish není luxus - je to konverzační nástroj.

Layout základy

• Šířka: 600-700 px (standardní)
• Mobile-first: stack design, single column
• Whitespace: nechte vizuální oddech
• Hierarchie: nadpis → text → CTA, jasná hierarchie
• F-pattern: klíčové info v levém horním rohu

Typografie

• Web-safe fonty: Arial, Helvetica, Georgia, Times
• Tělo textu: 16-18 px
• Nadpisy: 24-32 px
• Line height: 1,4-1,6
• Krátké odstavce: max. 3-4 řádky

Barvy

• Brand kit: používejte konzistentně
• CTA kontrast: výrazná barva výrazně se odlišující
• Pozadí: světlé (#FFFFFF, #F5F5F5)
• Accessibility: kontrast 4.5:1+ pro tělo, 3:1 pro velký text

Obrázky

• Poměr text/obrázek: 60/40 (vyhnout se spam filtrům)
• Alt text: vždy (accessibility + obrázky blokované)
• Velikost: optimalizovat (pod 200 KB ideálně)
• Hero image: první vizuál, brand-konzistentní
• Lifestyle vs. produkt: podle značky

CTA tlačítka

• Velikost: 44+ px výška (touch-friendly)
• Padding: 12-16 px vertikálně, 24+ horizontálně
• Barva: kontrastní s pozadím
• Text: akční sloveso („Nakupovat”, „Stáhnout”, „Začít”)
• Umístění: above-fold + na konci sekce
• Počet: primární CTA, max. 1-2 sekundární

Mobile-first

70%+ otevření na mobilu. Pravidla:

• Single column layout
• Velká písma (16+ px)
• Velká tlačítka (44+ px)
• Krátké odstavce
• Optimalizované obrázky
• Žádné horizontální scrollování

Brand konzistence

• Logo v hlavičce
• Brand barvy
• Typografie odpovídající webu
• Tone of voice
• Visual style (fotografie, ilustrace)

Struktura newsletteru

Header

• Logo
• Navigace (volitelná)
• Preheader

Hero

• Hlavní zpráva
• Visual hook
• Primární CTA

Body

• 2-4 sekce
• Každá s vlastním CTA
• Mix textu a vizuálu

Footer

• Kontakt
• Sociální linky
• Unsubscribe link (povinný)
• Adresa firmy (povinná pro CAN-SPAM)

Accessibility

• Alt text na obrázcích
• Kontrast 4.5:1+
• Logická struktura nadpisů (h1, h2)
• Plain-text verze
• Keyboard-friendly
• Screen reader compatible

Dark mode

• Test v light a dark mode
• Logo s transparentním pozadím
• Vyhnout se obrázkům s bílým pozadím
• Test v Apple Mail, Gmail, Outlook

Testování

• Litmus, Email on Acid: preview ve 80+ klientech
• Mail Tester: spam score
• Vlastní zařízení: iPhone, Android, desktop
• Reálné Gmail/Outlook účty: finální test
• A/B testování: subject, CTA, layout

Templating

Investujte do master template:

• Brand kit
• Reusable sekce
• Mobile-tested
• Brand voice
• CTA styly

Šablonujte v Brevo, MJML nebo Stripo.

Časté chyby

• Image-only e-maily (spam filtry)
• Tiny text na mobilu
• Tiny CTA
• Žádný alt text
• Špatný kontrast
• Příliš mnoho CTA
• Nesynchronizováno s brand kitem
• Žádný plain-text fallback

Kde do toho zapadá Tajo

Tajo orchestruje, kdy a komu newsletter dorazí. Brand-konzistentní šablona je výchozí bod; Tajo AI rozhoduje o personalizaci, segmentaci a timing.

Závěr

Dobrý newsletter design: 600-700 px, mobile-first single column, brand-konzistentní, jasná hierarchie, výrazné CTA, accessibility. Testujte v reálných klientech a iterujte podle dat.

Související články

• Doručitelnost e-mailů
• E-mailové A/B testování
• Strategie e-mailového marketingu