Was sind Newsletter Header?
Newsletter Header sind die oberen 100–200 px einer Marketing-E-Mail, die typischerweise Logo, Markenname und manchmal eine Navigation oder einen Hero-Claim enthalten. Sie sind das visuelle Äquivalent zur Website-Header-Bar und müssen Wiedererkennung schaffen — Empfänger entscheiden in 1,3 Sekunden (laut Litmus 2024 Eye-Tracking-Studie), ob sie eine E-Mail weiterlesen. Standardformat ist 600 × 100–200 px, für Retina-Displays werden Grafiken in 1200 × 200–400 px hochgeladen und auf 600 px skaliert dargestellt.
Im Gegensatz zur Website-Navigation funktioniert in E-Mail-Headern keine Hover-Animation, keine Web-Fonts (zumindest nicht zuverlässig) und kein modernes CSS Grid. Outlook 2016/2019 — immer noch ca. 18 % Marktanteil im B2B-Bereich — rendert E-Mails mit Word-Engine, was bedeutet: Tabellen-basiertes Layout, eingebettete Schriften ins Bild, Inline-CSS. Ein gut gestalteter Newsletter-Header kombiniert deshalb ein statisches Header-Bild (mit Logo und Tagline gerendert) mit einer HTML-Navigation darunter als Fallback.
Wie erstellt man Newsletter Header mit Publy?
Mit Publy entwirfst du Newsletter Header, die in jedem Mail-Client zuverlässig dargestellt werden:
- Brand Kit aktivieren: Logo, Markenfarben und Schriften werden automatisch in den Header übernommen — Konsistenz mit Website und anderen Marketing-Touchpoints.
- Header-Vorlage wählen: Vorlagen für Centered Logo, Logo + Navigation, Hero-Header mit Claim, Saisonal-Header (z.B. Weihnachten, Sommer-Sale).
- Tagline generieren: KI schlägt eine kurze Tagline vor (max. 50 Zeichen) — z.B. «Schweizer Handwerk seit 1987» oder «Dein Wochenupdate».
- Retina-Version exportieren: Publy erstellt automatisch zwei Versionen — 600 × 200 px und 1200 × 400 px — für scharfe Darstellung auf allen Geräten.
- In Mail-Tool einbinden: Lade die Datei in Mailchimp, Brevo, ActiveCampaign oder andere ESPs und setze die Anzeige-Breite auf 600 px.
Best Practices für Newsletter Header
- Logo links oder zentriert: Studien von Litmus zeigen 18 % bessere Wiedererkennung bei links-positioniertem Logo (westliche Lese-Richtung).
- Maximal 200 px Höhe: Sonst füllt der Header den ganzen Above-the-Fold-Bereich auf Mobile (iPhone SE = 568 px Höhe) und verdrängt Inhalte.
- Retina-Auflösung @2x: Header in 1200 × 400 px exportieren, auf 600 × 200 px anzeigen lassen — sonst unscharf auf Retina-Geräten.
- Kein Text als kritisches Element: Wenn der Header das Logo + die Tagline als Bild enthält, immer Alt-Text setzen («Publy Newsletter — KI-Tool für Schweizer KMU»).
- Saisonale Variationen: Weihnachts-, Sommer- oder Black-Friday-Header signalisieren Aktualität und steigern die Öffnungsrate bei Folge-E-Mails.
- Konsistenz über Sequenz: Der Header der Welcome-Mail muss derselbe sein wie der einer Promo-Mail — sonst wirken E-Mails wie von verschiedenen Absendern.
Formate und Abmessungen
- Standard-Header: 600 × 100–200 px (Retina @2x: 1200 × 200–400 px)
- Compact-Header (Logo only): 600 × 80–120 px
- Hero-Header (mit Claim): 600 × 250–400 px
- Dateiformate: JPG (für Fotos im Header), PNG (für Logo + Text)
- Max. Dateigrösse: 50 KB (Header allein, um E-Mail unter 100 KB Gesamtgrösse zu halten)
- Farbprofil: sRGB
- Empfohlene Schriftgrösse für Tagline: 14–18 px (28–36 px @2x)
Häufige Fehler vermeiden
- Logo zu klein: Auf Mobile (320 px Anzeige) verschwindet Logo unter 80 px Breite. Min. 100 px Höhe einplanen.
- Header ohne Retina-Version: Wirkt auf iPhone (Retina) und MacBook (Retina) unscharf — Negativ-Eindruck der Marke.
- Animierte GIF-Header: Outlook spielt GIFs nicht ab und zeigt nur ersten Frame — den auch ansprechend gestalten.
- Header-Höhe über 250 px: Auf Mobile sieht der Empfänger nur den Header — Klickrate sinkt um bis zu 15 %.
- Header pro Kampagne neu designen: Verwirrt Empfänger — Header sollte über alle E-Mails konstant sein, nur Inhalt darunter variiert.
Newsletter Header und KI
Mit Publy erstellst du Newsletter Header in Schweizer Markenqualität — retina-tauglich, mobile-first und in jedem Mail-Client zuverlässig dargestellt. Starte jetzt kostenlos und gib deinem Newsletter eine professionelle Identität.