Mehr Zeit fürs Wesentliche: Das optimale Template für jede E-Mail

Wir zeigen, welche Elemente im E-Mail Template unverzichtbar sind und worauf man bei der Gestaltung der optimalen Vorlage achten sollte!

Texte schreiben, Zielgruppen segmentieren, Bilder auswählen, interne Abstimmungen und Freigaben, kurzfristige Änderungen, weil ein Produkt ausverkauft ist: Im Tagesgeschäft haben die meisten E-Mail-Marketing-Verantwortlichen genug mit den Inhalten der Mail zu tun, sodass sie nicht noch Grundlagenentscheidungen zur E-Mail-Gestaltung treffen wollen. Eine Standard-Vorlage muss her, ein sogenanntes Template, die für die meisten Kommunikationsanlässe passt: vom Newsletter über die Event-Einladung zur Geburtstagsmail und Warenkorb-Abbruch-Kampagne, usw. In solch ein Template sollte man einmalig Aufwand stecken, damit man es danach nicht mehr tun muss, sondern sich seinem eigentlichen Job widmen kann. In CleverReach kann man entweder die kostenlosen Design-Vorlagen an das eigene Corporate Design anpassen, oder man nutzt die CleverReach-Template-Sprache, um sich selbst – oder durch einen Dienstleister – ein Template mit allen benötigten Elementen im eigenen Design zu erstellen. Das führt uns zur Frage: Welche Grundelemente braucht ein E-Mail-Template, das man für die unterschiedlichsten Mailing-Typen nutzen kann?

Welche Elemente braucht das optimale E-Mail-Template?

Um verschiedene Newsletter und Mailings bauen zu können, überlegen Sie ob Ihr Template folgende Elemente benötigt:

• Eine Menüleiste. Da sich die Menüpunkte in der mobilen Ansicht in mehreren Zeilen anordnen, sollten die Text nicht zu lang und auch in der mobilen Umsortierung noch gut klickbar sein. Anstatt das gesamte Menü Ihrer Website abzubilden, konzentrieren Sie sich auf die 3 bis maximal 6 Top-Kategorien. Sie können in CleverReach auch verschiedene Menüleisten für verschiedene Zielgruppen einblenden, zum Beispiel für Nutzer, die an Damen- oder Herrenmode interessiert sind.

• Große Bild-Bannerbereiche. Wenn Sie Text in die Bildbanner integrieren, verwenden Sie eine aktivierende Headline und verlinken Sie das Bild. Wenn das Bild „reine Deko“ ist, sollte es weniger Platz einnehmen als ein Bild mit Botschaft und Call-To-Action. Kombinieren Sie Bildbanner mit Text-Überschriften, die auch angezeigt werden, wenn die Bildanzeige deaktiviert ist.

• Blöcke für Bild und Text: Das, was Leser*innen als den „Inhalt“ wahrnehmen. Gerade hier lohnt sich die Investition in ein gutes Template mit entsprechenden Style-Definitionen: Denken Sie gleich an Preisauszeichnungen, Streichpreise, Platz für Produktinformationen (z. B. Größen) und Call-To-Action-Button – so ersparen Sie sich langfristig eine Menge Arbeit. Bei den Bildern kann es sich um Icons oder Produkte handeln.
  Die Text- und Bild-Elemente sollten sich auf mobilen Geräten untereinander statt nebeneinander anordnen, damit sie gut sicht- und lesbar bleiben. Planen Sie mehrere Varianten für unterschiedliche Bildformate ein: z.B. ¼ Bild zu ¾ Text, 50/50 Bild und Text, ²/₃ Bild zu ¹/₃ Text uvm.

• In B2B-Mailings sollten Sie mehr Raum für Texte einplanen und Bilder eher ergänzend verwenden (z. B. gut lesbare Artikel-Abstracts mit Produktbildern, Stockfotos oder Diagrammen). Auch Editorials mit Platzhaltern für ein (Porträt-) Foto und Unterschrift des Absenders werden in Geschäfts-Mails häufig eingesetzt.

• Highlight-Elemente: Nutzen Sie farbig hinterlegte – eventuell zentrierte – Textelemente mit oder ohne Call-to-Action. Das lockert das Design auf, lenkt den Blick auf wichtige Inhalte und funktioniert auch dann noch, wenn Bilder durch das Mailprogramm blockiert werden.

• Mehrspaltige Elemente: Ein besonders nützliches Modul sind zwei-, drei-, und vierspaltige Elemente für Texte und Bilder mit farblichen Akzenten oder Rahmen. Hier lassen sich wie in einer kleinen Tabelle mehrere Dinge nebeneinanderstellen.

• Im B2B-Kontext werden oft Tabellen-Elemente benötigt, um z.B. Veranstaltungs-Informationen oder Dokument-Downloads übersichtlich darzustellen, die sich mobil ebenfalls untereinander sortieren.

• Aufmerksamkeitsstarke Buttons, die auch gut auf mobilen Geräten gut zu tippen sind. Empfehlung: Linksbündig oder zentriert anlegen.

Natürlich gibt es auch Strukturelemente, die für alle Mailings gleich wichtig sind:

• Pre-Header (die ersten Zeichen Text, die im Posteingang angezeigt werden), oft mit einem Link zur Online-Version (Web-Vorschau)
• Social-Media-Leisten mit verlinkten Icons der aktiven Kanäle
• Bereich für Service- und Interaktionslinks
• Ein unerlässliches und gesetzlich vorgeschriebenes Element ist zudem der Link zum Abbestellen des Newsletters (Opt-Out). Er wird häufig zusammen mit Informationen zum Absender im Footer platziert.

Worauf sollten Sie bei der Template-Gestaltung achten?

In E-Mails hat man immer weniger Kontrolle über das Layout als in Web und Print. Was in Ihren Testmails in Outlook gut aussieht, sieht in Gmail oder in der GMX App vielleicht ganz anders aus. Bei folgenden Elementen sollten sie ggf. im Design Abstriche in Kauf nehmen:

• Mehrere Spalten: Inhalte, die nebeneinander in mehreren Spalten stehen, gleichen sich nicht automatisch von der Länge her an. Hintergrundfarben enden meist mit dem Ende des Textes. Und wie der Text beim Lesenden fließt und umbricht, hängt stark von der gewählten Schriftart, dem Schriftschnitt und dem Endgerät ab. Lösung: Entweder Sie nehmen ein gewisses „flattern“ in Kauf oder stecken in jeder Mail Aufwand in die spaltenübergreifende Optimierung der Zeichenzahl und Wortlängen.
• Texte im Blocksatz funktionieren in E-Mail-Clients nicht, zumal es keine automatische Silbentrennung gibt. Linksbündiger Text ist zu empfehlen.
• Abgerundete Ecken bei Buttons mögen schick aussehen, gerade für Outlook sind sie aber nicht zu empfehlen. Outlook zeigt nur „runde Ecken“ an, wenn der gesamte Button ein Bild ist – allerdings sehen dann Empfänger*innen, die keine Bilder anzeigen, den Button gar nicht. Überlegen Sie also gut, wie wichtig Ihnen „softe Ecken“ sind.
• Hintergrundbilder und generell Bilder auf die Text geschrieben wird: jahrelang wurde davon abgeraten, aber mittlerweile funktionieren sie in den meisten E-Mail-Clients. Bei jeder Verwendung solcher Elemente sollten Sie sicherstellen, dass die auf den Bildern platzierten Texte genau passen. Testen Sie vor jedem Versand auf mehreren Endgeräten und E-Mail-Clients, ob die Schriftart und -Größe überall wie gewünscht dargestellt wird und die Abmessungen von Bild und Text in der mobilen Version nicht „gesprengt“ werden. Dies kann so aufwändig werden, dass man doch lieber dazu übergeht, den Text mit dem Bild abzuspeichern.

Besonderheiten, die es beim Template zu beachten gilt

Auch den Dunkelmodus (Dark Mode) sollten Sie bei der Gestaltung berücksichtigen:

• Legen Sie Bildelemente, Abstandhalter und Buttons mit transparenten Hintergründen an, dann sieht die Mail beim „invertieren“ der Farben auch gut aus.
• Schwarze Icons oder Logos auf weißem/transparentem Grund sein können Sie mit einem „Glow“ versehen, damit Ihr schönes Logo im Dark Mode nicht „schwarz auf schwarz“ erscheint.
• Wenn bunte Boxen zur Hervorhebung von Inhalten verwendet werden, sollte deren Farbwechsel im Dunkelmodus gleich mitgedacht werden. Auch hier gilt: Lieber etwas mehr Zeit in die Template-Erstellung stecken und dann bei allen künftigen E-Mails Zeit, Geld und Nerven sparen

Folgende Elemente funktionieren nur in wenigen E-Mail-Clients, überlegen Sie sich daher genau, ob sich der Aufwand lohnt.

• Inhaltsverzeichnis (mit „Anker“-Links): einige Webclients unterstützen diese Funktion nicht.
• Eigene (Marketing)-Fonts. Eigene Schriftarten und Web-Fonts lassen sich zwar in E-Mails einbetten, werden in verschiedenen Clients aber unterschiedlich dargestellt. In Gmail und Outlook werden sie nicht angezeigt. Auf der sicheren Seite sind sie immer mit sogenannten „E-Mail-safe Fonts“, mit diesen Schriftarten behalten Sie die Kontrolle über ihr Design.
• Tabellen mit vielen Spalten: Eine Kacheltapete mit 5 x 5 Produkten sieht auf dem PC-Monitor top aus. Auf mobilen Geräten werden die Inhalte aber entweder skaliert – und sind dann kaum noch zu erkennen – oder sie werden untereinander angeordnet – das macht 25 Zeilen! 4 Spalten ist bei den meisten Auflösungen das Maximum (je nach Motiv). Und wenn Ihnen das Desig wichtig ist, verlagern Sie sie die Kacheltapete doch auf eine Landing Page!

Wer soll mit dem Template arbeiten?

Überlegen Sie schon vor der Entscheidung für ein Template, wer die Newsletter später mit Inhalten füllen wird. Gerade bei selbst programmierten Templates können viele Sonderfunktionen eingebaut werden – allerdings kann es durchaus sein, dass diese dann im CleverReach Drag&Drop-Editor nicht gut zu befüllen sind oder unbeabsichtigt durch Copy&Paste von Anwender*innen Formatierungen in Bereiche kopiert werden, die das Design beeinträchtigen. Es kann daher lohnend sein, bei der Template-Programmierung bestimmte Bereiche von der Bearbeitung auszuschließen oder z. B. einige Felder nur mit Text befüllen zu lassen, aber keine Formatierung zuzulassen. Das schränkt den Ersteller der E-Mail zwar im Alltag etwas ein, aber es stellt auch sicher, dass bei allen Empfänger*innen konsistent gute E-Mails ankommen.

Unser Fazit

Templates sind eine wunderbare Sache, um sich eine hochflexible Vorlage im eigenen Design zu erstellen – die dann wieder und wieder verwendet werden kann. Auch für die Organisation haben sie einen entscheidenden Vorteil: Bei der Template-Auswahl können Sie und Ihr Team viele grundlegende Entscheidungen einmalig treffen und verringern dadurch künftige Unklarheiten und Abstimmungsaufwände. Wer noch keine Erfahrungen damit gemacht hat, kann direkt mit den kostenlosen CleverReach Design Templates starten – für gehobene Ansprüche helfen Spezialagenturen bei der Erstellung und Optimierung von Template-Reihen. Auf lange Sicht lohnt sich der Aufwand auf jeden Fall!

Über die Autorin

Marion Krohn ist Leiterin im Consulting und Business Development bei der CleverReach-Partner Agentur Publicare Marketing Communications GmbH.