Der perfekte Newsletter-Aufbau

Die wichtigsten drei Elemente in der Inbox

1. Der Absendername: „Hallo erst mal, mein Name ist…“

Ganz so förmlich läuft es im E-Mail-Marketing natürlich nicht ab, aber wie auch im echten Leben, stellt sich der Versender in der Inbox kurz vor, indem er sich mit seinem Namen identifiziert. Tatsächlich ist der Absendername das wichtigste Element für die Entscheidung, ob ein Empfänger ein Mailing öffnet, oder nicht (Inbox at a Glance, Litmus, 2016). Der Versendername ist also das Nummer-Eins-Identifikationsmerkmal und sorgt somit schon im Posteingang für die Markenkommunikation. Als solches hat der Absendername unmittelbaren Einfluss auf die Öffnungsraten und Gesamtperformance des Newsletters.

Ein Blick in die eigene Inbox zeigt, dass es viele verschiedene (teils kreative, teils genormte) Herangehensweisen für den Absendername gibt. Viele Versender lassen den Namen des Unternehmens oder der Brand für sich sprechen. Ab und zu finden man auch einen persönlicheren Ansatz, indem dem Markenamen ein „Team“ (bspw. „Episerver Team“) angehängt wird, oder gar mit Markenbotschaftern gearbeitet wird (bspw. „Tom von Episerver“). Weiter können auch bestimmte Newsletter-Formate durch unterschiedliche Absendername gekennzeichnet werden (bspw. „Episerver Newsletter“ und „Episerver Product Update“).

2. Die Betreffzeile

Die Betreffzeile ist der erste Berührungspunkt des Newsletter-Inhalts mit Ihren Empfängern. Der Betreff ist die Grundlage für eine erfolgreiche Kampagne und beeinflusst maßgebliche die Öffnungsrate des Mailings. Ein guter Betreff leitet den Inhalt des Newsletters ansprechend ein, verweist beispielweise auf starke Rabatte und nutzt Personalisierung. Alternativ können weitere stilistische Mittel eingesetzt werden: neben Fragen (Bsp.: „Wow, kennen Sie schon die Trends der Saison?“) können auch humoristisch oder mysteriös-anmutende Betreffzeilen die Öffnungsraten verbessern.

Immer häufiger wird die Relevanz der Betreffzeilen für den individuellen Empfänger durch Personalisierungsmaßnahme verstärkt. So ist es mittlerweile gängige Praxis, namentlich im Betreff angesprochen zu werden (Bsp.: „Hey Marius, das darfst du nicht verpassen“). Aber vor allem Personalisierungselemente, die über die Stammdaten hinausgehen, zeigen überdurchschnittliche Öffnungsraten, zum Beispiel wenn Sie Kundeninteraktionen (bspw. angeklickte oder gekaufte Produkte) mit dem Unternehmen aufgreifen (Bsp.: „Marius, so schön ist Kanada“).

Auch können Sie hier selektiv mit passenden Emojis oder Symbolen arbeiten. Aber Achtung: Emojis werden abhängig vom E-Mail-Client und dem Browser unterschiedlich dargestellt und lassen immer Spielraum für Interpretation beim Betrachter. Erfahren Sie in unserer E-Mail-Marketing Benchmarkstudie, wie die Nutzung von Emojis und Personalisierung die Öffnungsraten beeinflussen.

Neben dem Inhalt spielt aber auch die Länge der Betreffzeile eine entscheidende Rolle. In unserer Benchmarkstudie haben wir zum Beispiel herausgefunden, dass Betreffzeilen unter 50 Zeichen überdurchschnittlich gut geöffnet und geklickt wurden. Jedoch ist die Anzeige des Betreffs in der Inbox abhängig vom E-Mail-Client des Lesers: während in der Desktop-Betrachtung der Gmail-Inbox über 90 Zeichen angezeigt werden, kommt die native Mail-App auf dem iPhone mit knapp 40 Zeichen aus und bricht dann ab. Unsere Empfehlung: Stellen Sie die wichtigsten Inhalte an den Anfang des Betreffs und kommunizieren Sie das Hauptargument für die Öffnung in den ersten 40 Zeichen.

3. Pre-Header-Text

Die meisten E-Mail-Clients ergänzen die Betreffzeile im Posteingang, indem sie den ersten Text aus dem sogenannten Pre-Header, also dem obersten HTML- bzw. Text-Teil einer E-Mail, extrahieren. Zum Absender und zur Betreffzeile erhalten die Empfänger in der Inbox somit eben diesen ersten Text-Abschnitt als Hilfe für die Sekunden-Entscheidung, ob der Newsletter interessant ist, oder nicht. Das heißt: Der Pre-Header beeinflusst auch das Selektionsverhalten im Posteingang, also die Öffnungsrate und hat damit direkten Einfluss auf Erfolg und Misserfolg eines Newsletters.

Ein guter Pre-Header-Text unterstützt die Betreffzeile, ist oft kreativ und führt das Hauptargument des Betreffs weiter aus. Der Betreff ist somit das Hauptelement und der Pre-Header eine willkommene Erweiterung, um die Öffnungsraten zu erhöhen und den Newsletter-Inhalt einzuleiten. Ähnlich wie im Betreff können Sie auch im Pre-Header mit Personalisierung arbeiten, um so in der Wahrnehmung des Empfängers eine höhere Relevanz zu erzeugen.

Layout und Struktur eines Newsletters

Der Aufbau eines Newsletters lässt sich in drei große Bereiche einteilen: 1) der Header oder Kopfbereich, 2) der Inhaltsbereich und 3) der Footer oder Fußbereich. Ob ein Mailing gut beim Betrachter ankommt, hängt stark vom Zusammenspiel aller Elemente und der Struktur des Newsletters ab, denn über 40 % der Empfänger überfliegen eine E-Mail in weniger als 8 Sekunden (Email Attention Spans Increasing, Litmus, 2017) und haben sich in dieser Zeit bereits ein Urteil über die Relevanz des Inhalts gebildet. Ein komplizierter und unübersichtlicher Newsletter-Aufbau sorgt (speziell auf mobilen Endgeräten) dafür, dass es Abonnenten schwerfällt, relevante Inhalte zu scannen.

Etwa die Hälfte der Newsletter werden heutzutage mobil geöffnet. Die User Experience auf dem Smartphone ist also von außerordentlicher Bedeutung für die Performance. Mit der steigenden Relevanz von mobilen Geräten im E-Mail-Marketing und der damit einhergehenden Ausrichtung zu einem responsiven (also sich an die Bildschirmgröße anpassenden) Design – oder mitunter sogar einem Mobile-First Ansatz – werden Mailings oft einspaltig designt. Ein minimalistisches und simples E-Mail-Layout knüpft hier an und gewährleistet angenehme Lesbarkeit und Bedienbarkeit auf allen Bildschirmgrößen. So ist es wichtig, dass die integrierten Visuals den hohen Bildschirmauflösungen der aktuellen Smartphones gerecht werden und nicht verpixelt dargestellt werden. Auch müssen Texte in ausreichender Größe dargestellt werden und Klickelemente wie CTA-Buttons und In-Text-Verlinkungen müssen mit jeder Daumengröße angesteuert werden können.
Der Design-Trend des Minimalismus hält auch im E-Mail-Marketing weiter Einzug. Minimalismus beschreibt den Fokus auf die wesentlichen, funktionalen Elemente und liefert daher gute Ansatzpunkte für Ihre Newsletter-Entwicklung. Ein minimalistischer Newsletter setzt auf klare Strukturen, einspaltige Designs, eine übersichtliche Farb- und Typographie-Palette, und auf eine Bildsprache, die sich auf das Wesentliche beschränkt. Auch wird Whitespace als gestalterisches Element eingesetzt.

Der erste Eindruck: Der Header oder Kopfbereich

Der inhaltliche Header einer Werbe-E-Mail bezeichnet deren obersten Teil, der normalerweise von Ausgabe zu Ausgabe gleichbleibend ist. Hier finden sich das Absender-Logo, möglicherweise eine Navigationsleiste oder ein überschaubares Menü. Inhalte, die dem Header vorangestellt werden, bilden den sog. Pre-Header. In der Praxis wird dieser schmale Raum oft nur mit dem Link zur Online-Version des Newsletters bestückt (Bsp.: „Um die E-Mail im Browser zu öffnen, klicken Sie hier“). Darüber hinaus findet man auch dort kurze, einleitende Texte, die bereits im Posteingang – also noch vor der Öffnung – angezeigt werden und den Inhalt anteasern (siehe Pre-Header-Texte).

Branding im Header: Eine klare Markenbotschaft

Der Header eines Newsletters bildet den Einstiegspunkt für den Blickverlauf der Leser. Abgeleitet von der typischen F-förmigen Aufmerksamkeitsverteilung ist dieser Bereich insbesondere links-oben sehr aufmerksamkeitsstark. Jedoch sind mittlerweile aufgrund der Mobilisierung der Newsletter und dem Mobile-First-Ansatz viele Versender dazu übergegangen, Ihr Logo zentriert im Kopfbereich darzustellen. Es empfiehlt sich unbedingt, die wichtigsten Marken-Elemente prominent im Header zu platzieren, um die Markenbotschaft unmittelbar nach Öffnung ins Blickfeld des Betrachters zu rücken. Achten Sie hier auch darauf, hochauflösende Visuals zu implementieren. Wichtig: Die visuellen Auswertungen der Linkklicks zeigen, dass das Logo für viele Empfänger ein logisches Klickelement ist und daher unbedingt zur Home Page oder zu relevanten Content verlinken sollte.

Das Kopfbild: Starke Bildsprache, auflockernde GIFs und Illustrationen im Key-Visual

Wie heißt es doch so schön? „Ein Bild sagt mehr als tausend Worte.“ Gerade im E-Mail-Marketing steckt viel Wahrheit in diesem Sprichwort – und sicherlich auch viele wertvolle Klicks in der Umsetzung. Für das Erfassen von bildlichen Inhalten benötigen Menschen nur einen Bruchteil der Zeit, die sie für das Erfassen von Texten brauchen. Gleichzeitig haben Sie nur wenige Augenblicke, um die Abonnenten von Ihrem Inhalt zu überzeugen: Die durchschnittliche Lesezeit pro E-Mail beträgt gerade mal knapp 11 Sekunden (Email Attention Spans Increasing, Litmus, 2017). Gerade im Kopfbild eignen sich Visuals daher perfekt, um die Kernaussage Ihres Newsletters zu kommunizieren.

Eine aussagekräftige Bildsprache spielt im Newsletter-Design eine große Rolle: Ein entscheidender Faktor für eine gute Gesamtperformance ist ein aussagestarkes Key-Visual im Primär-Content. Nutzen Sie großformatige und hochauflösende Bilder, um eine Stimmungswelt für Ihren Newsletter zu erzeugen. Im Zuge des Mobile First-Ansatzes sind einige Versender sogar dazu übergegangen, das traditionell horizontal-ausgerichtete Bildformat durch vertikale Kopfbilder zu ersetzen. Wenn nötig, integrieren Sie unterstützende Texte und Konvertierungselemente und erzeugen so eine zweite Ebene auf dem Bild. Durch den Einsatz von animierten GIFs können Sie Ihrem statischen E-Mail-Design ein kreatives Highlight hinzufügen. Somit erzeugen Sie einen Blickfang und ein auflockerndes Conversion-Element.
Das Editorial: Mit einem durchdachten Teaser den Newsletter Inhalt einleiten
Im Zusammenspiel mit dem Header-Bild ist das Editorial ein Schlüsselelement, um den Inhalt des Newsletters zu kommunizieren und zum Weiterlesen oder zum Klicken zu animieren. Hier heißt es, weniger ist oft mehr – Minimalismus gilt auch im Editorial. Versuchen Sie im Primärcontent, aktivierende Texte zu schreiben, die den Inhalt aussagekräftig anteasern und zum Klicken animieren. Oft reichen schon wenige, aktivierende Sätze. Auch hier empfehlen wir, eine Verlinkung im Text oder als abschließenden CTA-Button einzubinden. Auf einer Landingpage haben Sie reichlich Platz, um weitere Infos an interessierte Klicker zu kommunizieren. Neben dem Inhalt spielt auch die Gestaltung der Texte eine gewichtige Rolle. Hier stechen besonders die Überschriften heraus.

Die richtige Schriftart in den Headlines

Überschriften haben eine herausragende Funktion im Newsletter, denn sie ziehen die visuelle Aufmerksamkeit auf sich und sorgen somit für Struktur im Lesefluss. Überschriften sind bestenfalls klar formuliert und leiten die weiteren Inhalte sinnvoll ein. Aufgrund der herausragenden Wichtigkeit der Headlines empfehlen wir, diese gestalterisch vom Rest des Newsletters abzusetzen. Dabei können Ihnen sogenannte Web-Font-Services helfen, die Ihnen die Nutzung von Hausschriften und hochwertigen Schriften im Newsletter ermöglichen.

Schriften tragen im Newsletter maßgeblich zum Ton und der Persönlichkeit einer Marke bei. Immer mehr E-Mail-Marketer trauen sich deshalb, Ihre markeneigene Hausschrift via Web-Fonts in ihre Mailings einzubinden. Damit Newsletter-Empfänger in einer E-Mail eine bestimmte Schrift angezeigt bekommen, ist es notwendig, dass die entsprechende Schrift auf dem Gerät des Empfängers vorhanden ist. Auf den meisten Geräten sind Standard-Systemschriften wie zum Beispiel Arial, Verdana, Georgia, Times New Roman und Courier installiert. Ist in einer E-Mail nichts definiert, oder eine vorgegebene Schrift nicht auf einem Gerät vorhanden, wird eine der Standardschriften zur Anzeige verwendet. Diese Schriften werden deshalb auch als „Web-Safe-Fonts“ oder „E-Mail-Safe-Fonts“ bezeichnet. Aufgrund der hohen Verbreitung werden diese Schriften oft im E-Mail-Marketing verwendet. Besonders wichtig ist es also, passende Fallback-Fonts zu definieren, falls Web-Fonts von einem E-Mail-Client nicht dargestellt werden können. Allerdings erlauben diese Standard-Schriften eben keine exakte Umsetzung von Corporate-Design-Vorgaben.

Im Gegensatz zu Standard-Systemschriften eines Geräts werden Web-Fonts beim Aufrufen einer Website oder E-Mail von einem externen Webserver zur Anzeige geladen. Browser oder E-Mail-Clients nutzen die geladenen Schriften zur Darstellung des Textes. Mittlerweile gibt es eine Reihe von kostenlosen Web-Fonts Services, wie beispielsweise Google Fonts. Damit erhalten E-Mail-Marketer weiteren kreativen Spielraum bei der Gestaltung Ihrer Mailings und können die eigene Marke kanalübergreifend in einem einheitlichen Look & Feel präsentieren.

Erfreulicherweise werden Web-Fonts bereits von vielen E-Mail-Clients unterstützt. Je nach Zusammensetzung des eigenen Verteilers spricht deshalb nichts gegen die Verwendung von Web-Fonts.

Diese E-Mail-Clients unterstützen zurzeit die Darstellung von Web-Fonts:
Outlook2000, Outlook.com App, iOS Mail, Apple Mail, Native Android E-Mail App (eine Ausnahme ist Gmail: Hier werden seit April 2018 die beiden populären Web-Fonts Google Sans and Roboto unterstützt, Thunderbird. (Stand: 9/2020)

Sticht ins Auge: CTA-Buttons und Klickelemente

Die Newsletter-Performance wird maßgeblich anhand von Klicks und Klickraten gemessen. Call-to-Action-Elemente stechen optisch aus dem Lesefluss heraus und haben somit eine übergeordnete Relevanz für die Klickperformance Ihrer Nachricht. Besonders Buttons werden weitläufig als Call-to-Action-Elemente bezeichnet. Übersetzt ist ein Call-to-Action eine Handlungsaufforderung – und genau diesen Zweck erfüllen diese Komponenten auch im Newsletter: sie sollen den Empfänger zum Klicken animieren. CTA-Elemente setzen sich farblich idealerweise vom Rest des Newsletters ab, indem sie sich aus einer Primärfarbe aus der brandeigenen Farbwelt bedienen. Dabei spielt nicht nur die Gestaltung eine Rolle, sondern auch die textliche Ausführung ist wichtig. Auch hier können Sie mit verschiedenen stilistischen Mitteln arbeiten, neben dem Standard-Repertoire der Handlungsaufforderungen (Bsp. „Zum Produkt“, „Weiterlesen“, „Jetzt entdecken“) haben Sie grenzenlose Möglichkeiten, Ihre CTAs zu kommunizieren. Haben Sie vielleicht auch schonmal über Personalisierungen im Button nachgedacht (Bsp. „Marius, finde dein Top-Style“)?

Ein runder Abschluss im Footer

Der Footer ist der unterste Teil des Newsletters. Der Fußbereich ist – ähnlich wie der Header – eine Konstante im Newsletter-Design, da die aufgezeigten Informationen in der Regel von Ausgabe zu Ausgabe gleich sind. Ein guter Fußbereich schließt den Newsletter rund ab. Gestalterisch setzen viele Versender ihren Footer durch eine andere Hintergrundfarbe vom Rest des Newsletters ab. Neben rechtlich notwendigen Informationen, können im Footer wichtige werbliche Elemente untergebracht werden. Dabei gibt es drei Elemente, die im Footer enthalten sein müssen: 1) das Impressum als Verweis auf Ihr Unternehmen, 2) der Abmeldelink als Möglichkeit, das Werbeeinverständnis zurückzuziehen, und 3) einen Verweis zur Datenschutzerklärung. Weiter empfehlen wir, Ihren Empfängern im Footer die Möglichkeiten zur Kontaktaufnahme (bspw. Ihre Support-Hotline oder E-Mail-Adresse) anzubieten. Auch ist hier der perfekte Platz, Ihre Präsenzen in den sozialen Medien darzustellen und so für Ihre Social-Media-Kanäle zu werben. Bieten Sie Ihren Empfängern auch die Option, über einen Link im Footer das Kundenkonto zu erreichen oder eigene Newsletter-Präferenzen einzustellen.

Für Profis: Der Wow-Effekt und Interaktivität im E-Mail-Design

E-Mail-Marketer drehen stetig an den Optimierungsschrauben, um kleine Performance-Verbesserungen zu bewirken. Allerdings fällt es im Newsletter-Wirrwarr oft schwer, aus der Masse herauszustechen und mit individuellen und auffallenden Inhalten, und überdurchschnittlicher Benutzerfreundlichkeit, zu überzeugen. Einige Unternehmen setzen daher bereits heute auf Interaktivität als Engagement-Hebel, um ihre Abonnenten schon in der E-Mail mit innovativen Ansätzen zum Staunen bringen. Wow-Effekt garantiert!

Innovative Newsletter sind nicht mehr linear, sondern bieten den Abonnenten die Möglichkeit zur Interaktion innerhalb der E-Mail. Mit einer Aktion (z. B. ein Klick, Mouseover oder Scrollen) wird eine Reaktion innerhalb des Newsletters ausgelöst. Das Ziel ist die Verbesserung der Benutzerfreundlichkeit und die Steigerung des Kunden-Engagements. Beispielsweise ermöglicht ein aufklappbares Hamburger-Menü dem Kunden bereits in der Kampagne die Navigation auf der Webseite: mit einem Klick in diesem Menü gelangt er in die jeweilige Kategorie der Seite.

Eine andere Idee, ist die Integration von klickbaren Bild-Karussellen zum Anteasern von besonderen Produkten und Angeboten. Einige innovative Unternehmen setzen schon heute Review-Formulare im Newsletter ein, mit denen die Kunden bereits in der E-Mail mit der Produktbewertung beginnen können. Aber Achtung: Die Implementierung ist weiterhin stark von den vorhanden technischen Möglichkeiten des E-Mail Service Providers (ESP) abhängig – und der Client-Support (Gmail, GMX, Outlook) dieser Innovationen ist leider noch begrenzt.