Nyhetsbrev

Nyhetsbrevdesign: Komplett guide til e-poster som konverterer

Lær å designe nyhetsbrev som engasjerer og konverterer. Dekker oppsett, typografi, farge, bilder og mobiloptimalisering for e-postmarkedsføring som gir resultater.

Set Noa
Set Noa
Oppdatert
0 besøk · 7 d
newsletter design
Nyhetsbrevdesign?

Lær å designe nyhetsbrev som engasjerer og konverterer. Dekker oppsett, typografi, farge, bilder og mobiloptimalisering for e-postmarkedsføring som gir resultater.

Les mer

Nyhetsbrevdesign er den usynlige arkitekturen som avgjør om abonnenter leser innholdet ditt eller sletter det. Et godt designet nyhetsbrev leder blikket naturlig fra overskrift til innhold til handling. Et dårlig designet skaper visuelt kaos som driver lesere bort, uavhengig av hvor verdifullt innholdet er.

Den gode nyheten: effektivt nyhetsbrevdesign krever ikke en profesjonell designer. Det krever forståelse av noen kjerneprinsippper og konsekvent anvendelse av dem. Denne guiden dekker oppsettstrategier, typografiregler og visuelle teknikker som gjør nyhetsbrev engasjerende og lesbare.

Fire maler i drift

Alt under denne delen er en påstand om oppsett, og påstander om oppsett er billige. Så her er fire nyhetsbrev, i drift.

Hvert av dem sitter i en ramme med reell bredde og viser sin egen HTML. Dra bredden til 375 px og se hvilke kolonner som stabler seg, og hvilke som nekter. Panelene følger temaet du leser denne siden i: i mørk modus ser du hver mals virkelige mørke blokk, ikke en tilnærming. Kildekoden ligger under hvert panel.

Tajo-maler

Fire oppsett i drift

Hvert panel nedenfor er malens ekte e-post-HTML i en ramme med reell bredde. Dra bredden ned til 375 px og se kolonnene legge seg under hverandre.

Følger temaet ditt — bytt det i toppen for å se det andre.

Les HTML-en til The Letter 6 KB, uten byggesteg 
<!DOCTYPE html>
<html lang="no" 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;">Sitatet du tar vare på i notatappen din, jobber hardere enn innholdskalenderen din.</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-hode: konsentriske blå buer krysset av et diagonalt bånd" 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 · Nummer 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;">Arkivet er produktet</h1>
        <p class="d-ink" style="margin:0 0 20px 0;font-size:18px;line-height:30px;color:#242424;">For tre uker siden lette jeg etter en tekst jeg skrev i 2019, og fant den ikke. Ikke på nettstedet, ikke i eksporten, ikke i plattformens eget søk. Tolv hundre numre, og den eneste fungerende registeret var hukommelsen min.</p>
        <p class="d-ink" style="margin:0 0 20px 0;font-size:18px;line-height:30px;color:#242424;">Det er den delen ingen forteller deg om seks år med nyhetsbrev. Å sende er lett. Å bevare er det ikke.</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;">Alt du publiserer er et innskudd. Uttaket bygger nesten ingen.</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;">Så denne uken bygde jeg de gamle numrene om til et ekte arkiv, med etiketter, fritekstsøk og permanente adresser. Det tok ni dager. Antallet abonnenter rørte seg ikke. Tiden på nettstedet ble tredoblet.</p>
        <p class="d-ink" style="margin:0 0 28px 0;font-size:18px;line-height:30px;color:#242424;">Alt står nedenfor, også delene som ikke fungerte.</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;">Les hele nummeret &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;">Skrevet for hånd hver torsdag. Svar, så leser jeg det.</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;">Meld av</a> &middot; <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Vis i nettleser</a></p>
      </td></tr>

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

De er våre. Vi designet dem for denne artikkelen, inkludert grafikken, som lages av et deterministisk geometriskript som bor i samme repositorium som denne siden — ingen bildebankfoto og ingen skjermbilder av andres malgalleri. Den forskjellen veier tyngre enn det høres ut: en designguide for e-post som illustrerer seg selv med andres e-poster, ber deg tro den på dens ord.

Fire maler er ikke fire stiler. Det er fire svar på fire ulike oppgaver:

  • The Letter er for en skribent der hele verdien er teksten. Ett bilde, marger på 88 px, en tekstlenke i stedet for en knapp. En knapp i et personlig brev leses som en annonse.
  • The Digest er for en oversikt som skummes. Nummererte rader, en lesetid før hver overskrift, og én handlingsoppfordring nederst i stedet for seks.
  • The Storefront er for et slipp. Det er det eneste oppsettet der det er riktig å starte med et bilde, og det er likevel bygget slik at bildet får svikte.
  • The Brief er for tall. Tre nøkkeltall over alt annet, og et søylediagram laget av tabellceller framfor en PNG.

Det de deler er den delen som er verdt å kopiere. Én kolonne på 600 px. Minst 16 px brødtekst. Én aksentfarge og blekk til alt annet. Hvert bilde bærer alternativ tekst, og hvert oppsett gir fortsatt mening med bildene blokkert. Et erklært fargeskjema pluss en uttrykkelig mørk blokk, for standarden i en mørk klient er at e-posten din blir snudd av en algoritme som aldri har sett merkevaren din.

Vi tok feil på én av dem i første forsøk, og nettopp den er verdt å nevne. The Digest stablet opprinnelig artikkelradene på mobil — nøyaktig det enhver guide til responsiv e-post anbefaler. Stablingen gjorde tre miniatyrer på 112 px om til tre dekorative bilder i full bredde og 335 px høyde, og en oversikt med seks temaer ble en rulletur. Den raden er nå det eneste tokolonnersoppsettet i settet som ikke stabler seg. Regler om stabling handler om innholdskolonner. En miniatyr er ikke en innholdskolonne.

Slik bygger du en av dem i Brevo

Ingen av de fire malene ovenfor krever en utvikler for å settes sammen. Hver skjerm nedenfor er den samme malen på Brevos dra-og-slipp-lerret, med én blokk valgt.

La oss starte med hovedknappen, for det er blokken med flest innstillinger:

Brevo

The Storefront på lerretet

Brevos dra-og-slipp-e-postredigerer med malen The Storefront på lerretet, hovedknappen valgt og innstillingene for etikett, lenke, farge, hjørneradius og marg i høyre panel
Venstre kolonne: blokkene du drar inn. Høyre kolonne: alt om den valgte blokken. På lerretet er en e-post på 600 px inne i en klient på 680 px — derfor vises ikke mobiloppsettet: ved nøyaktig 600 px ville malens eget bruddpunkt slå inn, og du ville redigert telefonversjonen mens bryteren sa Datamaskin.

Hver blokk i venstre kolonne svarer til noe i malene ovenfor. Tekst, Bilde, Knapp, Skillelinje og Mellomrom til strukturen. Produkt til en butikkrad. HTML til alt redigereren ikke modellerer — og slik er diagrammet i The Brief bygget:

Brevo

Et diagram uten et eneste bilde

Brevos e-postredigerer med malen The Brief på lerretet, søylediagrammet valgt og høyre panel som viser at det er bygget av tabellceller uten bilde
Et diagram eksportert som PNG mister tallene sine til bildeblokkering, til mørk modus' ombytting og til enhver skjermleser. Fire tabellrader med en farget celle og en tekstetikett mister ingen av dem, og veier ingenting.

Typografien fungerer på samme måte. Velg en tekstblokk, og panelet gir deg skriften, størrelsen, linjeavstanden og margen — som er hele verktøykassen The Letter trenger:

Brevo

Et sitat er en tekstblokk med en strek i siden

Brevos e-postredigerer med malen The Letter på lerretet og sitatet valgt: Georgia på 19px over 30px, kursiv, med en venstre strek på 3px
Ingen spesiell komponent. En tekstblokk, en venstre strek på 3 px i aksentfargen og 20 px innvendig marg. I et godt nyhetsbrev er nesten alt som ser ut som skreddersydd design, en standardblokk med to endrede egenskaper.

Og bilder har sitt eget panel, der den alternative teksten står øverst og ikke nederst i en liste med innstillinger:

Brevo

Alternativ tekst er et felt, ikke en ettertanke

Brevos e-postredigerer med The Digest på lerretet og en artikkelminiatyr valgt, som viser den alternative teksten, visningsstørrelsen på 112px, kilden på 480px og vekten på 17 KB
Visningsstørrelse 112 px, kilde 480 px — nettopp det forholdet på 2× holder miniatyren skarp på en retina-skjerm. Den alternative teksten kommer først fordi det er den delen av bildet de fleste abonnenter faktisk mottar.

For virksomheter som bruker Tajo, kan de samme seksjonene fylles dynamisk: produktanbefalinger og personlig innhold styrt av abonnentenes atferd, gjengitt i blokkene du har lagt ut her, i stedet for plukket ut for hånd ved hver utsendelse.

Grunnleggende nyhetsbrevdesign

Design tjener innhold

Det viktigste prinsippet i nyhetsbrevdesign: design skal gjøre innhold lettere å konsumere, aldri vanskeligere. Enhver designbeslutning bør svare på spørsmålet: hjelper dette leseren min å finne og tilegne seg informasjonen de kom for?

Tegn på godt nyhetsbrevdesign:

  • Lesere kan skanne hele nyhetsbrevet på 10-15 sekunder
  • Det viktigste innholdet er umiddelbart synlig
  • Hver seksjon har en tydelig begynnelse og slutt
  • Oppfordringen til handling skiller seg ut uten å være påtrengende
  • Nyhetsbrevet ser gjennomtenkt ut, ikke tilfeldig

Tegn på dårlig nyhetsbrevdesign:

  • Lesere kan ikke finne hovedinnholdet raskt
  • Flere designstiler konkurrerer om oppmerksomheten
  • Tekst er vanskelig å lese på alle enheter
  • Oppsettet brytes på mobilskjermer
  • Tette tekstblokker uten visuelle pauser

Prinsippet om visuelt hierarki

Visuelt hierarki kontrollerer rekkefølgen lesere behandler informasjon i. I nyhetsbrev, etabler hierarki gjennom:

HierarkinivåElementDesignbehandling
PrimærHovedoverskriftStørste skrift, fet, øverste posisjon
SekundærSeksjonsoverskrifterMiddels skrift, kontrasterende farge
TertiærBrødtekstStandard skrift, lesbar størrelse
StøttendeMetadata (datoer, forfattere)Mindre skrift, lysere farge
HandlingCTA-knapper/lenkerKontrasterende farge, knappestil

Oppsettstrategier

Enkeltkolonneoppsett

Enkeltkolonneoppsettet er gullstandarden for nyhetsbrev og den anbefalte tilnærmingen for de fleste utgivere.

Fordeler:

  • Vises perfekt på alle enheter og skjermstørrelser
  • Skaper en naturlig leseflytt fra topp til bunn
  • Forenkler designbeslutninger
  • Reduserer visningsproblemer på tvers av e-postklienter
  • Samsvarer med hvordan folk leser på mobil (vertikal rulling)

Best for: Tekstfokuserte nyhetsbrev, personlige nyhetsbrev, pedagogisk innhold, langformsanalyse

Struktur:

  1. Topptekst (logo, utgavenummer, dato)
  2. Introduksjon eller personlig notat
  3. Hoveddel
  4. Sekundære innholdsseksjoner (atskilt av skillelinjer)
  5. CTA eller engasjementsoppfordring
  6. Bunntekst

Kortbasert oppsett

Organiser innhold i distinkte visuelle kort, hvert med sin egen ramme, bakgrunn eller skygge.

Fordeler:

  • Tydelig innholdsatskillelse
  • Fungerer godt for kurert innhold og lenkeoppsummeringer
  • Hvert kort kan ha sitt eget bilde og CTA
  • Visuelt engasjerende uten å være overveldende

Best for: Innholdsoppsummeringer, kurerte lenker, produktutstillinger, fleremnenyhetsbrev

Designtips for kort:

  • Bruk konsistente kortdimensjoner og avstand
  • Hold maks 2 kort per rad (stable til 1 på mobil)
  • Inkluder en subtil ramme eller bakgrunnsfarge for å definere kort
  • Oppretthold konsistent polstring inni hvert kort

Hybridoppsett

Kombiner en primær innholdskolonne med en smalere sidefelt for supplerende innhold.

Fordeler:

  • Plass til mer innhold uten å øke e-postlengden
  • Fungerer for nyhetsbrev med både primært og sekundært innhold
  • Kjent format fra tradisjonelle publikasjoner

Begrensninger:

  • Må kollapse til enkeltkolonne på mobil
  • Mer komplekst å bygge og vedlikeholde
  • Kan føles rotete hvis det ikke er godt organisert

Best for: Selskapets nyhetsbrev, mediastil-publikasjoner, innholdstunge formater

Typografi for nyhetsbrev

Typografi er det mest virkningsfulle designelementet i enhver teksttung e-post. Få skriftene riktige, og alt annet faller på plass.

Skriftvalg

E-postklienter har begrenset støtte for skrifter. Bruk websikre skrifter som primærvalg:

SkriftStilBest for
ArialRen, moderne sans-serifGenerelt formål, bedrift
HelveticaRaffinert sans-serifPremiummerker
GeorgiaElegant serifRedaksjonelt, langformt
Times New RomanKlassisk serifTradisjonelt, formelt
VerdanaBred, lesbar sans-serifLiten tekst, mobil
Trebuchet MSModerne sans-serifKreativt, uformelt

Webskrifter: Du kan spesifisere webskrifter (som Open Sans eller Lato) med websikre reservealternativer. De vises i Apple Mail, iOS Mail og noen Android-klienter, men faller tilbake til det sikre alternativet i Outlook og eldre Gmail.

Skriftstørrelser

ElementMinimumsstørrelseAnbefalt størrelse
Brødtekst14 px16 px
Seksjonsoverskrifter20 px22-24 px
Hovedoverskrift24 px28-32 px
Bildetekster/metadata12 px13-14 px
CTA-knapptekst14 px16 px
Forhåndsvisningstekst12 px14 px

Linjeavstand og lesbarhet

  • Linjehøyde: 1,4-1,6 for brødtekst (24-26 px ved 16 px skriftstørrelse)
  • Avstand mellom avsnitt: 16-24 px mellom avsnitt
  • Linjlengde: 50-75 tegn per linje (forhindrer øyetretthet)
  • Tegnspacing: Standard for brødtekst, litt økt for liten tekst

Tekstformatering

  • Fet: Bruk for nøkkelfraser og fremheving, ikke hele avsnitt
  • Kursiv: Bruk sparsomt for sitater, titler eller subtil fremheving
  • Understreking: Reserver utelukkende for lenker (understreket ikke-lenketekst forvirrer lesere)
  • STORE BOKSTAVER: Bruk kun for korte etiketter eller knapper, aldri for brødtekst
  • Farge: Bruk én aksentfarge for lenker, hold brødtekst mørk grå (#333) eller nær svart

Fargestrategi

Bygge en nyhetsbrevfargepalett

Begrens nyhetsbrevet til 3-4 farger:

FargrolleBrukEksempel
PrimærOverskrifter, CTA-knapper, aksenterMerkevareblå
TekstBrødtekst, underoverskrifterMørk grå (#333333)
BakgrunnE-posttekstHvit (#FFFFFF) eller lys grå (#F5F5F5)
AksentLenker, høydepunkter, sekundære CTA-erMerkevarens sekundærfarge

Farge-tilgjengelighet

  • Oppretthold et minimum 4,5:1 kontrastforhold mellom tekst og bakgrunn
  • Ikke stol utelukkende på farge for å formidle informasjon
  • Test paletten din med fargeblindsimulator
  • Sørg for at lenker skilles fra vanlig tekst (bruk understreking, ikke bare farge)

Hensynet til mørk modus

Mange e-postklienter bruker nå mørk modus som standard. Design med mørk modus i tankene:

  • Unngå ren hvit (#FFFFFF) bakgrunn, bruk lett off-white (#FAFAFA)
  • Ikke bruk transparente PNG-filer med mørke elementer (de forsvinner i mørk modus)
  • Test logoer på både lyse og mørke bakgrunner
  • Legg til meta-tagger for støtte for fargemodus i mørk modus
  • Bruk rammer eller omriss på mørke bilder slik at de forblir synlige

Bildebruk i nyhetsbrev

Når bilder bør brukes

Bilder skal legge til verdi som tekst alene ikke kan gi:

  • Produktfotografi: Vis produkter i sammenheng
  • Datavisualisering: Diagrammer, grafer og infografikk
  • Skjermbilder: Demonstrer verktøy, funksjoner eller prosesser
  • Portrettbilder: Bygg personlig tilknytning med forfattere eller team
  • Illustrasjoner: Støtt merkevaren og tonen

Bildeoptimalisering

SpesifikasjonAnbefaling
FormatJPEG for bilder, PNG for grafikk
Bredde600 px standard, 1200 px for retina
FilstørrelseUnder 200 KB per bilde
Total e-poststørrelseUnder 100 KB ekskl. bilder
Alt-tekstBeskrivende, 125 tegn eller mindre
Sideforhold2:1 for heltebilder, 1:1 for miniatyrbilder

Tekst-til-bilde-forhold

Oppretthold et sunt tekst-til-bilde-forhold for å unngå spamfiltre og sikre lesbarhet:

  • 60:40 tekst til bilde er det anbefalte forholdet
  • E-poster som primært er bilder (kun-bilde-e-poster) har høyere spamrater
  • Inkluder alltid tekstversjoner av nøkkelinformasjon, ikke bare i bilder
  • Design for klienter med blokkerte bilder: nyhetsbrevet ditt skal gi mening uten bilder

Mobilprimært nyhetsbrevdesign

Krav til mobildesign

Med over 60 % av nyhetsbrevåpninger på mobile enheter er mobildesign ikke valgfritt.

Mobil-oppsettregler:

  • Maksimal innholdsbredde: 600 px (vises godt på alle enheter)
  • Minimum trykkmål: 44x44 piksler for knapper og lenker
  • Minimum skriftstørrelse: 16 px for brødtekst på mobil
  • Enkeltkolonneoppsett som stable seg naturlig
  • Fulbredde CTA-knapper på mobil
  • Tilstrekkelig avstand mellom klikkbare elementer (forhindre utilsiktede trykk)

Responsiv designteknikk

TeknikkStasjonærMobil
FlerseksjonsseksjonerSide om sideStablet vertikalt
BilderStørrelse i innholdFull bredde, skalert
NavigasjonslenkerHorisontaltStablet eller skjult
CTA-knapperInnebygd eller høyrejustertFull bredde
SkriftstørrelserStandardLitt større
Polstring20-40 px15-20 px

Testing av mobilvisning

Test nyhetsbrevdesignet ditt på:

  • iPhone (Safari/Mail)
  • Android (Gmail-app)
  • iPad
  • Gmail (nett)
  • Outlook (stasjonær og nett)
  • Apple Mail (stasjonær)

Bruk verktøy som Litmus eller Email on Acid for automatiserte visningstester på 90+ e-postklienter.

Designe nyhetsbrevdeler

Toppteksten

Toppteksten etablerer identitet og setter forventninger:

  • Logo: Størret hensiktsmessig (ikke for stor, vanligvis 150-200 px bred)
  • Utgaveidentifikator: Utgavenummer, dato eller utgavenavn
  • Vis online-lenke: For abonnenter som har visningsproblemer
  • Hold den kompakt: Toppteksten bør ikke skyve innhold under bretten

Seksjonsinndelere

Tydelige inndelere mellom innholdsseksjoner hjelper lesere å skanne:

  • Horisontale linjer: Enkle, tynne linjer (1-2 px) i en nøytral farge
  • Bakgrunnsfargeendringer: Veksle mellom hvite og lysegrå seksjoner
  • Ekstra avstand: 30-40 px polstring mellom seksjoner
  • Seksjonsoverskrifter: Fet, større tekst med konsistent stil

Bunnteksten

En godt designet bunntekst fullfører opplevelsen:

  • Avmeldingslenke (lovpålagt, gjør den lett å finne)
  • Lenker til sosiale medier
  • Fysisk postadresse (krav fra CAN-SPAM)
  • Vis i nettleserlenke
  • Videresend til en venn-alternativ
  • Kort merkevaretaglinje eller oppdragserklæring

Verktøy for nyhetsbrevdesign

Plattformredigerere

De fleste nyhetsbrevplattformer inkluderer innebygde designredigerere:

PlattformRedigeringstypeDesignfleksibilitetMalbibliotek
BrevoDra-og-slippHøy40+ maler
MailchimpDra-og-slippHøy100+ maler
ConvertKitForenklet redigererModeratBegrenset
SubstackTekstfokusertLavMinimal

Brevos dra-og-slipp-redigerer gjør profesjonelt nyhetsbrevdesign tilgjengelig uten kodekunnskap. For bedrifter som bruker Tajo, kan du dynamisk fylle ut nyhetsbrevdeler med produktanbefalinger og personalisert innhold basert på abonnentens atferd.

Designressurser

  • Canva: Lag nyhetsbrevtopptekstbilder, sosiale grafikker og illustrasjoner
  • Unsplash/Pexels: Gratis stockbilder
  • Really Good Emails: Inspirasjonssamling av godt designede e-poster
  • MJML: Åpen kildekode e-postrammeverk for tilpassede design
  • Figma: Design egendefinerte nyhetsbrevmaler med e-postplugineeksporter

Sjekkliste for nyhetsbrevdesign

Før du sender et nyhetsbrev, sjekk:

Oppsett:

  • Enkeltkolonneoppsett eller riktig responsiv flerkolonne
  • Innholdsbredde er 600 px eller mindre
  • Tydelig visuelt hierarki fra topptekst til bunntekst
  • Seksjoner er tydelig atskilt

Typografi:

  • Brødtekst er 16 px eller større
  • Linjehøyde er 1,4-1,6
  • Overskrifter skaper tydelig innholdsstruktur
  • Lenketekst er beskrivende (ikke “klikk her”)

Bilder:

  • Alle bilder har alt-tekst
  • Bilder er optimalisert for filstørrelse
  • Nyhetsbrevet er lesbart uten bilder
  • Retina-bilder gitt for høy-DPI-skjermer

Mobil:

  • Testet på iPhone og Android
  • CTA-knapper er full bredde på mobil
  • Skriftstørrelser er lesbare på små skjermer
  • Trykkmål er minimum 44 px

Tilgjengelighet:

  • Fargekontrast oppfyller 4,5:1-forholdet
  • Innhold er strukturert med riktige overskrifter
  • Ingen informasjon formidles kun gjennom farge
  • Kompatibel med skjermlesere

Merkevare:

  • Farger samsvarer med merkevarepaletten
  • Logo er riktig størret og plassert
  • Tone og stemme er konsistent med merkevaren
  • Bunntekst inkluderer alle nødvendige juridiske elementer

Utvikle nyhetsbrevdesignet ditt

Nyhetsbrevdesign er ikke et enggangsprosjekt. Utvikle designet ditt basert på ytelsesdata og tilbakemeldinger fra abonnenter:

  • Spor rulledybde: Kommer leserne til bunnen av nyhetsbrevet?
  • Overvåk klikk-kart: Hvilke seksjoner får flest klikk? Promoter lignende innhold.
  • Undersøk abonnenter: Spør om designpreferanser årlig
  • A/B-test oppsett: Sammenlign kort vs. lineære oppsett, bildeplassering og CTA-stiler
  • Gjennomgå konkurrenter: Studer hva som fungerer i vellykkede nyhetsbrev i din nisje

De beste nyhetsbrevdesignene er usynlige. Abonnenter legger ikke merke til designet, de legger merke til innholdet. Det betyr at designet gjør jobben sin perfekt: fjerner friksjon, leder oppmerksomheten og gjør leseopplevelsen uanstrengt.

Start enkelt, vær konsistent og forbedre basert på data. Nyhetsbrevdesignet ditt skal utvikle seg med målgruppen din, ikke foran den.

Ofte Stilte Spørsmål

Hva gjør et godt nyhetsbrevdesign?
Godt nyhetsbrevdesign bruker et tydelig visuelt hierarki, konsistent merkevarebygging, lesbar typografi (minimum 16 px), enkeltkolonneoppsett for mobilkompatibilitet og strategisk bruk av hvit plass. Det leder leserens blikk fra overskrift til innhold til oppfordring til handling.
Bør nyhetsbrev ha mye tekst eller mange bilder?
Det ideelle forholdet avhenger av innholdstypen din, men de fleste nyhetsbrev fungerer best med et 60/40 tekst-til-bilde-forhold. Tekstprimære design sikrer lesbarhet når bilder er blokkert og forbedrer leverbarhet. Bruk bilder til å støtte innhold, ikke erstatte det.
Hva er det beste nyhetsbrevoppsettet?
Et enkeltkolonneoppsett er det mest effektive for nyhetsbrev fordi det fungerer på alle enheter, er enkelt å skanne og retter oppmerksomheten i en lineær flyt. Bruk tydelige seksjonsinndelere og konsistent formatering for å organisere innhold i enkeltkolonnen.
Del denne artikkelen:
Tilbake til alle artikler

Be om tidlig tilgang

Skriv inn fornavnet ditt og en e-postadresse eller et telefonnummer. Vi kontakter deg med informasjon om tilgang til Tajo.

automatisk gjenkjenning
Skaff Brevo