E-mail-marketing
Dizájn

E-mail hírlevél dizájn kézikönyv: elrendezések, sablonok, mobilos tesztelés és példák (2026)

Tervezz e-mail hírleveleket gyakorlatias útmutatással az elrendezéshez, a hierarchiához, a sablonokhoz, a mobilos megjelenítéshez, az akadálymentességhez, a sötét módhoz, a teszteléshez és az e-kereskedelmi személyre szabáshoz.

Set Noa
Set Noa
Frissítve
0 látogatás · 7 nap
email newsletter
E-mail hírlevél dizájn kézikönyv?

Az erős hírlevéldizájn ismételhető gyártási rendszer: világos hierarchia, mobilelsődleges elrendezés, akadálymentes tipográfia és kontraszt, optimalizált képek, egyetlen fő CTA, tesztelt megjelenítés, jogszabályoknak megfelelő lábléc és biztonságos személyre szabás megbízható vásárlói adatokból.

Tudjon meg többet

Az e-mail hírlevelek azért működnek még mindig, mert közvetlen utat adnak a márkáknak, kiadóknak, alkotóknak és e-kereskedelmi csapatoknak azokhoz a feliratkozókhoz, akiket engedéllyel kereshetnek meg. A dizájn dönti el, hogy ez az üzenet olvasható, hiteles, cselekvésre bíró és minden e-mail kliensben használható lesz-e.

Ez az útmutató megtartja az eredeti szerkezetet: vizuális hierarchia, márkakövetkezetesség, elrendezéstípusok, mobiloptimalizálás, tipográfia, szín, akadálymentesség, CTA-dizájn, példák, eszközök, hibák, Tajo és Brevo kontextus, gyakori kérdések és kapcsolódó cikkek. A mostani frissítés eltávolítja az alátámasztatlan benchmark-állításokat, és gyakorlatias 2026-os hírlevéldizájn-kézikönyvvé alakítja az oldalt.

Miért számít az e-mail hírlevél dizájnja

Mielőtt a technikákba merülnénk, értsük meg, miért játszik ilyen kritikus szerepet a dizájn a hírlevél sikerében.

Az első képernyő próbája

A feliratkozók alapból nem olvassák végig a hírlevelet fentről lefelé. Átfutják a feladót, a tárgysort, az előnézeti szöveget, a fejlécet, az első címsort, a képeket és az első CTA-t, mielőtt eldöntenék, megér-e az üzenet több figyelmet.

Egy jó első képernyő gyorsan válaszol négy kérdésre:

  • Ki küldte ezt?
  • Miért kapom?
  • Mi a fő érték?
  • Mi a következő lépés?

Mit befolyásol valójában a dizájn

Kerüld az olyan alátámasztatlan állításokat, mint hogy „ez a dizájnváltozás kétszámjegyű kattintásnövekedést hoz”, hacsak nincs saját kontrollált tesztelésed. A hírlevéldizájn gyakorlati mechanizmusokon keresztül hat a teljesítményre:

DizájntényezőMit javítMit ellenőrizz
Világos hierarchiaGyorsabb átfutás és megértésEgy pillantással felismeri az olvasó a fő üzenetet?
Mobilos elrendezésHasználhatóság kis képernyőnTisztán egymás alá rendeződik az elrendezés vízszintes görgetés nélkül?
KépstratégiaKontextus és vizuális érdekességVan értelme az e-mailnek akkor is, ha a képek le vannak tiltva?
Akadálymentes kontrasztOlvashatóság több feliratkozónakMegfelel a szöveg és a gombok kontrasztja a követelményeknek?
CTA világosságaMagabiztos cselekvésVan egyetlen fő cselekvés és leíró gombszöveg?
MárkakövetkezetességFelismerhetőség és bizalomIllik a dizájn a webhelyhez, a termékhez és a többi csatornához?
Megjelenítési tesztelésMegbízhatóság a kliensek közöttTesztelted az üzenetet indítás előtt?

A hírleveled dizájnja hat a megnyitástól kattintásig tartó viselkedésre, a konverzió minőségére, a leiratkozásokra, a panaszokra és a feliratkozói bizalomra. A pontos növekmény a listádon, az üzeneteden, az ajánlatodon és a tesztelési fegyelmeden múlik.

Tajo sablonok

Négy elrendezés működés közben

Az alábbi panelek mindegyike a sablon valódi e-mail HTML-je, valódi szélességű keretben. Húzza a szélességet 375 px-re, és nézze meg, hogyan rendeződnek egymás alá az oszlopok.

Követi a témáját — váltson a fejlécben, ha a másikat szeretné látni.

A(z) The Letter HTML-jének elolvasása 6 KB, fordítási lépés nélkül 
<!DOCTYPE html>
<html lang="hu" 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;">Az az idézet, amit a jegyzetalkalmazásában őriz, többet dolgozik, mint a tartalomnaptára.</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="Meridian Press fejléc: koncentrikus kék ívek, átlós sávval keresztezve" 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 · 47. szám</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;">Az archívum maga a termék</h1>
        <p class="d-ink" style="margin:0 0 20px 0;font-size:18px;line-height:30px;color:#242424;">Három hete kerestem egy 2019-ben írt szöveget, és nem találtam. Sem az oldalon, sem az exportban, sem a platform saját keresőjében. Ezerkétszáz szám, és az egyetlen működő mutató a memóriám volt.</p>
        <p class="d-ink" style="margin:0 0 20px 0;font-size:18px;line-height:30px;color:#242424;">Ezt nem mondja el senki hat év hírlevélről. Küldeni könnyű. Megőrizni nem.</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;">Minden, amit közzétesz, betét. A kivételt szinte senki nem építi meg.</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;">Ezen a héten tehát valódi archívummá építettem újra a korábbi számokat: címkékkel, teljes szöveges kereséssel és állandó címekkel. Kilenc napig tartott. Az előfizetők száma nem mozdult. Az oldalon töltött idő megháromszorozódott.</p>
        <p class="d-ink" style="margin:0 0 28px 0;font-size:18px;line-height:30px;color:#242424;">Az egész lent van, azokkal a részekkel együtt, amelyek nem működtek.</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;">A teljes szám elolvasása &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;">Minden csütörtökön kézzel írom. Válaszoljon, és elolvasom.</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;">Leiratkozás</a> &middot; <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Megtekintés böngészőben</a></p>
      </td></tr>

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

Az e-mail hírlevél dizájn alapelvei

1. Vizuális hierarchia

A vizuális hierarchia abban a sorrendben vezeti végig az olvasót a tartalmon, ahogy te szeretnéd. Nélküle a feliratkozók összevissza olvasnak, és lemaradnak a kulcsüzenetekről.

Hatékony vizuális hierarchia kialakítása

Méret: a nagyobb elemek vonzzák először a figyelmet. A címsorod legyen jelentősen nagyobb a törzsszövegnél, a CTA-k pedig egyértelműen emelkedjenek ki.

Szín: az erős vagy kontrasztos színek fókuszpontot teremtenek. A márkád kiemelő színét használd a fő CTA-khoz és a fontos elemekhez.

Térköz: az üres tér (vagy negatív tér) elválasztja az elemeket, és pihenőhelyet ad a szemnek. A sűrű dizájn nyomasztó, a levegős pedig prémium hatású.

Pozíció: a szemmozgás-vizsgálatok szerint az olvasók természetesen F vagy Z alakban futják át a tartalmat. A legfontosabb tartalmat ezekre az útvonalakra helyezd.

Példa vizuális hierarchiára

[LOGÓ]                                    [MEGTEKINTÉS BÖNGÉSZŐBEN]




            NAGY FŐCÍM (ELSŐ FIGYELEM)
        Támogató alcím több részlettel


                  [HERO KÉP]


Törzsszöveg, amely kontextust és értéket ad az olvasónak.
Tartsd a bekezdéseket rövidnek és átfuthatónak.


            [ELSŐDLEGES CTA GOMB]




   [MÁSODLAGOS TARTALOM]    [MÁSODLAGOS TARTALOM]


                [LÁBLÉC]

2. Márkakövetkezetesség

A hírleveledről azonnal fel kell ismerni, hogy a te márkádtól jött. A következetesség bizalmat épít, és minden küldéssel erősíti a márkaidentitást.

Megőrzendő márkaelemek

  • Logóelhelyezés, ugyanaz a pozíció minden e-mailben (jellemzően bal felül vagy középen)
  • Színpaletta, használj következetesen 2-3 márkaszínt
  • Tipográfia, maradj 1-2 betűcsaládnál
  • Képi stílus, következetes fotós vagy illusztrációs megközelítés
  • Hang és stílus, illeszkedjen a webhelyedhez és a többi kommunikációdhoz

Márkakövetkezetességi ellenőrzőlista

ElemIrányelv
Elsődleges színCTA-khoz és kiemelésekhez
Másodlagos színSzekciókhoz és elválasztókhoz
LogóFejlécben mindig, láblécben opcionálisan
BetűtípusokLegfeljebb 2 család (címsor és törzs)
Képi stílusKövetkezetes szűrők, vágás, kompozíció

3. A fordított piramis modell

A hírleveled tartalmát fordított piramisként építsd fel: a legfontosabb információ felül, a támogató részletek alatta.

                  A LEGFONTOSABB
              (Főcím, kulcsüzenet, hero)


               TÁMOGATÓ INFORMÁCIÓ
          (Kontextus, előnyök, részletek)


              CSELEKVÉSRE FELHÍVÁS
        (Egyértelmű következő lépés)

Ez a szerkezet biztosítja, hogy azok a feliratkozók is megkapják a lényeget, akik nem görgetnek tovább.

4. A harmadolás szabálya

A fotózásból és a grafikai tervezésből átvett harmadolási szabály kiegyensúlyozott, vizuálisan vonzó elrendezéseket hoz létre.

Oszd fel az e-mailt egy három szer hármas rácsra, és helyezd a kulcselemeket a rácsvonalakra vagy a metszéspontokra. Ez természetes egyensúlyt teremt, és stratégiai helyekre irányítja a figyelmet.

5. Az üres tér a barátod

Az üres tér, vagyis az elemek közötti kihagyott hely, az egyik legerősebb dizájneszköz. Ez a szerepe:

  • Javítja az olvashatóságot azzal, hogy megakadályozza a szöveg zsúfolódását
  • Fókuszt teremt a fontos elemek elkülönítésével
  • Minőséget közvetít (a prémium márkák bőkezűen bánnak vele)
  • Csökkenti a kognitív terhelést az olvasón

Ajánlás: használj legalább 20 képpont térközt a nagyobb szekciók között, és 10-15 képpontot a szekción belüli elemek között.

E-mail hírlevél elrendezéstípusok

A különböző hírlevélcélokhoz különböző elrendezések illenek. Íme a leghatékonyabb szerkezetek.

1. Egyhasábos elrendezés

Kinek való: mobilelsődleges közönségnek, történetvezérelt tartalomhoz, minimalista márkáknak

             [FEJLÉC]


            [HERO KÉP]


            [FŐCÍM]
         [TÖRZSSZÖVEG]
            [CTA]


       [MÁSODLAGOS TARTALOM]


             [LÁBLÉC]

Előnyök:

  • Tökéletes mobilos reszponzivitás
  • Könnyen átfutható és olvasható
  • Egyszerű megtervezni és lekódolni
  • Természetes tartalomfolyam

Legjobb gyakorlatok:

  • Maximális szélesség: 600 képpont
  • Sorhossz: 50-75 karakter
  • Szekciónként egy fő CTA

2. Kéthasábos elrendezés

Kinek való: e-kereskedelmi bemutatókhoz, tartalomválogatásokhoz, egymás melletti összehasonlításokhoz

             [FEJLÉC]


           [HERO SZEKCIÓ]


   [TERMÉK 1]        [TERMÉK 2]
     [KÉP]             [KÉP]
    [SZÖVEG]          [SZÖVEG]
    [CTA]             [CTA]


             [LÁBLÉC]

Előnyök:

  • Hatékonyan mutat be több elemet
  • Vizuális érdekességet teremt
  • Jó összehasonlító tartalomhoz

Legjobb gyakorlatok:

  • Mobilon egy hasábba rendeződjön
  • Egyenlő hasábszélességek az egyensúlyért
  • Minimális hasábszélesség: 280 képpont

3. Hibrid vagy moduláris elrendezés

Kinek való: tartalomgazdag hírlevelekhez, hírösszefoglalókhoz, több témát átfogó kommunikációhoz

             [FEJLÉC]


          [KIEMELT CIKK]


   [2. CIKK]         [3. CIKK]


      [TELJES SZÉLESSÉGŰ CTA]


 [1. ELEM]  [2. ELEM]    [3. ELEM]


             [LÁBLÉC]

Előnyök:

  • Nagyon rugalmas
  • Sokféle tartalomtípust befogad
  • Vizuális ritmust teremt

Legjobb gyakorlatok:

  • Tartsd világosan elkülönítve a szekciókat
  • Vizuális jelzésekkel mutasd a tartalomhierarchiát
  • Gondosan teszteld a mobilos megjelenítést

4. Z mintázatú elrendezés

Kinek való: promóciós e-mailekhez, bejelentő hírlevelekhez

A Z mintázat a természetes szemmozgást követi az oldalon: balról jobbra, aztán átlósan lefelé, majd újra balról jobbra.

  [LOGÓ]  [MENÜ]        Első vízszintes pásztázás


                                        Átlós mozgás


  [TARTALOM]  [CTA]        Második vízszintes pásztázás

Legjobb gyakorlatok:

  • A logót és a navigációt tedd az első vízszintes vonalra
  • A kulcsképeket helyezd a középső átlós útvonalra
  • A CTA-kat a vízszintes átfutási vonalak végére tedd

5. F mintázatú elrendezés

Kinek való: szöveggazdag hírlevelekhez, oktató tartalomhoz

Az olvasók F mintázatban futják át a szöveggazdag tartalmat: két vízszintes söprés, majd egy függőleges pásztázás a bal oldalon lefelé.

        Első vízszintes söprés
        Második vízszintes söprés


                                        Függőleges pásztázás

Legjobb gyakorlatok:

  • A fontos információt tedd az első két sorba
  • A bekezdéseket fontos szavakkal kezdd
  • Használj balra igazított szöveget a könnyű átfutásért

Mobilelsődleges e-mail dizájn

A mobil aránya közönségtől, iparágtól és kampánytípustól függően változik, de a legtöbb hírlevélnek működnie kell kis képernyőn. Feltételezések helyett nézd meg a saját riportjaidat, aztán úgy tervezd a sablont, hogy a fő üzenet, a CTA és a lábléc mobilon is használható maradjon.

Mobilos dizájnkövetelmények

Érintésbarát felületek

  • Minimális gombméret: 44x44 képpont
  • Érintési felületek térköze: legalább 10 képpont a kattintható elemek között
  • CTA elhelyezése: középen, hüvelykujjal könnyen elérhetően

Tipográfia mobilra

ElemAsztali méretMobil méret
Címsorok28-36 képpont22-28 képpont
Alcímek20-24 képpont18-22 képpont
Törzsszöveg16-18 képpontLegalább 16 képpont
CTA-k16-18 képpont16-18 képpont

Az egyhasábos elrendezés elsőbbsége

A kéthasábos elrendezéseknek szépen egymás alá kell rendeződniük mobilon:

Asztali:                    Mobil:


 HASÁB 1   HASÁB 2          HASÁB 1


                                HASÁB 2

Mobiloptimalizálási ellenőrzőlista

  • Egyhasábos vagy reszponzív többhasábos elrendezés
  • Nagyítás nélkül olvasható betűméretek (legalább 16 képpontos törzsszöveg)
  • Elég nagy gombok az érintéshez (legalább 44 képpont)
  • A képek megfelelően skálázódnak
  • Nincs szükség vízszintes görgetésre
  • A fontos tartalom görgetés nélkül látszik
  • Mobilos postafiókokra optimalizált előnézeti szöveg
  • A képek és a teljes fájlméret elég karcsú a mobilkapcsolatokhoz

Reszponzív dizájntechnikák

Használj CSS media query-ket a dizájn igazítására:

/* 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;
  }
}

Megjegyzés: sok e-mail kliens korlátozottan támogatja a CSS-t. Elsődlegesen inline stílusokat használj, a media query-ket pedig kiegészítésként.

Tipográfiai legjobb gyakorlatok

A tipográfia meghatározza a hírleveled olvashatóságát és a márkád megítélését.

Betűtípus-választás

Webbiztos betűtípusok

Ezek egységesen jelennek meg az e-mail kliensekben:

  • Talpatlan: Arial, Helvetica, Verdana, Trebuchet MS
  • Talpas: Georgia, Times New Roman, Palatino

Webes betűtípusok e-mailben

A modern e-mail kliensek támogatják a webes betűtípusokat @font-face vagy Google Fonts segítségével. Mindig adj meg tartalékot:

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

Tipp: teszteld a webes betűtípusokat több kliensben. A Gmail, az Apple Mail és az iOS Mail támogatja őket, az Outlook nem.

Tipográfiai irányelvek

Sorhossz

  • Optimális: 50-75 karakter soronként
  • Maximum: 80 karakter
  • 600 képpontos szélességnél: 16-18 képpontos betűméret adja az ideális sorhosszt

Sormagasság

  • Törzsszöveg: a betűméret 1,5-1,7-szerese
  • Címsorok: a betűméret 1,2-1,3-szorosa

Betűtípus-párosítás

Használj kontrasztot a hierarchia megteremtéséhez:

Használati esetPélda párosítás
KlasszikusGeorgia (címsorok) és Arial (törzs)
ModernMontserrat (címsorok) és Open Sans (törzs)
ProfesszionálisRoboto Slab (címsorok) és Roboto (törzs)
ElegánsPlayfair Display (címsorok) és Lato (törzs)

Szövegformázási tippek

  • Félkövért használj a kiemeléshez, ne aláhúzást (az linket sugall)
  • Korlátozd a CSUPA NAGYBETŰT rövid címsorokra vagy CTA-kra
  • Igazítsd balra a törzsszöveget a könnyebb olvasásért
  • Középre igazítsd a címsorokat a vizuális egyensúlyért
  • Kerüld a sorkizárt szöveget, mert egyenetlen szóközöket hoz létre

Képoptimalizálás e-mailhez

A képek javítják a hírleveleket, de gondos optimalizálást igényelnek a teljesítmény és az akadálymentesség érdekében.

Képtípusok és felhasználásuk

KéptípusMire jóFormátum
Fő kép vagy bannerFő vizuális fókuszJPEG vagy WebP
TermékfotókE-kereskedelmi bemutatókJPEG
Ikonok és grafikákCTA-k, felsorolásjelekPNG vagy SVG
LogókMárkaazonosításPNG (átlátszó)
AnimáltFigyelemfelkeltésGIF

Képméretezési irányelvek

  • Maximális szélesség: 600 képpont (megegyezik az e-mail szélességével)
  • Fő képek: 600 x 300-400 képpont
  • Termékképek: 280-300 képpont szélesség
  • Miniatűrök: 100-150 képpont szélesség

A képek fájlméretének optimalizálása

A nagy képek lassítják a betöltést, és növelik a spam mappába kerülés esélyét.

Célfájlméretek:

  • Fő képek: 200 KB alatt
  • Termékképek: 100 KB alatt
  • Ikonok: 10 KB alatt
  • Teljes e-mail méret: 1 MB alatt

Optimalizálási technikák:

  • Fényképekhez használj JPEG-et (80-85%-os minőség)
  • Átlátszóságot igénylő grafikákhoz PNG-t
  • Tömörítsd a képeket olyan eszközökkel, mint a TinyPNG vagy az ImageOptim
  • Fontold meg a WebP formátumot a támogató klienseknél

Alt szöveg legjobb gyakorlatok

Az alt szöveg kulcsfontosságú az akadálymentességhez és akkor, ha a képek nem töltődnek be:

Jó alt szöveg:

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

Rossz alt szöveg:

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

Alt szöveg irányelvek:

  • Írd le, mit mutat a kép
  • Természetesen illessz bele releváns kulcsszavakat
  • Maradj 125 karakter alatt
  • Legyen értelmes, ne csak „kép erről és erről”

Retina kijelzők optimalizálása

Az éles megjelenítéshez a nagy felbontású képernyőkön használj a megjelenítési méret kétszeresében képet:

  • Megjelenítési méret: 300 képpont szélesség
  • Képfájl: 600 képpont szélesség
  • Add meg explicit módon a szélességet a HTML-ben
<img src="product-600w.jpg" width="300" style="width: 300px; max-width: 100%;" alt="Product description">

Színpszichológia és színhasználat

A szín érzelmeket befolyásol, figyelmet irányít, és erősíti a márkaidentitást.

Színpszichológia az e-mailben

SzínTársításokMire jó
KékBizalom, stabilitás, nyugalomPénzügy, tech, egészségügy
PirosSürgősség, izgalom, szenvedélyAkciók, CTA-k, sürgősség
ZöldNövekedés, egészség, természetFenntarthatóság, egészség, siker
NarancsEnergia, kreativitás, melegségCTA-k, fiatalos márkák
LilaLuxus, kreativitás, bölcsességPrémium márkák, szépségápolás
SárgaOptimizmus, tisztaság, melegségKiemelések, figyelemfelkeltés
FeketeKifinomultság, luxusPrémium, divat
FehérTiszta, minimál, letisztultTérközök, hátterek

Színarány-irányelvek

Kövesd a 60-30-10 szabályt:

  • 60%: elsődleges vagy háttérszín
  • 30%: másodlagos szín
  • 10%: kiemelő szín (CTA-k, kiemelések)

Színkontraszt az akadálymentességhez

Gondoskodj elegendő kontrasztról a szöveg és a háttér között:

  • Normál szöveg: legalább 4,5:1 kontrasztarány
  • Nagy szöveg (18 képpont felett): legalább 3:1 kontrasztarány
  • Használj eszközöket: WebAIM Contrast Checker

Magas kontrasztú példák:

  • Fekete (#000000) fehéren (#FFFFFF), 21:1
  • Sötétkék (#003366) fehéren, 12,6:1
  • Fehér sötétlilán (#4A154B), 10,8:1

CTA-gombok színe

A cselekvésre hívó gombjaidnak azonnal ki kell tűnniük:

  • Használd a legnagyobb kontrasztú kiemelő színedet
  • Tartsd következetesen minden e-mailben
  • A/B teszteld a különböző színeket az optimalizáláshoz
  • Ügyelj rá, hogy a szín különbözzön a törzsszöveg linkjeitől

E-mail akadálymentesség

Az akadálymentes e-mail dizájn biztosítja, hogy minden feliratkozó tudjon a tartalmaddal foglalkozni, azok is, akik segítő technológiákat használnak.

WCAG-irányelvek e-mailhez

A Web Content Accessibility Guidelines (WCAG) az e-mailre is vonatkozik:

1. Érzékelhető

  • Adj szöveges alternatívát a képekhez (alt szöveg)
  • Ne kizárólag színnel közvetíts információt
  • Gondoskodj megfelelő színkontrasztról
  • A szöveg átméretezhető legyen az elrendezés széttörése nélkül

2. Működtethető

  • Minden funkció legyen elérhető billentyűzetről
  • Adj elég időt a tartalom elolvasására
  • Ne használj villogó tartalmat, amely rohamot válthat ki

3. Érthető

  • Használj világos, egyszerű nyelvet
  • Tartsd következetesen a navigációt
  • Adj világos hibaüzeneteket

4. Robusztus

  • Használj érvényes HTML-t
  • Tesztelj több e-mail kliensben
  • Biztosítsd a kompatibilitást a segítő technológiákkal

Akadálymentességi ellenőrzőlista

  • Minden képnek van leíró alt szövege
  • A színkontraszt megfelel a WCAG AA szintnek (4,5:1)
  • A linkek leírók („Olvasd el az útmutatónkat”, nem „Kattints ide”)
  • A betűméret legalább 14 képpont (16 az ajánlott)
  • Az e-mailnek logikus olvasási sorrendje van
  • A táblázatok csak elrendezésre szolgálnak, nem adatra (vagy megfelelő fejlécük van)
  • A nyelv deklarálva van a HTML-ben
  • A fókuszjelzés látható az interaktív elemeknél

Képernyőolvasós szempontok

Az e-mailedet a képernyőolvasót használóknak is strukturáld:

  • Ahol lehet, használj szemantikus HTML-t (h1, h2, p és így tovább)
  • Adj egyszerű szöveges verziót
  • Tegyél bele „Megnyitás böngészőben” linket
  • Kerüld a csak képből álló e-maileket
  • Tesztelj VoiceOverrel, NVDA-val vagy JAWS-szal

Hatékony CTA-dizájn

A cselekvésre hívásnál találkozik a dizájn a konverzióval. Ezt jól kell csinálni.

CTA-gombok legjobb gyakorlatai

Méret és forma

  • Minimális méret: 44 képpont magasság, 120 képpont szélesség
  • Belső térköz: legalább 12-16 képpont függőlegesen, 24-32 képpont vízszintesen
  • Forma: olyan gombformát használj, amely illik a márkához és könnyen felismerhető marad

Szín és kontraszt

  • Használj olyan márkakiemelő színt, amely elüt a környező szekciótól
  • Gondoskodj magas kontrasztról a háttérrel szemben
  • A gomb szövege legyen kiválóan olvasható

Szövegezési irányelvek

  • Használj cselekvő igéket: „Vásárolj most”, „Kezdd el”, „Töltsd le”
  • Teremts sürgősséget, ahol indokolt: „Igényeld a kedvezményedet”
  • Legyen rövid: 2-5 szó
  • Kerüld az általános szöveget: „Kattints ide”, „Küldés”, „Tudj meg többet”

A CTA elhelyezése

  • Fő CTA: a hajtás felett (görgetés nélkül látható)
  • Másodlagos CTA: a támogató tartalom után
  • E-mailenként egy fő CTA (kerüld a döntésbénulást)

CTA-szöveg példák

IparágHatékony CTA
E-kereskedelem„Vásárolj az akcióból”
SaaS„Indítsd az ingyenes próbát”
Tartalom„Olvasd el a teljes útmutatót”
Rendezvények„Lefoglalom a helyemet”
Hírlevél„Kérem a heti tippeket”

A fő cselekvésekhez gombot használj, a másodlagosakhoz szöveges linket:

[VÁSÁROLJ MOST]   Elsődleges gomb (nagy vizuális súly)


vagy nézd meg az újdonságokat    Másodlagos szöveges link

E-mail hírlevél példák iparágak szerint

Nézzük meg a hatékony hírlevéldizájnokat különböző iparágakban.

E-kereskedelmi hírlevél dizájn

Kulcselemek:

  • Kiváló minőségű termékfotózás
  • Világos árfeltüntetés
  • Több termék bemutatása
  • Erős promóciós üzenet
  • Könnyen érinthető „Vásárolj” gombok

Ajánlott elrendezés: moduláris rács termékkártyákkal

        AKCIÓS BANNER


        [HERO TERMÉK]
        30% KEDVEZMÉNY
        [VÁSÁROLJ MOST]


 [TERMÉK 1]      [TERMÉK 2]
   $49.99          $79.99


  INGYENES SZÁLLÍTÁS $75 FELETT

SaaS és tech hírlevél dizájn

Kulcselemek:

  • Letisztult, minimalista esztétika
  • Funkciókiemelések ikonokkal
  • Oktató tartalomfókusz
  • Világos értékajánlatok
  • Professzionális képanyag

Ajánlott elrendezés: egyhasábos, funkcióblokkokkal

       ÚJ FUNKCIÓ BEJELENTÉSE


       [FUNKCIÓ KÉPERNYŐKÉP]


  Első előny
  Második előny
  Harmadik előny


        [PRÓBÁLD KI MOST]

Média és kiadói hírlevél dizájn

Kulcselemek:

  • Erős tipográfiai hierarchia
  • Cikkelőnézetek képekkel
  • Kategóriákba rendezés
  • Szerzői nevek
  • Olvasási idő jelzése

Ajánlott elrendezés: kártyaalapú tartalomrács

       VEZETŐ CIKK
   [NAGY KÉP]
   Ide jön a főcím
   Rövid kivonat...


  [2. CIKK]      [3. CIKK]
    Főcím          Főcím


        TOVÁBBI CIKKEK

B2B és szakmai szolgáltatói hírlevél dizájn

Kulcselemek:

  • Visszafogott, professzionális dizájn
  • Szakmai vezető szerepet mutató tartalom
  • Esettanulmányok és adatok
  • Rendezvénypromóciók
  • Letölthető anyagok

Ajánlott elrendezés: professzionális egyhasábos

       [CÉG LOGÓJA]


      A HÓNAP ELEMZÉSEI


   Iparági jelentés
     A legfrissebb piacelemzésünk
     legfontosabb megállapításai...
        [OLVASS TOVÁBB]


   Közelgő webinárium
     március 15., 14:00 EST
        [REGISZTRÁLOK]

E-mail dizájn eszközök és források

Dizájnplatformok

Drag and drop szerkesztők:

  • Brevo (korábban Sendinblue), a Tajóval integrálva
  • Mailchimp
  • Klaviyo
  • Campaign Monitor

Professzionális tervezőeszközök:

  • Figma (tervezés és prototípus)
  • Adobe XD
  • Sketch

Sablonforrások

Ingyenes sablonok:

  • Brevo sablonkönyvtár
  • Litmus Community sablonok
  • Email on Acid sablonok

Prémium sablonok:

  • ThemeForest e-mail sablonok
  • Envato Elements
  • Creative Market

Tesztelőeszközök

  • Litmus, e-mail előnézet több mint 90 kliensben
  • Email on Acid, kliensek közötti tesztelés
  • Mail Tester, spampontszám ellenőrzése
  • Accessible Email, akadálymentességi validálás

Gyakori e-mail dizájnhibák, amelyeket kerülj el

1. Képnehéz e-mailek

Probléma: egyes e-mail kliensek alapból blokkolják a képeket. A csak képből álló e-mailek üresnek látszanak.

Megoldás: mindig tegyél bele élő szöveget. A képek egészítsék ki a tartalmat, ne helyettesítsék.

2. Túl sok CTA

Probléma: a versengő CTA-k döntésbénulást okoznak.

Megoldás: e-mailenként egy fő CTA. A másodlagos cselekvésekhez használj szöveges linket.

3. A mobil figyelmen kívül hagyása

Probléma: az asztali nézetben remekül mutató dizájn mobilon megbukik.

Megoldás: tervezz mobilelsődlegesen. Küldés előtt tesztelj több eszközön.

4. Gyenge kontraszt

Probléma: az alacsony kontrasztú szöveg nehezen olvasható, és nem felel meg az akadálymentességi elvárásoknak.

Megoldás: használj kontrasztellenőrző eszközöket. Tartsd a legalább 4,5:1 arányt.

5. Túlzsúfolt elrendezések

Probléma: a sűrű dizájn nyomasztja az olvasót és csökkenti az elköteleződést.

Megoldás: használj bőven üres teret. Kevesebb, de jobb minőségű tartalomra fókuszálj.

6. Következetlen márkamegjelenés

Probléma: a webhelyedhez nem illő e-mailek összezavarják a feliratkozókat.

Megoldás: készíts e-mailes márkaútmutatót. Használj sablonokat a következetességért.

7. Lassan betöltő e-mailek

Probléma: a nagy fájlok betöltése sokáig tart, különösen mobilon.

Megoldás: tömörítsd a képeket. Tartsd a teljes e-mail méretét 1 MB alatt.

Hírlevéldizájn készítése a Brevóval és a Tajóval

A Brevo adja a hírlevélgyártási réteget: sablonok, drag and drop szerkesztő, kampánybeállítás, kapcsolati mezők, személyre szabás, automatizálás, SMS, WhatsApp és riportolás, a csomagtól és a beállítástól függően.

A Tajo a vásárlói adatréteget támogatja a Brevót használó Shopify csapatoknál. Szinkronizálja a vásárlói, rendelési, termék-, hozzájárulási, hűségprogram- és elköteleződési kontextust, így a hírlevelek jobb szegmenseket és biztonságosabb dinamikus tartalmat használhatnak.

Gyakorlati munkafolyamat

  1. Építsd fel az újrafelhasználható hírlevélsablont a Brevóban.
  2. Határozd meg a személyre szabáshoz és a szegmentáláshoz szükséges adatmezőket.
  3. A Tajóval tartsd elérhetővé a Shopify vásárlói, rendelési, termék- és hozzájárulási adatait a Brevo munkafolyamataihoz.
  4. Hozz létre szegmenseket, például első vásárlók, VIP vásárlók, kategóriavásárlók, inaktív vásárlók és nemrég vásárlók, akiket ki kell zárni a kedvezményes küldésekből.
  5. Dinamikus blokkokat csak akkor adj hozzá, ha meg van határozva a tartalék tartalom.
  6. Indítás előtt teszteld a mobilos megjelenítést, a sötét mód viselkedését, a linkeket, a személyre szabást, a leiratkozást és a termékadatokat.

Dinamikus tartalom szabályai

A személyre szabás csak akkor javít egy hírlevélen, ha az adat pontos, és a tartalék tartalom biztonságos.

Használj dinamikus tartalmat:

  • Termékajánlásokhoz a legutóbbi vásárlások vagy kategóriák alapján.
  • Hűségprogram-emlékeztetőkhöz ellenőrzött programadatok alapján.
  • Hely vagy nyelv szerinti változatokhoz, ha a feliratkozói adat megbízható.
  • Vásárlói életciklus-blokkokhoz, például első vásárlás, ismételt vásárlás vagy inaktív vásárló.

Kerüld a dinamikus tartalmat:

  • Ha a forrásmező hiányos.
  • Ha a termék elérhetősége elavulhat.
  • Ha a tartalék tartalom hibásan nézne ki.
  • Ha a hozzájárulási vagy preferenciaadat nem egyértelmű.

Következtetés

Az e-mail hírlevél tervezése művészet és tudomány egyszerre. Az útmutatóban tárgyalt elvek, a vizuális hierarchia, a mobiloptimalizálás, az akadálymentesség, a tipográfia és a stratégiai CTA-elhelyezés alkotják azoknak a hírleveleknek az alapját, amelyek bevonnak és konvertálnak.

Jegyezd meg ezeket a kulcstanulságokat:

  1. Tervezz mobilelsődlegesen, a saját riportjaid eltérhetnek, de a kis képernyős használhatóságnak biztonságosnak kell lennie
  2. A világosság az első, minden elemnek célt kell szolgálnia
  3. Tartsd a márkakövetkezetességet, minden küldéssel építs felismerhetőséget
  4. Tesztelj folyamatosan, a kis fejlesztések idővel összeadódnak
  5. Fókuszálj az akadálymentességre, minden feliratkozónak tervezz, ne csak a többségnek

A kiváló hírlevéldizájn nem arról szól, hogy minden trendet követsz, hanem arról, hogy világos, bevonó, márkahű kommunikációt hozol létre, amely tiszteli a feliratkozóid idejét és figyelmét.

Készen állsz javítani a Shopify hírleveleiden a Brevóban? Kezdd el a Tajóval, és szinkronizáld a vásárlói, rendelési, termék-, hozzájárulási, hűségprogram- és elköteleződési adatokat a Brevo munkafolyamataiba, hogy a dizájnjaid jobb szegmenseket és biztonságosabb személyre szabást használhassanak.

Kapcsolódó cikkek

Gyakran Ismételt Kérdések

Hogyan indíts e-mail hírlevelet?
Válassz platformot, fogalmazd meg a hírlevél ígéretét, építs hozzájáruláson alapuló feliratkozási űrlapokat, készíts egyszerű, mobilelsődleges sablont, küldj tesztkampányokat, és nézd át az elköteleződést, mielőtt összetett elrendezéseket vagy személyre szabást adnál hozzá.
Milyen gyakran küldj hírlevelet?
Nincs univerzálisan legjobb gyakoriság. Kezdj olyan ritmussal, amelyet fenn tudsz tartani, például hetivel, kéthetivel vagy havival, aztán igazíts az elköteleződés, a leiratkozások, a panaszok, a tartalom minősége és a feliratkozói elvárások alapján.
Mit tegyél a hírleveledbe?
Tegyél bele egyetlen világos fő üzenetet, hasznos tartalmat, átfutható szerkezetet, élő szöveget, alt szöveggel ellátott akadálymentes képeket, világos CTA-t, leiratkozási lehetőséget és küldői adatokat, dinamikus termék- vagy vásárlói tartalmat pedig csak akkor, ha az adat megbízható.
Mi az ideális szélesség egy e-mail hírlevélhez?
Az e-mail hírlevelek szabványos és ajánlott szélessége **600 képpont**. Ez a szélesség jól működik a legtöbb e-mail kliensen és eszközön, és elég helyet ad a tartalomnak. Mobilon az e-mailnek reszponzívnak kell lennie és a képernyő szélességéhez kell igazodnia, jellemzően úgy, hogy a többhasábos elrendezés egy hasábba rendeződik.
Hány képet tegyél a hírleveledbe?
Nincs kötött képszám. Használj annyi képet, amennyi támogatja az üzenetet, de az e-mail maradjon érthető akkor is, ha a képek le vannak tiltva. A legtöbb hírlevélnél a lényegi szöveg legyen élő szöveg, az érdemi képek kapjanak leíró alt szöveget, a fájlok legyenek tömörítve, és legyen egyszerű szöveges alternatíva. Kerüld a csak képből álló hírleveleket.
Milyen betűtípusok működnek a legjobban e-mail hírlevelekben?
A webbiztos betűtípusok, mint az **Arial, a Helvetica, a Georgia és a Verdana**, egységesen jelennek meg minden e-mail kliensben. Használhatsz webes betűtípusokat is (Google Fonts, Adobe Fonts) megfelelő tartalékokkal, de számíts rá, hogy egyes kliensek, például az Outlook, a tartalék betűtípust jelenítik meg. Maradj legfeljebb 1-2 betűcsaládnál a letisztult, professzionális megjelenésért.
Hogyan tedd akadálymentessé az e-mailjeidet?
A legfontosabb akadálymentességi gyakorlatok: **alt szöveg** minden képen, **4,5:1 színkontraszt** a szövegnél, **leíró linkszöveg** („kattints ide” helyett), **legalább 14-16 képpontos betűméret**, **egyszerű szöveges verzió** és **megfelelő címsorhierarchia**. Ahol lehet, tesztelj képernyőolvasóval.
Tervezz sötét módra is a hírleveleknél?
Igen, érdemes számolni a sötét móddal, mert a nagy e-mail kliensek különböző módon változtathatják meg a színeket. Néhány tipp: ne támaszkodj kizárólag a háttérszínre, adj logóváltozatokat, ahol szükséges, óvatosan használj átlátszó PNG-t, ellenőrizd a kontrasztot mindkét módban, és teszteld a fontos sablonokat azokban a kliensekben, amelyeket a közönséged ténylegesen használ.
Melyik a legjobb képformátum e-mailhez?
A **JPEG** a legjobb fényképekhez és összetett, sok színt tartalmazó képekhez. A **PNG** ideális átlátszóságot igénylő grafikákhoz, logókhoz és szöveges képekhez. A **GIF** egyszerű animációkhoz jó. A **WebP** jobb tömörítést kínál, de az e-mail kliensek támogatása korlátozott, ezért mindig adj tartalékot. A fő képeknél maradj 200 KB alatt, a teljes e-mail mérete pedig lehetőleg legyen 1 MB alatt.
Hogyan javítsd a hírleveled kattintási arányát?
A kattintási arány javításához: tedd könnyen megtalálhatóvá a fő CTA-t, használj leíró gombszöveget, tartsd elég nagyra az érintési felületet mobilon, csökkentsd a versengő cselekvéseket, írj olyan üzenetet, amely illik a feliratkozó szándékához, és egyszerre egy érdemi dizájn- vagy szövegváltozót tesztelj. A megnyitásokat és a kattintásokat diagnosztikai jelzésként kezeld, a fontos hírleveleket pedig ahol lehet, kösd konverziós vagy bevételi eredményhez.
Milyen gyakran frissítsd a hírleveled dizájnját?
Tartsd fenn a **következetes márkamegjelenést** a felismerhetőségért, miközben **folyamatosan végzel kis optimalizálásokat** a teljesítményadatok alapján. Fontolj meg **nagyobb dizájnfrissítést** 12-18 havonta, hogy naprakész maradj. A jelentős változtatásokat mindig A/B teszteld, mielőtt a teljes listára kiengeded. A szezonális változatok és a különkiadások változatosságot adnak anélkül, hogy elvesznének a márka következetességéből.
Cikk megosztása:
Vissza az összes cikkhez

Kérj korai hozzáférést

Add meg a keresztnevedet, valamint egy e-mail-címet vagy telefonszámot. Hamarosan elküldjük a Tajo eléréséhez szükséges információkat.

automatikus felismerés
Brevo beszerzése