Juliane Heise

// Country Marketing Manager D/A/CH

Der Newsletter zählt zu den wichtigsten Nachrichten innerhalb des E-Mail Marketings. Doch viele Newsletter sind eher gruselig anzuschauen als eine optische Augenweide.

In diesem Artikel lernen Sie, wie Sie ansprechende und auf Conversion ausgerichtete Newsletter Templates erstellen.

 

Warum das Newsletter Design wichtig ist

Grundlegendes zum Corporate Design

Das Corporate Branding hat die Aufgabe, das Unternehmen als Marke und in der Öffentlichkeit, bei Kunden, Investoren sowie bei Mitarbeitern zu etablieren. Dies ist insofern wichtig, da Produkte in der Regel einen eingeschränkten Lebenszyklus haben.

Anders die Marke. Wenn diese richtig aufgebaut ist, kann diese theoretisch ewig bestehen.

Das Corporate Design als Teil des Corporate Brandings spielt dabei eine wesentliche Rolle. Es überträgt:

  • Version
  • Positionierung
  • Unternehmenskultur
  • Strategie in ein visuelles Erscheinungs- und Wiedererkennungsbild

 

Das Branding hat einen wesentlichen Anteil daran, dass die Kunden einer Marke treu bleiben. Es überträgt:

  1. Emotionalität
  2. Zusammengehörigkeitsgefühl
  3. Beständigkeit
  4. Klarheit
  5. sorgt für Abgrenzung zur Konkurrenz (als eine Art Alleinstellungsmerkmal)
  6. Kunden und Zielgruppe wissen, was Ihnen beim Kauf eines Produktes/einer Dienstleistung erwartet.

 

Das Newsletter Template Design als Teil des Corporate Designs

Das Design eines Newsletters hilft Ihnen, die wachsende Bedeutung des Brandings ins digitale Umfeld zu übertragen.

Das Aussehen einer E-Mail Vorlage ist wiederum ein wesentlicher Erfolgsfaktor für die Newsletter Marketing Performance. Gute Newsletter Vorlagen sorgen dafür, dass

  1. die E-Mails geöffnet
  2. Neuabonnenten einen positiven ersten Eindruck bekommen
  3. die beworbenen Inhalte als hochwertig angesehen werden

 

Das Resultat: Conversionstarke Empfänger, die Ihren Newsletter treu bleiben.

Bedenken Sie bei der Gestaltung, dass Sie nur wenige Sekunden haben, den Newsletter Abonnenten zu überzeugen. Die E-Mail Vorlage, sofern gut gemacht, sorgt dafür, dass Ihnen dies gelingt.

 

Die Grundelemente einer guten Newsletter Vorlage

Es gibt keine magische Formel, die angewendet werden kann, um ansprechende und conversionstarke Newsletter Vorlagen mit 100% Öffnungs- und Klickraten zu erstellen.

Doch gibt es gewisse Grundprinzipien, die für alle Branchen und Einsatzzwecke universell gelten. Hierbei ist es unerheblich, ob Sie eine vorgefertigte E-Mail Vorlage nehmen und diese ggf. individuell anpassen oder ein Newsletter Template von Grund auf erstellen.

Ein gutes Newsletter Designs beinhaltet Folgendes:

Layout
Grundgerüst ist vorhanden
Das Newsletter Layout ist responsive
Newsletter beinhaltet Titel, Hauptteil und Fußzeile
Titel, Hauptteil und Fußzeile sind klar voneinander abgetrennt
Die Breite bewegt sich zwischen 500 und 680 px
Visuelle Gestaltung
Verschiedene Newsletter Designs haben den gleichen “Look and Feel”
Unternehmenslogo befindet sich im oberen Bereich
CI Farben werden verwendet
Newsletter Template beinhaltet viel weiße Fläche
Die Kernbotschaft sticht visuell raus
Pro Newsletter nur ein interaktives Element
Inhaltliche Gestaltung
Newsletter hat eine zentrale Botschaft
Die wichtigsten Infos stehen am Anfang
Textblöcke sind nicht zu lange
Überschriften und ggf. Aufzählungen sind vorhanden
Inhalte sind gut lesbar
Text zu Bild Verhältnis ist 60:40 oder 70:30
Der Call-to-Action (Button etc.) sticht heraus
Der Call-to-Action (Button etc.) ist gut anklickbar
Sonstiges
Abmeldelink ist vorhanden (bei Marketing E-Mails)
Impressum ist vorhanden
Newsletter Design ist A/B getestet

Checkliste: Die Grundprinzipien einer gelungenen Newsletter Vorlage

 

Schauen wir uns nun die einzelnen Punkte genauer an.

 

Newsletter Vorlage erstellen: Schritt-für-Schritt Anleitung

1. Responsives Newsletter Design auswählen

Je nach Hersteller und Version fallen Bildschirmgrößen bei Endgeräten unterschiedlich aus. Dies hat zur Folge, dass E-Mails auf verschiedenen Endgeräten unterschiedlich angezeigt werden.

Eine perfekte Darstellung des Newsletter Templates auf verschiedensten Geräten ist daher wichtig.

Denn:

Die Zeiten, bei dem E-Mails ausschließlich auf dem Desktop-Computer gelesen werden, sind vorbei. E-Mails, ob im beruflichen oder im privaten Umfeld, werden bereits auf verschiedensten mobilen Endgeräten gelesen.

Verteilung Öffnungen E-Mails auf verschiedene Geräte

Nur noch jede dritte E-Mail wird auf dem klassischen Desktop-Bildschirm geöffnet: Bild von Marketingland

 

Beim responsiven E-Mail Design passt sich der Newsletter automatisch an das jeweilige Endgerät an. Dies geschieht durch die Anwendung von CSS3-Codes. Diese fragen einzelne Merkmale wie Bildschirmgröße, Format und Auflösung ab. Form, Größe, Text und Spaltenausrichtung des Newsletters werden so optimiert, dass alles perfekt auf dem Bildschirm des jeweiligen Gerätes angezeigt wird.

Wählen Sie daher immer eine responsive Newsletter Vorlage aus.

Wir bei Mailjet beispielsweise verfügen über 7 Basislayout und über 30 vordesignte Newsletter Vorlagen, die Sie kostenlos und rechtsfrei einsetzen können.

Marketing E-Mail Vorlagen von Mailjet.

 

Um diese Newsletter Vorlagen zu nutzen oder herunterzuladen, loggen Sie sich ein oder erstellen Sie ein neues kostenloses Konto:

Anmelde Banner Blo Mailjet

 

2. Layout der Newsletter Vorlage anpassen

Der zweite Schritt zu einer ansprechenden Newsletter Vorlage ist die Festlegung des Layouts. Beim Layout handelt es sich um das Grundgerüst einer E-Mail. Es definiert die Abschnitte Spaltenanzahl, die Reihenanordnung sowie die genaue Position der textlichen und grafischen Elemente.

Aufbau eines Newsletter Templates

Verschiedene Abschnitte und Spalten in einer Newsletter Vorlage

 

Das Layout selbst setzt sich aus den drei großen Bereichen Kopfteil, Hauptteil und Fußzeile zusammen. Jeder dieser drei Bereiche lässt sich in einzelne Abschnitte und Spalten unterteilen.

  • Der Kopfteil beinhaltet das Unternehmenslogo und ggf. eine Navigation mit verschiedenen Links zu der Unternehmenswebseite.
  • Teaserbild(er) und Inhalte finden Ihren Platz im Hauptteil der E-Mail Vorlage.
  • Die Fußzeile beinhaltet Elemente wie Social Media Links, weitere Logos sowie rechtlich notwendige Informationen wie Impressum und den Abmeldelink.

Newsletter Abmeldelink

Fußzeile des Mailjet Newsletters.

 

Wie viele Spalten sollte der Newsletter haben?

Um Newsletter Vorlagen ideal für mobile Endgeräte vorzubereiten, ist es grundsätzlich zu empfehlen, die Spaltenanzahl zu reduzieren. Dies minimiert die Gefahr vor Verzerrungen und nach rechts gehende Scrollbalken.

Wir empfehlen, die Spaltenzahl auf 2 zu begrenzen. Unser Newsletter beispielsweise besteht nur aus einer Spalte.

Blick in den deutschsprachigen Newsletter von Mailjet

Einspaliges Layout des Mailjet Newsletters

 

Haben Sie eigentlich schon unseren Newsletter abonniert und erhalten Sie wöchentlich die besten Tipps und Tricks rund ums E-Mail Marketing sowie exklusive Inhalte bequem in Ihrem Posteingang? Wenn nicht, dann können Sie sich jetzt problemlos anmelden:

Ja, senden Sie mir den Mailjet Newsletter zu. Ich bin ausdrücklich damit einverstanden, den Newsletter zu erhalten und weiß, dass ich mich jederzeit problemlos wieder abmelden kann.

Mailjet Newsletter abonnieren

Ja, senden Sie mir den Mailjet Newsletter zu. Ich bin ausdrücklich damit einverstanden, den Newsletter zu erhalten und weiß, dass ich mich jederzeit problemlos wieder abmelden kann.

 

Was ist die optimale Breite des Newsletter Templates?

Achten Sie aber darauf, dass die Breite stets zwischen 500 und 680 px beträgt. Ist der Newsletter zu schmal, dann besteht die Gefahr, dass die Inhalte zu klein oder verzerrt angezeigt werden.

Das das Layout dagegen breiter werden Teile des Newsletter Inhaltes abgeschnitten und/oder ein hässlicher Scrollbalken erscheint.

Sofern Sie nicht mit Pixel arbeiten und damit keine bestimmten Elemente mit fester Weite haben, können Sie die Tabellenbreite auch auf 100% setzen. Auf diese Weise wird Ihr Newsletter bei allen E-Mail Clienten über die ganze Breite angezeigt.

 

Brauche ich überhaupt ein Newsletter Design?

Nicht unbedingt.

Sofern Sie dennoch längere Newsletter bevorzugen oder sogar in den Bereich E-Mail Blogging gehen, können Sie auch auf ein aufwändigeres Newsletter Design verzichten

Wählen Sie einfach ein einspaltiges Basislayout aus.

Basis Newsletter Vorlage Mailjet E-Mail Editor

Die klassische “1-Spalten Basis” E-Mail Vorlage von Mailjet

 

Tipp: Markieren die wichtigsten Wörter. Auf diese Weise kann der Leser den Inhalt schnell scannen und entscheiden, ob der Inhalt für ihn relevant ist oder nicht.

 

 

3. Die im Newsletter Template verwendeten Farben festlegen

Gut gemachte E-Mail Vorlagen strahlen Professionalität aus. Dies erreichen Sie, indem Sie in all Ihren E-Mails ein ähnliches Layout verwenden. Nicht nur geben Sie Ihren Nachrichten damit einen gleichen “Look and Feel”. Auch erreichen Sie, dass Ihre E-Mail Empfänger Inhalt und Kernbotschaft sofort erfassen.

Neben dem Layout spielen die verwendeten Farben eine entscheidende Rolle. Diese sollten Ihren Corporate Design Farben entsprechen. Für zusätzliche Klarheit und Professionalität kombinieren Sie Ihre CI Farben im Newsletter Template mit viel weißer Fläche.

Haben Sie im Blick, dass verschiedene Zielgruppen unterschiedlich auf Farben reagieren. Wenn Sie bestimmte Farben für Ihre Zielgruppen und Anlässe verwenden, können Sie Ihre Ergebnisse und letztendlich Ihren ROI verbessern. Achten Sie darauf, dass sich diese mit Ihren CI Farben ergänzen.

Von Weiß bis Schwarz finden Sie hier die sieben wichtigen Farben und die Gefühle, die diese hervorrufen:

Farbe Wirkung Bedeutung der Farbe
Weiß Neutralität Weiß steht für Neutralität, Sterilität und Sauberkeit. Physikalisch gesehen ist Weiß die Summe aller Farben. Aufgrund der künstlerischen Darstellungen von religiösen Figuren in weiß repräsentiert diese Farbe auch Tugend und Heiligkeit. Da Weiß die Sinne kaum stimuliert, kann eine zu intensive Nutzung es kalt und langweilig wirken lassen. In Kombination mit anderen Farben spielt sie ihre Stärken voll aus. Es hebt die anderen hervor und verstärkt deren Wirkung.Motto: Ich kann mit jedem. Überall.
Gelb Fröhlichkeit Gelb steht für Fröhlichkeit und eine aufbauende Wirkung. Die Sonnenfarbe hebt die Stimmung und lässt ein Gefühl von Sommer, Wärme sowie Süße und Genuss entstehen. Als hellste Farbe im Farbspektrum kann sie bei einer zu intensiven Nutzung aber auch anstrengend für das Auge sein und in Folge Ärger und Frustration fördern.Unternehmen mit Gelb als Markenfarbe: DHL, Hertz, IKEA, Ferrari, McDonalds, Nikon, Shell, UPSMotto: Ich bin alles andere als eine Spaßbremse
Orange Optimismus Orange steht für Exotik, Wärme, Glück, Geselligkeit, Optimismus und Vertrauen. Als Mischfarbe von Gelb und Rot vereint und entschärft es deren aufputschenden Eigenschaften. Alles ist weniger extrem.Assoziationen wie sonnige Tage und reifen Früchten sorgen dafür, dass Orange für einen positiven Blick auf das Leben steht. Durch die stimulierende Wirkung kann sie das eigene Wohlbefinden und Gesundheit verbessern.Unternehmen mit Orange als Markenfarbe: Amazon, Fanta, Harley Davidson, NickelodeonMotto: I am walking on sunshine, wow!
Rot Energie Rot hat Signalwirkung! Es ist eine überaus kraftvolle Farbe mit hohem Aufmerksamkeitsgrad. Rot steht für Liebe, Leidenschaft und Energie, aber auch für Gefahr, Wut und Aggressivität. Allein der bloße Anblick verleiht zusätzliche Energie und erhöht den Adrenalinspiegel.Doch warum sprechen wir so auf Rot an? Wissenschaften haben nachgewiesen, dass unsere starke Wirkung auf Rot auf unsere Vorfahren, die Affen, zurückgeht. Männliche Schimpansen und Paviane werden noch heute von geröteten Weibchen angezogen, wenn es bei diesen zum Eisprung kommt. Als Komplementärfarbe zu Grün fällt Rot in der Natur ganz besonders stark auf und wirkt wie ein Magnet.Unternehmen mit Rot als Markenfarbe: Canon, CNN, Coca Cola, Heinz, Kellogg’s, Nintendo, Lego, Toyota.Motto: Schau mich an!
Violett Wertigkeit Violett ist eine besondere Farbe. Da diese Farbe früher nur schwer herzustellen war, verbinden Menschen sie noch heute mit Luxus, Macht und Reichtum sowie Magie, Mystik und Spiritualität.Unternehmen mit Violett als Markenfarbe: Barbie, Deutsche Telekom, Milka, Monster, Taco Bell, Yahoo.Motto: Achtung, ich bin kostbar!
Blau Vertrauen Blau gilt als die Farbe der Ehrlichkeit, Loyalität und des Vertrauens. Es gilt als sanfte Farbe mit einer beruhigenden Wirkung. Blau in der Natur vorkommend bedeutet Ruhe. Blauer Himmel, blaues Wasser wirken beruhigend.Unternehmen mit Blau als Markenfarbe: Allianz, American Express, Dell, Deutsche Bank, Facebook, Ford, HP, IBM, JP Morgan, Nivea, Oral B, PayPal, Telefonica, Twitter.Motto: Bei mir kannst du sein.
Grün Wachstum Aufgrund des Zusammenhangs mit der Natur gilt Grün als die Farbe für Wachstum und eine friedliche Umgebung. Es wirkt jugendlich, leicht und natürlich. Grün liegt in der Mitte des Farbspektrums und gilt daher auch als Farbe des Gleichgewichts.Unternehmen mit Grün als Markenfarbe: Heinecken, Holiday Inn, Spotify, Starbucks, Whole Foods.Motto: Ich tu dir gut.
Schwarz Stärke An Schwarz scheiden sich die Geister. Kaum eine andere Farbe ist von seiner Wirkung her so bipolar wie diese. Schwarz steht in der westlichen Welt für Dominanz, Dunkelheit, Tod und das Ende. Gleichzeitig hat es was geheimnisvolles und Eleganz, verkörpert Individualität, Stärke und Eleganz.Unternehmen mit Schwarz als Markenfarbe: Adidas, BBC, Cartier, Chanel, New York Times, Nike, Puma, Under Armor.Motto: Ich mache keine halben Sachen.

Tab. Die allgemeine Wirkung und von Farben

 

Das Gleiche gilt für Schriftarten. Verwenden Sie in Ihren Newsletter Templates Ihre CI Schriftarten, also diejenigen, die Sie auf Ihren Webseiten, Broschüren etc. verwenden.

automatisierte Willkommens-E-Mail

Mailjets CI Farben beispielsweise sind Gelb-Orange, Hellgrau, Mittelgrau und Dunkelgrau. Diese Farben kommen in allen E-Mails zum Einsatz

 

Bedenken Sie ebenfalls den Standort, an den Ihr Newsletter gelesen wird. E-Mails werden auf dem Smartphone häufig draußen, unter freiem Himmel gelesen. Sofern Ihre Empfänger Ihren Newsletter häufig auf mobilen Endgeräten öffnen, die E-Mail Statistiken geben Ihnen darauf Antwort, passen Sie diesen dementsprechend an. Arbeiten Sie bspw. mit einem kontrastreichen Design. Die Kompatibilität mit Ihren CI Farben sollte ebenfalls gegeben sein.

4. Newsletter Inhalte richtig anordnen

Folgender Aufbau hat sich für den klassischen Newsletter bewährt: Bild, Text und Call-to-Action

  1. Fügen Sie Ihr Unternehmenslogo in den oberen Bereich ein, damit die Leser den Newsletter sofort Ihnen zuordnen.
  2. Anschließend folgt ein Bild, um die Aufmerksamkeit des Lesers zu erzielen.
  3. Abschließend folgt ein kurzer Text und einen klaren Call to Action, in der Regel ein Button oder Textlink

Newsletter Mailjet

Kleiner Tipp: Verlinken Sie auch das Bild zur betreffenden Webseite. Nicht selten klicken Newsletter Abonnenten statt auf den Button auf das Bild. Und es wäre doch schade, hier wertvollen Traffic einzubüßen.

Link in einem Bild im Newsletter einfügen Mailjet

Funktion “Bild im Newsletter verlinken” bei Mailjets Drag-and-Drop E-Mail Editor .

 

Sofern Sie mehrere Inhalte mit gleicher Wichtigkeit haben, die Sie in Ihrem Newsletter featuren möchten (neue Blogartikel, Whitepaper, Customer Success Stories etc.), wiederholen Sie den Aufbau.

Ordnen Sie die einzelnen Inhalte entweder nach Aktualität, nach Themenbereich oder Autor. Wir bei Mailjet beispielsweise nehmen eine kalendarische Anordnung vor.

 

Wie viele Themen sollte ein Newsletter maximal haben?

Newsletter im Allgemeinen tolerieren mehr Inhaltsteile als andere Marketing E-Mails. Nichtsdestotrotz sollten Sie nicht in Versuchung geraten, Ihre E-Mail zu überfrachten. Halten Sie Ihren Newsletter so kurz wie möglich. Mehr als vier verschiedene Inhalte sollten es aber nicht sein.

Positionieren Sie den wichtigsten Inhalt im oberen Bereich Ihres Newsletter Templates. So erfahren auch Eiligen, was Sie ihnen sagen wollen. Je mehr Ihre Leser scrollen müssen, desto höher ist die Wahrscheinlichkeit, dass diese nur einen Teil dessen lesen.

Untersuchungen zeigen, dass 80% der Leser immer das erst beworbene Element anklicken. Setzen Sie daher eher auf eine höhere Versandfrequenz statt Newsletterlänge.

Vermeiden Sie in jedem Fall Newsletter wie diese:

 

Bei Themen mit unterschiedlicher Wichtigkeit oder bei verschiedenen Arten von Newslettern können Sie mit verschiedenen Newslettern arbeiten. Achten Sie hierbei jedoch auf gegeseitige Stringenz.

Aufteilung von unterschiedlichen Themen auf verschiedene Nwsletter

Bespiele von Unternehmen mit mehreren Newslettern

 

Wie groß sollte die Schriftgröße im Newsletter sein?

Neben der Positionierung und Verwendung von grafischen Elementen ist eine gute Lesbarkeit die Voraussetzung für Newsletter Templates mit sehr guten Interaktionsrate. Die minimale Schriftgröße sollte 13px betragen, im Zweifelsfall größer.

In unseren eigenen Newsletter verwenden wir beispielsweise folgende Schriftgrößen:

  • Überschrift: 28px
  • Text: 16px
  • Button: 20px

 

Wie sollte das Text-Bild Verhältnis sein?

Setzen Sie bei Ihrem Newsletter Design auf ein ausgewogenes Verhältnis von Text und Bild. Ein zu hoher Anteil an grafischen Elementen wirkt sich negativ auf die Zustellbarkeitsrate aus. Der Grund: Diese Praxis ist bei Spammern eine beliebte Taktik. Das wissen auch die ISPs und sortieren solche Newsletter gerne aus.

Wir empfehlen ein Verhältnis von Text zu Bild von 60:40 oder 70:30.

 

Gibt es einen Mindestabstand zwischen den einzelnen Elementen?

Achten Sie darauf, dass sämtliche Elemente einen ausreichenden Abstand zueinander haben. Dies ist insbesondere für Links wichtig. Damit stellen Sie sicher, dass die Newsletter Abonnenten keine große Mühe haben, den richtigen Link zu öffnen.

Platzieren Sie keine anderen Links in der Nähe voneinander. Auf diese Weise vermeiden Sie, dass nicht versehentlich der falsche Link angeklickt wird.

 

Was jetzt?

Nun haben Sie all das Wissen was Sie benötigen, um Ihre Newsletter zu designen. Probieren Sie gleich aus, wie Ihre Ideen in der Praxis aussehen. Melden Sie sich kostenlos an und entwerfen Sie erfolgreiche Newsletter Templates:

Anmelde Banner Blo Mailjet