Um E-Mail Kampagnen jeglicher Art erfolgreich zu versenden, ist das Beherrschen der Grundlagen entscheidend. Das E-Mail Design, ob bei Marketing oder transaktionalen E-Mails, spielt hier eine zentrale Rolle.

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 erstellen, die nicht nur optisch überzeugen.

 

Das macht eine gute E-Mail Vorlage aus

 

Elemente eines guten E-Mail Designs
Ziele und KPIs sind definiert
Grundgerüst ist vorhanden
Verschiedene E-Mail Vorlagen haben den gleichen “Look and Feel”
Das Layout ist responsive
Die Breite bewegt sich zwischen 500 und 680 px
E-Mail beinhaltet Titel, Hauptteil und Fußzeile
Titel, Hauptteil und Fußzeile sind klar voneinander abgetrennt
E-Mail Layout hat eine klare Struktur
Unternehmenslogo befindet sich im oberen Bereich
CI Farben werden verwendet
E-Mail hat eine zentrale Botschaft
Die Kernbotschaft sticht visuell raus
Die wichtigsten Infos stehen am Anfang
Textblöcke sind nicht zu lange
Überschriften und ggf. Aufzählungen sind vorhanden
E-Mail Layout beinhaltet viel weiße Fläche
Inhalte sind gut lesbar
Text zu Bild Verhältnis ist 60:40 oder 70:30
Pro E-Mail nur ein interaktives Element
Der Call-to-Action (Button etc.) sticht heraus
Der Call-to-Action (Button etc.) ist gut anklickbar
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.

 

Die Grundelemente des E-Mail Designs

Beim Thema E-Mail Vorlage gilt es zwei Elementen besondere Beachtung zu schenken: das Layout sowie dessen inhaltliche Platzierung.

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

Der Inhalt 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

 

Bevor wir tiefer in das Thema einsteigen an dieser Stelle noch ein kleiner Hinweis. Bevor Sie sich mit dem E-Mail Design auseinandersetzen, überprüfen Sie, ob Ihre Strategie und Ziele stimmen. E-Mail Marketing ohne eine konkrete Strategie und Ziele durchzuführen ist zum Scheitern verurteilt.

 

Mailjet ist ISO zertifiziert & DSGVO konform.

 

Wie können Sie erfolgreiche, convertierende E-Mails Vorlagen erstellen, wenn Sie nicht wissen, was Sie eigentlich wollen? Sofern Sie hier noch Nachholbedarf haben, lesen Sie bitte unseren E-Mail Strategie Guide.

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.

 

Das Layout setzt sich aus den drei Bereichen Titelbild (auch Banner bezeichnet), Hauptteil und Fußzeile zusammen. 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. Dieser kann sich jedoch je nach E-Mail Typ unterscheiden, wie etwa bei Newslettern und transaktionalen E-Mails.

Beispiel Mailjet Banner
 

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. So fügen Sie bei Bedarf verschiedene Spalten und Abschnitte hinzu und gestalten diese individuell.

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 saisonalen Angeboten (Valentinstag,Ostern, Muttertag, Tour de France, Black Friday, Weihnachten etc.) ist darüber hinaus ein Abmeldelink verpflichtend.

Beispiel eines Newsletters in Abschnitte aufgeteilt
 

 

E-Mail Design Best Practices

Um Ihre E-Mail Vorlage perfekt auf Ihre Kunden, Zielgruppen und Newsletter Abonnenten abzustimmen, gilt es einige grundlegende Dinge zu beachten.

 

Klare Struktur sorgt für Ordnung

Eine klare Struktur sorgt dafür, dass die Empfänger Ihre E-Mail Inhalte und vor allem die Kernbotschaft/-anliegen sofort erfassen. Folgender Aufbau hat sich hier bewährt: Benutzen Sie am Anfang der E-Mail Bilder, um die Aufmerksamkeit des Lesers zu gewinnen, gefolgt von einem kurzen Text und einem klaren CTA (Call to Action).

Trennen Sie in der E-Mail Vorlage Titelbild, Hauptteil und Fußzeile klar voneinander. Arbeiten Sie mit Bildern oder farblichen Unterschieden, um eine optische Trennung vorzunehmen. Fügen Sie Ihr Unternehmenslogo in den oberen Bereich ein, damit die Leser die E-Mail sofort Ihnen zuordnen können. 

Verwenden Sie im Hauptteil Überschriften und Aufzählungslisten. Meiden Sie lange Textblöcke. 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.

 

Einheitlich heißt nicht langweilig

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.

Die in Ihren Nachrichten versendeten Farben, sollten Ihren CI entsprechen. Kombinieren Sie Ihre CI Farben mit viel weißer Fläche. Dies sorgt für Klarheit und wirkt professioneller.

 

Responsives Design ist ein absolutes Muss

Verwenden Sie ein responsives Design? Wenn nicht, dann ist es höchste Zeit, dies zu ändern. Bereits jede zweite E-Mail wird auf mobilen Endgeräten wie Smartphone und Tablet geöffnet, Tendenz steigend.

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

Bild eines Smartphones das Newsletter anzeigt
 

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. Für iOS beispielsweise wird eine minimale Schriftgröße von 13 Pixeln empfohlen.

Vergrößerung der Schrift im Newsletter

Content is King: Denken Sie zuerst über den Inhalt nach

Auch wenn es in diesem Artikel konkret ums Thema E-Mail Design geht, ist das wichtigste Element das Thema. Eine E-Mail nur der E-Mails Willen zu versenden ist wenig zielführend. Hat Ihre Kampagne kein konkretes Ziel, dann ist diese überflüssig.

E-Mail Marketing Kampagnen fallen in der Regel in eine der drei Kategorien: Les mich, Kauf mich oder Begleite mich. Definieren Sie das entsprechende Anliegen und fragen Sie sich: Ist der Inhalt für Ihre Zielgruppe relevant? Ist er ansprechend genug? Ist meine Botschaft klar genug? Passt die Aufmachung und der Inhalt zu meinen Markenrichtlinien?

Das E-Mail Design muss sich Ihren Inhalten anpassen und nicht umgekehrt. Sofern Ihre E-Mail Strategie gut ausgearbeitet ist, sollten Sie hier keine Schwierigkeiten haben.

 

Kurz und knapp ist besser als lang und ermüdend

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. 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.

Damit Sie nicht in Versuchung geraten, Ihre E-Mail Vorlage zu überfrachten, halten Sie Ihre Kampagnen so kurz wie möglich. Den Fokus auf das Kernelement zu legen ist einfach. Stellen Sie zunächst sicher, dass Sie ein primäres Ziel haben.

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.

Im nächsten Schritt vergrößern sie Ihre Elemente (größere Schriftgröße, Bild und Call-to-Action Button) und sorgen dafür, dass zu allen Seiten genügend Platz vorhanden ist. Dies lenkt das Auge unweigerlich auf diese Bereiche.

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.

Smartphone Ansicht einer E-Mail
 

Das i-Tüpfelchen: passende Bilder und multimediale Inhalte

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.

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 geringer als bei Desktop-Bildschirmen, sofern die Nutzer hierbei das mobile Datenvolumen anzapfen müssen.

 

Die Königsdisziplin: ausgewogenes 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. Zu viele grafische Elemente wirken sich negativ auf die Zustellbarkeitsrate aus. Diese Praxis 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.

 

Auf die Farbe kommt es an

Männer und Frauen reagieren unterschiedlich auf verschiedene Farben. Überlegen Sie sich genau, welche Farben Sie für Bilder, Hintergrund, Schrift und CTA-Schaltflächen benutzen. Passen Sie die Farben an Ihre Zielgruppe an, wobei Sie jedoch auch immer Ihre Markenidentität im Blick haben sollten. Wenn Sie bestimmte Farben für Ihre Zielgruppen verwenden,  verbessern Sie Ihre Ergebnisse und letztendlich Ihren ROI.

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. So vermeiden Sie, dass Ihre Absender-Reputation starken Schaden annimmt und Sie als Spammer erachtet werden.

 

Der Call-to-Action – der Mittelpunkt Ihrer E-Mail Vorlage

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 wiederspiegeln 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.

Beispiele CTA Buttons
 

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 ein und setzen Sie Ihre Ideen um. 

 

Anmeldung bei Mailjet

 

Haben Sie tolle Beispiele und Ideen zum Thema E-Mail Design? Wie sehen Ihre E-Mail Vorlagen aus? Haben Sie hinsichtlich der Gestaltung bestimmte Vorlieben? Und was mögen Sie überhaupt nicht? Ihre Meinung ist und wichtig. Nehmen Sie an einer kurzen Umfrage zu unserem Blog teil und teilen Sie Ihre Ideen mit.  

Ihnen hat der Artikel gefallen? Dann teilen Sie diesen auf Facebook, Twitter, LinkedIn und XING. Und vergessen Sie nicht unseren Newsletter zu abonnieren :).