Hírlevelek

Hírlevél design: Legjobb gyakorlatok vonzó e-mail elrendezésekhez

Sajátítsd el a hírlevél designt elrendezési legjobb gyakorlatokkal, tipográfiai tippekkel és vizuális stratégiákkal. Készíts professzionális megjelenésű, elkötelezettséget hozó e-mail hírleveleket.

Set Noa
Set Noa
Frissítve
0 látogatás · 7 nap
newsletter design
Hírlevél design?

A hírlevél dizájnnak az olvashatóságot, a mobilra optimalizálást és a vizuális következetességet kell előtérbe helyeznie. Ez az útmutató lefedi az elrendezési stratégiákat, a tipográfiát, a színhasználatot, a képoptimalizálást és a dizájneszközöket olyan hírlevelek készítéséhez, amelyeket a feliratkozók el akarnak olvasni.

Tudjon meg többet

A hírlevél designja az a láthatatlan szerkezet, amely eldönti, hogy a feliratkozók elolvassák-e a tartalmadat, vagy törlik. Egy jól megtervezett hírlevél természetes módon vezeti a szemet a címsortól a tartalomig, majd a cselekvésig. Egy gyengén megtervezett hírlevél vizuális káoszt teremt, amely elűzi az olvasókat, függetlenül attól, mennyire értékes a tartalom.

A jó hír: a hatékony hírlevél designhoz nem kell profi grafikus. Mindössze néhány alapelvet kell megérteni és következetesen alkalmazni. Ebben az útmutatóban bemutatjuk azokat az elrendezési stratégiákat, tipográfiai szabályokat és vizuális technikákat, amelyek vonzóvá és olvashatóvá teszik a hírleveleket.

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

Minden, ami ez alatt a szakasz alatt következik, állítás az elrendezésről, az elrendezésről szóló állítások pedig olcsók. Íme tehát négy hírlevél, működés közben.

Mindegyik valódi szélességű keretben ül, és a saját HTML-jét mutatja. Húzza a szélességet 375 px-re, és nézze meg, mely oszlopok rendeződnek egymás alá, és melyek tagadják meg. A panelek azt a témát követik, amelyben ezt az oldalt olvassa: sötét módban minden sablon valódi sötét blokkját látja, nem annak közelítését. A forráskód minden panel alatt ott van.

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>

Ezek a mieink. Ehhez a cikkhez terveztük őket, a grafikákkal együtt, amelyeket egy determinisztikus geometriai szkript állít elő, és amely ugyanabban a tárolóban él, mint ez az oldal — se stockfotó, se képernyőkép más sablongalériájáról. Ez a különbség többet nyom a latban, mint amilyennek hangzik: az az e-mail-tervezési útmutató, amely mások leveleivel illusztrálja magát, azt kéri, hogy higgyen neki szó nélkül.

A négy sablon nem négy stílus. Négy válasz négy különböző feladatra:

  • The Letter olyan szerzőnek szól, akinek minden értéke a szöveg. Egy kép, 88 px-es margók, gomb helyett szöveges hivatkozás. Egy személyes levélben a gomb hirdetésnek hat.
  • The Digest átfutásra szánt összefoglalónak szól. Számozott sorok, minden cím előtt olvasási idő, és hat helyett egyetlen cselekvésre ösztönzés a végén.
  • The Storefront termékbemutatóra szól. Ez az egyetlen elrendezés, amelyben helyes képpel kezdeni, és mégis úgy épült, hogy a kép kieshessen.
  • The Brief a számokról szól. Három mutató minden más felett, és oszlopdiagram táblázatcellákból, nem PNG-ből.

A közös bennük az a rész, amit érdemes lemásolni. Egyetlen 600 px-es hasáb. Legalább 16 px-es törzsszöveg. Egy kiemelőszín, minden másra tinta. Minden kép alternatív szöveget visel, és minden elrendezésnek letiltott képekkel is van értelme. Deklarált színséma és kimondott sötét blokk, mert egy sötét kliensben az alapértelmezés az, hogy a levelét megfordítja egy algoritmus, amely soha nem látta a márkáját.

Az egyiket elsőre elrontottuk, és éppen ezt érdemes megnevezni. The Digest eleinte egymás alá rendezte a cikksorokat mobilon — pontosan úgy, ahogy minden reszponzív e-mailekről szóló útmutató tanácsolja. Az egymás alá rendezés három 112 px-es bélyegképet három teljes szélességű, 335 px magas díszítőképpé alakított, és a hat témás összefoglalóból görgetés lett. Ez a sor most az egyetlen kéthasábos elrendezés a készletben, amely nem rendeződik egymás alá. Az egymás alá rendezésről szóló szabályok tartalomhasábokról szólnak. A bélyegkép nem tartalomhasáb.

Hogyan építsen ilyet a Brevóban

A fenti négy sablon egyikéhez sem kell fejlesztő az összeállításhoz. Az alábbi képernyők mindegyike ugyanaz a sablon a Brevo fogd és vidd vásznán, egyetlen kijelölt blokkal.

Kezdjük a főgombbal, mert ennek a blokknak van a legtöbb beállítása:

Brevo

The Storefront a vásznon

A Brevo fogd és vidd e-mail-szerkesztője a The Storefront sablonnal a vásznon, kijelölt főgombbal, valamint annak felirat-, hivatkozás-, szín-, lekerekítés- és térköz-beállításaival a jobb oldali panelen
Bal hasáb: a blokkok, amelyeket behúz. Jobb hasáb: minden a kijelölt blokkról. A vásznon egy 600 px széles levél van egy 680 px széles kliensen belül — ezért nem jelenik meg a mobil elrendezés: pontosan 600 px-nél elsülne a sablon saját töréspontja, és a telefonos változatot szerkesztené, miközben a kapcsoló azt mondja, Asztali.

A bal hasáb minden blokkja megfelel valaminek a fenti sablonokban. Szöveg, Kép, Gomb, Elválasztó és Térköz a szerkezethez. Termék a bolti sorhoz. HTML mindenhez, amit a szerkesztő nem modellez — és pontosan így épül a The Brief diagramja is:

Brevo

Diagram, amelyben egyetlen kép sincs

A Brevo e-mail-szerkesztője a The Brief sablonnal a vásznon, kijelölt oszlopdiagrammal, és a jobb oldali panellel, amely mutatja, hogy táblázatcellákból épül, kép nélkül
A PNG-ként exportált diagram elveszíti a számait a képletiltás, a sötét mód megfordítása és minden képernyőolvasó előtt. Négy táblázatsor színes cellával és szöveges címkével egyiket sem veszíti el, és semmit nem nyom.

A tipográfia ugyanígy működik. Jelöljön ki egy szövegblokkot, és a panel megadja a betűtípust, a méretet, a sorközt és a térközt — pontosan azt a szerszámkészletet, amire a The Letternek szüksége van:

Brevo

Az idézet egy szövegblokk oldalvonallal

A Brevo e-mail-szerkesztője a The Letter sablonnal a vásznon és kijelölt idézettel: Georgia 19px 30px-en, dőlt, 3px-es bal oldali vonallal
Semmilyen külön komponens. Egy szövegblokk, 3 px-es bal oldali vonal a kiemelőszínben és 20 px belső térköz. Egy jó hírlevélben szinte minden, ami egyedi tervezésnek látszik, egy szabványos blokk két megváltoztatott tulajdonsággal.

A képeknek is saját paneljük van, ahol az alternatív szöveg felül áll, nem a beállításlista végén:

Brevo

Az alternatív szöveg mező, nem utólagos ötlet

A Brevo e-mail-szerkesztője a The Digesttel a vásznon és egy kijelölt cikkbélyegképpel, amelyen látszik az alternatív szövege, a 112px-es megjelenítési mérete, a 480px-es forrása és a 17 KB-os súlya
Megjelenítési méret 112 px, forrás 480 px — ez a 2× arány tartja élesen a bélyegképet retina kijelzőn. Az alternatív szöveg áll elöl, mert a képnek ez az a része, amelyet az előfizetők többsége ténylegesen meg fog kapni.

A Tajót használó vállalkozásoknál ugyanezek a szakaszok dinamikusan tölthetők fel: termékajánlások és személyre szabott tartalom az előfizetők viselkedése alapján, az itt kirakott blokkokba renderelve, nem pedig küldésenként kézzel válogatva.

A hírlevél design alapjai

A design a tartalmat szolgálja

A hírlevél design legfontosabb alapelve: a designnak könnyebbé kell tennie a tartalom befogadását, soha nem nehezebbé. Minden tervezési döntésnek erre a kérdésre kell választ adnia: segít-e ez az olvasónak megtalálni és feldolgozni azt az információt, amiért érkezett?

A jó hírlevél design jelei:

  • Az olvasók 10-15 másodperc alatt át tudják futni az egész hírlevelet
  • A legfontosabb tartalom azonnal látható
  • Minden szakasznak van egyértelmű eleje és vége
  • A cselekvésre ösztönző elem (CTA) kiemelkedik anélkül, hogy tolakodó lenne
  • A hírlevél szándékosnak látszik, nem véletlenszerűnek

A gyenge hírlevél design jelei:

  • Az olvasók nem találják gyorsan a fő tartalmat
  • Több stílus versenyez egymással a figyelemért
  • A szöveg minden eszközön nehezen olvasható
  • Az elrendezés széttörik mobilképernyőn
  • Sűrű szövegtömbök vizuális szünetek nélkül

A vizuális hierarchia elve

A vizuális hierarchia szabályozza, milyen sorrendben dolgozza fel az olvasó az információt. A hírlevelekben a hierarchiát az alábbiakkal tudod kialakítani:

HierarchiaszintElemTervezési megoldás
ElsődlegesFő címsorLegnagyobb betűméret, félkövér, felső helyzet
MásodlagosSzakaszcímekKözepes betűméret, kontrasztos szín
HarmadlagosSzöveges tartalomStandard betűtípus, olvasható méret
KiegészítőMetaadatok (dátum, szerző)Kisebb betűméret, világosabb szín
CselekvésCTA gombok/linkekKontrasztos szín, gomb stílus

Elrendezési stratégiák

Egyhasábos elrendezés

Az egyhasábos elrendezés a hírlevelek aranystandardja, és a legtöbb kiadó számára ez az ajánlott megoldás.

Előnyei:

  • Tökéletesen jelenik meg minden eszközön és képernyőméreten
  • Természetes olvasási folyamatot hoz létre fentről lefelé
  • Egyszerűsíti a tervezési döntéseket
  • Csökkenti a megjelenítési problémákat a különböző e-mail kliensekben
  • Illeszkedik ahhoz, ahogyan az emberek mobilon olvasnak (függőleges görgetés)

Mire a legjobb: szövegközpontú hírlevelek, személyes hírlevelek, oktatási tartalom, hosszabb elemzések

Felépítés:

  1. Fejléc (logó, lapszám, dátum)
  2. Bevezető vagy személyes üzenet
  3. Fő tartalmi szakasz
  4. Másodlagos tartalmi szakaszok (elválasztókkal)
  5. CTA vagy elköteleződésre ösztönző elem
  6. Lábléc

Kártyaalapú elrendezés

Szervezd a tartalmat különálló vizuális kártyákba, mindegyikhez saját kerettel, háttérrel vagy árnyékkal.

Előnyei:

  • Egyértelmű tartalmi elválasztás
  • Jól működik kurált tartalomhoz és linkgyűjteményekhez
  • Minden kártyához tartozhat saját kép és CTA
  • Vizuálisan vonzó, anélkül hogy túlterhelt lenne

Mire a legjobb: tartalomgyűjtemények, kurált linkek, termékbemutatók, többtémás hírlevelek

Tervezési tippek kártyákhoz:

  • Használj következetes kártyaméretet és térközöket
  • Soronként legfeljebb 2 kártya legyen (mobilon 1-re tördelve)
  • Diszkrét kerettel vagy háttérszínnel jelöld a kártyákat
  • Tartsd egységesen a kártyákon belüli kitöltést

Hibrid elrendezés

Egy elsődleges tartalomhasábot kombinálj egy keskenyebb oldalsávval, ami kiegészítő tartalomnak ad helyet.

Előnyei:

  • Több tartalom fér el az e-mail hosszának növelése nélkül
  • Jól működik olyan hírlevelekhez, ahol elsődleges és másodlagos tartalom is van
  • Hagyományos kiadványokból jól ismert formátum

Korlátai:

  • Mobilon egyetlen hasábra kell összecsuknia
  • Bonyolultabb felépíteni és karbantartani
  • Zsúfoltnak hathat, ha nincs jól rendezve

Mire a legjobb: céges hírlevelek, médiastílusú kiadványok, tartalomgazdag formátumok

Tipográfia hírlevelekhez

A tipográfia a leghatásosabb tervezési elem minden szövegközpontú e-mailben. Ha a betűtípusokat eltalálod, a többi a helyére kerül.

Betűtípus választás

Az e-mail kliensek korlátozottan támogatják a betűtípusokat. Elsődlegesen webbiztos betűtípusokat használj:

BetűtípusStílusMire a legjobb
ArialTiszta, modern sans-serifÁltalános, üzleti
HelveticaLetisztult sans-serifPrémium márkák
GeorgiaElegáns serifSzerkesztőségi, hosszú szöveg
Times New RomanKlasszikus serifHagyományos, formális
VerdanaSzéles, jól olvasható sans-serifKis szöveg, mobil
Trebuchet MSModern sans-serifKreatív, közvetlen

Webfontok: webbiztos tartalék mellett megadhatsz webfontokat (például Open Sans vagy Lato). Ezek megjelennek Apple Mailben, iOS Mailben és néhány Android kliensben, de Outlookban és régebbi Gmailben a biztos alternatíva töltődik be.

Betűméretezés

ElemMinimum méretAjánlott méret
Folyószöveg14px16px
Szakaszcímek20px22-24px
Fő címsor24px28-32px
Képaláírás/metaadat12px13-14px
CTA gombszöveg14px16px
Preheader szöveg12px14px

Sortávolság és olvashatóság

  • Sormagasság: 1,4-1,6 a folyószöveghez (24-26px 16px-es betűméretnél)
  • Bekezdéstávolság: 16-24px a bekezdések között
  • Sorhossz: 50-75 karakter soronként (megelőzi a szemfáradást)
  • Betűköz: alapértelmezett a folyószöveghez, kissé növelt a kis szöveghez

Szövegformázás

  • Félkövér: kulcskifejezésekhez és kiemeléshez használd, ne egész bekezdésekhez
  • Dőlt: takarékosan idézetekhez, címekhez vagy finom kiemeléshez
  • Aláhúzás: kizárólag linkekhez tartsd fenn (az aláhúzott, nem linkelt szöveg összezavarja az olvasót)
  • CSUPA NAGYBETŰ: csak rövid címkéknél vagy gomboknál használd, soha ne folyószövegben
  • Szín: linkekhez egyetlen kiemelőszínt használj, a folyószöveget tartsd sötétszürkén (#333) vagy közel feketén

Színstratégia

Hírlevél színpaletta felépítése

Korlátozd a hírlevél színeit 3-4 árnyalatra:

SzínszerepFelhasználásPélda
ElsődlegesCímek, CTA gombok, kiemelésekMárka kék
SzövegFolyószöveg, alcímekSötétszürke (#333333)
HáttérE-mail törzsFehér (#FFFFFF) vagy világosszürke (#F5F5F5)
KiemelőLinkek, kiemelések, másodlagos CTA-kMásodlagos márkaszín

Színek és akadálymentesség

  • Tartsd legalább a 4,5:1 kontrasztarányt a szöveg és a háttér között
  • Ne kizárólag színnel közvetíts információt
  • Teszteld a palettádat színvakság-szimulátorokkal
  • Gondoskodj róla, hogy a linkek megkülönböztethetők legyenek a folyószövegtől (használj aláhúzást, ne csak színt)

Sötét mód szempontjai

Számos e-mail kliensnél már alapértelmezett a sötét mód. Tervezz erre is gondolva:

  • Kerüld a tiszta fehér (#FFFFFF) hátteret, használj enyhén törtfehéret (#FAFAFA)
  • Ne használj átlátszó PNG-ket sötét elemekkel (sötét módban eltűnnek)
  • Teszteld a logókat világos és sötét háttéren is
  • Adj hozzá meta címkéket a sötét mód színvilágának támogatásához
  • Használj keretet vagy körvonalat a sötét képeken, hogy láthatók maradjanak

Képek használata hírlevelekben

Mikor használj képeket

A képeknek olyan értéket kell hozzáadniuk, amit a szöveg önmagában nem tud:

  • Termékfotó: mutasd be a terméket a használat kontextusában
  • Adatvizualizáció: diagramok, grafikonok és infografikák
  • Képernyőképek: mutass be eszközöket, funkciókat vagy folyamatokat
  • Portrék: építs személyes kapcsolatot a szerzőkkel vagy a csapattal
  • Illusztrációk: támogasd a márkaszemélyiséget és a hangnemet

Képoptimalizálás

SpecifikációAjánlás
FormátumJPEG fotókhoz, PNG grafikákhoz
Szélesség600px standard, 1200px retina kijelzőhöz
FájlméretKépenként 200KB alatt
Teljes e-mail méret100KB alatt képek nélkül
Alt szövegLeíró, legfeljebb 125 karakter
Képarány2:1 hero képeknél, 1:1 bélyegképeknél

Kép-szöveg arány

Tarts egészséges szöveg-kép arányt, hogy elkerüld a spam szűrőket és biztosítsd az olvashatóságot:

  • 60:40 szöveg-kép arány az ajánlott
  • A szinte csak képből álló e-mailek (csak képes e-mailek) magasabb spam aránnyal járnak
  • Mindig építsd be a kulcsinformációkat szöveges formában is, ne csak képeken
  • Tervezz a képeket blokkoló kliensekre is: a hírlevelednek képek nélkül is értelmesnek kell lennie

Mobile-first hírlevél design

Mobilos tervezési követelmények

Mivel a hírlevél megnyitások több mint 60%-a mobilon történik, a mobilos tervezés nem opció.

Mobil elrendezési szabályok:

  • Maximális tartalmi szélesség: 600px (minden eszközön jól jelenik meg)
  • Minimális koppintási célterület: 44x44 pixel a gomboknál és linkeknél
  • Minimális betűméret: 16px folyószöveghez mobilon
  • Egyhasábos elrendezés, amely természetesen rendeződik egymás alá
  • Teljes szélességű CTA gombok mobilon
  • Megfelelő térköz a kattintható elemek között (kerüld a véletlen koppintásokat)

Reszponzív design technikák

TechnikaAsztaliMobil
Többhasábos szakaszokEgymás mellettFüggőlegesen egymás alatt
KépekTartalmon belüli méretTeljes szélesség, skálázva
Navigációs linkekVízszintesEgymás alatt vagy elrejtve
CTA gombokSorban vagy jobbra igazítvaTeljes szélesség
BetűméretekStandardKissé nagyobb
Belső margó20-40px15-20px

Mobilos megjelenítés tesztelése

Teszteld a hírleveled designját a következőkön:

  • iPhone (Safari/Mail)
  • Android (Gmail app)
  • iPad
  • Gmail (web)
  • Outlook (asztali és webes)
  • Apple Mail (asztali)

Használj olyan eszközöket, mint a Litmus vagy az Email on Acid, hogy automatizált megjelenítési teszteket futtass több mint 90 e-mail kliensen.

Hírlevélszakaszok tervezése

A fejléc

A fejléc megalapozza az identitást és előrevetíti az elvárásokat:

  • Logó: megfelelő méretben (ne legyen túl nagy, jellemzően 150-200px széles)
  • Lapazonosító: lapszám, dátum vagy kiadásnév
  • Online megtekintés link: azoknak a feliratkozóknak, akiknél megjelenítési problémák vannak
  • Tartsd kompaktnak: a fejléc ne nyomja le a tartalmat a hajtás alá

Szakaszelválasztók

Az egyértelmű elválasztók segítenek az olvasónak átfutni a tartalmat:

  • Vízszintes vonalak: egyszerű, vékony vonalak (1-2px) semleges színben
  • Háttérszín-váltások: váltakoztass fehér és világosszürke szakaszokat
  • Extra térközök: 30-40px belső margó a szakaszok között
  • Szakaszcímek: félkövér, nagyobb szöveg következetes stílussal

A lábléc

Egy jól megtervezett lábléc kerek egésszé teszi az élményt:

  • Leiratkozási link (jogszabály írja elő, legyen könnyen megtalálható)
  • Közösségi média linkek
  • Postacím (CAN-SPAM követelmény)
  • Megtekintés böngészőben link
  • Továbbítás barátnak opció
  • Rövid márka szlogen vagy küldetésnyilatkozat

Hírlevél design eszközök

Platformszerkesztők

A legtöbb hírlevél platform beépített design szerkesztőt kínál:

PlatformSzerkesztő típusaTervezési rugalmasságSablonkönyvtár
BrevoDrag-and-dropMagas40+ sablon
MailchimpDrag-and-dropMagas100+ sablon
ConvertKitEgyszerűsített szerkesztőKözepesKorlátozott
SubstackSzövegközpontúAlacsonyMinimális

A Brevo drag-and-drop szerkesztője kódolási tudás nélkül is hozzáférhetővé teszi a professzionális hírlevél designt. Tajót használó cégek esetén dinamikusan tudod feltölteni a hírlevélszakaszokat termékajánlásokkal és személyre szabott tartalommal a feliratkozók viselkedése alapján.

Designerőforrások

  • Canva: hírlevél fejlécképek, közösségi média grafikák és illusztrációk készítéséhez
  • Unsplash/Pexels: ingyenes stockfotók
  • Really Good Emails: inspirációs galéria jól megtervezett e-mailekből
  • MJML: nyílt forráskódú e-mail keretrendszer egyedi designokhoz
  • Figma: egyedi hírlevélsablonok tervezéséhez, e-mail plugin exporttal

Hírlevél design ellenőrzőlista

Mielőtt bármilyen hírlevelet kiküldesz, ellenőrizd:

Elrendezés:

  • Egyhasábos elrendezés vagy megfelelően reszponzív többhasábos
  • A tartalom szélessége 600px vagy kevesebb
  • Egyértelmű vizuális hierarchia a fejléctől a lábléctől
  • A szakaszok jól elkülönülnek

Tipográfia:

  • A folyószöveg 16px vagy nagyobb
  • A sormagasság 1,4-1,6
  • A címek tiszta tartalmi szerkezetet adnak
  • A linkek szövege leíró (nem “kattints ide”)

Képek:

  • Minden képnek van alt szövege
  • A képek fájlméret-optimalizáltak
  • A hírlevél képek nélkül is olvasható
  • Retina képek elérhetők a magas DPI-jű kijelzőkhöz

Mobil:

  • Tesztelve iPhone-on és Androidon
  • A CTA gombok teljes szélességűek mobilon
  • A betűméretek olvashatók kis képernyőn
  • A koppintási célterületek legalább 44px-esek

Akadálymentesség:

  • A színkontraszt eléri a 4,5:1 arányt
  • A tartalom megfelelő címsorszerkezettel rendelkezik
  • Egyetlen információt sem kizárólag szín közvetít
  • Képernyőolvasóval kompatibilis

Márka:

  • A színek illeszkednek a márkapalettához
  • A logó megfelelő méretű és pozíciójú
  • A hangnem és a stílus illeszkedik a márkához
  • A lábléc tartalmazza az összes kötelező jogi elemet

Hírleveled designjának fejlesztése

A hírlevél design nem egyszeri projekt. Fejleszd a designt a teljesítményadatok és a feliratkozói visszajelzések alapján:

  • Kövesd a görgetési mélységet: eljutnak az olvasók a hírleveled aljára?
  • Figyeld a kattintási térképeket: mely szakaszok kapják a legtöbb kattintást? Tolj előtérbe hasonló tartalmat.
  • Kérdezd meg a feliratkozókat: évente kérdezd meg őket a designpreferenciákról
  • A/B teszteld az elrendezéseket: vesd össze a kártyás és lineáris elrendezést, a képek elhelyezését és a CTA stílusait
  • Vizsgáld a versenytársakat: tanulmányozd, mi működik a területeden a sikeres hírlevelekben

A legjobb hírlevél designok láthatatlanok. A feliratkozók nem a designt veszik észre, hanem a tartalmat. Ez azt jelenti, hogy a design tökéletesen végzi a dolgát: csökkenti a súrlódást, irányítja a figyelmet, és könnyeddé teszi az olvasási élményt.

Kezdj egyszerűen, maradj következetes, és finomíts az adatok alapján. A hírleveled designjának a közönségeddel együtt kell fejlődnie, nem előtte járva.

Gyakran Ismételt Kérdések

Mitől lesz jó egy hírlevél dizájn?
A jó hírlevél dizájn egyértelmű vizuális hierarchiát, következetes márkajegyeket, olvasható tipográfiát (minimum 16px), mobilkompatibilis egyhasábos elrendezést és a fehér terület stratégiai használatát alkalmazza. A főcímtől a tartalmon át a cselekvésre ösztönzésig vezeti az olvasó tekintetét.
A hírlevelek szöveg- vagy képközpontúak legyenek?
Az ideális egyensúly a tartalom típusától függ, de a legtöbb hírlevél 60/40 szöveg-kép aránnyal teljesít a legjobban. A szövegközpontú dizájnok biztosítják az olvashatóságot, ha a képek le vannak tiltva, és javítják a kézbesíthetőséget. A képeket a tartalom támogatására használd, ne a helyettesítésére.
Melyik a legjobb hírlevél elrendezés?
Az egyhasábos elrendezés a leghatékonyabb a hírlevelekhez, mert minden eszközön működik, könnyen átfutható, és lineáris folyamatban irányítja a figyelmet. Használj egyértelmű szakaszelválasztókat és következetes formázást a tartalom rendszerezéséhez az egyetlen hasábon belü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