---
title: "Design av nyhetsbrev: Komplett guide till e-post som konverterar"
description: "Komplett guide till nyhetsbrevsdesign."
url: https://tajo.io/se/blog/newsletter-design-guide/
markdown: https://tajo.io/se/blog/newsletter-design-guide.md
lang: sv-SE
author: "Set Noa"
author_url: https://tajo.io/se/set-noa/
published: 2026-03-26
updated: 2026-05-21
alternates: {en-US: /blog/newsletter-design-guide.md, bg-BG: /bg/blog/newsletter-design-guide.md, cs-CZ: /cz/blog/newsletter-design-guide.md, de-DE: /de/blog/newsletter-design-guide.md, da-DK: /dk/blog/newsletter-design-guide.md, es-ES: /es/blog/newsletter-design-guide.md, fr-FR: /fr/blog/newsletter-design-guide.md, el-GR: /gr/blog/newsletter-design-guide.md, hi-IN: /hi/blog/newsletter-design-guide.md, id-ID: /in/blog/newsletter-design-guide.md, hr-HR: /hr/blog/newsletter-design-guide.md, hu-HU: /hu/blog/newsletter-design-guide.md, it-IT: /it/blog/newsletter-design-guide.md, ja-JP: /jp/blog/newsletter-design-guide.md, ko-KR: /kr/blog/newsletter-design-guide.md, ar-SA: /ar/blog/newsletter-design-guide.md, nl-NL: /nl/blog/newsletter-design-guide.md, no-NO: /no/blog/newsletter-design-guide.md, pl-PL: /pl/blog/newsletter-design-guide.md, pt-BR: /pt/blog/newsletter-design-guide.md, ro-RO: /ro/blog/newsletter-design-guide.md, ru-RU: /ru/blog/newsletter-design-guide.md, zh-CN: /zh-cn/blog/newsletter-design-guide.md, sl-SI: /sl/blog/newsletter-design-guide.md, sr-Latn-RS: /sr/blog/newsletter-design-guide.md, th-TH: /th/blog/newsletter-design-guide.md, tr-TR: /tr/blog/newsletter-design-guide.md, ur-PK: /ur/blog/newsletter-design-guide.md, vi-VN: /vi/blog/newsletter-design-guide.md, sk-SK: /sk/blog/newsletter-design-guide.md}
---

[E-post](https://tajo.io/se/blog/?category=email)

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

Komplett guide till nyhetsbrevsdesign.

newsletter design

Vad gör en bra nyhetsbrevsdesign?

En bra nyhetsbrevsdesign har tydlig hierarki, läsbar mobilvy och en huvudsaklig handling. Testa bilder, länkar och visning före utskick.

[Läs mer](https://tajo.io/se/blog/newsletter-design-guide/#grunderna-i-nyhetsbrevsdesign)

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.

En skribents nyhetsbrev där hela värdet ligger i texten och där varje designelement som inte är text är en skatt.

Text

18px / 30px Georgia

Radlängd

~55 tecken

Bilder

1 (huvud)

Accent

#0084d1 (linjer + länkar)

Vad du ska titta på

1. Radlängden är omkring 55 tecken, inte hela 600 px. Marginalerna på 88 px finns enbart av det skälet. För långa rader är det vanligaste läsbarhetsfelet i nyhetsbrev som i övrigt ser bra ut.
2. Huvudet är den enda bilden. Blockera den och brevet läses fortfarande uppifrån och ned utan att något saknas.
3. Uppmaningen är en textlänk på egen rad, inte en knapp. En knapp i ett personligt brev läses som en annons, och engagemanget i det här formatet kommer från svaret, inte från klicket.

**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:

![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](https://tajo.io/_astro/email-builder-storefront.CFyFSzLz_2wMLlw.webp)

*The Storefront på arbetsytan. 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:

![Brevos e-postredigerare med mallen The Brief på arbetsytan, stapeldiagrammet markerat och högerpanelen som visar att det är byggt av tabellceller utan bild](https://tajo.io/_astro/email-builder-brief.ton7ClBD_2jhqG.webp)

*Ett diagram utan en enda 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:

![Brevos e-postredigerare med mallen The Letter på arbetsytan och citatet markerat: Georgia på 19px över 30px, kursiv, med en vänsterlinje på 3px](https://tajo.io/_astro/email-builder-letter.Dm38LK9Y_ZViw3u.webp)

*Ett citat är ett textblock med en linje i kanten. 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:

![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](https://tajo.io/_astro/email-builder-digest.BeJKSiLx_1dRJG3.webp)

*Alternativtext är ett fält, inte en eftertanke. 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å | Element | Designbehandling |
| --- | --- | --- |
| Primär | Huvudrubrik | Största typsnittet, fet, högst upp |
| Sekundär | Sektionsrubriker | Medelstort typsnitt, kontrasterande färg |
| Tertiär | Brödtext | Standardtypsnitt, läsbar storlek |
| Stödjande | Metadata (datum, författare) | Mindre typsnitt, ljusare färg |
| Handling | CTA-knappar/länkar | Kontrasterande 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:

| Typsnitt | Stil | Bäst för |
| --- | --- | --- |
| Arial | Ren, modern sans-serif | Allmänt bruk, business |
| Helvetica | Förfinad sans-serif | Premiumvarumärken |
| Georgia | Elegant serif | Redaktionellt, längre texter |
| Times New Roman | Klassisk serif | Traditionellt, formellt |
| Verdana | Bred, läsbar sans-serif | Liten text, mobil |
| Trebuchet MS | Modern sans-serif | Kreativt, 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

| Element | Minsta storlek | Rekommenderad storlek |
| --- | --- | --- |
| Brödtext | 14px | 16px |
| Sektionsrubriker | 20px | 22-24px |
| Huvudrubrik | 24px | 28-32px |
| Bildtexter/metadata | 12px | 13-14px |
| CTA-knapptext | 14px | 16px |
| Preheader-text | 12px | 14px |

### 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ärgroll | Användning | Exempel |
| --- | --- | --- |
| Primär | Rubriker, CTA-knappar, accenter | Varumärkesblå |
| Text | Brödtext, underrubriker | Mörkgrå (#333333) |
| Bakgrund | E-postbakgrund | Vit (#FFFFFF) eller ljusgrå (#F5F5F5) |
| Accent | Länkar, höjdpunkter, sekundära CTA:er | Sekundä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

| Specifikation | Rekommendation |
| --- | --- |
| Format | JPEG för foton, PNG för grafik |
| Bredd | 600px standard, 1200px för retina |
| Filstorlek | Under 200KB per bild |
| Total e-poststorlek | Under 100KB exklusive bilder |
| Alt-text | Beskrivande, max 125 tecken |
| Bildförhållande | 2: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

| Teknik | Desktop | Mobil |
| --- | --- | --- |
| Flerspaltssektioner | Sida vid sida | Staplade vertikalt |
| Bilder | Anpassade i innehåll | Full bredd, skalade |
| Navigationslänkar | Horisontella | Staplade eller dolda |
| CTA-knappar | Inline eller högerjusterade | Full bredd |
| Typsnittsstorlek | Standard | Något större |
| Padding | 20-40px | 15-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](https://tajo.io/se/blog/best-newsletter-platforms/) har inbyggda designredigerare:

| Plattform | Typ av redigerare | Designflexibilitet | Mallbibliotek |
| --- | --- | --- | --- |
| Brevo | Drag-and-drop | Hög | 40+ mallar |
| Mailchimp | Drag-and-drop | Hög | 100+ mallar |
| ConvertKit | Förenklad redigerare | Medel | Begränsat |
| Substack | Textfokuserad | Låg | Minimalt |

Brevos drag-and-drop-redigerare gör professionell nyhetsbrevsdesign tillgänglig utan kodkunskaper.

### 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.

## Var Tajo passar in

Tajo är den agentiska integrationsbyggaren. Behåll dina leverantörer. Agenter kopplar ihop allt annat, och du godkänner varje synkronisering. Tajo är i tidig åtkomst. [Ansök om tidig åtkomst](https://tajo.io/se/#early-access)

## 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.

## Relaterade artiklar

### [Handbok för e-postdesign: layout, mobilvisning, tillgänglighet och mallkontroll (2026)](https://tajo.io/se/blog/email-design-best-practices/)

8 mars 2026 · 10 min lästid

4,5:1 vanlig text

### [Guide till e-postdesignstacken: Brevo, Stripo, Beefree, Unlayer, Chamaileon, Mailchimp och Knak per arbetsflöde (2026)](https://tajo.io/se/blog/the-7-best-email-design-tools/)

15 jan. 2025 · 6 min lästid

Fristående designverktyg → Utskicksplattform

### [Gratis nyhetsbrevsmallar: 25 professionella design du kan använda i dag](https://tajo.io/se/blog/free-newsletter-templates/)

26 mars 2026 · 8 min lästid

7 avsnitt
