Nyhetsbrev

Design av nyhetsbrev: Komplett guide till e-post som konverterar

Komplett guide till nyhetsbrevsdesign. Lär dig strategier, best practices och hur du använder Brevo och Tajo för att uppnå resultat.

Set Noa
Set Noa
Uppdaterad
0 besök · 7 d
newsletter design
Design av nyhetsbrev?

Komplett guide till nyhetsbrevsdesign. Lär dig strategier, best practices och hur du använder Brevo och Tajo för att uppnå resultat.

Läs mer

Nyhetsbrevsdesign är den osynliga arkitektur som avgör om dina prenumeranter läser innehållet eller raderar det direkt. Ett välutformat nyhetsbrev leder ögat naturligt från rubrik till innehåll till handling. Ett dåligt utformat skapar visuellt kaos som driver bort läsare, hur värdefullt innehållet än är.

Den goda nyheten: effektiv nyhetsbrevsdesign kräver ingen professionell designer. Det handlar om att förstå några grundprinciper och tillämpa dem konsekvent. Den här guiden går igenom de layoutstrategier, typografiregler och visuella tekniker som gör nyhetsbrev engagerande och lättlästa.

Fyra mallar i drift

Allt under det här avsnittet är ett påstående om layout, och påståenden om layout är billiga. Så här är fyra nyhetsbrev, i drift.

Var och en sitter i en ram med verklig bredd och visar sin egen HTML. Dra bredden till 375 px och se vilka kolumner som staplar och vilka som vägrar. Panelerna följer det tema du läser den här sidan i: i mörkt läge ser du varje malls verkliga mörka block, inte en approximation. Källkoden ligger under varje panel.

Tajo-mallar

Fyra layouter i drift

Varje panel nedan är mallens riktiga e-post-HTML, i en ram med verklig bredd. Dra ned bredden till 375 px och se kolumnerna lägga sig under varandra.

Följer ditt tema — byt det i sidhuvudet för att se det andra.

Läs HTML för The Letter 6 kB, utan byggsteg 
<!DOCTYPE html>
<html lang="se" 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;">Citatet du sparar i din anteckningsapp arbetar hårdare än din innehållskalender.</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-huvud: koncentriska blå bågar korsade av ett diagonalt band" 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 är produkten</h1>
        <p class="d-ink" style="margin:0 0 20px 0;font-size:18px;line-height:30px;color:#242424;">För tre veckor sedan letade jag efter en text jag skrev 2019 och hittade den inte. Inte på webbplatsen, inte i exporten, inte i plattformens egen sökning. Tolvhundra nummer, och det enda register som fungerade var mitt minne.</p>
        <p class="d-ink" style="margin:0 0 20px 0;font-size:18px;line-height:30px;color:#242424;">Det är den delen ingen berättar om sex år med nyhetsbrev. Att skicka är lätt. Att bevara är det inte.</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;">Allt du publicerar är en insättning. Uttaget bygger nästan 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å den här veckan byggde jag om de gamla numren till ett riktigt arkiv, med etiketter, fritextsökning och permanenta adresser. Det tog nio dagar. Antalet prenumeranter rörde sig inte. Tiden på webbplatsen tredubblades.</p>
        <p class="d-ink" style="margin:0 0 28px 0;font-size:18px;line-height:30px;color:#242424;">Allt står nedan, även de delar som inte fungerade.</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 hela numret &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;">Skrivet för hand varje torsdag. Svara, så läser jag 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;">Avprenumerera</a> &middot; <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Visa i webbläsare</a></p>
      </td></tr>

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

De är våra. Vi formgav dem för den här artikeln, inklusive grafiken, som skapas av ett deterministiskt geometriskript som bor i samma kodförråd som den här sidan — inga bildbanksfoton och inga skärmbilder av någon annans mallgalleri. Den skillnaden väger tyngre än det låter: en designguide för e-post som illustrerar sig själv med andras mejl ber dig tro den på dess ord.

Fyra mallar är inte fyra stilar. Det är fyra svar på fyra olika uppgifter:

  • The Letter är för en skribent vars hela värde är texten. En bild, marginaler på 88 px, en textlänk i stället för en knapp. En knapp i ett personligt brev läses som en annons.
  • The Digest är för en översikt som skummas. Numrerade rader, en lästid före varje rubrik och en enda uppmaning längst ned i stället för sex.
  • The Storefront är för ett släpp. Det är den enda layouten där det är rätt att börja med en bild, och den är ändå byggd så att bilden får svikta.
  • The Brief är för siffror. Tre nyckeltal över allt annat och ett stapeldiagram gjort av tabellceller i stället för en PNG.

Det de delar är den del som är värd att kopiera. En kolumn på 600 px. Minst 16 px brödtext. En accentfärg och bläck till allt annat. Varje bild bär alternativtext, och varje layout är begriplig även med bilderna blockerade. Ett deklarerat färgschema plus ett uttryckligt mörkt block, för standarden i en mörk klient är att ditt mejl vänds av en algoritm som aldrig har sett ditt varumärke.

Vi hade fel om en av dem i första försöket, och just den är värd att nämna. The Digest staplade från början sina artikelrader på mobil — precis vad varje guide till responsiv e-post rekommenderar. Staplingen förvandlade tre miniatyrer på 112 px till tre dekorativa bilder i full bredd och 335 px höjd, och en översikt med sex ämnen blev en rullning. Den raden är nu den enda tvåkolumnslayouten i uppsättningen som inte staplar. Regler om stapling handlar om innehållskolumner. En miniatyr är inte en innehållskolumn.

Så bygger du en av dem i Brevo

Ingen av de fyra mallarna ovan kräver en utvecklare för att sättas ihop. Varje skärm nedan är samma mall på Brevos dra-och-släpp-arbetsyta, med ett block markerat.

Vi börjar med huvudknappen, eftersom det är blocket med flest inställningar:

Brevo

The Storefront på arbetsytan

Brevos dra-och-släpp-e-postredigerare med mallen The Storefront på arbetsytan, huvudknappen markerad och dess inställningar för etikett, länk, färg, hörnradie och marginal i högerpanelen
Vänster kolumn: blocken du drar in. Höger kolumn: allt om det markerade blocket. På arbetsytan finns ett mejl på 600 px inuti en klient på 680 px — därför visas inte mobillayouten: vid exakt 600 px skulle mallens egen brytpunkt slå till och du skulle redigera telefonversionen medan reglaget säger Dator.

Varje block i vänsterkolumnen motsvarar något i mallarna ovan. Text, Bild, Knapp, Avdelare och Mellanrum för strukturen. Produkt för en butiksrad. HTML för allt som redigeraren inte modellerar — och så är diagrammet i The Brief byggt:

Brevo

Ett diagram utan en enda bild

Brevos e-postredigerare med mallen The Brief på arbetsytan, stapeldiagrammet markerat och högerpanelen som visar att det är byggt av tabellceller utan bild
Ett diagram som exporterats som PNG förlorar sina siffror till bildblockering, till mörkt läges omvändning och till varje skärmläsare. Fyra tabellrader med en färgad cell och en textetikett förlorar inga av dem och väger ingenting.

Typografin fungerar likadant. Markera ett textblock och panelen ger dig typsnittet, storleken, radavståndet och marginalen — vilket är hela verktygslådan The Letter behöver:

Brevo

Ett citat är ett textblock med en linje i kanten

Brevos e-postredigerare med mallen The Letter på arbetsytan och citatet markerat: Georgia på 19px över 30px, kursiv, med en vänsterlinje på 3px
Ingen särskild komponent. Ett textblock, en vänsterlinje på 3 px i accentfärgen och 20 px inre marginal. I ett bra nyhetsbrev är nästan allt som ser ut som skräddarsydd design ett standardblock med två ändrade egenskaper.

Och bilder har sin egen panel, där alternativtexten står överst och inte längst ned i en lista med inställningar:

Brevo

Alternativtext är ett fält, inte en eftertanke

Brevos e-postredigerare med The Digest på arbetsytan och en artikelminiatyr markerad, som visar dess alternativtext, visningsstorlek på 112px, källa på 480px och vikt på 17 kB
Visningsstorlek 112 px, källa 480 px — just det förhållandet på 2× håller miniatyren skarp på en retinaskärm. Alternativtexten kommer först eftersom det är den del av bilden som de flesta prenumeranter faktiskt får.

För företag som använder Tajo kan samma sektioner fyllas dynamiskt: produktrekommendationer och personligt innehåll styrt av prenumeranternas beteende, renderat i de block du har lagt ut här i stället för handplockat vid varje utskick.

Grunderna i nyhetsbrevsdesign

Designen tjänar innehållet

Den viktigaste principen i nyhetsbrevsdesign: designen ska göra innehållet enklare att ta till sig, aldrig svårare. Varje designbeslut bör besvara frågan: hjälper det här min läsare att hitta och förstå informationen hen kom för?

Tecken på bra nyhetsbrevsdesign:

  • Läsaren kan skumma hela nyhetsbrevet på 10-15 sekunder
  • Det viktigaste innehållet syns omedelbart
  • Varje sektion har en tydlig början och ett tydligt slut
  • Uppmaningen till handling sticker ut utan att vara påträngande
  • Nyhetsbrevet ser genomtänkt ut, inte tillfälligt

Tecken på bristfällig nyhetsbrevsdesign:

  • Läsaren hittar inte huvudinnehållet snabbt
  • Flera designstilar konkurrerar om uppmärksamheten
  • Texten är svår att läsa på vilken enhet som helst
  • Layouten går sönder på mobilskärmar
  • Täta textblock utan visuella avbrott

Principen om visuell hierarki

Visuell hierarki styr i vilken ordning läsaren tar in informationen. I nyhetsbrev skapar du hierarki genom:

HierarkinivåElementDesignbehandling
PrimärHuvudrubrikStörsta typsnittet, fet, högst upp
SekundärSektionsrubrikerMedelstort typsnitt, kontrasterande färg
TertiärBrödtextStandardtypsnitt, läsbar storlek
StödjandeMetadata (datum, författare)Mindre typsnitt, ljusare färg
HandlingCTA-knappar/länkarKontrasterande färg, knappstil

Layoutstrategier

Enspaltslayout

Enspaltslayouten är guldstandarden för nyhetsbrev och det rekommenderade upplägget för de flesta avsändare.

Fördelar:

  • Renderas perfekt på alla enheter och skärmstorlekar
  • Skapar ett naturligt läsflöde uppifrån och ner
  • Förenklar designbesluten
  • Minskar renderingsproblem mellan e-postklienter
  • Matchar hur folk läser på mobilen (vertikalt scrollande)

Bäst för: Textfokuserade nyhetsbrev, personliga nyhetsbrev, utbildningsinnehåll, längre analyser

Struktur:

  1. Sidhuvud (logotyp, nummer, datum)
  2. Inledning eller personligt budskap
  3. Huvudsektion
  4. Sekundära innehållssektioner (avskilda med skiljelinjer)
  5. CTA eller engagerande uppmaning
  6. Sidfot

Kortbaserad layout

Organisera innehållet i tydliga visuella kort, vart och ett med egen ram, bakgrund eller skugga.

Fördelar:

  • Tydlig avgränsning mellan innehåll
  • Fungerar väl för kuraterat innehåll och länksamlingar
  • Varje kort kan ha egen bild och CTA
  • Visuellt engagerande utan att bli överväldigande

Bäst för: Innehållssammanställningar, kuraterade länkar, produktpresentationer, nyhetsbrev med flera teman

Designtips för kort:

  • Använd enhetliga kortmått och avstånd
  • Max 2 kort per rad (staplas till 1 på mobil)
  • Lägg till en diskret ram eller bakgrundsfärg som definierar korten
  • Behåll konsekvent inre marginal i varje kort

Hybridlayout

Kombinera en huvudkolumn för innehåll med en smalare sidokolumn för kompletterande material.

Fördelar:

  • Får plats med mer innehåll utan att förlänga e-postmeddelandet
  • Fungerar för nyhetsbrev med både primärt och sekundärt innehåll
  • Bekant format från traditionella publikationer

Begränsningar:

  • Måste fällas ihop till en enda kolumn på mobil
  • Mer komplex att bygga och underhålla
  • Kan kännas rörig om strukturen brister

Bäst för: Företagsnyhetsbrev, mediestilade publikationer, innehållstunga format

Typografi för nyhetsbrev

Typografin är det mest avgörande designelementet i alla texttunga e-postmeddelanden. Får du fonten rätt faller resten på plats.

Val av typsnitt

E-postklienter har begränsat typsnittsstöd. Använd webbsäkra typsnitt som förstaval:

TypsnittStilBäst för
ArialRen, modern sans-serifAllmänt bruk, business
HelveticaFörfinad sans-serifPremiumvarumärken
GeorgiaElegant serifRedaktionellt, längre texter
Times New RomanKlassisk serifTraditionellt, formellt
VerdanaBred, läsbar sans-serifLiten text, mobil
Trebuchet MSModern sans-serifKreativt, ledigt

Webbtypsnitt: Du kan ange webbtypsnitt (som Open Sans eller Lato) med webbsäkra reservalternativ. De renderas i Apple Mail, iOS Mail och vissa Android-klienter, men faller tillbaka till det säkra alternativet i Outlook och äldre Gmail.

Typsnittsstorlek

ElementMinsta storlekRekommenderad storlek
Brödtext14px16px
Sektionsrubriker20px22-24px
Huvudrubrik24px28-32px
Bildtexter/metadata12px13-14px
CTA-knapptext14px16px
Preheader-text12px14px

Radavstånd och läsbarhet

  • Radhöjd: 1,4-1,6 för brödtext (24-26px vid 16px typsnitt)
  • Stycksavstånd: 16-24px mellan stycken
  • Radlängd: 50-75 tecken per rad (motverkar ögontrötthet)
  • Teckenavstånd: Standard för brödtext, något ökat för liten text

Textformatering

  • Fet: Använd för nyckelfraser och betoning, inte för hela stycken
  • Kursiv: Använd sparsamt för citat, titlar eller subtil betoning
  • Understrykning: Reservera enbart för länkar (understruken icke-länktext förvirrar läsaren)
  • VERSALER: Använd endast för korta etiketter eller knappar, aldrig för brödtext
  • Färg: Använd en accentfärg för länkar och håll brödtexten mörkgrå (#333) eller nästan svart

Färgstrategi

Bygg en färgpalett för nyhetsbrev

Begränsa nyhetsbrevet till 3-4 färger:

FärgrollAnvändningExempel
PrimärRubriker, CTA-knappar, accenterVarumärkesblå
TextBrödtext, underrubrikerMörkgrå (#333333)
BakgrundE-postbakgrundVit (#FFFFFF) eller ljusgrå (#F5F5F5)
AccentLänkar, höjdpunkter, sekundära CTA:erSekundär varumärkesfärg

Färgtillgänglighet

  • Håll minst 4,5:1 i kontrast mellan text och bakgrund
  • Förlita dig inte enbart på färg för att förmedla information
  • Testa paletten med simulatorer för färgblindhet
  • Se till att länkar går att skilja från övrig text (använd understrykning, inte bara färg)

Att tänka på vid mörkt läge

Många e-postklienter använder nu mörkt läge som standard. Designa med mörkt läge i åtanke:

  • Undvik helt vita (#FFFFFF) bakgrunder, använd hellre en svagt off-white nyans (#FAFAFA)
  • Använd inte transparenta PNG-filer med mörka element (de försvinner i mörkt läge)
  • Testa logotyper mot både ljus och mörk bakgrund
  • Lägg till metataggar för stöd av färgschema i mörkt läge
  • Lägg ramar eller konturer på mörka bilder så att de förblir synliga

Bildanvändning i nyhetsbrev

När du ska använda bilder

Bilder ska tillföra något som text ensam inte kan ge:

  • Produktfoto: Visa produkter i ett sammanhang
  • Datavisualisering: Diagram, grafer och infografik
  • Skärmbilder: Demonstrera verktyg, funktioner eller processer
  • Porträtt: Bygg personlig koppling till författare eller team
  • Illustrationer: Stärk varumärkets personlighet och tonläge

Bildoptimering

SpecifikationRekommendation
FormatJPEG för foton, PNG för grafik
Bredd600px standard, 1200px för retina
FilstorlekUnder 200KB per bild
Total e-poststorlekUnder 100KB exklusive bilder
Alt-textBeskrivande, max 125 tecken
Bildförhållande2:1 för hjältebilder, 1:1 för miniatyrer

Förhållandet mellan bild och text

Behåll en sund balans mellan text och bild för att undvika skräppostfilter och säkerställa läsbarheten:

  • 60:40 text mot bild är det rekommenderade förhållandet
  • E-post som främst består av bilder (rena bildmejl) får högre skräppostfrekvens
  • Inkludera alltid textversioner av viktig information, inte bara i bilder
  • Designa för bildblockerade klienter: nyhetsbrevet ska vara begripligt även utan bilder

Mobilförst-design för nyhetsbrev

Krav på mobil design

Med över 60 % av nyhetsbreven öppnade på mobila enheter är mobil design inte valfritt.

Layoutregler för mobil:

  • Maximal innehållsbredd: 600px (visas bra på alla enheter)
  • Minsta klickyta: 44x44 pixlar för knappar och länkar
  • Minsta typsnittsstorlek: 16px för brödtext på mobil
  • Enspaltslayout som staplas naturligt
  • CTA-knappar i full bredd på mobil
  • Tillräckligt utrymme mellan klickbara element (förhindrar oavsiktliga tryck)

Tekniker för responsiv design

TeknikDesktopMobil
FlerspaltssektionerSida vid sidaStaplade vertikalt
BilderAnpassade i innehållFull bredd, skalade
NavigationslänkarHorisontellaStaplade eller dolda
CTA-knapparInline eller högerjusteradeFull bredd
TypsnittsstorlekStandardNågot större
Padding20-40px15-20px

Testa mobil rendering

Testa nyhetsbrevsdesignen på:

  • iPhone (Safari/Mail)
  • Android (Gmail-appen)
  • iPad
  • Gmail (webb)
  • Outlook (desktop och webb)
  • Apple Mail (desktop)

Använd verktyg som Litmus eller Email on Acid för automatiserade renderingstester över 90+ e-postklienter.

Så designar du nyhetsbrevets sektioner

Sidhuvudet

Sidhuvudet etablerar identitet och sätter förväntningarna:

  • Logotyp: Lagom dimensionerad (inte för stor, vanligtvis 150-200px bred)
  • Utgåvomarkering: Nummer, datum eller editionsnamn
  • Visa online-länk: För prenumeranter som har renderingsproblem
  • Håll det kompakt: Sidhuvudet ska inte tränga ner innehållet under fold-linjen

Sektionsavdelare

Tydliga avdelare mellan innehållssektioner gör det lättare att skumma:

  • Horisontella linjer: Enkla, tunna linjer (1-2px) i en neutral färg
  • Bakgrundsfärgsskifte: Växla mellan vita och ljusgrå sektioner
  • Extra utrymme: 30-40px padding mellan sektioner
  • Sektionsrubriker: Fet, större text med konsekvent stil

Sidfoten

En genomtänkt sidfot fullbordar upplevelsen:

  • Avregistreringslänk (lagstadgad, gör den lätt att hitta)
  • Länkar till sociala medier
  • Fysisk postadress (CAN-SPAM-krav)
  • Visa-i-webbläsaren-länk
  • Skicka till en vän-funktion
  • Kort varumärkesslogan eller mission

Verktyg för nyhetsbrevsdesign

Plattformsredigerare

De flesta nyhetsbrevsplattformar har inbyggda designredigerare:

PlattformTyp av redigerareDesignflexibilitetMallbibliotek
BrevoDrag-and-dropHög40+ mallar
MailchimpDrag-and-dropHög100+ mallar
ConvertKitFörenklad redigerareMedelBegränsat
SubstackTextfokuseradLågMinimalt

Brevos drag-and-drop-redigerare gör professionell nyhetsbrevsdesign tillgänglig utan kodkunskaper. För företag som använder Tajo kan du dynamiskt fylla nyhetsbrevssektioner med produktrekommendationer och personligt anpassat innehåll utifrån prenumerantens beteende.

Designresurser

  • Canva: Skapa headerbilder, social grafik och illustrationer för nyhetsbrev
  • Unsplash/Pexels: Gratis stockfotografi
  • Really Good Emails: Inspirationsgalleri med välutformade mejl
  • MJML: Open source-ramverk för anpassade e-postdesigner
  • Figma: Designa egna nyhetsbrevsmallar med exportplugin för e-post

Checklista för nyhetsbrevsdesign

Innan du skickar något nyhetsbrev, kontrollera:

Layout:

  • Enspaltslayout eller korrekt responsiv flerspaltslayout
  • Innehållsbredden är 600px eller mindre
  • Tydlig visuell hierarki från sidhuvud till sidfot
  • Sektionerna är tydligt avgränsade

Typografi:

  • Brödtexten är 16px eller större
  • Radhöjden är 1,4-1,6
  • Rubriker skapar tydlig innehållsstruktur
  • Länktexten är beskrivande (inte “klicka här”)

Bilder:

  • Alla bilder har alt-text
  • Bilderna är optimerade för filstorlek
  • Nyhetsbrevet är läsbart utan bilder
  • Retinabilder finns för skärmar med hög DPI

Mobil:

  • Testat på iPhone och Android
  • CTA-knappar i full bredd på mobil
  • Typsnittsstorlek är läsbar på små skärmar
  • Klickytor är minst 44px

Tillgänglighet:

  • Färgkontrasten uppfyller 4,5:1
  • Innehållet är strukturerat med korrekta rubriker
  • Ingen information förmedlas enbart med färg
  • Fungerar med skärmläsare

Varumärke:

  • Färgerna stämmer med varumärkespaletten
  • Logotypen är rätt dimensionerad och placerad
  • Tonläge och röst stämmer med varumärket
  • Sidfoten innehåller alla nödvändiga juridiska element

Utveckla din nyhetsbrevsdesign

Nyhetsbrevsdesign är inget engångsprojekt. Utveckla designen utifrån prestandadata och prenumeranternas feedback:

  • Spåra scrolldjup: Når läsarna ända ner i nyhetsbrevet?
  • Övervaka klickkartor: Vilka sektioner får flest klick? Lyft fram liknande innehåll.
  • Fråga prenumeranterna: Be om feedback på designen årligen
  • A/B-testa layouter: Jämför kort- mot linjär layout, bildplacering och CTA-stilar
  • Studera konkurrenter: Lär av framgångsrika nyhetsbrev i din bransch

Den bästa nyhetsbrevsdesignen är osynlig. Prenumeranten lägger inte märke till designen, utan till innehållet. Det betyder att designen gör sitt jobb perfekt: den tar bort friktion, leder uppmärksamheten och gör läsupplevelsen smidig.

Börja enkelt, var konsekvent och förfina utifrån data. Din nyhetsbrevsdesign ska utvecklas tillsammans med din publik, inte före den.

Vanliga Frågor

Vad gör en bra nyhetsbrevsdesign?
En bra nyhetsbrevsdesign använder en tydlig visuell hierarki, konsekvent varumärkesprofil, läsbar typografi (minst 16px), enspaltslayout för mobilkompatibilitet och strategisk användning av tomrum. Den styr läsarens blick från rubrik till innehåll till uppmaning till handling.
Ska nyhetsbrev vara texttunga eller bildtunga?
Den ideala balansen beror på din innehållstyp, men de flesta nyhetsbrev presterar bäst med ett text-till-bild-förhållande på 60/40. Textfokuserade designer säkerställer läsbarhet när bilder blockeras och förbättrar leveransbarheten. Använd bilder för att stödja innehållet, inte ersätta det.
Vilken är den bästa nyhetsbrevslayouten?
En enspaltslayout är den mest effektiva för nyhetsbrev eftersom den fungerar på alla enheter, är lätt att skumma och styr uppmärksamheten i ett linjärt flöde. Använd tydliga sektionsavdelare och konsekvent formatering för att organisera innehållet inom den enda spalten.
Dela denna artikel:
Tillbaka till alla artiklar

Ansök om tidig åtkomst

Fyll i ditt förnamn och en e-postadress eller ett telefonnummer. Vi hör av oss med information om hur du får åtkomst till Tajo.

automatisk identifiering
Skaffa Brevo