E-mailový marketing
Design

Playbook designu e-mailového newsletteru: rozvržení, šablony, mobilní QA a příklady (2026)

Navrhujte e-mailové newslettery s praktickými radami k rozvržení, hierarchii, šablonám, vykreslování na mobilu, přístupnosti, tmavému režimu, testování a e-commerce personalizaci.

Set Noa
Set Noa
Aktualizováno
0 návštěvy · 7 dní
email newsletter
Playbook designu e-mailového newsletteru?

Silný design newsletteru je opakovatelný produkční systém: jasná hierarchie, rozvržení s mobilem na prvním místě, přístupná typografie a kontrast, optimalizované obrázky, jedno hlavní CTA, otestované vykreslení, patička v souladu s předpisy a bezpečná personalizace ze spolehlivých zákaznických dat.

Zjistit více

E-mailové newslettery stále fungují, protože dávají značkám, vydavatelům, tvůrcům a e-commerce týmům přímou cestu k odběratelům, které mají svolení kontaktovat. Design rozhoduje o tom, zda je sdělení čitelné, důvěryhodné, použitelné a funkční napříč e-mailovými klienty.

Tento průvodce zachovává původní strukturu: vizuální hierarchii, konzistenci značky, typy rozvržení, optimalizaci pro mobil, typografii, barvy, přístupnost, design CTA, příklady, nástroje, chyby, kontext Tajo/Brevo, časté otázky a související články. Tato aktualizace odstraňuje nepodložená tvrzení o benchmarcích a mění stránku v praktický playbook designu newsletteru pro rok 2026.

Proč na designu e-mailového newsletteru záleží

Než se pustíme do technik, pojďme pochopit, proč hraje design tak zásadní roli v úspěchu newsletteru.

Test první obrazovky

Odběratelé newsletter standardně nečtou shora dolů. Přelétnou odesílatele, předmět, náhledový text, hlavičku, první titulek, obrázky a první CTA, než se rozhodnou, zda si zpráva zaslouží další pozornost.

Dobrá první obrazovka rychle odpovídá na čtyři otázky:

  • Kdo to poslal?
  • Proč to dostávám?
  • Jaká je hlavní hodnota?
  • Jaký je další krok?

Co design skutečně ovlivňuje

Vyhněte se nepodloženým tvrzením jako „tato změna designu přinese dvouciferný nárůst prokliků”, pokud nemáte vlastní kontrolovaný test. Design newsletteru ovlivňuje výkon prostřednictvím praktických mechanismů:

Designový faktorCo zlepšujeCo zkontrolovat
Jasná hierarchieRychlejší skenování a porozuměníDokáže čtenář na první pohled určit hlavní sdělení?
Rozvržení pro mobilPoužitelnost na malých obrazovkáchSkládá se rozvržení čistě bez horizontálního posouvání?
Strategie obrázkůKontext a vizuální zajímavostDává e-mail smysl i při zablokovaných obrázcích?
Přístupný kontrastČitelnost pro více odběratelůSplňují text a tlačítka požadavky na kontrast?
Jasnost CTAJistota při akciExistuje jedna hlavní akce a popisný text tlačítka?
Konzistence značkyRozpoznatelnost a důvěraOdpovídá design webu, produktu a ostatním kanálům?
QA vykresleníSpolehlivost napříč klientyByla zpráva před spuštěním otestována?

Design Vašeho newsletteru ovlivňuje chování od otevření k prokliku, kvalitu konverzí, odhlášení, stížnosti a důvěru odběratelů. Přesný nárůst závisí na Vašem seznamu, sdělení, nabídce a disciplíně v testování.

Š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>

Základní principy designu e-mailového newsletteru

1. Vizuální hierarchie

Vizuální hierarchie vede čtenáře obsahem v pořadí, které zamýšlíte. Bez ní odběratelé skenují náhodně a klíčová sdělení jim unikají.

Vytvoření účinné vizuální hierarchie

Velikost: Větší prvky přitahují pozornost jako první. Váš titulek by měl být výrazně větší než tělo textu a CTA by měla jasně vystupovat.

Barva: Výrazné nebo kontrastní barvy vytvářejí ohniska pozornosti. Použijte akcentní barvu své značky pro hlavní CTA a důležité prvky.

Rozestupy: Bílý prostor (neboli negativní prostor) odděluje prvky a dává oku místa k odpočinku. Husté designy působí zahlcujícím dojmem; vzdušné designy působí prémiově.

Umístění: Studie sledování očí ukazují, že čtenáři přirozeně skenují ve vzoru F nebo Z. Umístěte nejdůležitější obsah podél těchto cest.

Příklad vizuální hierarchie

[LOGO]                                    [ZOBRAZIT V PROHLÍŽEČI]




          VELKÝ TITULEK (PRVNÍ POZORNOST)
    Podpůrný podtitulek s dalšími detaily


                 [HERO OBRÁZEK]


Tělo textu, které čtenáři poskytuje kontext a hodnotu.
Odstavce držte krátké a přehledné.


            [HLAVNÍ CTA TLAČÍTKO]




   [SEKUNDÁRNÍ OBSAH]    [SEKUNDÁRNÍ OBSAH]


                [PATIČKA]

2. Konzistence značky

Váš newsletter by měl být okamžitě rozpoznatelný jako zpráva od Vaší značky. Konzistence buduje důvěru a posiluje identitu značky s každým odesláním.

Prvky značky, které je třeba udržovat

  • Umístění loga - stejná pozice v každém e-mailu (obvykle vlevo nahoře nebo na střed)
  • Barevná paleta - používejte konzistentně 2 až 3 barvy značky
  • Typografie - držte se 1 až 2 rodin písma
  • Styl obrázků - konzistentní přístup k fotografii nebo ilustraci
  • Hlas a tón - v souladu s webem a další komunikací

Kontrolní seznam konzistence značky

PrvekPravidlo
Primární barvaPoužívejte pro CTA a akcenty
Sekundární barvaPoužívejte pro sekce a oddělovače
LogoZahrňte do hlavičky, volitelně do patičky
PísmaMaximálně 2 rodiny (nadpisy + tělo)
Styl obrázkůKonzistentní filtry, ořez, kompozice

3. Model obrácené pyramidy

Strukturujte obsah newsletteru jako obrácenou pyramidu, nejdůležitější informace nahoře, podpůrné detaily níže.

                  NEJDŮLEŽITĚJŠÍ
            (Titulek, klíčové sdělení, hero)


              PODPŮRNÉ INFORMACE
           (Kontext, přínosy, detaily)


                 VÝZVA K AKCI
            (Jasný další krok)

Tato struktura zajišťuje, že i odběratelé, kteří neposouvají dolů, dostanou Vaše hlavní sdělení.

4. Pravidlo třetin

Pravidlo třetin, vypůjčené z fotografie a grafického designu, vytváří vyvážená, vizuálně přitažlivá rozvržení.

Rozdělte e-mail na mřížku tři krát tři a klíčové prvky umístěte podél čar mřížky nebo do průsečíků. To vytváří přirozenou rovnováhu a přitahuje pozornost ke strategickým místům.

5. Bílý prostor je Váš přítel

Bílý prostor, prázdné místo mezi prvky, je jedním z nejmocnějších designových nástrojů. Bílý prostor:

  • Zlepšuje čitelnost tím, že brání natěsnání textu
  • Vytváří soustředění izolací důležitých prvků
  • Vyjadřuje kvalitu (prémiové značky používají velkorysý bílý prostor)
  • Snižuje kognitivní zátěž čtenářů

Doporučení: Používejte alespoň 20 px odsazení mezi hlavními sekcemi a 10 až 15 px mezi prvky uvnitř sekcí.

Typy rozvržení e-mailového newsletteru

Různé účely newsletteru vyžadují různá rozvržení. Zde jsou nejúčinnější struktury.

1. Jednosloupcové rozvržení

Nejlepší pro: Publikum s mobilem na prvním místě, obsah vedený příběhem, minimalistické značky

             [HLAVIČKA]


           [HERO OBRÁZEK]


           [TITULEK]
          [TĚLO TEXTU]
            [CTA]


        [SEKUNDÁRNÍ OBSAH]


             [PATIČKA]

Výhody:

  • Dokonalá responzivita na mobilu
  • Snadné skenování a čtení
  • Jednoduchý design i kódování
  • Přirozený tok obsahu

Osvědčené postupy:

  • Maximální šířka: 600 px
  • Délka řádku: 50 až 75 znaků
  • Jedno hlavní CTA na sekci

2. Dvousloupcové rozvržení

Nejlepší pro: E-commerce přehlídky, souhrny obsahu, srovnání vedle sebe

             [HLAVIČKA]


           [HERO SEKCE]


   [PRODUKT 1]       [PRODUKT 2]
    [OBRÁZEK]         [OBRÁZEK]
    [TEXT]            [TEXT]
    [CTA]             [CTA]


             [PATIČKA]

Výhody:

  • Efektivně zobrazuje více položek
  • Vytváří vizuální zajímavost
  • Vhodné pro srovnávací obsah

Osvědčené postupy:

  • Na mobilu skládat do jednoho sloupce
  • Stejná šířka sloupců pro rovnováhu
  • Minimální šířka sloupce: 280 px

3. Hybridní/modulární rozvržení

Nejlepší pro: Newslettery bohaté na obsah, zpravodajské přehledy, komunikaci s více tématy

             [HLAVIČKA]


          [HLAVNÍ ČLÁNEK]


   [ČLÁNEK 2]        [ČLÁNEK 3]


         [CTA V PLNÉ ŠÍŘCE]


 [POLOŽKA 1]  [POLOŽKA 2]  [POLOŽKA 3]


             [PATIČKA]

Výhody:

  • Vysoce flexibilní
  • Pojme různé typy obsahu
  • Vytváří vizuální rytmus

Osvědčené postupy:

  • Udržujte jasné oddělení sekcí
  • Používejte vizuální signály pro hierarchii obsahu
  • Pečlivě testujte vykreslení na mobilu

4. Rozvržení ve vzoru Z

Nejlepší pro: Propagační e-maily, oznamovací newslettery

Vzor Z sleduje přirozený pohyb očí po stránce, zleva doprava, poté diagonálně dolů a znovu zleva doprava.

  [LOGO]  [NAVIGACE]        První horizontální sken


                                        Diagonální pohyb


  [OBSAH]  [CTA]        Druhý horizontální sken

Osvědčené postupy:

  • Logo a navigaci umístěte na první horizontální linii
  • Klíčové vizuály umístěte do středové diagonální cesty
  • CTA umístěte na konec horizontálních skenovacích linií

5. Rozvržení ve vzoru F

Nejlepší pro: Newslettery s velkým množstvím textu, vzdělávací obsah

Při obsahu s velkým množstvím textu čtenáři skenují ve vzoru F, dva horizontální průchody následované vertikálním skenem podél levé strany.

        První horizontální sken
        Druhý horizontální sken


                                        Vertikální sken

Osvědčené postupy:

  • Důležité informace umístěte do prvních dvou řádků
  • Odstavce začínejte důležitými slovy
  • Používejte text zarovnaný vlevo pro snadné skenování

Design e-mailů s mobilem na prvním místě

Podíl mobilu se liší podle publika, oboru a typu kampaně, ale většina newsletterů musí fungovat na malých obrazovkách. Než začnete cokoli předpokládat, zkontrolujte vlastní reporty a poté navrhněte šablonu tak, aby hlavní sdělení, CTA a patička zůstaly na mobilu použitelné.

Požadavky na design pro mobil

Dotykově přívětivé cíle

  • Minimální velikost tlačítka: 44x44 pixelů
  • Rozestup dotykových cílů: alespoň 10 px mezi klikatelnými prvky
  • Umístění CTA: na střed a snadno dosažitelné palcem

Typografie pro mobil

PrvekVelikost na desktopuVelikost na mobilu
Titulky28-36 px22-28 px
Podtitulky20-24 px18-22 px
Tělo textu16-18 pxminimálně 16 px
CTA16-18 px16-18 px

Priorita jednoho sloupce

Dvousloupcová rozvržení se na mobilu musí elegantně skládat:

Desktop:                    Mobil:


 SLOUPEC 1   SLOUPEC 2      SLOUPEC 1


                                SLOUPEC 2

Kontrolní seznam optimalizace pro mobil

  • Jednosloupcové nebo responzivní vícesloupcové rozvržení
  • Velikosti písma čitelné bez přibližování (tělo textu 16 px+)
  • Tlačítka dostatečně velká na klepnutí (minimálně 44 px)
  • Obrázky se správně škálují
  • Není nutné horizontální posouvání
  • Důležitý obsah viditelný bez posouvání
  • Náhledový text optimalizovaný pro mobilní schránky
  • Obrázky a celková velikost souboru dostatečně nízké pro mobilní připojení

Techniky responzivního designu

Použijte CSS media queries k přizpůsobení designu:

/* Desktop styles */
.content-wrapper {
  width: 600px;
}


/* Mobile styles */
@media only screen and (max-width: 480px) {
  .content-wrapper {
    width: 100% !important;
  }


  .column {
    display: block !important;
    width: 100% !important;
  }


  .mobile-center {
    text-align: center !important;
  }
}

Poznámka: Mnoho e-mailových klientů má omezenou podporu CSS. Jako primární přístup používejte inline styly a media queries pro vylepšení.

Osvědčené postupy typografie

Typografie může čitelnost a vnímání značky Vašeho newsletteru buď posílit, nebo zničit.

Výběr písma

Webově bezpečná písma

Tato písma se vykreslují konzistentně napříč e-mailovými klienty:

  • Bezpatková: Arial, Helvetica, Verdana, Trebuchet MS
  • Patková: Georgia, Times New Roman, Palatino

Webová písma v e-mailu

Moderní e-mailové klienty podporují webová písma přes @font-face nebo Google Fonts. Vždy uveďte záložní písma:

font-family: 'Open Sans', Arial, sans-serif;

Tip: Testujte webová písma napříč klienty. Gmail, Apple Mail a iOS Mail je podporují; Outlook ne.

Typografická pravidla

Délka řádku

  • Optimální: 50 až 75 znaků na řádek
  • Maximum: 80 znaků
  • Pro šířku 600 px: Použijte písmo 16 až 18 px pro ideální délku řádku

Výška řádku (proklad)

  • Tělo textu: 1,5 až 1,7násobek velikosti písma
  • Titulky: 1,2 až 1,3násobek velikosti písma

Párování písem

Používejte kontrast k vytvoření hierarchie:

Případ použitíPříklad párování
KlasickéGeorgia (nadpisy) + Arial (tělo)
ModerníMontserrat (nadpisy) + Open Sans (tělo)
ProfesionálníRoboto Slab (nadpisy) + Roboto (tělo)
ElegantníPlayfair Display (nadpisy) + Lato (tělo)

Tipy pro formátování textu

  • Používejte tučné písmo pro zdůraznění, ne podtržení (to naznačuje odkazy)
  • Omezte VELKÁ PÍSMENA na krátké titulky nebo CTA
  • Tělo textu zarovnávejte vlevo pro snazší čtení
  • Titulky centrujte pro vizuální rovnováhu
  • Vyhněte se zarovnání do bloku, které vytváří nerovnoměrné mezery

Optimalizace obrázků pro e-mail

Obrázky newslettery obohacují, ale vyžadují pečlivou optimalizaci kvůli výkonu a přístupnosti.

Typy obrázků a jejich použití

Typ obrázkuNejlepší proFormát
Hero/bannerHlavní vizuální ohniskoJPEG nebo WebP
Produktové fotografieE-commerce přehlídkyJPEG
Ikony/grafikaCTA, odrážkyPNG nebo SVG
LogaIdentifikace značkyPNG (průhledné)
AnimovanéUpoutání pozornostiGIF

Pravidla pro rozměry obrázků

  • Maximální šířka: 600 px (odpovídá šířce e-mailu)
  • Hero obrázky: 600 px x 300 až 400 px
  • Produktové obrázky: šířka 280 až 300 px
  • Miniatury: šířka 100 až 150 px

Optimalizace velikosti souborů obrázků

Velké obrázky zpomalují načítání a zvyšují šanci, že e-mail skončí ve spamu.

Cílové velikosti souborů:

  • Hero obrázky: pod 200 KB
  • Produktové obrázky: pod 100 KB
  • Ikony: pod 10 KB
  • Celková velikost e-mailu: pod 1 MB

Optimalizační techniky:

  • Pro fotografie používejte JPEG (kvalita 80 až 85 %)
  • Pro grafiku s průhledností používejte PNG
  • Obrázky komprimujte nástroji jako TinyPNG nebo ImageOptim
  • U klientů s podporou zvažte formát WebP

Osvědčené postupy pro alternativní text

Alternativní text je zásadní pro přístupnost a pro případ, kdy se obrázky nenačtou:

Dobrý alternativní text:

<img src="hero.jpg" alt="Woman wearing our new Spring Collection blue linen dress, standing in a garden">

Špatný alternativní text:

<img src="hero.jpg" alt="image" />
<img src="hero.jpg" alt="" />
<img src="hero.jpg" alt="hero-image-spring-2025-v2-final.jpg" />

Pravidla pro alternativní text:

  • Popište, co obrázek zobrazuje
  • Přirozeně zahrňte relevantní klíčová slova
  • Držte se pod 125 znaky
  • Udělejte ho smysluplný, ne jen „obrázek něčeho…”

Optimalizace pro displeje Retina

Pro ostré obrázky na displejích s vysokým rozlišením používejte obrázky ve dvojnásobné velikosti oproti zobrazení:

  • Velikost zobrazení: šířka 300 px
  • Soubor obrázku: šířka 600 px
  • V HTML nastavte explicitní šířku
<img src="product-600w.jpg" width="300" style="width: 300px; max-width: 100%;" alt="Product description">

Psychologie a použití barev

Barvy ovlivňují emoce, vedou pozornost a posilují identitu značky.

Psychologie barev v e-mailu

BarvaAsociaceNejlepší pro
ModráDůvěra, stabilita, klidFinance, technologie, zdravotnictví
ČervenáNaléhavost, vzrušení, vášeňVýprodeje, CTA, naléhavost
ZelenáRůst, zdraví, přírodaUdržitelnost, zdraví, úspěch
OranžováEnergie, kreativita, teploCTA, značky zaměřené na mladé
FialováLuxus, kreativita, moudrostPrémiové značky, kosmetika
ŽlutáOptimismus, jasnost, teploZvýraznění, pozornost
ČernáSofistikovanost, luxusPrémiové, móda
BíláČistota, minimalismus, ryzostProstor, 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:

  • Brevo (dříve Sendinblue) - integrováno s Tajo
  • 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.

Tvorba designů newsletterů s Brevo a Tajo

Brevo zajišťuje produkční vrstvu newsletteru: šablony, drag-and-drop editor, nastavení kampaní, pole kontaktů, personalizaci, automatizaci, SMS, WhatsApp a reportování v závislosti na tarifu a konfiguraci.

Tajo podporuje vrstvu zákaznických dat pro týmy na Shopify, které používají Brevo. Synchronizuje kontext zákazníků, objednávek, produktů, souhlasů, věrnosti a zapojení, takže newslettery mohou využívat lepší segmenty a bezpečnější dynamický obsah.

Praktické workflow

  1. Vytvořte znovupoužitelnou šablonu newsletteru v Brevo.
  2. Definujte požadovaná datová pole pro personalizaci a segmentaci.
  3. Použijte Tajo, aby data o zákaznících, objednávkách, produktech a souhlasech ze Shopify byla k dispozici pro workflow v Brevo.
  4. Vytvořte segmenty jako prvokupující, VIP zákazníci, kupující podle kategorií, neaktivní zákazníci a nedávní kupující, které je třeba vyloučit ze slevových odeslání.
  5. Dynamické bloky přidávejte jen tehdy, když je definován záložní obsah.
  6. Před spuštěním otestujte vykreslení na mobilu, chování v tmavém režimu, odkazy, personalizaci, odhlášení a produktová data.

Pravidla dynamického obsahu

Personalizace newsletter zlepšuje jen tehdy, když jsou data přesná a záložní obsah bezpečný.

Dynamický obsah používejte pro:

  • Doporučení produktů podle nedávných nákupů nebo kategorií.
  • Věrnostní připomínky podle ověřených dat programu.
  • Varianty podle lokality nebo jazyka, když jsou data o odběrateli spolehlivá.
  • Bloky podle životního cyklu zákazníka, například první nákup, opakovaný nákup nebo neaktivní zákazník.

Dynamickému obsahu se vyhněte, když:

  • Zdrojové pole je neúplné.
  • Dostupnost produktu může být zastaralá.
  • Záložní obsah by vypadal rozbitě.
  • Data o souhlasu nebo preferencích jsou nejasná.

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? Začněte s Tajo a synchronizujte data o zákaznících, objednávkách, produktech, souhlasech, věrnosti a zapojení do workflow v Brevo, aby Vaše designy mohly využívat lepší segmenty a bezpečnější personalizaci.

Související články

Č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.
Sdílet tento článek:
Zpět na všechny články

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

Uveďte své křestní jméno a e-mail nebo telefonní číslo. Pošleme Vám informace o přístupu k platformě Tajo.

automatické rozpoznání
Získat Brevo