Newsletter

Newsletter-Design: Best Practices für Layouts, die begeistern

Meistere Newsletter-Design mit Layout-Best-Practices, Typografie-Tipps und visuellen Strategien. Gestalte Newsletter, die professionell wirken und Engagement fördern.

Set Noa
Set Noa
Aktualisiert
0 Besuche · 7 T.
newsletter design
Newsletter-Design?

Newsletter-Design sollte Lesbarkeit, Mobile-Tauglichkeit und visuelle Konsistenz priorisieren. Dieser Leitfaden zeigt Layout-Strategien, Typografie, Farbeinsatz, Bildoptimierung und Design-Tools für Newsletter, die Abonnent:innen tatsächlich lesen wollen.

Mehr erfahren

Newsletter-Design ist die unsichtbare Architektur, die entscheidet, ob Abonnent:innen deinen Content lesen oder löschen. Ein gut gestalteter Newsletter führt das Auge ganz natürlich von der Überschrift zum Inhalt zur Aktion. Ein schlecht gestalteter erzeugt visuelles Chaos, das Leser:innen vertreibt – unabhängig davon, wie wertvoll der Content ist.

Die gute Nachricht: Effektives Newsletter-Design braucht keine:n Profidesigner:in. Es braucht das Verständnis einiger Kernprinzipien und die konsequente Anwendung. Dieser Leitfaden zeigt Layout-Strategien, Typografie-Regeln und visuelle Techniken, die Newsletter engagierend und lesbar machen.

Vier Vorlagen, live

Alles unterhalb dieses Abschnitts ist eine Behauptung über Layout, und Behauptungen über Layout sind billig. Hier also vier Newsletter, in Betrieb.

Jeder steckt in einem Rahmen mit echter Breite und zeigt sein eigenes HTML. Ziehen Sie die Breite auf 375 px und sehen Sie, welche Spalten umbrechen und welche sich weigern. Die Panels folgen dem Design, in dem Sie diese Seite lesen: Im Dunkelmodus sehen Sie den echten Dunkelblock jeder Vorlage, keine Annäherung. Der Quelltext steht unter jedem Panel.

Tajo-Vorlagen

Vier Layouts, live

Jedes Panel unten ist das echte E-Mail-HTML der Vorlage, in einem Rahmen mit echter Breite. Ziehen Sie die Breite auf 375 px herunter und sehen Sie zu, wie die Spalten umbrechen.

Folgt Ihrem Design — wechseln Sie es oben, um das andere zu sehen.

HTML von The Letter lesen 6 KB, ohne Build-Schritt 
<!DOCTYPE html>
<html lang="de" 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;">Das Zitat, das Sie in Ihrer Notiz-App aufbewahren, leistet mehr als Ihr Redaktionsplan.</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-Kopf: konzentrische blaue Bögen, von einem diagonalen Band gekreuzt" 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 · Ausgabe 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;">Das Archiv ist das Produkt</h1>
        <p class="d-ink" style="margin:0 0 20px 0;font-size:18px;line-height:30px;color:#242424;">Vor drei Wochen suchte ich einen Text, den ich 2019 geschrieben hatte, und fand ihn nicht. Nicht auf der Website, nicht im Export, nicht in der Suche der Plattform selbst. Zwölfhundert Ausgaben, und der einzige funktionierende Index war mein Gedächtnis.</p>
        <p class="d-ink" style="margin:0 0 20px 0;font-size:18px;line-height:30px;color:#242424;">Das ist der Teil, den einem niemand über sechs Jahre Newsletter erzählt. Das Versenden ist leicht. Das Aufbewahren nicht.</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;">Alles, was Sie veröffentlichen, ist eine Einzahlung. Fast niemand baut die Auszahlung.</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;">Diese Woche habe ich den Rückkatalog deshalb als echtes Archiv neu gebaut, mit Schlagwörtern, Volltextsuche und dauerhaften URLs. Es dauerte neun Tage. Die Abonnentenzahl bewegte sich nicht. Die Verweildauer verdreifachte sich.</p>
        <p class="d-ink" style="margin:0 0 28px 0;font-size:18px;line-height:30px;color:#242424;">Alles steht unten, auch die Teile, die nicht funktioniert haben.</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;">Die ganze Ausgabe lesen &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;">Jeden Donnerstag von Hand geschrieben. Antworten Sie, ich lese mit.</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;">Abmelden</a> &middot; <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Im Browser ansehen</a></p>
      </td></tr>

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

Diese Vorlagen sind unsere. Wir haben sie für diesen Artikel entworfen, samt der Grafiken, die ein deterministisches Geometrieskript im selben Repository wie diese Seite erzeugt — keine Stockfotos und keine Screenshots fremder Vorlagengalerien. Der Unterschied wiegt schwerer, als er klingt: Ein E-Mail-Designleitfaden, der sich mit den E-Mails anderer Leute bebildert, verlangt, dass man ihm jedes Wort glaubt.

Vier Vorlagen sind nicht vier Stile. Es sind vier Antworten auf vier verschiedene Aufgaben:

  • The Letter ist für Schreibende, deren ganzer Wert im Text liegt. Ein Bild, 88 px Stege, ein Textlink statt eines Buttons. Ein Button in einem persönlichen Brief liest sich wie Werbung.
  • The Digest ist für einen Überblick, der überflogen wird. Nummerierte Zeilen, eine Lesezeit vor jeder Überschrift und ein Handlungsaufruf unten statt sechs.
  • The Storefront ist für eine Produktveröffentlichung. Das ist das eine Layout, in dem ein Bild an erster Stelle richtig ist — und es ist trotzdem so gebaut, dass das Bild ausfallen darf.
  • The Brief ist für Zahlen. Drei Kennzahlen über allem anderen und ein Balkendiagramm aus Tabellenzellen statt aus einem PNG.

Was sie teilen, ist der Teil, der sich zu kopieren lohnt. Eine 600-px-Spalte. Mindestens 16 px Fließtext. Eine Akzentfarbe und Tinte für alles andere. Jedes Bild trägt einen Alternativtext, und jedes Layout ergibt auch mit blockierten Bildern Sinn. Ein deklariertes Farbschema plus ein expliziter Dunkelblock, denn die Voreinstellung in einem dunklen Client ist Ihre E-Mail, invertiert von einem Algorithmus, der Ihre Marke nie gesehen hat.

Eine davon hatten wir im ersten Anlauf falsch, und genau die ist es wert, benannt zu werden. The Digest ließ seine Beitragszeilen auf dem Handy zunächst umbrechen — was jeder Leitfaden für responsive E-Mails empfiehlt. Der Umbruch machte aus drei 112-px-Vorschaubildern drei dekorative Bilder in voller Breite und 335 px Höhe, und aus einem Überblick mit sechs Themen wurde eine Scrollstrecke. Diese Zeile ist jetzt das einzige zweispaltige Layout im Satz, das nicht umbricht. Regeln über das Umbrechen betreffen Inhaltsspalten. Ein Vorschaubild ist keine Inhaltsspalte.

Eine davon in Brevo bauen

Keine der vier Vorlagen oben braucht zum Zusammenbauen eine Entwicklerin. Jeder Screen unten zeigt dieselbe Vorlage auf Brevos Drag-and-drop-Canvas, mit einem ausgewählten Block.

Fangen wir beim Hauptbutton an, dem Block mit den meisten Einstellungen:

Brevo

The Storefront auf dem Canvas

Brevos Drag-and-drop-E-Mail-Editor mit der Vorlage The Storefront auf dem Canvas, dem ausgewählten Hauptbutton und dessen Beschriftung, Link, Farbe, Radius und Innenabstand im rechten Panel
Linke Leiste: die Blöcke, die man hineinzieht. Rechte Leiste: alles zum ausgewählten Block. Der Canvas zeigt eine 600-px-E-Mail in einem 680-px-Client — deshalb erscheint das Mobil-Layout nicht: Bei exakt 600 px würde der Umbruchpunkt der Vorlage greifen, und Sie würden die Handy-Version bearbeiten, während der Schalter Desktop sagt.

Jeder Block in der linken Leiste entspricht etwas in den Vorlagen oben. Text, Bild, Button, Trenner, Abstand für die Struktur. Produkt für eine Shop-Zeile. HTML für alles, was der Editor nicht abbildet — und so ist das Diagramm von The Brief gebaut:

Brevo

Ein Diagramm ganz ohne Bild

Brevo-E-Mail-Editor mit der Vorlage The Brief auf dem Canvas, ausgewähltem Balkendiagramm und dem rechten Panel, das zeigt, dass es aus Tabellenzellen ohne Bild besteht
Ein als PNG exportiertes Diagramm verliert seine Zahlen an blockierte Bilder, an die Invertierung im Dunkelmodus und an jeden Screenreader. Vier Tabellenzeilen mit einer farbigen Zelle und einer Textbeschriftung verlieren nichts davon — und wiegen nichts.

Typografie funktioniert genauso. Wählen Sie einen Textblock, und das Panel gibt Ihnen Schrift, Größe, Zeilenhöhe und Innenabstand — genau das Werkzeug, das The Letter braucht:

Brevo

Ein Zitat ist ein Textblock mit einer Linie

Brevo-E-Mail-Editor mit der Vorlage The Letter auf dem Canvas und ausgewähltem Zitat: Georgia in 19px auf 30px, kursiv, mit 3px linker Linie
Keine Spezialkomponente. Ein Textblock, eine 3 px starke linke Linie in der Akzentfarbe und 20 px Innenabstand links. Das meiste, was in einem guten Newsletter nach maßgeschneidertem Design aussieht, ist ein Standardblock mit zwei geänderten Eigenschaften.

Und Bilder haben ihr eigenes Panel, in dem der Alternativtext oben steht statt unten in einer Einstellungsliste:

Brevo

Alternativtext ist ein Feld, kein Nachgedanke

Brevo-E-Mail-Editor mit The Digest auf dem Canvas und ausgewähltem Beitragsbild, das Alternativtext, 112px Anzeigegröße, 480px Quelle und 17 KB Gewicht zeigt
Anzeigegröße 112 px, Quelle 480 px — dieses Verhältnis von 2× hält das Vorschaubild auf einem Retina-Display scharf. Der Alternativtext steht zuerst, weil er der Teil des Bildes ist, den die meisten Abonnenten tatsächlich erhalten.

Für Unternehmen, die Tajo einsetzen, lassen sich dieselben Abschnitte dynamisch füllen: Produktempfehlungen und personalisierte Inhalte, gesteuert vom Verhalten der Abonnenten und in die hier angelegten Blöcke gerendert statt vor jedem Versand von Hand ausgewählt.

Grundlagen des Newsletter-Designs

Design dient dem Inhalt

Das wichtigste Prinzip im Newsletter-Design: Design soll Content leichter konsumierbar machen, niemals schwerer. Jede Design-Entscheidung sollte beantworten: Hilft das meiner Leserschaft, die gesuchten Informationen zu finden und aufzunehmen?

Zeichen von gutem Newsletter-Design:

  • Leser:innen können den kompletten Newsletter in 10–15 Sekunden scannen
  • Der wichtigste Content ist sofort sichtbar
  • Jeder Abschnitt hat einen klaren Anfang und ein klares Ende
  • Der Call-to-Action fällt auf, ohne aufdringlich zu sein
  • Der Newsletter wirkt gewollt, nicht zufällig

Zeichen von schlechtem Newsletter-Design:

  • Der Hauptinhalt ist nicht schnell auffindbar
  • Mehrere Design-Stile konkurrieren um Aufmerksamkeit
  • Text ist auf irgendeinem Gerät schwer lesbar
  • Das Layout bricht auf dem Handy
  • Dichte Textblöcke ohne visuelle Pausen

Das Prinzip der visuellen Hierarchie

Visuelle Hierarchie steuert die Reihenfolge, in der Leser:innen Informationen aufnehmen. In Newslettern baust du Hierarchie so auf:

Hierarchie-EbeneElementDesign-Behandlung
PrimärHauptüberschriftGrößte Schrift, fett, ganz oben
SekundärAbschnittsüberschriftenMittlere Schrift, Kontrastfarbe
TertiärFließtextStandardschrift, lesbare Größe
UnterstützendMetadaten (Datum, Autor:in)Kleinere Schrift, hellere Farbe
AktionCTA-Buttons/LinksKontrastfarbe, Button-Styling

Layout-Strategien

Einspaltiges Layout

Das einspaltige Layout ist der Gold-Standard für Newsletter und die Empfehlung für die meisten Publisher:innen.

Vorteile:

  • Rendert perfekt auf jedem Gerät und jeder Bildschirmgröße
  • Erzeugt einen natürlichen Lesefluss von oben nach unten
  • Vereinfacht Design-Entscheidungen
  • Reduziert Render-Probleme in verschiedenen E-Mail-Clients
  • Passt zum mobilen Leseverhalten (vertikales Scrollen)

Am besten für: Textfokussierte Newsletter, persönliche Newsletter, Bildungsinhalte, ausführliche Analysen

Struktur:

  1. Header (Logo, Ausgabe, Datum)
  2. Einleitung oder persönliche Notiz
  3. Hauptcontent-Abschnitt
  4. Sekundäre Content-Abschnitte (mit Trennern)
  5. CTA oder Engagement-Aufruf
  6. Footer

Karten-basiertes Layout

Organisiere Inhalte in klar abgegrenzten visuellen Karten – jeweils mit Rahmen, Hintergrund oder Schatten.

Vorteile:

  • Klare Trennung zwischen Inhalten
  • Gut für kuratierte Inhalte und Link-Roundups
  • Jede Karte kann eigenes Bild und CTA haben
  • Visuell ansprechend, ohne zu überladen

Am besten für: Content-Roundups, kuratierte Links, Produkt-Showcases, Multi-Topic-Newsletter

Design-Tipps für Karten:

  • Einheitliche Kartenmaße und Abstände
  • Maximal 2 Karten pro Reihe (auf Mobile auf 1 stapeln)
  • Dezenter Rahmen oder Hintergrundfarbe zur Abgrenzung
  • Konsistente Innenabstände innerhalb jeder Karte

Hybrid-Layout

Kombiniere eine Hauptspalte mit einer schmaleren Seitenleiste für ergänzende Inhalte.

Vorteile:

  • Mehr Content ohne längere Mail
  • Passt für Newsletter mit primären und sekundären Inhalten
  • Vertrautes Format aus klassischen Publikationen

Grenzen:

  • Muss auf Mobile einspaltig werden
  • Komplexer zu bauen und zu pflegen
  • Kann überladen wirken, wenn nicht gut strukturiert

Am besten für: Firmen-Newsletter, redaktionelle Formate, contentlastige Layouts

Typografie für Newsletter

Typografie ist das wirkungsvollste Design-Element in jeder textlastigen E-Mail. Stimmen die Schriften, fällt vieles andere leichter.

Schriftenwahl

E-Mail-Clients unterstützen nur eingeschränkt Schriften. Nutze websichere Schriften als primäre Wahl:

SchriftStilAm besten für
ArialKlar, moderne SerifenlosAllzweck, Business
HelveticaElegante SerifenlosPremium-Marken
GeorgiaElegante SerifRedaktionell, Long-Form
Times New RomanKlassische SerifTraditionell, formal
VerdanaBreit, gut lesbarKleintext, Mobile
Trebuchet MSModerne SerifenlosKreativ, casual

Web-Fonts: Du kannst Web-Fonts (wie Open Sans oder Lato) mit websicheren Fallbacks nutzen. Web-Fonts werden in Apple Mail, iOS Mail und einigen Android-Clients gerendert, in Outlook und älterem Gmail greift der Fallback.

Schriftgrößen

ElementMinimumEmpfehlung
Fließtext14px16px
Abschnittsüberschriften20px22–24px
Hauptüberschrift24px28–32px
Bildunterschriften/Meta12px13–14px
CTA-Button-Text14px16px
Preheader-Text12px14px

Zeilenabstand und Lesbarkeit

  • Line-Height: 1,4–1,6 für Fließtext (24–26px bei 16px Schrift)
  • Absatzabstand: 16–24px zwischen Absätzen
  • Zeilenlänge: 50–75 Zeichen pro Zeile (verhindert Augenermüdung)
  • Zeichenabstand: Standard für Fließtext, leicht erhöht bei Kleintext

Textformatierung

  • Fett: Für Schlüsselbegriffe und Hervorhebungen, nicht ganze Absätze
  • Kursiv: Sparsam einsetzen für Zitate, Titel oder leichte Betonung
  • Unterstreichen: Ausschließlich für Links (unterstrichener Nicht-Link-Text verwirrt)
  • GROSSBUCHSTABEN: Nur für kurze Labels oder Buttons, nie für Fließtext
  • Farbe: Eine Akzentfarbe für Links; Fließtext dunkelgrau (#333) oder nahezu schwarz

Farb-Strategie

Newsletter-Farbpalette aufbauen

Beschränke deinen Newsletter auf 3–4 Farben:

FarbrolleEinsatzBeispiel
PrimärÜberschriften, CTA-Buttons, AkzenteMarkenblau
TextFließtext, ZwischenüberschriftenDunkelgrau (#333333)
HintergrundE-Mail-BodyWeiß (#FFFFFF) oder helles Grau (#F5F5F5)
AkzentLinks, Highlights, sekundäre CTAsZweitfarbe der Marke

Farbzugänglichkeit

  • Mindestens 4,5:1 Kontrastverhältnis zwischen Text und Hintergrund halten
  • Informationen nicht allein über Farbe vermitteln
  • Palette mit Farbfehlsichtigkeits-Simulator prüfen
  • Links müssen sich klar vom Fließtext abheben (Unterstreichung, nicht nur Farbe)

Dark Mode berücksichtigen

Viele E-Mail-Clients setzen standardmäßig auf Dark Mode. Denke Dark Mode von Anfang an mit:

  • Kein reines Weiß (#FFFFFF) als Hintergrund – nutze ein leichtes Off-White (#FAFAFA)
  • Keine transparenten PNGs mit dunklen Elementen (verschwinden im Dark Mode)
  • Logos auf hellem und dunklem Hintergrund testen
  • Meta-Tags für Dark-Mode-Farbschemata ergänzen
  • Rahmen/Outlines für dunkle Bilder, damit sie sichtbar bleiben

Bilder in Newslettern

Wann Bilder einsetzen?

Bilder sollten Wert liefern, den Text allein nicht bietet:

  • Produktfotos: Produkte im Kontext zeigen
  • Datenvisualisierung: Charts, Grafiken, Infografiken
  • Screenshots: Tools, Features oder Prozesse demonstrieren
  • Porträts: Persönliche Verbindung zu Autor:innen oder Team
  • Illustrationen: Markenpersönlichkeit und Ton unterstützen

Bildoptimierung

SpezifikationEmpfehlung
FormatJPEG für Fotos, PNG für Grafiken
Breite600px Standard, 1.200px für Retina
DateigrößeUnter 200 KB pro Bild
Gesamt-E-Mail-GrößeUnter 100 KB ohne Bilder
Alt-TextBeschreibend, max. 125 Zeichen
Seitenverhältnis2:1 für Hero-Bilder, 1:1 für Thumbnails

Bild-Text-Verhältnis

Halte ein gesundes Verhältnis, um Spamfilter zu vermeiden und Lesbarkeit zu sichern:

  • 60:40 Text zu Bild ist die empfohlene Balance
  • Mails mit überwiegend Bildern (reine Bild-Mails) haben höhere Spamraten
  • Kerninformationen immer als Text darstellen, nicht nur im Bild
  • Für Clients mit blockierten Bildern gestalten: Der Newsletter muss auch ohne Bilder Sinn ergeben

Mobile-First-Newsletter-Design

Mobile-Design-Anforderungen

Mit über 60 % aller Newsletter-Öffnungen auf Mobile ist Mobile-Design Pflicht.

Mobile-Layout-Regeln:

  • Maximale Content-Breite: 600px (funktioniert auf allen Geräten)
  • Mindest-Tap-Target: 44x44 Pixel für Buttons und Links
  • Mindestschriftgröße: 16px für Fließtext auf Mobile
  • Einspaltiges Layout, das natürlich stapelt
  • Full-Width-CTA-Buttons auf Mobile
  • Ausreichender Abstand zwischen klickbaren Elementen (um versehentliche Taps zu vermeiden)

Responsive-Design-Techniken

TechnikDesktopMobile
Mehrspaltige AbschnitteNebeneinanderVertikal gestapelt
BilderInnerhalb des ContentsFull Width, skaliert
Navigations-LinksHorizontalGestapelt oder versteckt
CTA-ButtonsInline oder rechtsbündigFull Width
SchriftgrößenStandardEtwas größer
Padding20–40px15–20px

Mobile-Rendering testen

Teste dein Newsletter-Design auf:

  • iPhone (Safari/Mail)
  • Android (Gmail-App)
  • iPad
  • Gmail (Web)
  • Outlook (Desktop und Web)
  • Apple Mail (Desktop)

Nutze Tools wie Litmus oder Email on Acid für automatisierte Render-Tests in 90+ E-Mail-Clients.

Newsletter-Abschnitte gestalten

Der Header

Dein Header stellt Identität her und setzt Erwartungen:

  • Logo: Angemessen dimensioniert (nicht zu groß, meist 150–200px breit)
  • Ausgaben-Kennung: Ausgabe, Datum oder Editionsname
  • Online-ansehen-Link: Für Abonnent:innen mit Render-Problemen
  • Kompakt halten: Der Header sollte den Content nicht unter die Falz drücken

Abschnitts-Trenner

Klare Trenner zwischen Abschnitten helfen beim Scannen:

  • Horizontale Linien: Dünne Linien (1–2px) in neutraler Farbe
  • Hintergrundfarbwechsel: Zwischen Weiß und hellem Grau alternieren
  • Zusätzlicher Abstand: 30–40px Padding zwischen Abschnitten
  • Abschnittsüberschriften: Fett, größer, konsistent gestaltet

Ein gut gestalteter Footer rundet die Erfahrung ab:

  • Abmelde-Link (gesetzlich vorgeschrieben, leicht auffindbar machen)
  • Social-Media-Links
  • Postanschrift (CAN-SPAM-Anforderung)
  • „Im Browser öffnen”-Link
  • „An Freund:in weiterleiten”-Option
  • Kurzer Marken-Claim oder Mission-Statement

Tools fürs Newsletter-Design

Plattform-Editoren

Die meisten Newsletter-Plattformen bringen Editoren mit:

PlattformEditor-TypDesign-FlexibilitätVorlagenbibliothek
BrevoDrag-and-DropHoch40+ Vorlagen
MailchimpDrag-and-DropHoch100+ Vorlagen
ConvertKitVereinfachter EditorMittelBegrenzt
SubstackTextfokussiertNiedrigMinimal

Brevos Drag-and-Drop-Editor macht professionelles Newsletter-Design ohne Coding-Kenntnisse zugänglich. Unternehmen, die Tajo nutzen, können Newsletter-Abschnitte dynamisch mit Produktempfehlungen und personalisierten Inhalten auf Basis des Verhaltens der Abonnent:innen befüllen.

Design-Ressourcen

  • Canva: Newsletter-Header-Bilder, Social-Grafiken, Illustrationen erstellen
  • Unsplash/Pexels: Kostenlose Stockfotos
  • Really Good Emails: Inspirationsgalerie gut gestalteter E-Mails
  • MJML: Open-Source-E-Mail-Framework für eigene Designs
  • Figma: Eigene Newsletter-Vorlagen entwerfen mit E-Mail-Plugin-Export

Newsletter-Design-Checkliste

Vor dem Versand jedes Newsletters prüfen:

Layout:

  • Einspaltiges Layout oder sauber responsives Multi-Column
  • Content-Breite 600px oder weniger
  • Klare visuelle Hierarchie vom Header bis zum Footer
  • Abschnitte deutlich getrennt

Typografie:

  • Fließtext 16px oder größer
  • Line-Height 1,4–1,6
  • Überschriften schaffen klare Struktur
  • Linktexte sind aussagekräftig (kein „klick hier”)

Bilder:

  • Alle Bilder mit Alt-Text
  • Bilder für Dateigröße optimiert
  • Newsletter ist auch ohne Bilder lesbar
  • Retina-Bilder für High-DPI-Displays bereitgestellt

Mobile:

  • Auf iPhone und Android getestet
  • CTA-Buttons auf Mobile full width
  • Schriftgrößen auf kleinen Bildschirmen lesbar
  • Tap-Targets mindestens 44px

Zugänglichkeit:

  • Farbkontrast erfüllt 4,5:1
  • Inhalt mit sauberen Überschriften strukturiert
  • Keine Information nur über Farbe vermittelt
  • Mit Screenreader kompatibel

Marke:

  • Farben passen zur Markenpalette
  • Logo korrekt dimensioniert und platziert
  • Ton und Stimme markenkonform
  • Footer enthält alle rechtlich nötigen Elemente

Newsletter-Design weiterentwickeln

Newsletter-Design ist kein einmaliges Projekt. Entwickle dein Design auf Basis von Performance-Daten und Feedback weiter:

  • Scroll-Tiefe tracken: Kommen Leser:innen bis ans Ende deines Newsletters?
  • Click-Maps beobachten: Welche Abschnitte bekommen die meisten Klicks? Ähnliche Inhalte stärker einsetzen.
  • Abonnent:innen befragen: Einmal jährlich zu Design-Vorlieben fragen
  • A/B-Test von Layouts: Karten- vs. Linear-Layout, Bildplatzierung, CTA-Stile vergleichen
  • Wettbewerb beobachten: Was in erfolgreichen Newslettern deiner Nische funktioniert

Die besten Newsletter-Designs sind unsichtbar. Abonnent:innen bemerken nicht das Design – sie bemerken den Content. Das heißt, das Design erfüllt seine Aufgabe perfekt: Reibung reduzieren, Aufmerksamkeit lenken, den Leseprozess mühelos machen.

Starte einfach, bleib konsistent und verfeinere datenbasiert. Dein Newsletter-Design soll sich mit deinem Publikum entwickeln, nicht vor ihm.

Häufig gestellte Fragen

Was macht gutes Newsletter-Design aus?
Gutes Newsletter-Design nutzt eine klare visuelle Hierarchie, konsistentes Branding, lesbare Typografie (mindestens 16px), ein einspaltiges Layout für mobile Kompatibilität und gezielten Einsatz von Weißraum. Es führt das Auge von der Überschrift zum Inhalt zur Handlungsaufforderung.
Sollten Newsletter textlastig oder bildlastig sein?
Die ideale Balance hängt vom Content-Typ ab, die meisten Newsletter performen aber am besten mit einem 60:40-Verhältnis Text zu Bild. Text-first-Designs sichern Lesbarkeit, wenn Bilder blockiert werden, und verbessern die Zustellbarkeit. Nutze Bilder zur Unterstützung, nicht als Ersatz.
Was ist das beste Newsletter-Layout?
Ein einspaltiges Layout ist für Newsletter am wirksamsten, weil es auf jedem Gerät funktioniert, leicht scannbar ist und den Blick linear führt. Nutze klare Trenner zwischen Abschnitten und konsistente Formatierung, um Inhalte innerhalb der Spalte zu strukturieren.
Artikel teilen:
Zurück zu allen Beiträgen

Beantrage frühzeitigen Zugang

Gib deinen Vornamen und eine E-Mail-Adresse oder Telefonnummer an. Wir melden uns mit den Details zum Tajo-Zugang bei dir.

automatische Erkennung
Brevo erhalten