E-novice

Oblikovanje novičk: najboljše prakse za privlačne e-poštne postavitve

Obvladaj oblikovanje novičk z najboljšimi praksami postavitve, nasveti za tipografijo in vizualnimi strategijami. Ustvari e-poštne novičke, ki izgledajo profesionalno in spodbujajo angažiranost.

Set Noa
Set Noa
Posodobljeno
0 obiski · 7 dni
newsletter design
Oblikovanje novičk?

Oblikovanje novičk mora dati prednost berljivosti, mobilni odzivnosti in vizualni doslednosti. Ta vodnik zajema strategije postavitve, tipografijo, uporabo barv, optimizacijo slik in orodja za oblikovanje za ustvarjanje novičk, ki jih naročniki želijo brati.

Izvedite več

Oblikovanje novičk je nevidna arhitektura, ki določa, ali naročniki vašo vsebino preberejo ali izbrišejo. Dobro oblikovana novička naravno usmerja pogled od naslova do vsebine do akcije. Slabo oblikovana ustvarja vizualni kaos, ki odganja bralce, ne glede na vrednost vsebine.

Dobra novica: učinkovito oblikovanje novičk ne zahteva profesionalnega oblikovalca. Zahteva razumevanje nekaj temeljnih načel in njihovo dosledno uporabo. Ta vodnik zajema strategije postavitve, pravila tipografije in vizualne tehnike, ki naredijo novičke privlačne in berljive.

Štiri predloge v pogonu

Vse pod tem razdelkom je trditev o postavitvi, trditve o postavitvi pa so poceni. Zato so tukaj štiri e-novice, v pogonu.

Vsaka sedi v okvirju z resnično širino in kaže svoj HTML. Zmanjšajte širino na 375 px in poglejte, kateri stolpci se zložijo in kateri to zavrnejo. Plošče sledijo temi, v kateri berete to stran: v temnem načinu vidite pravi temni blok vsake predloge, ne približka. Izvorna koda je pod vsako ploščo.

Predloge Tajo

Štiri postavitve v pogonu

Vsaka plošča spodaj je resnični e-poštni HTML predloge v okvirju z resnično širino. Zmanjšajte širino na 375 px in opazujte, kako se stolpci zložijo drug pod drugega.

Sledi vaši temi — preklopite jo v glavi, da vidite drugo.

Preberi HTML predloge The Letter 6 KB, brez gradnje 
<!DOCTYPE html>
<html lang="sl" 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;">Citat, ki ga hranite v aplikaciji za zapiske, opravi več dela kot vaš vsebinski koledar.</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="Glava Meridian Press: koncentrični modri loki, prečkani z diagonalnim pasom" 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 · Številka 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;">Arhiv je izdelek</h1>
        <p class="d-ink" style="margin:0 0 20px 0;font-size:18px;line-height:30px;color:#242424;">Pred tremi tedni sem iskal besedilo, ki sem ga napisal leta 2019, in ga nisem našel. Ne na spletni strani, ne v izvozu, ne v iskalniku same platforme. Tisoč dvesto številk in edini delujoči kazalo je bil moj spomin.</p>
        <p class="d-ink" style="margin:0 0 20px 0;font-size:18px;line-height:30px;color:#242424;">To je del, ki vam ga o šestih letih e-novic nihče ne pove. Pošiljati je enostavno. Hraniti ni.</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;">Vse, kar objavite, je vloga. Dvig gradi skoraj nihče.</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;">Ta teden sem zato stare številke prezidal v pravi arhiv, z oznakami, celotnim iskanjem po besedilu in trajnimi naslovi. Vzelo je devet dni. Število naročnikov se ni premaknilo. Čas na strani se je potrojil.</p>
        <p class="d-ink" style="margin:0 0 28px 0;font-size:18px;line-height:30px;color:#242424;">Vse je spodaj, tudi deli, ki niso delovali.</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;">Preberi celotno številko &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;">Napisano na roko vsak četrtek. Odgovorite in preberem.</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;">Odjava</a> &middot; <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Ogled v brskalniku</a></p>
      </td></tr>

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

Predloge so naše. Zasnovali smo jih za ta članek, vključno z grafiko, ki jo ustvari determinističen geometrijski skript v istem repozitoriju kot ta stran — brez fotografij iz baz in brez posnetkov tuje galerije predlog. Ta razlika tehta več, kot se sliši: vodnik po oblikovanju e-pošte, ki se ponazarja z e-sporočili drugih ljudi, od vas zahteva, da mu verjamete na besedo.

Štiri predloge niso štirje slogi. So štirje odgovori na štiri različne naloge:

  • The Letter je za pisca, čigar vsa vrednost je besedilo. Ena slika, robovi 88 px, besedilna povezava namesto gumba. Gumb v osebnem pismu se bere kot oglas.
  • The Digest je za pregled, ki se preletava. Oštevilčene vrstice, čas branja pred vsakim naslovom in en sam poziv k dejanju na dnu namesto šestih.
  • The Storefront je za predstavitev zbirke. To je edina postavitev, kjer je začeti s sliko pravilno, in je vseeno zgrajena tako, da slika lahko odpove.
  • The Brief je za številke. Trije kazalniki nad vsem ostalim in stolpčni graf iz celic tabele namesto iz PNG.

Skupen jim je tisti del, ki ga je vredno prepisati. En stolpec 600 px. Besedilo najmanj 16 px. Ena poudarna barva in črnilo za vse ostalo. Vsaka slika nosi nadomestno besedilo in vsaka postavitev ima smisel tudi z blokiranimi slikami. Deklarirana barvna shema in izrecen temni blok, ker privzeto vedenje v temnem odjemalcu pomeni, da vaše e-sporočilo obrne algoritem, ki vaše znamke ni nikoli videl.

Eno od njih smo v prvem poskusu naredili narobe in prav to je vredno poimenovati. The Digest je sprva vrstice s prispevki na mobilnem zlagal drugo pod drugo — točno tako, kot svetuje vsak vodnik po odzivni e-pošti. Zlaganje je tri sličice po 112 px spremenilo v tri okrasne slike čez celotno širino, visoke 335 px, in pregled šestih tem je postal drsenje. Ta vrstica je zdaj edina dvostolpčna postavitev v naboru, ki se ne zloži. Pravila o zlaganju govorijo o stolpcih vsebine. Sličica ni stolpec vsebine.

Kako eno od njih zgraditi v Brevu

Nobena od štirih zgornjih predlog za sestavljanje ne potrebuje razvijalca. Vsak zaslon spodaj je ista predloga na Brevovem platnu za poteg in spust, z enim izbranim blokom.

Začnimo pri glavnem gumbu, saj ima ta blok največ nastavitev:

Brevo

The Storefront na platnu

Brevov urejevalnik e-pošte s potegom in spustom: predloga The Storefront na platnu, izbran glavni gumb in njegove nastavitve oznake, povezave, barve, zaobljenosti in odmika v desni plošči
Levi stolpec: bloki, ki jih povlečete. Desni stolpec: vse o izbranem bloku. Na platnu je e-sporočilo, široko 600 px, znotraj odjemalca, širokega 680 px — zato se mobilna postavitev ne pokaže: pri točno 600 px bi se sprožila lastna prelomna točka predloge in urejali bi telefonsko različico, medtem ko stikalo pravi Namizje.

Vsak blok v levem stolpcu ustreza nečemu v zgornjih predlogah. Besedilo, Slika, Gumb, Ločilo in Razmik za strukturo. Izdelek za vrstico trgovine. HTML za vse, česar urejevalnik ne modelira — in prav tako je zgrajen graf v The Brief:

Brevo

Graf, v katerem ni nobene slike

Brevov urejevalnik e-pošte s predlogo The Brief na platnu, izbranim stolpčnim grafom in desno ploščo, ki kaže, da je zgrajen iz celic tabele brez slike
Graf, izvožen kot PNG, izgubi svoje številke ob blokiranju slik, ob obračanju v temnem načinu in v vsakem bralniku zaslona. Štiri vrstice tabele z obarvano celico in besedilno oznako ne izgubijo nobene in ne tehtajo nič.

Tipografija deluje enako. Izberite besedilni blok in plošča vam da pisavo, velikost, razmik med vrsticami in odmik — kar je celotno orodje, ki ga The Letter potrebuje:

Brevo

Citat je besedilni blok s črto ob strani

Brevov urejevalnik e-pošte s predlogo The Letter na platnu in izbranim citatom: Georgia 19px na 30px, ležeče, z levo črto 3px
Nobene posebne komponente. Besedilni blok, leva črta 3 px v poudarni barvi in 20 px notranjega odmika. V dobrih e-novicah je večina tistega, kar izgleda kot oblikovanje po meri, standarden blok z dvema spremenjenima lastnostma.

Slike imajo svojo ploščo, kjer nadomestno besedilo stoji na vrhu in ne na koncu seznama nastavitev:

Brevo

Nadomestno besedilo je polje, ne naknadna misel

Brevov urejevalnik e-pošte s predlogo The Digest na platnu in izbrano sličico prispevka, ki kaže njeno nadomestno besedilo, prikazno velikost 112px, vir 480px in težo 17 KB
Prikazna velikost 112 px, vir 480 px — prav to razmerje 2× ohranja sličico ostro na zaslonu retina. Nadomestno besedilo je prvo, ker je to tisti del slike, ki ga bo večina naročnikov res prejela.

Podjetjem, ki uporabljajo Tajo, je iste razdelke mogoče polniti dinamično: priporočila izdelkov in prilagojena vsebina, vodena z vedenjem naročnikov, izrisana v bloke, ki ste jih razporedili tukaj, namesto ročnega izbiranja ob vsakem pošiljanju.

Osnove oblikovanja novičk

Oblikovanje služi vsebini

Najpomembnejše načelo pri oblikovanju novičk: oblikovanje mora narediti vsebino lažjo za uživanje, nikoli težjo. Vsaka odločitev pri oblikovanju mora odgovoriti na vprašanje: ali to pomaga bralcu najti in sprejeti informacije, ki jih išče?

Znaki dobrega oblikovanja novičk:

  • Bralci lahko pregledajo celotno novičko v 10-15 sekundah
  • Najpomembnejša vsebina je takoj vidna
  • Vsak razdelek ima jasen začetek in konec
  • Poziv k akciji izstopa brez motečega delovanja
  • Novička izgleda premišljeno, ne naključno

Znaki slabega oblikovanja novičk:

  • Bralci ne najdejo glavne vsebine hitro
  • Več slogov oblikovanja tekmuje za pozornost
  • Besedilo je težko berljivo na kateri koli napravi
  • Postavitev se pokvari na mobilnih zaslonih
  • Gosti bloki besedila brez vizualnih prekinitev

Načelo vizualne hierarhije

Vizualna hierarhija nadzoruje vrstni red, v katerem bralci obdelujejo informacije. V novičkah vzpostavite hierarhijo z naslednjimi elementi:

Raven hierarhijeElementObravnava pri oblikovanju
PrimarnaGlavni naslovNajvečja pisava, krepko, zgornji položaj
SekundarnaGlave razdelkovSrednja pisava, kontrastna barva
TerciarnaBesedilo vsebineStandardna pisava, berljiva velikost
PodpornaMetapodatki (datumi, avtorji)Manjša pisava, svetlejša barva
AkcijskaGumbi/povezave CTAKontrastna barva, slog gumba

Strategije postavitve

Enostolpična postavitev

Enostolpična postavitev je zlati standard za novičke in priporočen pristop za večino založnikov.

Prednosti:

  • Perfektno prikazuje na vsaki napravi in velikosti zaslona
  • Ustvarja naraven tok branja od zgoraj navzdol
  • Poenostavlja odločitve pri oblikovanju
  • Zmanjšuje težave pri prikazovanju v e-poštnih odjemalcih
  • Ustreza načinu branja na mobilnih napravah (navpično pomikanje)

Najboljše za: Novičke, osredotočene na besedilo, osebne novičke, izobraževalno vsebino, poglobljene analize

Struktura:

  1. Glava (logotip, številka izdaje, datum)
  2. Uvod ali osebna opomba
  3. Glavni razdelek vsebine
  4. Sekundarni razdelki vsebine (ločeni z ločili)
  5. CTA ali poziv k vključevanju
  6. Noga

Postavitev s karticami

Organizirajte vsebino v ločene vizualne kartice, vsaka s svojo obrobo, ozadjem ali senco.

Prednosti:

  • Jasna ločitev vsebine
  • Dobro deluje za prirejeno vsebino in zbirke povezav
  • Vsaka kartica ima lahko svojo sliko in CTA
  • Vizualno privlačno brez preobremenitve

Najboljše za: Zbirke vsebine, prirejene povezave, prikaze izdelkov, novičke z več temami

Nasveti za oblikovanje kartic:

  • Uporabite dosledno velikost in razmik kartic
  • Ohranite največ 2 kartici v vrsti (na mobilnih napravah zložite v 1)
  • Vključite subtilno obrobo ali barvo ozadja za definiranje kartic
  • Ohranite dosledno notranje obrobje vsake kartice

Hibridna postavitev

Kombinirajte primarni stolpec vsebine z ožjo stransko vrstico za dopolnilno vsebino.

Prednosti:

  • Vstavi več vsebine brez povečanja dolžine e-pošte
  • Deluje za novičke tako s primarno kot sekundarno vsebino
  • Znan format iz tradicionalnih publikacij

Omejitve:

  • Mora se sesuti v en stolpec na mobilnih napravah
  • Bolj zapleteno za gradnjo in vzdrževanje
  • Lahko se zdi nagneteno, če ni dobro organizirano

Najboljše za: Podjetniške novičke, medijsko usmerjene publikacije, formate z bogato vsebino

Tipografija za novičke

Tipografija je najpomembnejši element oblikovanja v kateri koli e-pošti, bogati z besedilom. Pravilno nastavite pisave in vse ostalo pade na svoje mesto.

Izbira pisave

E-poštni odjemalci imajo omejeno podporo za pisave. Kot primarno izbiro uporabite spletno varne pisave:

PisavaSlogNajboljše za
ArialČista, moderna brez serifovSplošna raba, poslovanje
HelveticaIzpopolnjena brez serifovVrhunske znamke
GeorgiaElegantna s serifiUredniška, dolga besedila
Times New RomanKlasična s serifiTradicionalna, formalna
VerdanaŠiroka, berljiva brez serifovMajhno besedilo, mobilne naprave
Trebuchet MSModerna brez serifovUstvarjalna, neformalna

Spletne pisave: Določite lahko spletne pisave (kot so Open Sans ali Lato) z varnimi spletnimi nadomestki. Prikažejo se v Apple Mail, iOS Mail in nekaterih odjemalcih Android, v Outlooku in starejšem Gmailu pa se preklopijo na varno alternativo.

Velikost pisave

ElementMinimalna velikostPriporočena velikost
Besedilo vsebine14 px16 px
Glave razdelkov20 px22-24 px
Glavni naslov24 px28-32 px
Napisi/metapodatki12 px13-14 px
Besedilo gumba CTA14 px16 px
Besedilo predglave12 px14 px

Medvrstični razmik in berljivost

  • Višina vrstice: 1,4-1,6 za besedilo vsebine (24-26 px pri velikosti pisave 16 px)
  • Razmik med odstavki: 16-24 px med odstavki
  • Dolžina vrstice: 50-75 znakov v vrstici (preprečuje utrujenost oči)
  • Razmik med črkami: Privzeto za besedilo vsebine, rahlo povečano za majhno besedilo

Oblikovanje besedila

  • Krepko: Uporabite za ključne fraze in poudarke, ne za cele odstavke
  • Poševno: Uporabite redko za citate, naslove ali subtilne poudarke
  • Podčrtano: Rezervirajte izključno za povezave (podčrtano besedilo brez povezave zmede bralce)
  • VELIKE ČRKE: Uporabite samo za kratke oznake ali gumbe, nikoli za besedilo vsebine
  • Barva: Uporabite eno poudarno barvo za povezave, ohranite besedilo vsebine temno sivo (#333) ali skoraj črno

Strategija barv

Gradnja barvne palete novičke

Omejite novičko na 3-4 barve:

Vloga barveUporabaPrimer
PrimarnaGlave, gumbi CTA, poudarkiModra znamke
BesediloBesedilo vsebine, podglaveTemno siva (#333333)
OzadjeTelo e-pošteBela (#FFFFFF) ali svetlo siva (#F5F5F5)
PoudarekPovezave, poudarki, sekundarni CTASekundarna barva znamke

Dostopnost barv

  • Ohranite minimalno razmerje kontrasta 4,5:1 med besedilom in ozadjem
  • Ne zanašajte se samo na barvo za posredovanje informacij
  • Preizkusite svojo paleto s simulatorji barvne slepote
  • Zagotovite, da so povezave ločljive od navadnega besedila (uporabite podčrtanje, ne samo barvo)

Upoštevanje temnega načina

Številni e-poštni odjemalci zdaj privzeto uporabljajo temni način. Oblikujte z mislijo na temni način:

  • Izogibajte se čisto belim (#FFFFFF) ozadjem — uporabite rahlo umazano belo (#FAFAFA)
  • Ne uporabljajte prosojnih datotek PNG s temnimi elementi (v temnem načinu izginejo)
  • Preizkusite logotipe na svetlih in temnih ozadjih
  • Dodajte meta oznake za podporo barvni shemi temnega načina
  • Uporabite obrobe ali obrise na temnih slikah, da ostanejo vidne

Uporaba slik v novičkah

Kdaj uporabiti slike

Slike morajo dodati vrednost, ki je besedilo samo ne more zagotoviti:

  • Fotografija izdelkov: Prikažite izdelke v kontekstu
  • Vizualizacija podatkov: Grafikoni, grafi in infografike
  • Posnetki zaslona: Pokažite orodja, funkcije ali procese
  • Fotografije obrazov: Vzpostavite osebno povezavo z avtorji ali ekipo
  • Ilustracije: Podprite osebnost in ton znamke

Optimizacija slik

SpecifikacijaPriporočilo
FormatJPEG za fotografije, PNG za grafike
ŠirinaStandardnih 600 px, 1200 px za retina
Velikost datotekePod 200 KB na sliko
Skupna velikost e-poštePod 100 KB brez slik
Nadomestno besediloOpisno, 125 znakov ali manj
Razmerje stranic2:1 za hero slike, 1:1 za sličice

Razmerje slik in besedila

Ohranite zdravo razmerje besedila in slik, da se izognete filtrom za nezaželeno pošto in zagotovite berljivost:

  • 60:40 besedilo proti slikam je priporočeno razmerje
  • E-pošte, ki so primarno slike (e-pošte samo s slikami), imajo višje stopnje nezaželene pošte
  • Vedno vključite besedilne različice ključnih informacij, ne samo v slikah
  • Oblikujte za odjemalce z blokiranimi slikami: vaša novička mora imeti smisel brez slik

Oblikovanje novičk za mobilne naprave

Zahteve za mobilno oblikovanje

Ker se več kot 60 % odpiranj novičk zgodi na mobilnih napravah, mobilno oblikovanje ni neobvezno.

Pravila mobilne postavitve:

  • Maksimalna širina vsebine: 600 px (dobro se prikaže na vseh napravah)
  • Minimalna površina dotika: 44x44 pikslov za gumbe in povezave
  • Minimalna velikost pisave: 16 px za besedilo vsebine na mobilnih napravah
  • Enostolpična postavitev, ki se naravno zloži
  • Gumbi CTA polne širine na mobilnih napravah
  • Ustrezen razmik med elementi, ki jih je mogoče klikniti (preprečitev naključnih dotikov)

Tehnike odzivnega oblikovanja

TehnikaNamizni računalnikMobilna naprava
Večstolpični razdelkiDrug ob drugemZloženi navpično
SlikeVelikost znotraj vsebinePolna širina, skalirana
Navigacijske povezaveVodoravneZložene ali skrite
Gumbi CTAVrstičeni ali poravnani desnoPolna širina
Velikosti pisavStandardneNekoliko večje
Obrobje20-40 px15-20 px

Testiranje mobilnega prikaza

Preizkusite oblikovanje novičke na:

  • iPhone (Safari/Mail)
  • Android (aplikacija Gmail)
  • iPad
  • Gmail (splet)
  • Outlook (namizje in splet)
  • Apple Mail (namizje)

Za avtomatizirane teste prikaza v 90+ e-poštnih odjemalcih uporabite orodja, kot sta Litmus ali Email on Acid.

Oblikovanje razdelkov novičke

Glava

Vaša glava vzpostavi identiteto in postavi pričakovanja:

  • Logotip: Primerno velikost (ne preveliko, tipično 150-200 px širine)
  • Identifikator izdaje: Številka izdaje, datum ali ime edicije
  • Povezava za ogled v spletu: Za naročnike, ki imajo težave s prikazom
  • Ohranite kompaktnost: Glava ne sme potisniti vsebine pod pregib

Ločila razdelkov

Jasna ločila med razdelki vsebine pomagajo bralcem pri pregledovanju:

  • Vodoravne črte: Preproste, tanke linije (1-2 px) v nevtralni barvi
  • Spremembe barve ozadja: Izmenjujte med belimi in svetlo sivimi razdelki
  • Dodaten razmik: 30-40 px obrobja med razdelki
  • Glave razdelkov: Krepko, večje besedilo z doslednim slogom

Noga

Dobro oblikovana noga zaokroži izkušnjo:

  • Povezava za odjavo (zakonsko obvezna, zagotovite, da jo je enostavno najti)
  • Povezave do družbenih omrežij
  • Fizični poštni naslov (zahteva CAN-SPAM)
  • Povezava za ogled v brskalniku
  • Možnost posredovanja prijatelju
  • Kratek slogan ali izjava o poslanstvu znamke

Orodja za oblikovanje novičk

Urejevalniki platform

Večina platform za novičke vključuje vgrajene urejevalnike oblikovanja:

PlatformaVrsta urejevalnikaPrilagodljivost oblikovanjaKnjižnica predlog
BrevoVleci in spustiVisoka40+ predlog
MailchimpVleci in spustiVisoka100+ predlog
ConvertKitPoenostavljen urejevalnikZmernaOmejena
SubstackOsredotočen na besediloNizkaMinimalna

Brevo-jev urejevalnik z vleci in spusti omogoča profesionalno oblikovanje novičk brez znanja kodiranja. Za podjetja, ki uporabljajo Tajo, lahko dinamično zapolnite razdelke novičke s priporočili izdelkov in personalizirano vsebino glede na vedenje naročnikov.

Viri za oblikovanje

  • Canva: Ustvarite slike glave novičke, grafike za družbena omrežja in ilustracije
  • Unsplash/Pexels: Brezplačna fotografija zalog
  • Really Good Emails: Galerija navdiha dobro oblikovanih e-poštnih sporočil
  • MJML: Odprtokodni e-poštni okvir za prilagojene zasnove
  • Figma: Oblikujte predloge novičk po meri z izvozi vtičnikov za e-pošto

Kontrolni seznam oblikovanja novičk

Pred pošiljanjem vsake novičke preverite:

Postavitev:

  • Enostolpična postavitev ali pravilno odzivna večstolpična
  • Širina vsebine je 600 px ali manj
  • Jasna vizualna hierarhija od glave do noge
  • Razdelki so jasno ločeni

Tipografija:

  • Besedilo vsebine je 16 px ali večje
  • Višina vrstice je 1,4-1,6
  • Glave ustvarjajo jasno strukturo vsebine
  • Besedilo povezave je opisno (ne „kliknite tukaj”)

Slike:

  • Vse slike imajo nadomestno besedilo
  • Slike so optimizirane za velikost datoteke
  • Novička je berljiva brez slik
  • Retina slike zagotovljene za zaslone z visoko gostoto pik

Mobilne naprave:

  • Preizkušeno na iPhone in Android
  • Gumbi CTA so polne širine na mobilnih napravah
  • Velikosti pisav so berljive na majhnih zaslonih
  • Površine dotika so najmanj 44 px

Dostopnost:

  • Kontrastnost barv ustreza razmerju 4,5:1
  • Vsebina je strukturirana z ustreznimi naslovi
  • Nobena informacija ni posredovana samo z barvo
  • Združljivo z bralniki zaslona

Znamka:

  • Barve ustrezajo paleti znamke
  • Logotip je pravilno velikosti in umeščen
  • Ton in glas sta dosledna z znamko
  • Noga vključuje vse zahtevane pravne elemente

Razvijanje oblikovanja novičke

Oblikovanje novičk ni enkratni projekt. Razvijajte oblikovanje na podlagi podatkov o uspešnosti in povratnih informacij naročnikov:

  • Sledite globini pomikanja: Ali bralci pridejo do konca vaše novičke?
  • Spremljajte karte klikov: Kateri razdelki dobijo največ klikov? Spodbujajte podobno vsebino.
  • Anketirajte naročnike: Letno sprašujte o preferencah oblikovanja
  • A/B testirajte postavitve: Primerjajte kartice in linearne postavitve, umestitev slik in sloge CTA
  • Pregledujte konkurente: Preučite, kaj deluje v uspešnih novičkah na vašem področju

Najboljša oblikovanja novičk so nevidna. Naročniki ne opazijo oblikovanja — opazijo vsebino. To pomeni, da oblikovanje opravlja svojo nalogo popolno: odstranjuje trenje, usmerja pozornost in naredi izkušnjo branja brez napora.

Začnite preprosto, ostanite dosledni in izpopolnjujte na podlagi podatkov. Vaše oblikovanje novičke mora rasti skupaj z vašim občinstvom, ne pred njim.

Pogosto Zastavljena Vprašanja

Kaj tvori dobro oblikovanje novičk?
Dobro oblikovanje novičk uporablja jasno vizualno hierarhijo, dosleden branding, berljivo tipografijo (najmanj 16 px), enostolpično postavitev za mobilno združljivost in strateško uporabo belega prostora. Usmerja bralčev pogled od naslova do vsebine do poziva k akciji.
Naj bodo novičke bogate z besedilom ali slikami?
Idealno razmerje je odvisno od vrste vsebine, a večina novičk deluje najbolje pri razmerju besedilo proti slikam 60/40. Oblikovanja, ki dajejo prednost besedilu, zagotavljajo berljivost, ko so slike blokirane, in izboljšujejo dostavljivost. Slike uporabljaj za podporo vsebini, ne za nadomestitev.
Katera je najboljša postavitev novičke?
Enostolpična postavitev je najbolj učinkovita za novičke, ker deluje na vseh napravah, je enostavna za pregledovanje in usmerja pozornost v linearnem toku. Uporabi jasne ločila razdelkov in dosledno oblikovanje za organizacijo vsebine znotraj enega stolpca.
Deli ta članek:
Nazaj na vse članke

Zaprosite za zgodnji dostop

Vnesite ime ter e-poštni naslov ali telefonsko številko. Poslali vam bomo podrobnosti o dostopu do platforme Tajo.

samodejno prepoznavanje
Pridobite Brevo