Newslettery

Sprievodca dizajnom newslettera: rozloženie, prístupnosť, kontrola na mobile a príklady (2026)

Navrhnite čitateľné e-mailové newslettery s jasnou hierarchiou, responzívnym rozložením, prístupnou typografiou, disciplinovanou prácou s obrázkami, kontrolou tmavého režimu, testovaním v e-mailových klientoch a opakovane použiteľnými sekciami.

Set Noa
Set Noa
Aktualizované
0 návštevy · 7 dní
newsletter design
Sprievodca dizajnom newslettera?

Dizajn newslettera by mal uprednostňovať čitateľnosť, prístupnosť, responzívnosť pre mobily a kontrolu vykreslenia. Začnite jednoduchým rozložením, vytvorte opakovane použiteľné sekcie, používajte obrázky na podporu správy a pred odoslaním testujte v skutočných e-mailových klientoch.

Zistiť viac

Dizajn newslettera je neviditeľná architektúra, ktorá rozhoduje o tom, či odberatelia Váš obsah prečítajú, alebo ho zmažú. Dobre navrhnutý newsletter prirodzene vedie oko od nadpisu cez obsah až po akciu. Zle navrhnutý newsletter vytvára vizuálny chaos, ktorý čitateľov odháňa bez ohľadu na to, aký hodnotný je obsah.

Dobrá správa: efektívny dizajn newslettera nevyžaduje profesionálneho dizajnéra. Vyžaduje pochopenie niekoľkých základných princípov a ich dôsledné uplatňovanie. Táto príručka pokrýva stratégie rozloženia, pravidlá typografie a vizuálne techniky, vďaka ktorým sú newslettery pútavé a čitateľné.

Štyri šablóny v prevádzke

Všetko pod touto sekciou je tvrdenie o rozložení a tvrdenia o rozložení sú lacné. Tu sú teda štyri newslettery, v prevádzke.

Každý sedí v ráme so skutočnou šírkou a ukazuje vlastné HTML. Stiahnite šírku na 375 px a sledujte, ktoré stĺpce sa zložia a ktoré to odmietnu. Panely sledujú motív, v ktorom túto stránku čítate: v tmavom režime vidíte skutočný tmavý blok každej šablóny, nie jeho priblíženie. Zdrojový kód je pod každým panelom.

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

Sú naše. Navrhli sme ich pre tento článok, vrátane grafiky, ktorú generuje deterministický geometrický skript žijúci v tom istom repozitári ako táto stránka — žiadne fotobanky a žiadne snímky cudzej galérie šablón. Ten rozdiel váži viac, než to znie: sprievodca návrhom e-mailov, ktorý sa ilustruje e-mailmi iných ľudí, od vás chce, aby ste mu verili na slovo.

Štyri šablóny nie sú štyri štýly. Sú to štyri odpovede na štyri rôzne úlohy:

  • The Letter je pre pisateľa, ktorého celá hodnota je text. Jeden obrázok, okraje 88 px, textový odkaz namiesto tlačidla. Tlačidlo v osobnom liste sa číta ako reklama.
  • The Digest je pre prehľad, ktorý sa prelieta. Číslované riadky, čas čítania pred každým titulkom a jediná výzva na akciu dole namiesto šiestich.
  • The Storefront je pre uvedenie kolekcie. Je to jediné rozloženie, kde je začať obrázkom správne, a napriek tomu je postavené tak, aby obrázok mohol zlyhať.
  • The Brief je pre čísla. Tri metriky nad všetkým ostatným a stĺpcový graf z buniek tabuľky namiesto z PNG.

Spoločná je tá časť, ktorú stojí za to skopírovať. Jeden stĺpec 600 px. Text minimálne 16 px. Jedna akcentná farba a atrament na všetko ostatné. Každý obrázok nesie alternatívny text a každé rozloženie dáva zmysel aj s blokovanými obrázkami. Deklarovaná farebná schéma plus výslovný tmavý blok, pretože predvolené správanie v tmavom klientovi je, že váš e-mail prevráti algoritmus, ktorý nikdy nevidel vašu značku.

Jednu z nich sme napoprvé urobili zle a práve tú stojí za to pomenovať. The Digest spočiatku skladal riadky s článkami na mobile pod seba — presne tak, ako radí každý sprievodca responzívnymi e-mailmi. Skladanie premenilo tri náhľady po 112 px na tri dekoratívne obrázky cez celú šírku s výškou 335 px a prehľad šiestich tém sa zmenil na rolovanie. Ten riadok je teraz jediné dvojstĺpcové rozloženie v sade, ktoré sa neskladá. Pravidlá o skladaní hovoria o stĺpcoch obsahu. Náhľad nie je stĺpec obsahu.

Ako jednu z nich postaviť v Breve

Žiadna zo štyroch šablón vyššie nepotrebuje na zostavenie vývojára. Každá obrazovka nižšie je tá istá šablóna na plátne „ťahaj a pusť“ v Breve, s jedným vybraným blokom.

Začnime hlavným tlačidlom, pretože to je blok s najviac nastaveniami:

Brevo

The Storefront na plátne

Editor e-mailov „ťahaj a pusť“ v Breve so šablónou The Storefront na plátne, vybraným hlavným tlačidlom a jeho nastavením popisu, odkazu, farby, zaoblenia a odsadenia v pravom paneli
Ľavý stĺpec: bloky, ktoré presúvate. Pravý stĺpec: všetko o vybranom bloku. Na plátne je e-mail široký 600 px vnútri klienta širokého 680 px — preto sa mobilné rozloženie neobjavuje: presne pri 600 px by sa spustil vlastný zlom šablóny a upravovali by ste telefónnu verziu, kým prepínač hovorí Počítač.

Každý blok v ľavom stĺpci zodpovedá niečomu v šablónach vyššie. Text, Obrázok, Tlačidlo, Oddeľovač a Medzera pre štruktúru. Produkt pre riadok obchodu. HTML pre všetko, čo editor nemodeluje — a presne tak je postavený graf v The Brief:

Brevo

Graf, v ktorom nie je žiadny obrázok

Editor e-mailov Brevo so šablónou The Brief na plátne, vybraným stĺpcovým grafom a pravým panelom, ktorý ukazuje, že je postavený z buniek tabuľky bez obrázka
Graf vyexportovaný ako PNG príde o svoje čísla pre blokovanie obrázkov, prevrátenie v tmavom režime a každú čítačku obrazovky. Štyri riadky tabuľky s farebnou bunkou a textovým popisom neprídu o nič a nevážia nič.

Typografia funguje rovnako. Vyberte textový blok a panel vám dá písmo, veľkosť, riadkovanie a odsadenie — čo je celé náradie, ktoré The Letter potrebuje:

Brevo

Citát je textový blok s linkou po strane

Editor e-mailov Brevo so šablónou The Letter na plátne a vybraným citátom: Georgia 19px na 30px, kurzíva, s ľavou linkou 3px
Žiadny zvláštny komponent. Textový blok, ľavá linka 3 px v akcentnej farbe a 20 px vnútorného odsadenia. V dobrom newsletteri je väčšina toho, čo vyzerá ako návrh na mieru, štandardný blok s dvoma zmenenými vlastnosťami.

A obrázky majú vlastný panel, kde alternatívny text stojí hore, nie na konci zoznamu nastavení:

Brevo

Alternatívny text je pole, nie dodatočný nápad

Editor e-mailov Brevo so šablónou The Digest na plátne a vybraným náhľadom článku, kde vidno jeho alternatívny text, zobrazenú veľkosť 112px, zdroj 480px a váhu 17 KB
Zobrazená veľkosť 112 px, zdroj 480 px — práve ten pomer 2× drží náhľad ostrý na retina displeji. Alternatívny text je prvý, pretože je to tá časť obrázka, ktorú väčšina odberateľov skutočne dostane.

Firmám, ktoré používajú Tajo, sa tie isté sekcie dajú plniť dynamicky: odporúčania produktov a personalizovaný obsah riadený správaním odberateľov, vykreslené do blokov, ktoré ste rozvrhli tu, namiesto ručného výberu pri každom odoslaní.

Základy dizajnu newslettera

Dizajn slúži obsahu

Najdôležitejší princíp dizajnu newslettera: dizajn má uľahčovať konzumáciu obsahu, nikdy ju nesťažovať. Každé dizajnové rozhodnutie by malo odpovedať na otázku: pomáha to môjmu čitateľovi nájsť a vstrebať informácie, pre ktoré prišiel?

Znaky dobrého dizajnu newslettera:

  • Čitatelia dokážu celý newsletter preletieť za 10 až 15 sekúnd
  • Najdôležitejší obsah je okamžite viditeľný
  • Každá sekcia má jasný začiatok a koniec
  • Výzva na akciu vyniká bez toho, aby bola otravná
  • Newsletter vyzerá zámerne, nie náhodne

Znaky zlého dizajnu newslettera:

  • Čitatelia nedokážu rýchlo nájsť hlavný obsah
  • O pozornosť súperí viacero dizajnových štýlov
  • Text sa ťažko číta na akomkoľvek zariadení
  • Rozloženie sa na mobilných obrazovkách rozpadá
  • Husté bloky textu bez vizuálnych predelov

Princíp vizuálnej hierarchie

Vizuálna hierarchia riadi poradie, v akom čitatelia spracúvajú informácie. V newsletteroch hierarchiu vytvárate prostredníctvom:

Úroveň hierarchiePrvokDizajnové spracovanie
PrimárnaHlavný nadpisNajväčšie písmo, tučné, umiestnené hore
SekundárnaNadpisy sekciíStredné písmo, kontrastná farba
TerciárnaObsah telaŠtandardné písmo, čitateľná veľkosť
PodpornáMetadáta (dátumy, autori)Menšie písmo, svetlejšia farba
AkciaCTA tlačidlá/odkazyKontrastná farba, štýl tlačidla

Stratégie rozloženia

Jednostĺpcové rozloženie

Jednostĺpcové rozloženie je zlatý štandard newsletterov a odporúčaný prístup pre väčšinu vydavateľov.

Výhody:

  • Dokonale sa vykresľuje na každom zariadení a veľkosti obrazovky
  • Vytvára prirodzený tok čítania zhora nadol
  • Zjednodušuje dizajnové rozhodnutia
  • Znižuje problémy s vykreslením naprieč e-mailovými klientmi
  • Zodpovedá tomu, ako ľudia čítajú na mobile (vertikálne rolovanie)

Najvhodnejšie pre: textovo zamerané newslettery, osobné newslettery, vzdelávací obsah, dlhšie analýzy

Štruktúra:

  1. Hlavička (logo, číslo vydania, dátum)
  2. Úvod alebo osobná poznámka
  3. Hlavná obsahová sekcia
  4. Vedľajšie obsahové sekcie (oddelené oddeľovačmi)
  5. CTA alebo výzva na zapojenie
  6. Pätička

Rozloženie založené na kartách

Usporiadajte obsah do samostatných vizuálnych kariet, z ktorých každá má vlastný rámik, pozadie alebo tieň.

Výhody:

  • Jasné oddelenie obsahu
  • Dobre funguje pre kurátorský obsah a prehľady odkazov
  • Každá karta môže mať vlastný obrázok a CTA
  • Vizuálne pútavé bez toho, aby zahlcovalo

Najvhodnejšie pre: prehľady obsahu, kurátorské odkazy, prezentácie produktov, newslettery s viacerými témami

Dizajnové tipy pre karty:

  • Používajte konzistentné rozmery a rozostupy kariet
  • Maximálne 2 karty v riadku (na mobile skladajte do 1)
  • Karty vymedzte jemným rámikom alebo farbou pozadia
  • Vnútri každej karty zachovajte konzistentné odsadenie

Hybridné rozloženie

Skombinujte hlavný obsahový stĺpec s užším bočným panelom pre doplnkový obsah.

Výhody:

  • Zmestí sa viac obsahu bez predĺženia e-mailu
  • Funguje pre newslettery s hlavným aj vedľajším obsahom
  • Známy formát z tradičných publikácií

Obmedzenia:

  • Na mobile sa musí zložiť do jedného stĺpca
  • Náročnejšie na vytvorenie a údržbu
  • Ak nie je dobre usporiadané, môže pôsobiť preplnene

Najvhodnejšie pre: firemné newslettery, publikácie mediálneho typu, obsahovo náročné formáty

Typografia pre newslettery

Typografia je najvplyvnejší dizajnový prvok každého textovo náročného e-mailu. Ak zvládnete písma, všetko ostatné zapadne na svoje miesto.

Výber písma

E-mailoví klienti majú obmedzenú podporu písiem. Ako primárnu voľbu používajte web-safe písma:

PísmoŠtýlNajvhodnejšie pre
ArialČistý, moderný bezpätkovýVšeobecné použitie, biznis
HelveticaVytríbený bezpätkovýPrémiové značky
GeorgiaElegantný pätkovýRedakčný, dlhší obsah
Times New RomanKlasický pätkovýTradičný, formálny
VerdanaŠiroký, čitateľný bezpätkovýMalý text, mobil
Trebuchet MSModerný bezpätkovýKreatívny, neformálny

Webové písma: Môžete zadať webové písma (napríklad Open Sans alebo Lato) s web-safe náhradami. Vykreslia sa v Apple Mail, iOS Mail a niektorých klientoch pre Android, ale v Outlooku a starších verziách Gmailu sa použije bezpečná alternatíva.

Veľkosť písma

PrvokMinimálna veľkosťOdporúčaná veľkosť
Text tela14 px16 px
Nadpisy sekcií20 px22 až 24 px
Hlavný nadpis24 px28 až 32 px
Popisky/metadáta12 px13 až 14 px
Text CTA tlačidla14 px16 px
Preheader text12 px14 px

Riadkovanie a čitateľnosť

  • Výška riadku: 1,4 až 1,6 pre text tela (24 až 26 px pri písme 16 px)
  • Rozostup odsekov: 16 až 24 px medzi odsekmi
  • Dĺžka riadku: 50 až 75 znakov na riadok (predchádza únave očí)
  • Rozostup písmen: predvolený pre text tela, mierne zväčšený pre malý text

Formátovanie textu

  • Tučné písmo: používajte na kľúčové frázy a zdôraznenie, nie na celé odseky
  • Kurzíva: používajte striedmo na citáty, názvy alebo jemné zdôraznenie
  • Podčiarknutie: vyhraďte výlučne pre odkazy (podčiarknutý text bez odkazu mätie čitateľov)
  • VEĽKÉ PÍSMENÁ: používajte iba na krátke štítky alebo tlačidlá, nikdy na text tela
  • Farba: používajte jednu akcentovú farbu pre odkazy, text tela ponechajte tmavosivý (#333) alebo takmer čierny

Stratégia farieb

Zostavenie farebnej palety newslettera

Obmedzte newsletter na 3 až 4 farby:

Rola farbyPoužitiePríklad
PrimárnaNadpisy, CTA tlačidlá, akcentyModrá farba značky
TextText tela, podnadpisyTmavosivá (#333333)
PozadieTelo e-mailuBiela (#FFFFFF) alebo svetlosivá (#F5F5F5)
AkcentOdkazy, zvýraznenia, sekundárne CTASekundárna farba značky

Prístupnosť farieb

  • Udržiavajte minimálny kontrastný pomer 4,5:1 medzi textom a pozadím
  • Nespoliehajte sa iba na farbu pri sprostredkovaní informácií
  • Otestujte svoju paletu simulátormi farbosleposti
  • Zabezpečte, aby boli odkazy odlíšiteľné od bežného textu (používajte podčiarknutie, nielen farbu)

Tmavý režim

Mnohí e-mailoví klienti dnes predvolene používajú tmavý režim. Navrhujte s ohľadom naň:

  • Vyhnite sa čisto bielym (#FFFFFF) pozadiam, použite jemne lomenú bielu (#FAFAFA)
  • Nepoužívajte priehľadné PNG s tmavými prvkami (v tmavom režime zmiznú)
  • Otestujte logá na svetlom aj tmavom pozadí
  • Pridajte meta tagy pre podporu farebnej schémy tmavého režimu
  • Na tmavých obrázkoch používajte rámiky alebo obrysy, aby zostali viditeľné

Použitie obrázkov v newsletteroch

Kedy použiť obrázky

Obrázky by mali pridávať hodnotu, ktorú samotný text poskytnúť nedokáže:

  • Produktová fotografia: ukážte produkty v kontexte
  • Vizualizácia dát: grafy, diagramy a infografiky
  • Snímky obrazovky: predveďte nástroje, funkcie alebo procesy
  • Portréty: budujte osobné prepojenie s autormi alebo tímom
  • Ilustrácie: podporte osobnosť a tón značky

Optimalizácia obrázkov

ŠpecifikáciaOdporúčanie
FormátJPEG pre fotografie, PNG pre grafiku
Šírkaštandardne 600 px, 1200 px pre retina displeje
Veľkosť súborumenej než 200 KB na obrázok
Celková veľkosť e-mailumenej než 100 KB bez obrázkov
Alt textpopisný, maximálne 125 znakov
Pomer strán2:1 pre hero obrázky, 1:1 pre miniatúry

Pomer obrázkov a textu

Udržiavajte zdravý pomer textu a obrázkov, aby ste sa vyhli spamovým filtrom a zabezpečili čitateľnosť:

  • Predvolene text na prvom mieste, pokiaľ úloha newslettera nevyžaduje vizuálny merchandising
  • E-maily tvorené prevažne obrázkami (e-maily iba z obrázkov) končia v spame častejšie
  • Kľúčové informácie vždy uvádzajte aj v textovej podobe, nie iba v obrázkoch
  • Navrhujte pre klientov s blokovanými obrázkami: Váš newsletter by mal dávať zmysel aj bez obrázkov

Dizajn newslettera s mobilom na prvom mieste

Požiadavky na mobilný dizajn

Keďže mnohí odberatelia čítajú newslettery na telefónoch, mobilný dizajn nie je voliteľný.

Pravidlá rozloženia pre mobil:

  • Maximálna šírka obsahu: 600 px (dobre sa zobrazuje na všetkých zariadeniach)
  • Minimálna dotyková plocha: 44 x 44 pixelov pre tlačidlá a odkazy
  • Minimálna veľkosť písma: 16 px pre text tela na mobile
  • Jednostĺpcové rozloženie, ktoré sa prirodzene skladá
  • CTA tlačidlá na mobile na celú šírku
  • Dostatočné rozostupy medzi klikateľnými prvkami (predchádzajte náhodným ťuknutiam)

Techniky responzívneho dizajnu

TechnikaPočítačMobil
Viacstĺpcové sekcieVedľa sebaNaskladané vertikálne
ObrázkyVeľkosť v rámci obsahuNa celú šírku, škálované
Navigačné odkazyHorizontálneNaskladané alebo skryté
CTA tlačidláV riadku alebo zarovnané vpravoNa celú šírku
Veľkosti písmaŠtandardnéMierne väčšie
Odsadenie20 až 40 px15 až 20 px

Testovanie vykreslenia na mobile

Otestujte dizajn newslettera na:

  • iPhone (Safari/Mail)
  • Android (aplikácia Gmail)
  • iPad
  • Gmail (web)
  • Outlook (počítač a web)
  • Apple Mail (počítač)

Používajte nástroje ako Litmus alebo Email on Acid na automatizované testy vykreslenia vo viac než 90 e-mailových klientoch.

Dizajn sekcií newslettera

Hlavička

Hlavička ustanovuje identitu a nastavuje očakávania:

  • Logo: primeraná veľkosť (nie príliš veľké, zvyčajne 150 až 200 px na šírku)
  • Identifikátor vydania: číslo vydania, dátum alebo názov edície
  • Odkaz na zobrazenie online: pre odberateľov s problémami s vykreslením
  • Kompaktnosť: hlavička by nemala odsúvať obsah pod ohyb obrazovky

Oddeľovače sekcií

Jasné oddeľovače medzi obsahovými sekciami pomáhajú čitateľom prelistovať obsah:

  • Horizontálne linky: jednoduché tenké čiary (1 až 2 px) v neutrálnej farbe
  • Zmeny farby pozadia: striedajte biele a svetlosivé sekcie
  • Väčšie rozostupy: 30 až 40 px odsadenia medzi sekciami
  • Nadpisy sekcií: tučný väčší text s konzistentným štýlom

Pätička

Dobre navrhnutá pätička dotvára celkový zážitok:

  • Odkaz na odhlásenie (zákonná povinnosť, urobte ho ľahko nájditeľným)
  • Odkazy na sociálne siete
  • Fyzická poštová adresa (požiadavka CAN-SPAM)
  • Odkaz na zobrazenie v prehliadači
  • Možnosť preposlať priateľovi
  • Krátky slogan značky alebo poslanie

Nástroje na dizajn newsletterov

Editory platforiem

Väčšina platforiem pre newslettery obsahuje zabudované dizajnové editory:

PlatformaTyp editoraDizajnová flexibilitaKnižnica šablón
BrevoDrag-and-dropVysokáViac než 40 šablón
MailchimpDrag-and-dropVysokáViac než 100 šablón
ConvertKitZjednodušený editorStrednáObmedzená
SubstackZameraný na textNízkaMinimálna

Drag-and-drop editor Brevo sprístupňuje profesionálny dizajn newslettera bez znalosti kódovania. Firmy používajúce Tajo môžu sekcie newslettera dynamicky napĺňať odporúčaniami produktov a personalizovaným obsahom podľa správania odberateľov.

Dizajnové zdroje

  • Canva: vytvárajte obrázky do hlavičky newslettera, grafiku pre sociálne siete a ilustrácie
  • Unsplash/Pexels: bezplatné fotografie
  • Really Good Emails: galéria inšpirácie dobre navrhnutých e-mailov
  • MJML: open-source e-mailový framework pre vlastné dizajny
  • Figma: navrhujte vlastné šablóny newsletterov s exportom cez e-mailové pluginy

Kontrolný zoznam dizajnu newslettera

Pred odoslaním akéhokoľvek newslettera overte:

Rozloženie:

  • Jednostĺpcové rozloženie alebo správne responzívne viacstĺpcové
  • Šírka obsahu je 600 px alebo menej
  • Jasná vizuálna hierarchia od hlavičky po pätičku
  • Sekcie sú jasne oddelené

Typografia:

  • Text tela má 16 px alebo viac
  • Výška riadku je 1,4 až 1,6
  • Nadpisy vytvárajú jasnú štruktúru obsahu
  • Text odkazov je popisný (nie „kliknite sem”)

Obrázky:

  • Všetky obrázky majú alt text
  • Obrázky sú optimalizované na veľkosť súboru
  • Newsletter je čitateľný aj bez obrázkov
  • Pre displeje s vysokým DPI sú k dispozícii retina obrázky

Mobil:

  • Otestované na iPhone a Androide
  • CTA tlačidlá sú na mobile na celú šírku
  • Veľkosti písma sú na malých obrazovkách čitateľné
  • Dotykové plochy majú minimálne 44 px

Prístupnosť:

  • Kontrast farieb spĺňa pomer 4,5:1
  • Obsah je štruktúrovaný správnymi nadpismi
  • Žiadna informácia nie je sprostredkovaná iba farbou
  • Kompatibilné s čítačkami obrazovky

Značka:

  • Farby zodpovedajú palete značky
  • Logo má správnu veľkosť a umiestnenie
  • Tón a hlas sú konzistentné so značkou
  • Pätička obsahuje všetky požadované právne prvky

Rozvíjanie dizajnu newslettera

Dizajn newslettera nie je jednorazový projekt. Rozvíjajte svoj dizajn na základe výkonnostných dát a spätnej väzby od odberateľov:

  • Sledujte hĺbku rolovania: dostávajú sa čitatelia až na koniec Vášho newslettera?
  • Sledujte mapy kliknutí: ktoré sekcie získavajú najviac kliknutí? Propagujte podobný obsah.
  • Pýtajte sa odberateľov: raz ročne sa opýtajte na dizajnové preferencie
  • A/B testujte rozloženia: porovnajte kartové a lineárne rozloženie, umiestnenie obrázkov a štýly CTA
  • Sledujte konkurenciu: študujte, čo funguje v úspešných newsletteroch vo Vašom odbore

Silný dizajn newslettera je takmer neviditeľný. Odberatelia si nevšímajú dizajn, všímajú si obsah. To znamená, že dizajn plní svoju úlohu: odstraňuje trenie, vedie pozornosť a robí čítanie bez námahy.

Začnite jednoducho, zostaňte konzistentní a zdokonaľujte na základe dát. Dizajn Vášho newslettera by sa mal vyvíjať spolu s Vaším publikom, nie pred ním.

Často Kladené Otázky

Čo robí dobrý dizajn newslettera?
Dobrý dizajn newslettera používa jasnú vizuálnu hierarchiu, konzistentný branding, čitateľnú typografiu (minimálne 16 px), jednostĺpcové rozloženie pre kompatibilitu s mobilmi a strategické využitie bieleho priestoru. Vedie oko čitateľa od nadpisu cez obsah až po výzvu na akciu.
Mali by byť newslettery skôr textové alebo obrázkové?
Správna rovnováha závisí od úlohy newslettera. Rozloženia postavené na texte sú bezpečnejšie, keď sú obrázky zablokované, zatiaľ čo sekcie vedené obrázkami fungujú dobre pre produktový, eventový a portfóliový obsah, ak správa dáva zmysel aj bez obrázkov.
Ktoré rozloženie newslettera mám použiť?
Pre textovo bohaté newslettery použite jednostĺpcové rozloženie, pre prehľady obsahu skladané karty a hybridné sekcie iba vtedy, keď dokážete rozloženie otestovať na mobile, počítači, vo webmaile a v klientoch Outlook.
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