Nyhedsbreve

Nyhedsbrevsdesign: Bedste praksis for engagerende e-maillayouts

Bliv ekspert i nyhedsbrevsdesign med bedste praksis for layout, typografitips og visuelle strategier. Lav e-mailnyhedsbreve, der ser professionelle ud og skaber engagement.

Set Noa
Set Noa
Opdateret
0 besøg · 7 dage
newsletter design
Nyhedsbrevsdesign?

Nyhedsbrevsdesign bør prioritere læsbarhed, mobilvenlighed og visuel konsistens. Denne guide dækker layoutstrategier, typografi, farvebrug, billedoptimering og designværktøjer til at lave nyhedsbreve, som abonnenter har lyst til at læse.

Læs mere

Nyhedsbrevsdesign er den usynlige arkitektur, der afgør, om abonnenter læser dit indhold eller sletter det. Et veldesignet nyhedsbrev leder øjet naturligt fra overskrift til indhold til handling. Et dårligt designet skaber visuel kaos, der driver læserne væk – uanset hvor værdifuldt indholdet er.

Den gode nyhed: effektivt nyhedsbrevsdesign kræver ikke en professionel designer. Det kræver forståelse af et par grundlæggende principper og konsekvent anvendelse af dem. Denne guide dækker de layoutstrategier, typografiregler og visuelle teknikker, der gør nyhedsbreve engagerende og læsbare.

Fire skabeloner i drift

Alt under dette afsnit er en påstand om layout, og påstande om layout er billige. Så her er fire nyhedsbreve, i drift.

Hvert enkelt sidder i en ramme med rigtig bredde og viser sin egen HTML. Træk bredden til 375 px og se, hvilke kolonner der stabler, og hvilke der nægter. Panelerne følger det tema, du læser denne side i: i mørk tilstand ser du hver skabelons virkelige mørke blok, ikke en tilnærmelse. Kildekoden ligger under hvert panel.

Tajo-skabeloner

Fire layouts i drift

Hvert panel nedenfor er skabelonens ægte e-mail-HTML i en ramme med rigtig bredde. Træk bredden ned til 375 px og se kolonnerne lægge sig under hinanden.

Følger dit tema — skift det i toppen for at se det andet.

Læs HTML for The Letter 6 KB, uden byggetrin 
<!DOCTYPE html>
<html lang="dk" 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;">Det citat, du gemmer i din note-app, arbejder hårdere end din indholdskalender.</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-hoved: koncentriske blå buer krydset af 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 uger siden ledte jeg efter en tekst, jeg skrev i 2019, og fandt den ikke. Ikke på sitet, ikke i eksporten, ikke i platformens egen søgning. Tolv hundrede numre, og det eneste fungerende register var min hukommelse.</p>
        <p class="d-ink" style="margin:0 0 20px 0;font-size:18px;line-height:30px;color:#242424;">Det er den del, ingen fortæller dig om seks år med nyhedsbrev. At sende er nemt. At bevare er 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, hvad du udgiver, er et indskud. Hævningen bygger næsten 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å i denne uge byggede jeg de gamle numre om til et rigtigt arkiv med tags, fritekstsøgning og permanente adresser. Det tog ni dage. Antallet af abonnenter rørte sig ikke. Tiden på sitet blev tredoblet.</p>
        <p class="d-ink" style="margin:0 0 28px 0;font-size:18px;line-height:30px;color:#242424;">Det hele står nedenfor, også de dele der ikke virkede.</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;">Læs 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 i hånden hver torsdag. Svar, så læser 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;">Afmeld</a> &middot; <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Vis i browser</a></p>
      </td></tr>

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

De er vores. Vi har designet dem til denne artikel, inklusive grafikken, som genereres af et deterministisk geometriscript, der bor i samme repository som denne side — ingen stockfotos og ingen skærmbilleder af andres skabelongalleri. Den skelnen vejer tungere, end det lyder: en designguide til e-mail, der illustrerer sig selv med andres mails, beder dig tro den på dens ord.

Fire skabeloner er ikke fire stilarter. Det er fire svar på fire forskellige opgaver:

  • The Letter er til en skribent, hvis hele værdi er teksten. Ét billede, margener på 88 px, et tekstlink i stedet for en knap. En knap i et personligt brev læses som en annonce.
  • The Digest er til et overblik, der skimmes. Nummererede rækker, en læsetid før hver overskrift og én handlingsopfordring i bunden i stedet for seks.
  • The Storefront er til en lancering. Det er det eneste layout, hvor det er rigtigt at starte med et billede, og det er alligevel bygget, så billedet må svigte.
  • The Brief er til tal. Tre nøgletal over alt andet og et søjlediagram lavet af tabelceller frem for en PNG.

Det, de deler, er den del, der er værd at kopiere. Én kolonne på 600 px. Mindst 16 px brødtekst. Én accentfarve og blæk til alt andet. Hvert billede bærer alternativ tekst, og hvert layout giver stadig mening med billeder blokeret. Et erklæret farveskema plus en udtrykkelig mørk blok, for standarden i en mørk klient er, at din mail bliver vendt om af en algoritme, der aldrig har set dit brand.

Vi tog fejl af en af dem i første forsøg, og netop den er værd at nævne. The Digest stablede oprindeligt sine artikelrækker på mobil — præcis hvad enhver guide til responsiv e-mail anbefaler. Stablingen forvandlede tre miniaturer på 112 px til tre dekorative billeder i fuld bredde og 335 px højde, og et overblik med seks emner blev til en rulletur. Den række er nu det eneste tokolonnelayout i sættet, der ikke stabler. Regler om stabling handler om indholdskolonner. En miniature er ikke en indholdskolonne.

Sådan bygger du en af dem i Brevo

Ingen af de fire skabeloner ovenfor kræver en udvikler for at blive samlet. Hver skærm nedenfor er den samme skabelon på Brevos træk-og-slip-lærred, med én blok valgt.

Lad os starte med hovedknappen, for det er blokken med flest indstillinger:

Brevo

The Storefront på lærredet

Brevos træk-og-slip-e-maileditor med skabelonen The Storefront på lærredet, hovedknappen valgt og dens indstillinger for etiket, link, farve, hjørneradius og margen i højre panel
Venstre kolonne: de blokke, du trækker ind. Højre kolonne: alt om den valgte blok. På lærredet er en mail på 600 px inde i en klient på 680 px — derfor vises mobil-layoutet ikke: ved præcis 600 px ville skabelonens eget brudpunkt slå til, og du ville redigere telefonversionen, mens knappen sagde Computer.

Hver blok i venstre kolonne svarer til noget i skabelonerne ovenfor. Tekst, Billede, Knap, Skillelinje og Mellemrum til strukturen. Produkt til en butiksrække. HTML til alt det, editoren ikke modellerer — og det er sådan, diagrammet i The Brief er bygget:

Brevo

Et diagram uden et eneste billede

Brevos e-maileditor med skabelonen The Brief på lærredet, søjlediagrammet valgt og højre panel, der viser, at det er bygget af tabelceller uden billede
Et diagram eksporteret som PNG mister sine tal til billedblokering, til mørk tilstands ombytning og til enhver skærmlæser. Fire tabelrækker med en farvet celle og en tekstetiket mister ingen af dem og vejer ingenting.

Typografien fungerer på samme måde. Vælg en tekstblok, og panelet giver dig skrifttypen, størrelsen, linjeafstanden og margenen — hvilket er hele det værktøj, The Letter har brug for:

Brevo

Et citat er en tekstblok med en streg i siden

Brevos e-maileditor med skabelonen The Letter på lærredet og citatet valgt: Georgia på 19px over 30px, kursiv, med en venstre streg på 3px
Ingen særlig komponent. En tekstblok, en venstre streg på 3 px i accentfarven og 20 px indvendig margen. I et godt nyhedsbrev er næsten alt, der ligner skræddersyet design, en standardblok med to ændrede egenskaber.

Og billeder har deres eget panel, hvor den alternative tekst står øverst og ikke nederst i en liste med indstillinger:

Brevo

Alternativ tekst er et felt, ikke en eftertanke

Brevos e-maileditor med The Digest på lærredet og en artikelminiature valgt, der viser dens alternative tekst, visningsstørrelse på 112px, kilde på 480px og vægt på 17 KB
Visningsstørrelse 112 px, kilde 480 px — netop det forhold på 2× holder miniaturen skarp på en retina-skærm. Den alternative tekst står først, fordi det er den del af billedet, de fleste abonnenter faktisk modtager.

For virksomheder, der bruger Tajo, kan de samme sektioner fyldes dynamisk: produktanbefalinger og personligt indhold styret af abonnenternes adfærd, gengivet i de blokke, du har lagt ud her, i stedet for udvalgt i hånden ved hver udsendelse.

Grundlæggende om nyhedsbrevsdesign

Design tjener indholdet

Det vigtigste princip inden for nyhedsbrevsdesign: design skal gøre indhold lettere at konsumere, aldrig sværere. Alle designbeslutninger bør besvare spørgsmålet: hjælper dette min læser med at finde og absorbere den information, de kom efter?

Tegn på godt nyhedsbrevsdesign:

  • Læserne kan skimme hele nyhedsbrevet på 10-15 sekunder
  • Det vigtigste indhold er øjeblikkeligt synligt
  • Hvert afsnit har en tydelig begyndelse og afslutning
  • Call-to-action’en skiller sig ud uden at være påtrængende
  • Nyhedsbrevet ser intentionelt ud, ikke tilfældigt

Tegn på dårligt nyhedsbrevsdesign:

  • Læserne kan ikke hurtigt finde hovedindholdet
  • Flere designstile konkurrerer om opmærksomhed
  • Teksten er svær at læse på enhver enhed
  • Layoutet bryder sammen på mobilskærme
  • Tætte tekstblokke uden visuelle pauser

Princippet om visuelt hierarki

Visuelt hierarki styrer den rækkefølge, læserne behandler information i. Etablér hierarki i nyhedsbreve via:

HierarkiniveauElementDesignbehandling
PrimærHovedoverskriftStørste skrifttype, fed, øverste position
SekundærSektionsoverskrifterMellemstor skrifttype, kontrastfarve
TertiærBrødtekstStandardskrifttype, læsbar størrelse
UnderstøttendeMetadata (datoer, forfattere)Mindre skrifttype, lysere farve
HandlingCTA-knapper/linksKontrastfarve, knapstil

Layoutstrategier

Enkeltkolonne-layout

Enkeltkolonne-layoutet er guldstandarden for nyhedsbreve og den anbefalede tilgang for de fleste udgivere.

Fordele:

  • Vises perfekt på alle enheder og skærmstørrelser
  • Skaber et naturligt læseflow fra top til bund
  • Forenkler designbeslutninger
  • Reducerer renderingsproblemer på tværs af e-mailklienter
  • Matcher, hvordan folk læser på mobil (lodret scrolling)

Bedst til: Tekstfokuserede nyhedsbreve, personlige nyhedsbreve, uddannelsesindhold, dybdegående analyser

Struktur:

  1. Header (logo, nummerering, dato)
  2. Introduktion eller personlig note
  3. Hovedndholdsektion
  4. Sekundære indholdssektioner (adskilt af separatorer)
  5. CTA eller engagementsopfordring
  6. Sidefod

Kortbaseret layout

Organiser indhold i distinkte visuelle kort, hvert med sin egen ramme, baggrund eller skygge.

Fordele:

  • Tydelig indholdsseparation
  • Fungerer godt til kurateret indhold og linkroundup
  • Hvert kort kan have sit eget billede og CTA
  • Visuelt engagerende uden at være overvældende

Bedst til: Indholdsoversigter, kuraterede links, produktpræsentationer, nyhedsbreve med mange emner

Designtips til kort:

  • Brug konsistente kortdimensioner og -afstand
  • Maks. 2 kort pr. række (stables til 1 på mobil)
  • Inkludér en diskret ramme eller baggrundsfarve for at definere kortene
  • Oprethold konsistent padding inden i hvert kort

Hybrid-layout

Kombiner en primær indholdskolonne med en smalere sidebjælke til supplerende indhold.

Fordele:

  • Passer mere indhold uden at øge e-maillængden
  • Fungerer til nyhedsbreve med både primært og sekundært indhold
  • Velkendt format fra traditionelle publikationer

Begrænsninger:

  • Skal kollapse til enkeltkolonne på mobil
  • Mere komplekst at bygge og vedligeholde
  • Kan virke rodet, hvis det ikke er velorganiseret

Bedst til: Virksomhedsnyhedsbreve, medie-lignende publikationer, indholdsintensive formater

Typografi til nyhedsbreve

Typografi er det mest indflydelsesrige designelement i enhver teksttung e-mail. Få skrifttyper rigtigt, og alt andet falder på plads.

Skrifttypevalg

E-mailklienter har begrænset skrifttypeunderstøttelse. Brug websikre skrifttyper som dit primære valg:

SkrifttypeStilBedst til
ArialRen, moderne sans-serifGenerelt formål, erhverv
HelveticaRaffineret sans-serifPremium-brands
GeorgiaElegant serifRedaktionelt, langt format
Times New RomanKlassisk serifTraditionelt, formelt
VerdanaBred, læsbar sans-serifLille tekst, mobil
Trebuchet MSModerne sans-serifKreativt, afslappet

Webskrifttyper: Du kan specificere webskrifttyper (som Open Sans eller Lato) med websikre alternativskrifttyper. De vises i Apple Mail, iOS Mail og nogle Android-klienter, men falder tilbage til det sikre alternativ i Outlook og ældre Gmail.

Skriftstørrelser

ElementMinimumsstørrelseAnbefalet størrelse
Brødtekst14px16px
Sektionsoverskrifter20px22-24px
Hovedoverskrift24px28-32px
Billedtekster/metadata12px13-14px
CTA-knaptekst14px16px
Preheadertekst12px14px

Linjeafstand og læsbarhed

  • Linjehøjde: 1,4-1,6 for brødtekst (24-26px ved 16px skriftstørrelse)
  • Afsnitstørrelse: 16-24px mellem afsnit
  • Linjelængde: 50-75 tegn pr. linje (forebygger øjentræthed)
  • Bogstavafstand: Standard for brødtekst, let øget for lille tekst

Tekstformatering

  • Fed: Brug til nøglefraser og fremhævning, ikke hele afsnit
  • Kursiv: Brug sparsomt til citater, titler eller diskret fremhævning
  • Understreget: Reservér udelukkende til links (understregede ikke-linktekster forvirrer læserne)
  • VERSALER: Brug kun til korte etiketter eller knapper, aldrig til brødtekst
  • Farve: Brug én accentfarve til links, hold brødteksten mørkegrå (#333) eller næsten sort

Farvestrategi

Opbygning af en farvepalette til nyhedsbreve

Begræns dit nyhedsbrev til 3-4 farver:

FarverolleBrugEksempel
PrimærOverskrifter, CTA-knapper, accenterBrand-blå
TekstBrødtekst, underoverskrifterMørkegrå (#333333)
BaggrundE-mailkropHvid (#FFFFFF) eller lysgrå (#F5F5F5)
AccentLinks, fremhævninger, sekundære CTAerBrand-sekundærfarve

Farvetilgængelighed

  • Oprethold et minimum kontrastratio på 4,5:1 mellem tekst og baggrund
  • Basér ikke udelukkende information på farve
  • Test din palette med farveblindhedssimulatorer
  • Sørg for, at links kan skelnes fra regulær tekst (brug understregning, ikke kun farve)

Overvejelser om mørk tilstand

Mange e-mailklienter bruger nu som standard mørk tilstand. Design med mørk tilstand i tankerne:

  • Undgå ren hvid (#FFFFFF) baggrund – brug let off-white (#FAFAFA)
  • Brug ikke transparente PNG’er med mørke elementer (de forsvinder i mørk tilstand)
  • Test logoer på både lys og mørk baggrund
  • Tilføj meta-tags for understøttelse af mørk tilstands farveskema
  • Brug rammer eller konturer på mørke billeder, så de forbliver synlige

Billedbrug i nyhedsbreve

Hvornår du bør bruge billeder

Billeder bør tilføje værdi, som tekst alene ikke kan levere:

  • Produktfotografering: Vis produkter i kontekst
  • Datavisualisering: Diagrammer, grafer og infografik
  • Skærmbilleder: Demonstrér værktøjer, funktioner eller processer
  • Profilbilleder: Opbyg personlig forbindelse med forfattere eller teammedlemmer
  • Illustrationer: Understøt brandpersonlighed og tone

Billedoptimering

SpecifikationAnbefaling
FormatJPEG til fotos, PNG til grafik
Bredde600px standard, 1.200px til retina
FilstørrelseUnder 200 KB pr. billede
Samlet e-mailstørrelseUnder 100 KB ekskl. billeder
Alt-tekstBeskrivende, 125 tegn eller derunder
Billedformat2:1 til hero-billeder, 1:1 til miniaturebilleder

Tekst-til-billede-ratio

Oprethold en sund tekst-til-billede-ratio for at undgå spamfiltre og sikre læsbarhed:

  • 60:40 tekst til billede er det anbefalede ratio
  • E-mails der primært består af billeder har højere spamrater
  • Inkludér altid tekstversioner af nøgleinformation – ikke kun i billeder
  • Design til klienter med blokerede billeder: dit nyhedsbrev bør give mening uden billeder

Mobilfirst-nyhedsbrevsdesign

Krav til mobildesign

Med over 60 % af nyhedsbrevsåbningerne på mobilenheder er mobildesign ikke valgfrit.

Mobillayoutregler:

  • Maksimal indholdsbredde: 600px (vises godt på alle enheder)
  • Minimalt tryk-mål: 44×44 pixels til knapper og links
  • Minimale skriftstørrelse: 16px for brødtekst på mobil
  • Enkeltkolonne-layout der stables naturligt
  • Fuldbredde-CTA-knapper på mobil
  • Tilstrækkelig afstand mellem klikbare elementer (forebyg utilsigtede tryk)

Responsive designteknikker

TeknikDesktopMobil
FlerkolonnesektionerSide om sideStables lodret
BillederStørrelsessat inden for indholdFuld bredde, skaleret
NavigationslinksVandretStablet eller skjult
CTA-knapperIndlejret eller højrejusteretFuld bredde
SkriftstørrelserStandardLet større
Padding20-40px15-20px

Test af mobilrendering

Test dit nyhedsbrevsdesign på:

  • iPhone (Safari/Mail)
  • Android (Gmail-app)
  • iPad
  • Gmail (web)
  • Outlook (desktop og web)
  • Apple Mail (desktop)

Brug værktøjer som Litmus eller Email on Acid til automatiserede renderingstest på tværs af 90+ e-mailklienter.

Design af nyhedsbrevssektioner

Headeren

Din header etablerer identitet og sætter forventninger:

  • Logo: Korrekt størrelse (ikke for stort, typisk 150-200px bredt)
  • Udgivelsesidentifikator: Udgavnummer, dato eller udgavens navn
  • Se online-link: Til abonnenter med renderingsproblemer
  • Hold den kompakt: Headeren bør ikke skubbe indhold neden for fold

Sektionsseparatorer

Tydelige separatorer mellem indholdssektioner hjælper læserne med at skimme:

  • Vandret linje: Simple, tynde linjer (1-2px) i en neutral farve
  • Baggrundsfarveskift: Alternér mellem hvide og lysegrå sektioner
  • Ekstra afstand: 30-40px padding mellem sektioner
  • Sektionsoverskrifter: Fed, større tekst med konsistent stil

Sidefoden

En veldesignet sidefod afslutter oplevelsen:

  • Afmeldingslink (lovpligtigt, gør det let at finde)
  • Links til sociale medier
  • Fysisk postadresse (krav fra CAN-SPAM)
  • Se i browser-link
  • Videresend til en ven-mulighed
  • Kort brand-tagline eller missionsudsagn

Nyhedsbrevsdesignværktøjer

Platformeditorer

De fleste nyhedsbrevsplatforme inkluderer indbyggede designeditorer:

PlatformEditortypeDesignfleksibilitetSkabelonbibliotek
BrevoTræk-og-slipHøj40+ skabeloner
MailchimpTræk-og-slipHøj100+ skabeloner
ConvertKitForenklet editorModeratBegrænset
SubstackTekstfokuseretLavMinimal

Brevos træk-og-slip-editor gør professionelt nyhedsbrevsdesign tilgængeligt uden kendskab til kodning. For virksomheder der bruger Tajo, kan du dynamisk udfylde nyhedsbrevssektioner med produktanbefalinger og personaliseret indhold baseret på abonnentadfærd.

Designressourcer

  • Canva: Opret nyhedsbrevs-header-billeder, sociale grafik og illustrationer
  • Unsplash/Pexels: Gratis stockfotografering
  • Really Good Emails: Inspirationsgalleri med veldesignede e-mails
  • MJML: Open source e-mailframework til tilpassede designs
  • Figma: Design tilpassede nyhedsbrevsskabeloner med e-mailplugin-eksport

Tjekliste for nyhedsbrevsdesign

Inden du sender et nyhedsbrev, kontrollér:

Layout:

  • Enkeltkolonne-layout eller korrekt responsivt flerkolonne
  • Indholdsbredde er 600px eller mindre
  • Tydeligt visuelt hierarki fra header til sidefod
  • Sektioner er tydeligt adskilt

Typografi:

  • Brødtekst er 16px eller større
  • Linjehøjde er 1,4-1,6
  • Overskrifter skaber tydelig indholdsstruktur
  • Linktekst er beskrivende (ikke “klik her”)

Billeder:

  • Alle billeder har alt-tekst
  • Billeder er optimeret til filstørrelse
  • Nyhedsbrevet er læsbart uden billeder
  • Retina-billeder er tilvejebragt til high-DPI-skærme

Mobil:

  • Testet på iPhone og Android
  • CTA-knapper er fuldbredde på mobil
  • Skriftstørrelser er læsbare på små skærme
  • Tryk-mål er minimum 44px

Tilgængelighed:

  • Farvekontrast opfylder 4,5:1-ratio
  • Indhold er struktureret med korrekte overskrifter
  • Ingen information formidles udelukkende via farve
  • Kompatibel med skærmlæsere

Brand:

  • Farver matcher brandpaletten
  • Logo er korrekt størrelse og placering
  • Tone og stemme er konsistente med brand
  • Sidefod inkluderer alle påkrævede juridiske elementer

Videreudvikling af dit nyhedsbrevsdesign

Nyhedsbrevsdesign er ikke et engangsprojekt. Videreudvikl dit design baseret på præstationsdata og feedback fra abonnenter:

  • Spor scrolldybde: Kommer læserne til bunden af dit nyhedsbrev?
  • Overvåg klikoversigt: Hvilke sektioner får flest klik? Promovér lignende indhold.
  • Spørg abonnenter: Stil spørgsmål om designpræferencer en gang om året
  • A/B-test layouts: Sammenlign kort- vs. lineære layouts, billedplacering og CTA-stile
  • Gennemgå konkurrenter: Studer hvad der virker i succesfulde nyhedsbreve i dit felt

De bedste nyhedsbrevsdesigns er usynlige. Abonnenter lægger ikke mærke til designet – de lægger mærke til indholdet. Det betyder, at designet gør sit job perfekt: fjerner friktion, leder opmærksomheden og gør læseoplevelsen ubesværet.

Start simpelt, forbliv konsistent og forfin baseret på data. Dit nyhedsbrevsdesign bør udvikle sig med dit publikum, ikke foran det.

Ofte Stillede Spørgsmål

Hvad kendetegner et godt nyhedsbrevsdesign?
Et godt nyhedsbrevsdesign bruger et tydeligt visuelt hierarki, ensartet branding, læsbar typografi (mindst 16px), enkeltkolonnelayout for mobilvenlighed og strategisk brug af luft. Det leder læserens øje fra overskrift til indhold til call-to-action.
Skal nyhedsbreve være tekst- eller billedtunge?
Den ideelle balance afhænger af din indholdstype, men de fleste nyhedsbreve præsterer bedst med et forhold på 60/40 mellem tekst og billeder. Tekstfokuserede designs sikrer læsbarhed, når billeder blokeres, og forbedrer leveringen. Brug billeder til at understøtte indholdet, ikke til at erstatte det.
Hvad er det bedste nyhedsbrevslayout?
Et enkeltkolonnelayout er mest effektivt for nyhedsbreve, fordi det fungerer på alle enheder, er let at skimme og leder opmærksomheden i et lineært flow. Brug tydelige sektionsskillere og ensartet formatering til at organisere indholdet i den enkelte kolonne.
Del denne artikel:
Tilbage til alle artikler

Bed om tidlig adgang til Tajo

Indtast dit fornavn og en e-mailadresse eller et telefonnummer. Vi kontakter dig med oplysninger om adgang til Tajo.

automatisk genkendelse
Få Brevo