Juliane Heise

// Country Marketing Manager D/A/CH

Um E-Mail Kampagnen jeglicher Art erfolgreich zu versenden, ist das Beherrschen der Grundlagen entscheidend. Dazu gehören auch das E-Mail Design.

Aus diesem Grund haben wir für Sie einen kleinen Grundlagenkurs zum Thema E-Mail Design zusammengestellt. In diesem erhalten Sie alle notwendigen Informationen, die Sie benötigen, um E-Mail Vorlagen zu gestalten, die nicht nur optisch überzeugen.

 

Das macht eine gute E-Mail Vorlage aus

Es gibt nicht die eine E-Mail Vorlage, die für jede Art E-Mail passt. Doch es gibt bestimmte Grundprinzipien, die für verschiedene Branchen und Einsatzzweck universell gelten.

Um Ihre E-Mail Vorlage perfekt auf Ihre Kunden, Zielgruppen und Newsletter Abonnenten abzustimmen, gilt es einige grundlegende Dinge zu beachten. Eine gute E-Mail Vorlage erfüllt stets folgende Punkte:

E-Mail Layout
Grundgerüst ist vorhanden
Das E-Mail Layout ist responsive
Vorlage 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 E-Mail Designs haben den gleichen “Look and Feel”
Unternehmenslogo befindet sich im oberen Bereich
CI Farben werden verwendet
E-Mail Template beinhaltet viel weiße Fläche
Die Kernbotschaft sticht visuell raus
Pro Newsletter nur ein interaktives Element
Inhaltliche Gestaltung
Vorlage 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
E-Mail Design ist A/B getestet

 

Checkliste: Die Grundprinzipien einer gelungenen E-Mail Vorlage

 

Lassen Sie uns im Folgenden jedes einzelne Element im Detail besprechen.

 

Das grundlegende E-Mail Layout festlegen

Grundlegendes zum Layout

Beim Thema E-Mail Vorlage gilt es zwei Elementen besondere Beachtung zu schenken:

  1. das E-Mail Layout sowie
  2. dessen inhaltliche Platzierung

 

Das Layout ist das Grundgerüst Ihrer E-Mail und legt die Spaltenanzahl und die Reihenanordnung fest.

Die inhaltliche Platzierung definiert, an welcher Stelle textliche oder grafische Elemente sowie die Call-to-Actions positioniert werden, jedoch nicht den genauen Wortlaut, Bild oder Buttontext an sich.

Beispiel Anordnung eines Layouts

Inhaltliche Platzierung

 

Greifen Sie zu einem Responsives Design

Bereits jede zweite E-Mail wird auf mobilen Endgeräten wie Smartphone und Tablet geöffnet, Tendenz steigend. Ein Blick in Ihre E-Mail Statistiken gibt Ihnen Auskunft darüber, welcher Empfänger welchen E-Mail Client nutzt:

E-Mail Clients herausfinden

Die E-Mail Statistiken von Mailjet zeigt Ihnen ganz genau, welcher Empfänger wann und wie mit Ihren E-Mail interagiert hat (geöffnet, angeklickt, blockiert, als Spam markiert, abgemeldet etc.) und mit welchem Gerät er dies tat.

 

Das responsive Design passt sich aufgrund des CSS3-Codes automatisch an die Endgeräte der Empfänger an. Bei dieser flexiblen Darstellung werden Layout, Text, Bilder, Buttons und Schriftgröße entsprechend des Endbildschirms angepasst.

Greifen oder erstellen Sie immer zu einem responsiven E-Mail Layout. Wir bei Mailjet beispielsweise verfügen über 7 Basislayout und über 30 vordesignte Newsletter Vorlagen, die Sie kostenlos und rechtsfrei einsetzen können.

 

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

Anmelde Banner Blo Mailjet

Wie breit sollte die E-Mail Vorlage sein?

Damit Ihr E-Mail Layout auf verschiedenen Geräten perfekt angezeigt werden, achten Sie auf die E-Mail Breite. Ideal ist eine Breite zwischen 500 und 680 px.

Responsive E-Mail Vorlage auf verschiedene Geräte angezeigt

 

Beim Responsive Design passt sich die E-Mail Vorlage an dem Bildschirm des Gerätes automatisch an.

Die 3 Teile einer jeden E-Mail Vorlage

Eine jedes designtes E-Mail Template besteht aus:

  1. Banner
  2. Hauptteil
  3. Fußzeile

 

Trennen Sie im E-Mail Layout Titelbild, Hauptteil und Fußzeile klar voneinander. Arbeiten Sie hier mit Bildern oder farblichen Unterschieden, um eine optische Trennung vorzunehmen.

Eine solch klare Struktur sorgt dafür, dass die Empfänger Ihre E-Mail Inhalte und vor allem die Kernbotschaft/-anliegen sofort erfassen.

Sie müssen nicht das E-Mail Design bei jeder neuen Kampagne grundlegend neu anpassen. Bleiben Sie stringent. Versuchen Sie, in all Ihren E-Mail Vorlagen ein ähnliches Format zu benutzen, da Benutzer den gleichen “Look and Feel” erwarten.

 

Der Banner

Fügen Sie Ihr Unternehmenslogo in den oberen Bereich ein, damit die Leser die E-Mail sofort Ihnen zuordnen können.

Das Titelbild schafft einen Übergang zum E-Mail Inhalt und sorgt für eine sofortige Wiedererkennung. Dieser Bereich ist in der Regal starr. Das heißt, er ändert sich von E-Mail zu E-Mail nicht, um eine gewisse Einheitlichkeit zu garantieren.

E-Mail Banner in diversen Mailjet Marketing Newsletter

Der Bannerbereich des deutschen, englischen, französischen und spanischen Mailjet Marketing Newsletters unterscheidet sich nur lediglich in der Sprache.

 

Der E-Mail Banner kann sich jedoch je nach E-Mail Typ unterscheiden, wie etwa bei Newslettern und Transaktions-E-Mails.

Mailjet E-Mail Header Produktnewsletter und Willkommens-E-Mail

E-Mail Header von Mailjets Produktnewsletter und Willkommens-E-Mail im Vergleich.

 

Der Hauptteil

Im Hauptteil befindet sich die “eigentliche” E-Mail und beinhaltet den Text sowie die Grundaussagen. Dieser Bereich lässt sich wiederum in einzelne Teile aufteilen.

Sie können hier bei Bedarf verschiedene Spalten und Abschnitte hinzufügen und individuell gestalten.

Beispiel Newsletter Template Layout

 

Die Fußzeile

Die Fußzeile enthält die Unternehmensinformationen (Impressum) sowie den Abmeldelink. Rechtlich notwendige Informationen wie Impressum sind obligatorische Angaben und daher ohne Ausnahme in jeder E-Mail einzufügen.

Bei Marketing E-Mails jeglicher Art wie etwa Newslettern oder saisonale Marketing E-Mails ist darüber hinaus ein Abmeldelink verpflichtend.

Newsletter Abmeldelink
Die Fußzeile unseres Marketing Newsletters
 

 

Die inhaltliche Anordnung in der E-Mail Vorlage

Wie viele Spalten und Abschnitte sind sinnvoll?

Diese Frage lässt sich nicht so einfach beantworten.

Generell gilt: Eine E-Mail sollte in den meisten Fällen eine zentrale Botschaft haben. Sofern Sie planen, verschiedene Nachrichten zu kommunizieren, versuchen Sie diese auf mehrere E-Mails aufzuteilen.

Legen Sie den Fokus auf ein Kernelement. Auf diese Weise gehen Sie sicher, dass jede Nachricht die Aufmerksamkeit erhält, die Sie sich wünschen.

Eine der wenigen Ausnahmen bildet der Newsletter. In diesem Typ Mailing können Sie mehrere Inhalte anteasern. Doch achten Sie auch hier darauf, nicht zu viele Inhalte gleichzeitig zu bewerben. Denn Statistiken zeigen, dass 80% der Leser das erste beworbene Element anklicken. Mehr als vier sollten es nicht sein.

Vermeiden Sie in jedem Fall solch lange E-Mails:

 

  • Verwenden Sie im Hauptteil Überschriften und Aufzählungslisten.
  • Meiden Sie auch lange Textblöcke. 50 Wörter pro Textblock sind bei designten E-Mail Templates ein guter Richtwert.

 

Auf diese Weise teilen Sie Ihre Inhalte in logische Abschnitte auf, die leicht zu verstehen sind. Das hilft insbesondere Scannern und damit wahrscheinlich weit über 80% Ihrer Empfänger.

 

Wie sollte man die Inhalte in der E-Mail Vorlage anordnen?

Setzen Sie anschließend die wichtigste Information an den Anfang oder in die Nähe davon. Je mehr Ihre Leser scrollen müssen, desto höher ist die Wahrscheinlichkeit, dass diese nur einen Teil dessen lesen.

Sorgen dafür, dass alle Elemente zu allen Seiten genügend Abstände haben. Dies lenkt nicht nur das Auge unweigerlich auf die wichtigsten Bereiche, sondern verringert auch die Gefahr von überlappenden Inhalten.

E-Mail Design verschoben

Verschobene und überlappende E-Mail Elemente sehen alles andere als professionell aus.

 

Wenn Sie eine Menge Informationen zu vermitteln haben, erstellen Sie eine Seite, auf der Ihre Empfänger weiterführende Informationen erhalten und verlinken Sie zu dieser.

 

Gibt es eine minimale Schriftgröße?

Stellen Sie sicher, dass die Inhalte in Ihrer E-Mail Vorlage gut lesbar sind. Achten Sie darauf, dass die eingebundenen Links einen ausreichenden Abstand zueinander haben. So haben die Empfänger keine große Mühe, den richtigen Link zu öffnen und geraten mit ihren Fingern nicht auf den falschen Link.

Informieren Sie sich über die minimalen Schriftgrößen für verschiedene Plattformen. Wir empfehlen eine minimale Schriftgröße von 13 Pixeln.

 

Den Call-to-Action richtig angehen

Der Call-to-Action Button ist der wohl entscheidendste Teil des E-Mail Designs. Ihre E-Mail hat einen bestimmten Zweck – zumindest hoffen wir das. Bedenken Sie bei der Gestaltung, dass Sie nur wenige Sekunden haben, den Empfänger zu überzeugen.

Der Call-to-Action sollte daher Ihre Absicht klar widerspiegeln und deutlich machen, welche konkrete Handlung Ihr Empfänger nun ausführen soll (Blogartikel lesen, Guide herunterladen, Produkt kaufen etc.). Sorgen Sie dafür, dass er leicht identifizierbar ist und nicht zu weit unten in der E-Mail platziert wird.

Vergewissern Sie sich, dass der Call-to-Action Button tap-friendly ist. Das heißt, der Button muss groß genug sein, dass es einfach ist, diesen auf einem Mobilgerät anzuklicken.

Platzieren Sie keine anderen Links nahe des Call-to-Action Buttons, sodass diese nicht versehentlich geklickt werden.

CTA Position

 

Die visuelle Gestaltung der E-Mail Vorlage

Bilder und andere visuelle Elemente werden vom Auge als erstes erfasst. Mehrere Studien zeigen, dass über 90% aller Informationen, die das menschliche Gehirn erreichen, visueller Natur sind und dieses bis zu 60.000 Mal schneller erreichen.

Wenn Sie grafische Inhalte richtig einsetzen, sind diese enorm wirkungsvoll. Achten Sie darauf, solche Elemente Ihrer Markenidentität anzupassen.

 

Gibt es ein ideales Bild:Text Verhältnis?

Der Reiz, eine E-Mail Vorlage überwiegend mit Bildern und anderen grafischen Elementen zu bestücken, ist natürlich hoch. Die Nachricht sieht oftmals besser aus.

Doch:

Zu viele grafische Elemente wirken sich negativ auf die E-Mail Zustellbarkeitsrate aus. Diese Praxis ist nämlich eine beliebte Taktik von Spammern. Das wissen auch die ISPs und blockieren oftmals solche E-Mails.

Setzen Sie daher auf ein ausgewogenes Verhältnis von Text und Grafik. Wir empfehlen ein Verhältnis von Text zu Bild von 60:40 oder 70:30.

 

Welche Bildformate eignen sich für E-Mail Vorlagen?

Für E-Mails eignen sich verschiedene Bildformate. Die beiden am weitesten verbreitete Bildformate JPEG und PNG eigenen sich auch für E-Mails.

Jedes Format hat jedoch seine spezifischen Eigenschaften (u.a. Bildqualität, Dateigröße, Komprimierbarkeit):

Vorteile Nachteile
Darstellung von 16,8 Millionen Farben Ein gewisser Qualitätsverlust beim Komprimieren
Gut für Fotos und Bilder mit zahlreichen Farben Nicht optimal für Bilder mit Textinhalten
Lassen sich unbegrenzt komprimieren Rein statisches Format
Relativ kleines Dateiformat Keine Transparenzanzeige

Tabelle: Die Vorteile und Nachteile von JPEG-Bildern in E-Mails

 

Vorteile Nachteile
Darstellung von zahlreichen Farben Größere Dateigröße insb. bei großen Bildern
Darstellung von farbintensiven und komplexen Bilder Nicht alle E-Mail Clients unterstützen PNG
Komprimierung ohne Qualitätsverlust Rein statisches Format
Sehr gut geeignet für Bilder mit Textinhalten möglich
Geeignet für Bilder, die Transparenz erfordern
Bilder, die erneut bearbeitet und exportiert werden müssen

Tabelle: Die Vorteile und Nachteile von PNG-Bildern in E-Mails

 

Ob JPEG oder PNG das für Sie geeignete Bildformat ist, hängt von Ihren Anforderungen ab. Wir bei Mailjet beispielsweise bevorzugen das PNG-Format für unsere Newsletter.

 

Wie viele multimediale Inhalte kann ich verwenden?

Sofern Sie interaktive Grafiken oder Videos in Ihre E-Mail Vorlagen integrieren möchten, halten Sie sich an folgende Regel: pro Nachricht nur ein interaktives Element.

Verwenden Sie mehrere solcher Elemente, werden Ihre Empfänger statt begeistert überfordert sein und Ihrer Kernaussage wahrscheinlich nicht erfassen.

In Hinblick auf den zunehmenden E-Mail Konsum auf mobilen Endgeräten ist die Bereitschaft solche Inhalte unterwegs zu konsumieren eh geringer als bei Desktop-Bildschirmen, sofern die Nutzer hierbei das mobile Datenvolumen anzapfen müssen.

 

Was sind die für E-Mail Vorlagen besten Farben?

Farben in E-Mails haben eine wichtige Stellung. Sie:

  • unterstreichen den E-Mail Inhalt,
  • lenken die Aufmerksamkeit auf bestimmte Bereiche,
  • und können den Empfänger zu einer bestimmten Aktion bewegen.

Die in Ihren E-Mail Designs verwendeten Farben, sollten Ihren CI entsprechen. Gelb und Grau sind beispielsweise die Corporate Farben von Mailjet und wir verwenden diese bei ALLEN unserer E-Mails.

automatisierte Willkommens-E-Mail

Unsere CI Farben gelb und grau sind die einzigen Farben, die wir in unserer Willkommens-E-Mail verwenden.

 

Kombinieren Sie Ihre CI Farben mit viel weißer Fläche. Dies sorgt für Klarheit und wirkt professioneller.

Beispiele für verschiedene Farbdesigns
Wählen Sie pro E-Mail maximal zwei Farben aus. Je weniger Farben Sie verwenden, desto “sauberer” wird Ihr Design aussehen und Ihre E-Mail Vorlage wirken professionell.

Sofern Sie andere Farben als Ihre Corporate Design Farben verwenden, achten Sie darauf, dass diese miteinander harmonieren. Welche Farbtöne sich optimal kombinieren lassen, kann sich von Nuance zu Nuance unterscheiden.

 

Was jetzt?

Sind Ihnen die Grundlagen des E-Mails Designs erstmal bekannt, wird es Ihnen nicht mehr schwer fallen erfolgreiche E-Mail Kampagnen zu versenden.

Damit Sie Ihr neuerlerntes Wissen sofort in der Praxis anwenden können, loggen Sie sich bei Mailjet ein oder eröffnen ein neues kostenloses Konto.

Anmelde Banner Blo Mailjet