E-mailový marketing
Dizajn

Príručka dizajnu e-mailových newsletterov: rozloženia, šablóny, mobilné QA a príklady (2026)

Navrhujte e-mailové newslettery s praktickými radami k rozloženiu, hierarchii, šablónam, vykresľovaniu na mobile, prístupnosti, tmavému režimu, testovaniu a e-commerce personalizácii.

Set Noa
Set Noa
Aktualizované
0 návštevy · 7 dní
email newsletter
Príručka dizajnu e-mailových newsletterov?

Silný dizajn newslettera je opakovateľný produkčný systém: jasná hierarchia, rozloženie navrhnuté najprv pre mobil, prístupná typografia a kontrast, optimalizované obrázky, jedno hlavné CTA, otestované vykresľovanie, pätička v súlade s predpismi a bezpečná personalizácia zo spoľahlivých zákazníckych dát.

Zistiť viac

E-mailové newslettery stále fungujú, pretože dávajú značkám, vydavateľom, tvorcom a e-commerce tímom priamu cestu k odberateľom, ktorých majú súhlas kontaktovať. Dizajn rozhoduje o tom, či je posolstvo čitateľné, dôveryhodné, akčné a použiteľné naprieč e-mailovými klientmi.

Tento sprievodca zachováva pôvodnú štruktúru: vizuálna hierarchia, konzistentnosť značky, typy rozloženia, optimalizácia pre mobil, typografia, farby, prístupnosť, dizajn CTA, príklady, nástroje, chyby, kontext Tajo a Brevo, časté otázky a súvisiace články. Táto aktualizácia odstraňuje nepodložené tvrdenia o benchmarkoch a mení stránku na praktickú príručku dizajnu newsletterov pre rok 2026.

Prečo záleží na dizajne e-mailového newslettera

Skôr než sa pustíme do techník, pozrime sa, prečo hrá dizajn v úspechu newslettera takú kľúčovú úlohu.

Test prvej obrazovky

Odberatelia nečítajú newsletter automaticky zhora nadol. Prebehnú odosielateľa, predmet, náhľadový text, hlavičku, prvý titulok, obrázky a prvé CTA a až potom sa rozhodnú, či si správa zaslúži viac pozornosti.

Dobrá prvá obrazovka rýchlo odpovedá na štyri otázky:

  • Kto to poslal?
  • Prečo to dostávam?
  • Aká je hlavná hodnota?
  • Aký je ďalší krok?

Čo dizajn skutočne ovplyvňuje

Vyhnite sa nepodloženým tvrdeniam typu „táto zmena dizajnu prináša dvojciferný nárast kliknutí“, pokiaľ nemáte vlastný kontrolovaný test. Dizajn newslettera ovplyvňuje výkon cez praktické mechanizmy:

Faktor dizajnuČo zlepšujeČo skontrolovať
Jasná hierarchiaRýchlejšie skenovanie a pochopenieDokáže čitateľ na jeden pohľad určiť hlavné posolstvo?
Rozloženie pre mobilPoužiteľnosť na malých obrazovkáchSkladá sa rozloženie čisto bez horizontálneho posúvania?
Stratégia obrázkovKontext a vizuálna príťažlivosťDáva e-mail zmysel aj s blokovanými obrázkami?
Prístupný kontrastČitateľnosť pre viac odberateľovSpĺňajú text a tlačidlá požiadavky na kontrast?
Zreteľnosť CTAIstota pri akciiExistuje jedna hlavná akcia a popisný text tlačidla?
Konzistentnosť značkyRozpoznateľnosť a dôveraZodpovedá dizajn webu, produktu a ostatným kanálom?
QA vykresľovaniaSpoľahlivosť naprieč klientmiBola správa pred spustením otestovaná?

Dizajn Vášho newslettera ovplyvňuje správanie od otvorenia po kliknutie, kvalitu konverzií, odhlásenia, sťažnosti a dôveru odberateľov. Presný nárast závisí od Vášho zoznamu, posolstva, ponuky a disciplíny pri testovaní.

Šablóny Tajo

Štyri rozloženia v prevádzke

Každý panel nižšie je skutočné e-mailové HTML šablóny v ráme so skutočnou šírkou. Stiahnite šírku na 375 px a sledujte, ako sa stĺpce skladajú pod seba.

Sleduje váš motív — prepnite ho v hlavičke a uvidíte ten druhý.

Prečítať HTML šablóny The Letter 6 KB, bez zostavenia 
<!DOCTYPE html>
<html lang="sk" 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, ktorý si necháte v poznámkach, odvádza viac práce než váš obsahový kalendár.</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: sústredné modré oblúky pretnuté šikmým pásom" 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;">Archív je ten produkt</h1>
        <p class="d-ink" style="margin:0 0 20px 0;font-size:18px;line-height:30px;color:#242424;">Pred tromi týždňami som hľadal text, ktorý som napísal v roku 2019, a nenašiel som ho. Ani na webe, ani v exporte, ani vo vyhľadávaní samotnej platformy. Tisícdvesto čísel a jediný fungujúci register bola moja pamäť.</p>
        <p class="d-ink" style="margin:0 0 20px 0;font-size:18px;line-height:30px;color:#242424;">To je tá časť, ktorú vám o šiestich rokoch newslettera nikto nepovie. Odosielať je ľahké. Uchovávať nie.</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šetko, čo publikujete, je vklad. Výber takmer nikto nestavia.</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;">Tento týždeň som teda staršie čísla prestaval na skutočný archív, so štítkami, fulltextovým vyhľadávaním a trvalými adresami. Trvalo to deväť dní. Počet odberateľov sa nepohol. Čas strávený na webe sa strojnásobil.</p>
        <p class="d-ink" style="margin:0 0 28px 0;font-size:18px;line-height:30px;color:#242424;">Všetko je nižšie, vrátane častí, ktoré nevyšli.</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;">Prečítať 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;">Písané rukou každý štvrtok. Odpovedzte a ja si to prečítam.</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ásiť odber</a> &middot; <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Zobraziť v prehliadači</a></p>
      </td></tr>

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

Základné princípy dizajnu e-mailového newslettera

1. Vizuálna hierarchia

Vizuálna hierarchia vedie čitateľov obsahom v poradí, ktoré zamýšľate. Bez nej odberatelia skenujú náhodne a prehliadajú kľúčové posolstvá.

Vytvorenie účinnej vizuálnej hierarchie

Veľkosť: väčšie prvky priťahujú pozornosť ako prvé. Váš titulok by mal byť výrazne väčší než text tela a CTA by mali jasne vyčnievať.

Farba: výrazné alebo kontrastné farby vytvárajú ohniská pozornosti. Pre hlavné CTA a dôležité prvky použite akcentovú farbu Vašej značky.

Medzery: biely priestor (alebo negatívny priestor) oddeľuje prvky a dáva oku miesto na oddych. Husté dizajny pôsobia zahlcujúco, vzdušné dizajny pôsobia prémiovo.

Umiestnenie: štúdie sledovania očí ukazujú, že čitatelia prirodzene skenujú vo vzore F alebo Z. Najdôležitejší obsah umiestnite na tieto dráhy.

Príklad vizuálnej hierarchie

[LOGO]                                    [ZOBRAZIŤ V PREHLIADAČI]




          VEĽKÝ TITULOK (PRVÁ POZORNOSŤ)
    Podporný podtitulok s ďalšími podrobnosťami


                 [HLAVNÝ OBRÁZOK]


Text tela, ktorý čitateľovi poskytuje kontext a hodnotu.
Odseky udržujte krátke a prehľadné.


            [HLAVNÉ TLAČIDLO CTA]




   [SEKUNDÁRNY OBSAH]    [SEKUNDÁRNY OBSAH]


                [PÄTIČKA]

2. Konzistentnosť značky

Váš newsletter by mal byť okamžite rozpoznateľný ako správa od Vašej značky. Konzistentnosť buduje dôveru a s každým odoslaním posilňuje identitu značky.

Prvky značky, ktoré treba zachovať

  • Umiestnenie loga - rovnaká pozícia v každom e-maile (typicky vľavo hore alebo na strede)
  • Farebná paleta - konzistentne používajte 2 až 3 farby značky
  • Typografia - držte sa 1 až 2 rodín písma
  • Štýl obrázkov - konzistentný prístup k fotografii alebo ilustrácii
  • Hlas a tón - zosúlaďte s webom a ostatnou komunikáciou

Kontrolný zoznam konzistentnosti značky

PrvokPravidlo
Primárna farbaPoužívajte pre CTA a akcenty
Sekundárna farbaPoužívajte pre sekcie a oddeľovače
LogoZahrňte v hlavičke, voliteľne v pätičke
PísmaMaximálne 2 rodiny (nadpisy + telo)
Štýl obrázkovKonzistentné filtre, orezanie, kompozícia

3. Model obrátenej pyramídy

Obsah newslettera štruktúrujte ako obrátenú pyramídu, najdôležitejšie informácie hore, podporné podrobnosti nižšie.

                  NAJDÔLEŽITEJŠIE
            (Titulok, kľúčové posolstvo, hlavný vizuál)


              PODPORNÉ INFORMÁCIE
           (Kontext, prínosy, podrobnosti)


                 VÝZVA NA AKCIU
            (Jasný ďalší krok)

Táto štruktúra zabezpečí, že Vaše hlavné posolstvo dostanú aj odberatelia, ktorí sa neposúvajú nižšie.

4. Pravidlo tretín

Pravidlo tretín, prevzaté z fotografie a grafického dizajnu, vytvára vyvážené, vizuálne príťažlivé rozloženia.

Rozdeľte e-mail na mriežku tri krát tri a kľúčové prvky umiestnite pozdĺž čiar mriežky alebo do priesečníkov. Vzniká tak prirodzená rovnováha a pozornosť sa sústreďuje na strategické miesta.

5. Biely priestor je Váš priateľ

Biely priestor, teda prázdne miesto medzi prvkami, je jedným z najsilnejších dizajnových nástrojov. Pomáha:

  • Zlepšiť čitateľnosť tým, že bráni preplneniu textom
  • Vytvoriť sústredenie izolovaním dôležitých prvkov
  • Vyjadriť kvalitu (prémiové značky používajú štedrý biely priestor)
  • Znížiť kognitívnu záťaž čitateľov

Odporúčanie: medzi hlavnými sekciami používajte odsadenie aspoň 20 px a medzi prvkami vnútri sekcií 10 až 15 px.

Typy rozloženia e-mailového newslettera

Rôzne účely newsletterov vyžadujú rôzne rozloženia. Tu sú najúčinnejšie štruktúry.

1. Jednostĺpcové rozloženie

Najvhodnejšie pre: publikum prevažne na mobile, obsah vedený príbehom, minimalistické značky

             [HLAVIČKA]


           [HLAVNÝ OBRÁZOK]


           [TITULOK]
          [TEXT TELA]
            [CTA]


        [SEKUNDÁRNY OBSAH]


             [PÄTIČKA]

Výhody:

  • Dokonalá responzívnosť na mobile
  • Ľahko sa skenuje a číta
  • Jednoduchý návrh aj kódovanie
  • Prirodzený tok obsahu

Osvedčené postupy:

  • Maximálna šírka: 600 px
  • Dĺžka riadku: 50 až 75 znakov
  • Jedno hlavné CTA na sekciu

2. Dvojstĺpcové rozloženie

Najvhodnejšie pre: e-commerce prezentácie, prehľady obsahu, porovnania vedľa seba

             [HLAVIČKA]


           [HLAVNÁ SEKCIA]


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


             [PÄTIČKA]

Výhody:

  • Efektívne zobrazuje viac položiek
  • Vytvára vizuálnu príťažlivosť
  • Vhodné pre porovnávací obsah

Osvedčené postupy:

  • Na mobile skladajte do jedného stĺpca
  • Rovnaká šírka stĺpcov pre vyváženosť
  • Minimálna šírka stĺpca: 280 px

3. Hybridné/modulárne rozloženie

Najvhodnejšie pre: newslettery bohaté na obsah, spravodajské prehľady, komunikáciu s viacerými témami

             [HLAVIČKA]


          [HLAVNÝ ČLÁNOK]


   [ČLÁNOK 2]         [ČLÁNOK 3]


         [CTA NA CELÚ ŠÍRKU]


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


             [PÄTIČKA]

Výhody:

  • Vysoko flexibilné
  • Pojme rôzne typy obsahu
  • Vytvára vizuálny rytmus

Osvedčené postupy:

  • Zachovajte jasné oddelenie sekcií
  • Hierarchiu obsahu ukážte vizuálnymi signálmi
  • Vykresľovanie na mobile dôkladne testujte

4. Rozloženie vo vzore Z

Najvhodnejšie pre: propagačné e-maily, oznamovacie newslettery

Vzor Z sleduje prirodzený pohyb očí po stránke, zľava doprava, potom diagonálne nadol a znova zľava doprava.

  [LOGO]  [NAVIGÁCIA]        Prvý horizontálny prechod


                                        Diagonálny pohyb


  [OBSAH]  [CTA]        Druhý horizontálny prechod

Osvedčené postupy:

  • Logo a navigáciu umiestnite na prvú horizontálnu líniu
  • Kľúčové vizuály umiestnite do stredovej diagonálnej dráhy
  • CTA umiestnite na konce horizontálnych línií

5. Rozloženie vo vzore F

Najvhodnejšie pre: newslettery s veľkým množstvom textu, vzdelávací obsah

Pri obsahu s veľkým množstvom textu čitatelia skenujú vo vzore F, dva horizontálne prechody a následne vertikálny prechod po ľavej strane.

        Prvý horizontálny prechod
        Druhý horizontálny prechod


                                        Vertikálny prechod

Osvedčené postupy:

  • Dôležité informácie dajte do prvých dvoch riadkov
  • Odseky začínajte dôležitými slovami
  • Text zarovnajte vľavo pre ľahké skenovanie

Dizajn e-mailov navrhnutý najprv pre mobil

Podiel mobilu sa líši podľa publika, odvetvia a typu kampane, ale väčšina newsletterov musí fungovať na malých obrazovkách. Skôr než začnete robiť predpoklady, pozrite si vlastné reporty a potom šablónu navrhnite tak, aby hlavné posolstvo, CTA a pätička zostali na mobile použiteľné.

Požiadavky na dizajn pre mobil

Ciele vhodné na dotyk

  • Minimálna veľkosť tlačidla: 44 x 44 pixelov
  • Rozostup dotykových cieľov: aspoň 10 px medzi klikateľnými prvkami
  • Umiestnenie CTA: na strede a ľahko dosiahnuteľné palcom

Typografia pre mobil

PrvokVeľkosť na desktopeVeľkosť na mobile
Titulky28 až 36 px22 až 28 px
Podtitulky20 až 24 px18 až 22 px
Text tela16 až 18 pxminimálne 16 px
CTA16 až 18 px16 až 18 px

Priorita jedného stĺpca

Dvojstĺpcové rozloženia sa musia na mobile elegantne skladať:

Desktop:                    Mobil:


 STĹPEC 1   STĹPEC 2              STĹPEC 1


                                STĹPEC 2

Kontrolný zoznam optimalizácie pre mobil

  • Jednostĺpcové alebo responzívne viacstĺpcové rozloženie
  • Veľkosti písma čitateľné bez priblíženia (telo 16 px a viac)
  • Tlačidlá dostatočne veľké na ťuknutie (minimálne 44 px)
  • Obrázky sa správne škálujú
  • Nie je potrebné horizontálne posúvanie
  • Dôležitý obsah viditeľný bez posúvania
  • Náhľadový text optimalizovaný pre mobilné schránky
  • Obrázky a celková veľkosť súboru dostatočne malé pre mobilné pripojenia

Techniky responzívneho dizajnu

Na prispôsobenie dizajnu použite CSS media queries:

/* 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: mnohí e-mailoví klienti majú obmedzenú podporu CSS. Ako hlavný prístup používajte inline štýly a media queries ako vylepšenie.

Osvedčené postupy v typografii

Typografia môže čitateľnosť newslettera a vnímanie značky posilniť alebo zničiť.

Výber písma

Webovo bezpečné písma

Tieto písma sa vykresľujú konzistentne naprieč e-mailovými klientmi:

  • Bezpätkové: Arial, Helvetica, Verdana, Trebuchet MS
  • Pätkové: Georgia, Times New Roman, Palatino

Webové písma v e-maile

Moderní e-mailoví klienti podporujú webové písma cez @font-face alebo Google Fonts. Vždy uveďte náhrady:

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

Tip: webové písma testujte naprieč klientmi. Gmail, Apple Mail a iOS Mail ich podporujú; Outlook nie.

Typografické pravidlá

Dĺžka riadku

  • Optimálne: 50 až 75 znakov na riadok
  • Maximum: 80 znakov
  • Pri šírke 600 px: pre ideálnu dĺžku riadku použite písmo 16 až 18 px

Výška riadku (preklad)

  • Text tela: 1,5- až 1,7-násobok veľkosti písma
  • Titulky: 1,2- až 1,3-násobok veľkosti písma

Párovanie písiem

Hierarchiu vytvárajte kontrastom:

PoužitiePríklad párovania
KlasickéGeorgia (nadpisy) + Arial (telo)
ModernéMontserrat (nadpisy) + Open Sans (telo)
ProfesionálneRoboto Slab (nadpisy) + Roboto (telo)
ElegantnéPlayfair Display (nadpisy) + Lato (telo)

Tipy na formátovanie textu

  • Na zdôraznenie používajte tučné písmo, nie podčiarknutie (to naznačuje odkazy)
  • VEĽKÉ PÍSMENÁ obmedzte na krátke titulky alebo CTA
  • Text tela zarovnajte vľavo pre ľahšie čítanie
  • Titulky centrujte pre vizuálnu rovnováhu
  • Vyhnite sa zarovnaniu do bloku, ktoré vytvára nerovnomerné medzery

Optimalizácia obrázkov pre e-mail

Obrázky newslettery obohacujú, ale vyžadujú starostlivú optimalizáciu pre výkon a prístupnosť.

Typy obrázkov a ich použitie

Typ obrázkaNajvhodnejšie preFormát
Hlavný/bannerHlavný vizuálny bodJPEG alebo WebP
Produktové fotografieE-commerce prezentácieJPEG
Ikony/grafikaCTA, odrážkyPNG alebo SVG
LogáIdentifikácia značkyPNG (priehľadné)
AnimovanéUpútanie pozornostiGIF

Pravidlá veľkosti obrázkov

  • Maximálna šírka: 600 px (zodpovedá šírke e-mailu)
  • Hlavné obrázky: 600 px x 300 až 400 px
  • Produktové obrázky: šírka 280 až 300 px
  • Miniatúry: šírka 100 až 150 px

Optimalizácia veľkosti súborov obrázkov

Veľké obrázky spomaľujú načítanie a zvyšujú pravdepodobnosť, že e-mail skončí v spame.

Cieľové veľkosti súborov:

  • Hlavné obrázky: pod 200 KB
  • Produktové obrázky: pod 100 KB
  • Ikony: pod 10 KB
  • Celková veľkosť e-mailu: pod 1 MB

Techniky optimalizácie:

  • Pre fotografie používajte JPEG (kvalita 80 až 85 %)
  • Pre grafiku s priehľadnosťou používajte PNG
  • Obrázky komprimujte nástrojmi ako TinyPNG alebo ImageOptim
  • Pre podporujúcich klientov zvážte formát WebP

Osvedčené postupy pre alternatívny text

Alternatívny text je kľúčový pre prístupnosť a pre prípady, keď sa obrázky nenačítajú:

Dobrý alternatívny text:

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

Zlý alternatívny text:

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

Pravidlá pre alternatívny text:

  • Opíšte, čo obrázok zobrazuje
  • Prirodzene zahrňte relevantné kľúčové slová
  • Držte sa pod 125 znakov
  • Urobte ho zmysluplným, nie iba „obrázok…“

Optimalizácia pre Retina displeje

Pre ostré obrázky na obrazovkách s vysokým rozlíšením používajte obrázky v dvojnásobnej veľkosti oproti zobrazovanej:

  • Zobrazovaná veľkosť: šírka 300 px
  • Súbor obrázka: šírka 600 px
  • V HTML nastavte explicitnú šírku
<img src="product-600w.jpg" width="300" style="width: 300px; max-width: 100%;" alt="Product description">

Psychológia a používanie farieb

Farba ovplyvňuje emócie, vedie pozornosť a posilňuje identitu značky.

Psychológia farieb v e-maile

FarbaAsociácieNajvhodnejšie pre
ModráDôvera, stabilita, pokojFinancie, technológie, zdravotníctvo
ČervenáNaliehavosť, vzrušenie, vášeňVýpredaje, CTA, naliehavosť
ZelenáRast, zdravie, prírodaUdržateľnosť, zdravie, úspech
OranžováEnergia, kreativita, teploCTA, značky zamerané na mladých
FialováLuxus, kreativita, múdrosťPrémiové značky, krása
ŽltáOptimizmus, jasnosť, teploZvýraznenia, pozornosť
ČiernaSofistikovanosť, luxusPrémiový segment, móda
BielaČistota, minimalizmus, jednoduchosťPriestor, pozadia

Pravidlá pomeru farieb

Držte sa pravidla 60-30-10:

  • 60 %: primárna farba/pozadie
  • 30 %: sekundárna farba
  • 10 %: akcentová farba (CTA, zvýraznenia)

Kontrast farieb pre prístupnosť

Zabezpečte dostatočný kontrast medzi textom a pozadím:

  • Bežný text: minimálny pomer kontrastu 4,5:1
  • Veľký text (18 px a viac): minimálny pomer kontrastu 3:1
  • Použite nástroje: WebAIM Contrast Checker

Príklady vysokého kontrastu:

  • Čierna (#000000) na bielej (#FFFFFF) - 21:1
  • Tmavomodrá (#003366) na bielej - 12,6:1
  • Biela na tmavofialovej (#4A154B) - 10,8:1

Farby tlačidiel CTA

Vaše tlačidlá výzvy na akciu by mali okamžite vyčnievať:

  • Použite akcentovú farbu s najvyšším kontrastom
  • Zachovávajte konzistentnosť vo všetkých e-mailoch
  • A/B testujte rôzne farby na optimalizáciu výkonu
  • Zabezpečte, aby sa farba líšila od textových odkazov v tele

Prístupnosť e-mailov

Prístupný dizajn e-mailov zabezpečuje, že s Vaším obsahom môžu pracovať všetci odberatelia vrátane tých, ktorí používajú asistenčné technológie.

Pravidlá WCAG pre e-mail

Pravidlá prístupnosti webového obsahu (WCAG) platia aj pre e-mail:

1. Vnímateľnosť

  • Poskytnite textové alternatívy k obrázkom (alternatívny text)
  • Nespoliehajte sa pri prenose informácií iba na farbu
  • Zabezpečte dostatočný kontrast farieb
  • Umožnite zmenu veľkosti textu bez rozbitia rozloženia

2. Ovládateľnosť

  • Všetky funkcie dostupné cez klávesnicu
  • Dajte používateľom dostatok času na prečítanie obsahu
  • Nepoužívajte blikajúci obsah, ktorý by mohol vyvolať záchvat

3. Zrozumiteľnosť

  • Používajte jasný, jednoduchý jazyk
  • Zachovávajte konzistentnú navigáciu
  • Poskytujte jasné chybové hlásenia

4. Robustnosť

  • Používajte platné HTML
  • Testujte naprieč rôznymi e-mailovými klientmi
  • Zabezpečte kompatibilitu s asistenčnými technológiami

Kontrolný zoznam prístupného e-mailu

  • Všetky obrázky majú popisný alternatívny text
  • Kontrast farieb spĺňa štandard WCAG AA (4,5:1)
  • Odkazy sú popisné („Prečítajte si nášho sprievodcu“, nie „Kliknite sem“)
  • Veľkosť písma je aspoň 14 px (preferovane 16 px)
  • E-mail má logické poradie čítania
  • Tabuľky sa používajú iba na rozloženie, nie na dáta (alebo majú správne hlavičky)
  • Jazyk je deklarovaný v HTML
  • Indikátory zamerania sú pri interaktívnych prvkoch viditeľné

Ohľad na čítačky obrazovky

Štruktúrujte e-mail pre používateľov čítačiek obrazovky:

  • Ak je to možné, používajte sémantické HTML (h1, h2, p atď.)
  • Poskytnite verziu v čistom texte
  • Zahrňte odkaz „Zobraziť v prehliadači“
  • Vyhnite sa e-mailom „iba z obrázkov“
  • Testujte s VoiceOver, NVDA alebo JAWS

Účinný dizajn CTA

Vaša výzva na akciu je miesto, kde sa dizajn stretáva s konverziou. Urobte ju správne.

Osvedčené postupy pre tlačidlá CTA

Veľkosť a tvar

  • Minimálna veľkosť: výška 44 px, šírka 120 px
  • Odsadenie: aspoň 12 až 16 px vertikálne, 24 až 32 px horizontálne
  • Tvar: používajte tvar tlačidla, ktorý zodpovedá značke a zostáva ľahko rozpoznateľný

Farba a kontrast

  • Použite akcentovú farbu značky, ktorá vyčnieva z okolitej sekcie
  • Zabezpečte vysoký kontrast voči pozadiu
  • Text tlačidla by mal byť veľmi dobre čitateľný

Pravidlá pre text

  • Používajte akčné slovesá: „Nakupovať“, „Začnite“, „Stiahnuť“
  • Ak je to vhodné, vytvorte naliehavosť: „Uplatnite si zľavu“
  • Držte ho krátky: 2 až 5 slov
  • Vyhnite sa všeobecnému textu: „Kliknite sem“, „Odoslať“, „Viac informácií“

Umiestnenie CTA

  • Hlavné CTA: nad ohybom (viditeľné bez posúvania)
  • Sekundárne CTA: po podpornom obsahu
  • Jedno hlavné CTA na e-mail (vyhnite sa paralýze rozhodovania)

Príklady textov CTA

OdvetvieÚčinné CTA
E-commerce„Nakúpte vo výpredaji“
SaaS„Začnite bezplatnú skúšobnú verziu“
Obsah„Prečítajte si celého sprievodcu“
Podujatia„Rezervovať si miesto“
Newsletter„Získajte týždenné tipy“

Tlačidlá vs. textové odkazy

Tlačidlá používajte na hlavné akcie a textové odkazy na sekundárne akcie:

[NAKUPOVAŤ]   Hlavné tlačidlo (vysoká vizuálna váha)


alebo si prezrite naše novinky    Sekundárny textový odkaz

Príklady e-mailových newsletterov podľa odvetvia

Pozrime sa na účinné dizajny newsletterov v rôznych odvetviach.

Dizajn e-commerce newslettera

Kľúčové prvky:

  • Kvalitná produktová fotografia
  • Zreteľné zobrazenie cien
  • Prezentácia viacerých produktov
  • Silné propagačné posolstvo
  • Ľahko dostupné tlačidlá „Nakupovať“

Odporúčané rozloženie: modulárna mriežka s produktovými kartami

         BANNER VÝPREDAJA


        [HLAVNÝ PRODUKT]
         ZĽAVA 30 %
       [NAKUPOVAŤ]


  [PROD 1]        [PROD 2]
   $49.99          $79.99


     DOPRAVA ZDARMA NAD $75

Dizajn SaaS/technologického newslettera

Kľúčové prvky:

  • Čistá, minimalistická estetika
  • Zvýraznenie funkcií s ikonami
  • Zameranie na vzdelávací obsah
  • Jasné hodnotové propozície
  • Profesionálne obrázky

Odporúčané rozloženie: jeden stĺpec s blokmi funkcií

      OZNÁMENIE NOVEJ FUNKCIE


        [SNÍMKA OBRAZOVKY FUNKCIE]


  Prínos jedna
  Prínos dva
  Prínos tri


         [VYSKÚŠAJTE TERAZ]

Dizajn mediálneho/vydavateľského newslettera

Kľúčové prvky:

  • Silná typografická hierarchia
  • Náhľady článkov s obrázkami
  • Organizácia podľa kategórií
  • Mená autorov
  • Údaje o čase čítania

Odporúčané rozloženie: obsahová mriežka s kartami

        HLAVNÝ ČLÁNOK
   [VEĽKÝ OBRÁZOK]
   Text titulku
   Krátky úryvok...


  [ČLÁNOK 2]      [ČLÁNOK 3]
   Titulok        Titulok


         ĎALŠIE ČLÁNKY

Dizajn B2B newslettera/newslettera profesionálnych služieb

Kľúčové prvky:

  • Konzervatívny, profesionálny dizajn
  • Obsah odborného líderstva
  • Prípadové štúdie a dáta
  • Propagácia podujatí
  • Zdroje na stiahnutie

Odporúčané rozloženie: profesionálny jeden stĺpec

      [LOGO FIRMY]


    POSTREHY TOHTO MESIACA


   Odvetvová správa
     Kľúčové zistenia z našej najnovšej
     analýzy trhu...
          [ČÍTAŤ VIAC]


   Nadchádzajúci webinár
     15. marca o 14:00 EST
         [REGISTROVAŤ SA]

Nástroje a zdroje pre dizajn e-mailov

Dizajnové platformy

Editory typu drag-and-drop:

  • Brevo (predtým Sendinblue) - integrované s Tajo
  • Mailchimp
  • Klaviyo
  • Campaign Monitor

Profesionálne dizajnové nástroje:

  • Figma (dizajn a prototypovanie)
  • Adobe XD
  • Sketch

Zdroje šablón

Bezplatné šablóny:

  • Knižnica šablón Brevo
  • Šablóny komunity Litmus
  • Šablóny Email on Acid

Prémiové šablóny:

  • E-mailové šablóny ThemeForest
  • Envato Elements
  • Creative Market

Testovacie nástroje

  • Litmus - náhľad e-mailu vo viac než 90 klientoch
  • Email on Acid - testovanie naprieč klientmi
  • Mail Tester - kontrola spamového skóre
  • Accessible Email - overenie prístupnosti

Časté chyby v dizajne e-mailov, ktorým sa treba vyhnúť

1. E-maily preplnené obrázkami

Problém: niektorí e-mailoví klienti obrázky predvolene blokujú. E-maily zložené iba z obrázkov sa zobrazia prázdne.

Riešenie: vždy zahrňte živý text. Obrázky používajte na obohatenie obsahu, nie ako jeho náhradu.

2. Príliš veľa CTA

Problém: viacero konkurenčných CTA vytvára paralýzu rozhodovania.

Riešenie: jedno hlavné CTA na e-mail. Na sekundárne akcie používajte textové odkazy.

3. Ignorovanie mobilu

Problém: dizajny, ktoré vyzerajú skvele na desktope, na mobile zlyhávajú.

Riešenie: navrhujte najprv pre mobil. Pred odoslaním testujte na viacerých zariadeniach.

4. Slabý kontrast

Problém: text s nízkym kontrastom sa ťažko číta a nespĺňa štandardy prístupnosti.

Riešenie: používajte nástroje na kontrolu kontrastu. Dodržujte minimálny pomer 4,5:1.

5. Preplnené rozloženia

Problém: husté dizajny čitateľov zahlcujú a znižujú zapojenie.

Riešenie: doprajte si biely priestor. Sústreďte sa na menej kvalitnejších častí obsahu.

6. Nekonzistentný branding

Problém: e-maily, ktoré nezodpovedajú Vášmu webu, odberateľov mätú.

Riešenie: vytvorte pravidlá značky pre e-maily. Konzistentnosť udržujte pomocou šablón.

7. Pomaly sa načítavajúce e-maily

Problém: veľké súbory sa načítavajú príliš dlho, najmä na mobile.

Riešenie: komprimujte obrázky. Celkovú veľkosť e-mailu udržte pod 1 MB.

Tvorba dizajnu newsletterov s Brevo a Tajo

Brevo zabezpečuje produkčnú vrstvu newslettera: šablóny, editor drag-and-drop, nastavenie kampaní, polia kontaktov, personalizáciu, automatizáciu, SMS, WhatsApp a reporting v závislosti od plánu a konfigurácie.

Tajo podporuje vrstvu zákazníckych dát pre tímy na Shopify, ktoré používajú Brevo. Synchronizuje kontext zákazníkov, objednávok, produktov, súhlasov, vernosti a zapojenia, aby newslettery mohli používať lepšie segmenty a bezpečnejší dynamický obsah.

Praktický workflow

  1. Vytvorte v Brevo opakovane použiteľnú šablónu newslettera.
  2. Definujte povinné dátové polia pre personalizáciu a segmentáciu.
  3. Pomocou Tajo udržujte dáta o zákazníkoch, objednávkach, produktoch a súhlasoch zo Shopify dostupné pre workflow v Brevo.
  4. Vytvorte segmenty ako prví kupujúci, VIP zákazníci, kupujúci podľa kategórie, neaktívni zákazníci a nedávni kupujúci, ktorých treba vylúčiť zo zľavových odoslaní.
  5. Dynamické bloky pridávajte iba vtedy, keď je definovaný záložný obsah.
  6. Pred spustením otestujte vykresľovanie na mobile, správanie v tmavom režime, odkazy, personalizáciu, odhlásenie a produktové dáta.

Pravidlá pre dynamický obsah

Personalizácia newsletter zlepšuje iba vtedy, keď sú dáta presné a záložné riešenie bezpečné.

Dynamický obsah používajte pre:

  • Odporúčania produktov na základe nedávnych nákupov alebo kategórií.
  • Vernostné pripomienky na základe overených dát programu.
  • Varianty podľa lokality alebo jazyka, keď sú dáta odberateľov spoľahlivé.
  • Bloky životného cyklu zákazníka, napríklad prvý nákup, opakovaný nákup alebo neaktívny zákazník.

Dynamickému obsahu sa vyhnite, keď:

  • Zdrojové pole je neúplné.
  • Dostupnosť produktov môže byť zastaraná.
  • Záložný obsah by vyzeral rozbito.
  • Dáta o súhlase alebo preferenciách sú nejasné.

Záver

Dizajn e-mailového newslettera je umenie aj veda. Princípy z tohto sprievodcu, vizuálna hierarchia, optimalizácia pre mobil, prístupnosť, typografia a strategické umiestnenie CTA, tvoria základ newsletterov, ktoré zapájajú a konvertujú.

Zapamätajte si tieto kľúčové body:

  1. Navrhujte najprv pre mobil - Vaše reporty sa môžu líšiť, ale použiteľnosť na malej obrazovke musí byť zaručená
  2. Uprednostnite jasnosť - každý prvok by mal mať svoj účel
  3. Zachovávajte konzistentnosť značky - budujte rozpoznateľnosť s každým odoslaním
  4. Testujte priebežne - malé zlepšenia sa časom sčítajú
  5. Sústreďte sa na prístupnosť - navrhujte pre všetkých odberateľov, nie len pre väčšinu

Skvelý dizajn newslettera nie je o nasledovaní každého trendu, je o vytváraní jasnej, pútavej komunikácie v duchu značky, ktorá rešpektuje čas a pozornosť Vašich odberateľov.

Chcete zlepšiť svoje Shopify newslettery v Brevo? Začnite s Tajo a synchronizujte dáta o zákazníkoch, objednávkach, produktoch, súhlasoch, vernosti a zapojení do workflow v Brevo, aby Vaše dizajny mohli používať lepšie segmenty a bezpečnejšiu personalizáciu.

Súvisiace články

Často Kladené Otázky

Ako začať s e-mailovým newsletterom?
Vyberte si platformu, definujte prísľub newslettera, vytvorte registračné formuláre založené na súhlase, pripravte jednoduchú šablónu navrhnutú najprv pre mobil, pošlite testovacie kampane a skôr, než pridáte zložité rozloženia alebo personalizáciu, vyhodnoťte zapojenie.
Ako často mám posielať newsletter?
Neexistuje univerzálne najlepšia frekvencia. Začnite kadenciou, ktorú dokážete udržať, napríklad týždenne, každé dva týždne alebo mesačne, a potom ju upravte podľa zapojenia, odhlásení, sťažností, kvality obsahu a očakávaní odberateľov.
Čo má newsletter obsahovať?
Zahrňte jedno jasné hlavné posolstvo, užitočný obsah, prehľadnú štruktúru, živý text, prístupné obrázky s alternatívnym textom, jasné CTA, údaje o odosielateľovi a možnosť odhlásenia a dynamický produktový alebo zákaznícky obsah iba vtedy, keď sú dáta spoľahlivé.
Aká je ideálna šírka e-mailového newslettera?
Štandardná a odporúčaná šírka e-mailových newsletterov je **600 pixelov**. Táto šírka funguje dobre vo väčšine e-mailových klientov a zariadení a zároveň poskytuje dostatok priestoru pre obsah. Na mobile by e-maily mali byť responzívne a prispôsobiť sa šírke obrazovky, typicky skladaním viacstĺpcových rozložení do jedného stĺpca.
Koľko obrázkov mám do newslettera zaradiť?
Neexistuje pevný počet obrázkov. Použite toľko vizuálov, koľko podporuje posolstvo, ale e-mail musí byť zrozumiteľný aj s blokovanými obrázkami. Väčšina newsletterov by mala používať živý text pre podstatný obsah, popisný alternatívny text pre významové obrázky, komprimované súbory a záložnú verziu v čistom texte. Vyhnite sa newsletterom zloženým iba z obrázkov.
Aké písma fungujú v e-mailových newsletteroch najlepšie?
Webovo bezpečné písma ako **Arial, Helvetica, Georgia a Verdana** sa vykresľujú konzistentne vo všetkých e-mailových klientoch. Webové písma (Google Fonts, Adobe Fonts) môžete použiť so správnymi náhradami, ale počítajte s tým, že niektorí klienti ako Outlook zobrazia náhradné písmo. Pre čistý, profesionálny dizajn sa držte maximálne 1 až 2 rodín písma.
Ako urobiť e-maily prístupné?
Kľúčové postupy prístupnosti zahŕňajú: **alternatívny text** pri všetkých obrázkoch, zachovanie **kontrastu farieb 4,5:1** pri texte, **popisný text odkazov** (nie „kliknite sem“), **minimálnu veľkosť písma 14 až 16 px**, **verziu v čistom texte** a štruktúrovanie obsahu so **správnou hierarchiou nadpisov**. Ak je to možné, testujte s čítačkami obrazovky.
Mám pri newsletteroch riešiť tmavý režim?
Áno, tmavý režim by ste mali zohľadniť, pretože hlavní e-mailoví klienti môžu farby meniť rôznymi spôsobmi. Tipy pre dizajn: nespoliehajte sa iba na farbu pozadia, v prípade potreby pripravte varianty loga, opatrne používajte priehľadné PNG, skontrolujte kontrast v oboch režimoch a dôležité šablóny testujte v klientoch, ktorých Vaše publikum skutočne používa.
Aký je najlepší formát obrázkov pre e-mail?
**JPEG** je najlepší pre fotografie a zložité obrázky s mnohými farbami. **PNG** je ideálny pre grafiku s priehľadnosťou, logá a obrázky s textom. **GIF** funguje pre jednoduché animácie. **WebP** ponúka lepšiu kompresiu, ale má obmedzenú podporu v e-mailových klientoch, vždy pripravte náhrady. Hlavné obrázky udržte pod 200 KB a celkovú veľkosť e-mailu pod 1 MB.
Ako zlepšiť mieru prekliku v e-mailovom newsletteri?
Ak chcete zvýšiť mieru prekliku: hlavné CTA urobte ľahko nájditeľné, používajte popisný text tlačidiel, dotykové ciele nechajte dostatočne veľké pre mobil, obmedzte konkurenčné akcie, píšte posolstvo, ktoré zodpovedá zámeru odberateľa, a testujte vždy iba jednu významnú premennú dizajnu alebo textu. Otvorenia a kliknutia berte ako diagnostické signály a dôležité newslettery tam, kde sa dá, prepojte s konverziami alebo tržbami.
Ako často mám aktualizovať dizajn newslettera?
Zachovávajte **konzistentný branding** pre rozpoznateľnosť a zároveň priebežne robte **malé optimalizácie** na základe výkonnostných dát. **Väčšie prepracovanie dizajnu** zvážte každých 12 až 18 mesiacov, aby ste držali krok s trendmi. Významné zmeny vždy A/B testujte skôr, než ich nasadíte na celý zoznam. Sezónne variácie a špeciálne vydania môžu priniesť rozmanitosť bez straty konzistentnosti značky.
Zdieľať tento článok:
Späť na všetky články

Požiadajte o skorý prístup

Uveďte svoje krstné meno a e-mailovú adresu alebo telefónne číslo. Pošleme Vám podrobnosti o prístupe k platforme Tajo.

automatické rozpoznanie
Získať Brevo