Newslettery

Design newsletteru: osvědčené postupy pro poutavé e-mailové rozvržení

Ovládni design newsletteru s osvědčenými postupy rozvržení, tipy na typografii a vizuálními strategiemi. Vytvářej e-mailové newslettery, které vypadají profesionálně a podporují zapojení.

Set Noa Set Noa Aktualizováno 8 min čtení

newsletter design

Jaká je stručná odpověď?

Design newsletteru by měl upřednostnit čitelnost, mobilní responzivitu a vizuální konzistenci. Tento průvodce pokrývá strategie rozvržení, typografii, používání barev, optimalizaci obrázků a návrhové nástroje pro vytváření newsletterů, které odběratelé chtějí číst.

Zjistit více
Na této stránce

Design newsletteru je neviditelná architektura, která rozhoduje o tom, zda odběratelé tvůj obsah přečtou, nebo smažou. Dobře navržený newsletter přirozeně vede oko od nadpisu přes obsah k akci. Špatně navržený vytváří vizuální chaos, který odežene čtenáře bez ohledu na to, jak hodnotný obsah je.

Dobrá zpráva: efektivní design newsletteru nevyžaduje profesionálního designéra. Vyžaduje pochopení několika základních principů a jejich důsledné uplatňování. Tento průvodce pokrývá strategie rozvržení, pravidla typografie a vizuální techniky, které dělají newslettery poutavými a čitelnými.

Čtyři šablony v provozu

Všechno pod touto sekcí je tvrzení o rozvržení a tvrzení o rozvržení jsou laciná. Tady jsou tedy čtyři newslettery, v provozu.

Každý sedí v rámu o skutečné šířce a ukazuje své vlastní HTML. Stáhněte šířku na 375 px a sledujte, které sloupce se složí a které to odmítnou. Panely sledují motiv, ve kterém tuhle stránku čtete: v tmavém režimu vidíte skutečný tmavý blok každé šablony, ne jeho přiblížení. Zdrojový kód je pod každým panelem.

Šablony Tajo

Čtyři rozvržení v provozu

Každý panel níže je skutečné e-mailové HTML šablony v rámu o skutečné šířce. Stáhněte šířku na 375 px a sledujte, jak se sloupce skládají pod sebe.

Sleduje váš motiv — přepněte jej v záhlaví a uvidíte ten druhý.

Přečíst HTML šablony The Letter 6 KB, bez sestavení 
<!DOCTYPE html>
<html lang="cz" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<title>The Letter</title>
<style>
  body { margin:0; padding:0; width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; }
  table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
  img { border:0; outline:none; line-height:100%; -ms-interpolation-mode:bicubic; display:block; }
  a { text-decoration:underline; }
  @media only screen and (max-width:620px) {
    .wrap { width:100% !important; }
    .stack { display:block !important; width:100% !important; max-width:100% !important; }
    .gutter { padding-left:20px !important; padding-right:20px !important; }
    .cta { display:block !important; width:100% !important; box-sizing:border-box !important; text-align:center !important; }
    .h1 { font-size:26px !important; line-height:32px !important; }
    .thumb { width:100% !important; height:auto !important; max-width:100% !important; }
    /* A digest row is the one two-column layout that should NOT stack: the
       thumbnail shrinks and stays beside the headline, because a roundup is
       read by scanning and a full-width decorative image per story destroys
       that. */
    .row-thumb { width:80px !important; }
    .row-thumb img { width:80px !important; height:80px !important; }
    .hide-sm { display:none !important; }
  }
@media (prefers-color-scheme: dark) {

    .d-bg { background-color:#151515 !important; }
    .d-card { background-color:#1c1c1c !important; }
    .d-ink { color:#f2f2f2 !important; }
    .d-mute { color:#a8a8a8 !important; }
    .d-rule { border-color:#3a3a3a !important; }
  }
</style>
</head>
<body class="d-bg" style="margin:0;padding:0;background-color:#f0efec;">
<span style="display:none;font-size:1px;color:#fefefe;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;">Citát, který si necháváte v poznámkách, odvádí víc práce než váš obsahový kalendář.</span><span style="display:none;font-size:1px;color:#fefefe;">&#8199;&#65279;&#847;&#8199;&#65279;&#847;&#8199;&#65279;&#847;&#8199;&#65279;&#847;&#8199;&#65279;&#847;</span>
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" class="d-bg" style="background-color:#f0efec;">
  <tr><td align="center" style="padding:32px 12px;">
    <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" class="wrap d-card" style="width:600px;max-width:600px;background-color:#ffffff;">

      <tr><td style="padding:0;">
        <img src="/_astro/letter-masthead.BcPkHvz4.png" width="600" height="250" alt="Hlavička Meridian Press: soustředné modré oblouky protnuté šikmým pásem" style="width:100%;height:auto;max-width:600px;">
      </td></tr>

      <tr><td class="gutter" style="padding:36px 88px 0 88px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
        <p class="d-mute" style="margin:0 0 6px 0;font-size:13px;line-height:18px;letter-spacing:.08em;text-transform:uppercase;color:#6b6b6b;">Meridian Press · Číslo 47</p>
      </td></tr>

      <tr><td class="gutter" style="padding:0 88px;font-family:Georgia,'Times New Roman',Times,serif;">
        <h1 class="h1 d-ink" style="margin:0 0 20px 0;font-size:34px;line-height:42px;font-weight:400;color:#141414;">Archiv je ten produkt</h1>
        <p class="d-ink" style="margin:0 0 20px 0;font-size:18px;line-height:30px;color:#242424;">Př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ěť.</p>
        <p class="d-ink" style="margin:0 0 20px 0;font-size:18px;line-height:30px;color:#242424;">To je ta část, kterou vám o šesti letech newsletteru nikdo neřekne. Odesílat je snadné. Uchovávat ne.</p>
      </td></tr>

      <tr><td class="gutter" style="padding:8px 88px 28px 88px;">
        <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
          <tr><td class="quote" style="border-left:3px solid #0084d1;padding:4px 0 4px 0;padding-left:20px;font-family:Georgia,'Times New Roman',Times,serif;">
            <p class="d-ink" style="margin:0;font-size:19px;line-height:30px;font-style:italic;color:#141414;">Všechno, co publikujete, je vklad. Výběr skoro nikdo nestaví.</p>
          </td></tr>
        </table>
      </td></tr>

      <tr><td class="gutter" style="padding:0 88px;font-family:Georgia,'Times New Roman',Times,serif;">
        <p class="d-ink" style="margin:0 0 20px 0;font-size:18px;line-height:30px;color:#242424;">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.</p>
        <p class="d-ink" style="margin:0 0 28px 0;font-size:18px;line-height:30px;color:#242424;">Všechno je níže, včetně částí, které nevyšly.</p>
      </td></tr>

      <tr><td class="gutter" style="padding:0 88px 36px 88px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
        <a href="https://example.com" style="font-size:17px;line-height:24px;font-weight:600;color:#0084d1;text-decoration:underline;">Přečíst celé číslo &rarr;</a>
      </td></tr>

      <tr><td class="gutter d-rule" style="padding:0 88px;border-top:1px solid #e4e2de;"></td></tr>

      <tr><td class="gutter" style="padding:24px 88px 40px 88px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
        <p class="d-mute" style="margin:0 0 10px 0;font-size:14px;line-height:22px;color:#6b6b6b;">Psáno rukou každý čtvrtek. Odpovězte a já si to přečtu.</p>
        <p class="d-mute" style="margin:0;font-size:13px;line-height:20px;color:#8a8a8a;">Meridian Press, 14 Harbour Lane, Bristol BS1 4TT<br>
        <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Odhlásit odběr</a> &middot; <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Zobrazit v prohlížeči</a></p>
      </td></tr>

    </table>
  </td></tr>
</table>
</body>
</html>

Jsou naše. Navrhli jsme je pro tenhle článek, včetně grafiky, kterou generuje deterministický geometrický skript žijící ve stejném repozitáři jako tahle stránka — žádné fotobanky a žádné snímky cizí galerie šablon. Ten rozdíl váží víc, než to zní: průvodce návrhem e-mailů, který se ilustruje e-maily jiných lidí, po vás chce, abyste mu věřili na slovo.

Čtyři šablony nejsou čtyři styly. Jsou to čtyři odpovědi na čtyři různé úkoly:

  • The Letter je pro pisatele, jehož celá hodnota je text. Jeden obrázek, okraje 88 px, textový odkaz místo tlačítka. Tlačítko v osobním dopise se čte jako reklama.
  • The Digest je pro přehled, který se prolétá. Číslované řádky, doba čtení před každým titulkem a jediná výzva k akci dole místo šesti.
  • The Storefront je pro uvedení kolekce. Je to jediné rozvržení, kde je začít obrázkem správně, a přesto je postavené tak, aby obrázek mohl selhat.
  • The Brief je pro čísla. Tři metriky nade vším ostatním a sloupcový graf z buněk tabulky místo z PNG.

Společná je ta část, kterou stojí za to okopírovat. Jeden sloupec 600 px. Text minimálně 16 px. Jedna akcentní barva a inkoust na všechno ostatní. Každý obrázek nese alternativní text a každé rozvržení dává smysl i s blokovanými obrázky. Deklarované barevné schéma plus výslovný tmavý blok, protože výchozí chování v tmavém klientovi je, že váš e-mail převrátí algoritmus, který nikdy neviděl vaši značku.

Jednu z nich jsme napoprvé udělali špatně a právě tu stojí za to jmenovat. The Digest zpočátku skládal řádky s články na mobilu pod sebe — přesně tak, jak radí každý průvodce responzivními e-maily. Skládání proměnilo tři náhledy po 112 px ve tři dekorativní obrázky přes celou šířku o výšce 335 px a přehled šesti témat se změnil v rolování. Ten řádek je teď jediné dvousloupcové rozvržení v sadě, které se neskládá. Pravidla o skládání mluví o sloupcích obsahu. Náhled není sloupec obsahu.

Jak jednu z nich postavit v Brevu

Žádná ze čtyř šablon výše nepotřebuje k sestavení vývojáře. Každá obrazovka níže je tatáž šablona na plátně „táhni a pusť“ v Brevu, s jedním vybraným blokem.

Začněme hlavním tlačítkem, protože to je blok s nejvíce nastaveními:

Brevo

Editor e-mailů „táhni a pusť“ v Brevu se šablonou The Storefront na plátně, vybraným hlavním tlačítkem a jeho nastavením popisku, odkazu, barvy, zaoblení a odsazení v pravém panelu
The Storefront na plátně. Levý sloupec: bloky, které přetahujete. Pravý sloupec: všechno o vybraném bloku. Na plátně je e-mail široký 600 px uvnitř klienta širokého 680 px — proto se mobilní rozvržení neobjevuje: přesně při 600 px by se spustil vlastní zlom šablony a upravovali byste telefonní verzi, zatímco přepínač říká Počítač.

Každý blok v levém sloupci odpovídá něčemu v šablonách výše. Text, Obrázek, Tlačítko, Oddělovač a Mezera pro strukturu. Produkt pro řádek obchodu. HTML pro všechno, co editor nemodeluje — a přesně tak je postavený graf v The Brief:

Brevo

Editor e-mailů Brevo se šablonou The Brief na plátně, vybraným sloupcovým grafem a pravým panelem, který ukazuje, že je postavený z buněk tabulky bez obrázku
Graf, ve kterém není žádný obrázek. Graf vyexportovaný jako PNG přijde o svá čísla kvůli blokování obrázků, převrácení v tmavém režimu a každé čtečce obrazovky. Čtyři řádky tabulky s barevnou buňkou a textovým popiskem nepřijdou o nic a neváží nic.

Typografie funguje stejně. Vyberte textový blok a panel vám dá písmo, velikost, řádkování a odsazení — což je celé nářadí, které The Letter potřebuje:

Brevo

Editor e-mailů Brevo se šablonou The Letter na plátně a vybraným citátem: Georgia 19px na 30px, kurzíva, s levou linkou 3px
Citát je textový blok s linkou po straně. Žádná zvláštní komponenta. Textový blok, levá linka 3 px v akcentní barvě a 20 px vnitřního odsazení. V dobrém newsletteru je většina toho, co vypadá jako návrh na míru, standardní blok se dvěma změněnými vlastnostmi.

A obrázky mají vlastní panel, kde alternativní text stojí nahoře, ne na konci seznamu nastavení:

Brevo

Editor e-mailů Brevo se šablonou The Digest na plátně a vybraným náhledem článku, kde je vidět jeho alternativní text, zobrazená velikost 112px, zdroj 480px a váha 17 KB
Alternativní text je pole, ne dodatečný nápad. Zobrazená velikost 112 px, zdroj 480 px — právě ten poměr 2× drží náhled ostrý na retina displeji. Alternativní text je první, protože je to ta část obrázku, kterou většina odběratelů skutečně dostane.

Firmám, které používají Tajo, se tytéž sekce dají plnit dynamicky: doporučení produktů a personalizovaný obsah řízený chováním odběratelů, vykreslené do bloků, které jste rozvrhli tady, místo ručního výběru u každého odeslání.

Základy designu newsletteru

Design slouží obsahu

Nejdůležitější princip designu newsletteru: design by měl usnadňovat konzumaci obsahu, nikdy ji ztěžovat. Každé designové rozhodnutí by mělo odpovídat na otázku: pomáhá to mému čtenáři najít a vstřebat informace, pro které přišel?

Znaky dobrého designu newsletteru:

  • Čtenáři mohou celý newsletter proletět za 10-15 sekund
  • Nejdůležitější obsah je okamžitě viditelný
  • Každá sekce má jasný začátek a konec
  • Call-to-action vyniká, aniž by byl vtíravý
  • Newsletter působí záměrně, ne náhodně

Znaky špatného designu newsletteru:

  • Čtenáři nemohou rychle najít hlavní obsah
  • O pozornost soupeří více designových stylů
  • Text je na jakémkoli zařízení těžko čitelný
  • Rozvržení se na mobilních obrazovkách rozpadá
  • Husté bloky textu bez vizuálních přestávek

Princip vizuální hierarchie

Vizuální hierarchie řídí pořadí, ve kterém čtenáři zpracovávají informace. V newsletterech hierarchii vytvářej pomocí:

Úroveň hierarchiePrvekDesignové zpracování
PrimárníHlavní nadpisNejvětší písmo, tučné, pozice nahoře
SekundárníNadpisy sekcíStřední písmo, kontrastní barva
TerciárníObsah tělaStandardní písmo, čitelná velikost
PodpůrnýMetadata (data, autoři)Menší písmo, světlejší barva
AkceTlačítka/odkazy CTAKontrastní barva, styl tlačítka

Strategie rozvržení

Jednosloupcové rozvržení

Jednosloupcové rozvržení je zlatým standardem pro newslettery a doporučeným přístupem pro většinu vydavatelů.

Výhody:

  • Zobrazí se perfektně na každém zařízení a velikosti obrazovky
  • Vytváří přirozený tok čtení shora dolů
  • Zjednodušuje designová rozhodnutí
  • Snižuje problémy se zobrazením napříč e-mailovými klienty
  • Odpovídá tomu, jak lidé čtou na mobilu (vertikální rolování)

Vhodné pro: Textově zaměřené newslettery, osobní newslettery, vzdělávací obsah, hloubkové analýzy

Struktura:

  1. Záhlaví (logo, číslo vydání, datum)
  2. Úvod nebo osobní poznámka
  3. Sekce s hlavním obsahem
  4. Sekce s vedlejším obsahem (oddělené oddělovači)
  5. CTA nebo výzva k zapojení
  6. Zápatí

Rozvržení na základě karet

Obsah uspořádej do výrazných vizuálních karet, každá s vlastním okrajem, pozadím nebo stínem.

Výhody:

  • Jasné oddělení obsahu
  • Funguje dobře pro kurátorský obsah a přehledy odkazů
  • Každá karta může mít vlastní obrázek a CTA
  • Vizuálně poutavé, aniž by bylo přehlcující

Vhodné pro: Přehledy obsahu, kurátorské odkazy, prezentace produktů, newslettery s více tématy

Designové tipy pro karty:

  • Používej konzistentní rozměry a mezery karet
  • Maximálně 2 karty v jedné řadě (na mobilním zařízení skládej do 1)
  • Přidej jemný okraj nebo barvu pozadí pro definování karet
  • Udržuj konzistentní vnitřní odsazení v každé kartě

Hybridní rozvržení

Kombinuj primární obsahový sloupec s užším postranním panelem pro doplňkový obsah.

Výhody:

  • Pojme více obsahu bez zvyšování délky e-mailu
  • Funguje pro newslettery s primárním i sekundárním obsahem
  • Známý formát z tradičních publikací

Omezení:

  • Na mobilu se musí sbalit do jednoho sloupce
  • Složitější na sestavení a údržbu
  • Může působit přeplněně, pokud není dobře organizované

Vhodné pro: Firemní newslettery, mediálně laděné publikace, formáty s velkým množstvím obsahu

Typografie pro newslettery

Typografie je nejúčinnějším designovým prvkem v jakémkoli textově náročném e-mailu. Správné písmo a vše ostatní si sedne na své místo.

Výběr písem

E-mailoví klienti mají omezenou podporu písem. Jako primární volbu používej webově bezpečná písma:

PísmoStylVhodné pro
ArialČistý, moderní sans-serifObecné účely, obchod
HelveticaRafinovaný sans-serifPrémiové značky
GeorgiaElegantní serifRedakční, delší texty
Times New RomanKlasický serifTradiční, formální
VerdanaŠiroký, čitelný sans-serifMalý text, mobil
Trebuchet MSModerní sans-serifKreativní, neformální

Webová písma: Můžeš určit webová písma (jako Open Sans nebo Lato) s webově bezpečnými záložními fonty. Zobrazí se v Apple Mail, iOS Mail a některých Android klientech, ale v Outlooku a starším Gmailu se přepnou na bezpečnou alternativu.

Velikost písma

PrvekMinimální velikostDoporučená velikost
Text těla14 px16 px
Nadpisy sekcí20 px22-24 px
Hlavní nadpis24 px28-32 px
Popisky/metadata12 px13-14 px
Text tlačítka CTA14 px16 px
Text předhlavičky12 px14 px

Řádkování a čitelnost

  • Výška řádku: 1,4-1,6 pro text těla (24-26 px při velikosti písma 16 px)
  • Mezery odstavců: 16-24 px mezi odstavci
  • Délka řádku: 50-75 znaků na řádek (předchází únavě očí)
  • Kerning: Výchozí pro text těla, mírně zvýšený pro malý text

Formátování textu

  • Tučné: Používej pro klíčové fráze a důraz, ne pro celé odstavce
  • Kurzíva: Používej střídmě pro citace, názvy nebo jemný důraz
  • Podtržení: Vyhraď výhradně pro odkazy (podtržený text bez odkazu mate čtenáře)
  • VELKÁ PÍSMENA: Používej pouze pro krátké popisky nebo tlačítka, nikdy pro text těla
  • Barva: Používej jednu akcentovou barvu pro odkazy, text těla ponech v tmavé šedé (#333) nebo téměř černé

Barevná strategie

Tvorba barevné palety newsletteru

Omez newsletter na 3-4 barvy:

Role barvyPoužitíPříklad
PrimárníZáhlaví, tlačítka CTA, akcentyFiremní modrá
TextTělo textu, podnadpisyTmavá šedá (#333333)
PozadíTělo e-mailuBílá (#FFFFFF) nebo světle šedá (#F5F5F5)
AkcentOdkazy, zvýraznění, sekundární CTASekundární barva značky

Přístupnost barev

  • Udržuj minimální kontrastní poměr 4,5:1 mezi textem a pozadím
  • Nespoléhej pouze na barvu při předávání informací
  • Otestuj svou paletu pomocí simulátorů barvosleposti
  • Ujisti se, že odkazy jsou odlišitelné od běžného textu (používej podtržení, ne jen barvu)

Aspekty tmavého režimu

Mnoho e-mailových klientů nyní ve výchozím nastavení používá tmavý režim. Navrhuj s ohledem na tmavý režim:

  • Vyhni se čistě bílým (#FFFFFF) pozadím — použij mírně off-white (#FAFAFA)
  • Nepoužívej průhledné PNG s tmavými prvky (v tmavém režimu zmizí)
  • Testuj loga na světlém i tmavém pozadí
  • Přidej meta tagy pro podporu barevného schématu tmavého režimu
  • Přidej okraje nebo kontury k tmavým obrázkům, aby zůstaly viditelné

Používání obrázků v newsletterech

Kdy používat obrázky

Obrázky by měly přidávat hodnotu, kterou samotný text nemůže poskytnout:

  • Produktová fotografie: Zobraz produkty v kontextu
  • Vizualizace dat: Grafy, infografiky
  • Snímky obrazovky: Předvádění nástrojů, funkcí nebo procesů
  • Fotografie osob: Buduj osobní spojení s autory nebo týmem
  • Ilustrace: Podpora osobnosti a tónu značky

Optimalizace obrázků

SpecifikaceDoporučení
FormátJPEG pro fotografie, PNG pro grafiku
Šířka600 px standardní, 1200 px pro retina
Velikost souboruDo 200 KB na obrázek
Celková velikost e-mailuDo 100 KB bez obrázků
Alternativní textPopisný, maximálně 125 znaků
Poměr stran2:1 pro hero obrázky, 1:1 pro miniatury

Poměr obrázků k textu

Udržuj zdravý poměr textu k obrázkům, abys předešel spamovým filtrům a zajistil čitelnost:

  • 60:40 text k obrázkům je doporučený poměr
  • E-maily, které jsou primárně tvořeny obrázky, mají vyšší míru označení jako spam
  • Vždy zahrň textové verze klíčových informací, nejen v obrázcích
  • Navrhuj pro klienty se zablokovanými obrázky: newsletter by měl dávat smysl i bez obrázků

Mobilní design newsletteru v první řadě

Požadavky na mobilní design

Při více než 60 % otevření newsletterů na mobilních zařízeních není mobilní design volitelný.

Pravidla mobilního rozvržení:

  • Maximální šířka obsahu: 600 px (dobře se zobrazí na všech zařízeních)
  • Minimální cílová plocha dotyku: 44x44 pixelů pro tlačítka a odkazy
  • Minimální velikost písma: 16 px pro text těla na mobilu
  • Jednosloupcové rozvržení, které se přirozeně skládá
  • Tlačítka CTA přes celou šířku na mobilu
  • Dostatečné mezery mezi klikatelnými prvky (prevence náhodných klepnutí)

Techniky responzivního designu

TechnikaDesktopMobil
Vícesloupcové sekceVedle sebeVrstvené vertikálně
ObrázkyVelikost v rámci obsahuCelá šířka, škálované
Navigační odkazyVodorovnéVrstvené nebo skryté
Tlačítka CTAInline nebo zarovnaná vpravoCelá šířka
Velikosti písemStandardníMírně větší
Odsazení20-40 px15-20 px

Testování zobrazení na mobilu

Otestuj design newsletteru na:

  • iPhone (Safari/Mail)
  • Android (aplikace Gmail)
  • iPad
  • Gmail (web)
  • Outlook (desktop a web)
  • Apple Mail (desktop)

Používej nástroje jako Litmus nebo Email on Acid pro automatizované testy zobrazení napříč 90+ e-mailovými klienty.

Záhlaví

Záhlaví buduje identitu a nastavuje očekávání:

  • Logo: Správně dimenzované (ne příliš velké, obvykle 150-200 px na šířku)
  • Identifikátor vydání: Číslo vydání, datum nebo název edice
  • Odkaz na zobrazení online: Pro odběratele, kteří mají problémy se zobrazením
  • Drž ho kompaktní: Záhlaví by nemělo vytlačit obsah pod přelom stránky

Oddělovače sekcí

Jasné oddělovače mezi sekcemi obsahu pomáhají čtenářům procházet:

  • Vodorovné čáry: Jednoduché, tenké čáry (1-2 px) v neutrální barvě
  • Změny barvy pozadí: Střídej sekce s bílým a světle šedým pozadím
  • Zvýšené mezery: 30-40 px odsazení mezi sekcemi
  • Nadpisy sekcí: Tučné, větší písmo s konzistentním stylováním

Zápatí

Dobře navržené zápatí dokončuje zážitek:

  • Odkaz na odhlášení odběru (zákonná povinnost, zajisti snadnou dostupnost)
  • Odkazy na sociální sítě
  • Fyzická poštovní adresa (požadavek CAN-SPAM)
  • Odkaz na zobrazení v prohlížeči
  • Možnost přeposlání příteli
  • Stručný firemní slogan nebo prohlášení o poslání

Nástroje pro design newsletteru

Editory platforem

Většina newsletterových platforem zahrnuje integrované editory designu:

PlatformaTyp editoruFlexibilita designuKnihovna šablon
BrevoDrag-and-dropVysoká40+ šablon
MailchimpDrag-and-dropVysoká100+ šablon
ConvertKitZjednodušený editorStředníOmezená
SubstackTextově zaměřenýNízkáMinimální

Editor Brevo s funkcí drag-and-drop zpřístupňuje profesionální design newsletteru bez znalosti kódu. Pro firmy používající Tajo můžeš dynamicky naplňovat sekce newsletteru doporučeními produktů a personalizovaným obsahem na základě chování odběratelů.

Designové zdroje

  • Canva: Tvorba obrázků záhlaví newsletteru, grafiky pro sociální sítě a ilustrací
  • Unsplash/Pexels: Bezplatná fotografická banka
  • Really Good Emails: Galerie inspirace dobře navržených e-mailů
  • MJML: Open-source e-mailový framework pro vlastní designy
  • Figma: Navrhuj vlastní šablony newsletteru s exportem prostřednictvím e-mailového pluginu

Kontrolní seznam designu newsletteru

Před odesláním jakéhokoli newsletteru ověř:

Rozvržení:

  • Jednosloupcové rozvržení nebo správně responzivní vícesloupcové
  • Šířka obsahu je 600 px nebo méně
  • Jasná vizuální hierarchie od záhlaví k zápatí
  • Sekce jsou jasně odděleny

Typografie:

  • Text těla je 16 px nebo větší
  • Výška řádku je 1,4-1,6
  • Nadpisy vytvářejí jasnou strukturu obsahu
  • Text odkazu je popisný (ne “klikni zde”)

Obrázky:

  • Všechny obrázky mají alternativní text
  • Obrázky jsou optimalizovány pro velikost souboru
  • Newsletter je čitelný bez obrázků
  • Retina obrázky jsou k dispozici pro displeje s vysokým DPI

Mobil:

  • Testováno na iPhone a Android
  • Tlačítka CTA jsou na mobilu přes celou šířku
  • Velikosti písem jsou čitelné na malých obrazovkách
  • Cílové plochy dotyku jsou minimálně 44 px

Přístupnost:

  • Kontrastní poměr barev splňuje 4,5:1
  • Obsah je strukturován se správnými nadpisy
  • Žádné informace nejsou předávány pouze barvou
  • Kompatibilní se čtečkami obrazovky

Značka:

  • Barvy odpovídají paletě značky
  • Logo je správně dimenzováno a umístěno
  • Tón a hlas jsou v souladu se značkou
  • Zápatí obsahuje všechny povinné právní prvky

Vývoj designu newsletteru

Design newsletteru není jednorázový projekt. Vyvíjej svůj design na základě výkonnostních dat a zpětné vazby od odběratelů:

  • Sleduj hloubku posouvání: Dotahují čtenáři newsletter až do konce?
  • Monitoruj klikatelné mapy: Které sekce získávají nejvíce kliknutí? Prosazuj podobný obsah.
  • Průzkumujte odběratele: Ptej se na designové preference každoročně
  • A/B testuj rozvržení: Porovnávej karty vs. lineární rozvržení, umístění obrázků a styly CTA
  • Sleduj konkurenci: Studuj, co funguje v úspěšných newsletterech ve tvém oboru

Nejlepší designy newsletterů jsou neviditelné. Odběratelé si nevšimnou designu — všimnou si obsahu. To znamená, že design dělá svou práci dokonale: odstraňuje třecí plochy, vede pozornost a dělá zážitek ze čtení nenásilným.

Začni jednoduše, buď konzistentní a zdokonaluj na základě dat. Design tvého newsletteru by se měl vyvíjet s tvým publikem, ne před ním.

Často Kladené Otázky

Co dělá dobrý design newsletteru?

Dobrý design newsletteru používá jasnou vizuální hierarchii, konzistentní branding, čitelnou typografii (minimálně 16 px), jednosloupcové rozvržení pro mobilní kompatibilitu a strategické využití bílého prostoru. Vede čtenářovo oko od nadpisu přes obsah k call-to-action.

Měly by být newslettery těžké na text nebo na obrázky?

Ideální rovnováha závisí na typu obsahu, ale většina newsletterů funguje nejlépe s poměrem textu k obrázkům 60/40. Text-first designy zajišťují čitelnost, když jsou obrázky zablokovány, a zlepšují doručitelnost. Používej obrázky k podpoře obsahu, ne k jeho nahrazení.

Jaké je nejlepší rozvržení newsletteru?

Jednosloupcové rozvržení je nejúčinnější pro newslettery, protože funguje na všech zařízeních, je snadné ho procházet a směruje pozornost v lineárním toku. Používej jasné oddělovače sekcí a konzistentní formátování k organizaci obsahu v jednom sloupci.

Sdílet tento článek:
Zpět na všechny články

Požádejte o přednostní přístup

Zadejte své jméno a pracovní e-mailovou adresu. Pošleme vám odkaz pro potvrzení žádosti o přístup k Tajo.

Získat Brevo