Unsere 8 Tipps für ein gelungenes E-Mail-Design

Die E-Mail ist schon ein kurioser Teil des Online-Marketings. Obwohl von vielen schon tot geglaubt, landen trotzdem täglich mehr als 200 Milliarden Newsletter in unseren Postfächern. Und noch merkwürdiger ist die E-Mail in Sachen Design. Denn während wir bei mobilen Newslettern teilweise sogar schon Mini-Games und Slider einbauen können, müssen wir HTML für den Desktop-Newsletter noch wie im Web 1.0 verwenden, da es schnell zu fehlerhaften Darstellungen führen kann.

Neben den technischen Herausforderungen spielen inzwischen aber auch die Themen UX und UI eine entscheidende Rolle im E-Mail Marketing. Bei der enormen Menge an Informationen, E-Mails, Push-Benachrichtigungen und PMs, der wir täglich gegenüberstehen, muss ein guter Newsletter zwei entscheidende Kriterien erfüllen: Er muss leicht verständlich sein, aber gleichzeitig aus der Menge herausstechen. Diese acht E-Mail-Design Tipps können entscheidend dabei helfen, das zu erreichen.

Template und Newsletter-Aufbau

Ein gutes Template ist bei einem Newsletter die halbe Miete. Es erleichtert einem nicht nur das Daily Business, es kann auch Fehler verbeugen durch bereits festgelegte und getestete Module. Grundsätzlich sollte ein Template folgende Elemente enthalten:

• Header – Logo des Absenders, Navigation und Link zur Web-Version des Newsletters
• Hauptbühne – großer Banner an erster Stelle des Newsletter, der das Hauptthema beinhaltet
• Editorial – Einstiegstext mit personalisierter Ansprache und Textlinks
• Banner & Teaser – für weitere Themen
• Footer – Impressum, gut erkennbarer Abmelde-Link

Je nachdem wer der Absender ist, kann das Template außerdem noch Produktdarstellungen, Social Media-Einbindungen oder ganz individuelle Module beinhalten. Doch wie nutzt man das fertige Template optimal?
Die wichtigste Information sollte an der prominentesten Stelle des Newsletters gespielt werden, nämlich in der Hauptbühne. Nicht alle Themen und Informationen sind gleich wichtig und so sollten die Module auch gewichtet werden. Nicht jedes Thema ist es wert in einem Banner gespielt zu werden. Auch ein Teaser weiter unten in der E-Mail kann völlig ausreichend sein.

Der sichtbare Bereich der E-Mail 

Beim Design spielt schon die Breite der E-Mail eine entscheidende Rolle. Einige E-Mail Anbieter beschränken die Mail-Ansicht auf eine bestimmte Breite, was schnell dazu führen kann, dass man nicht nur von oben nach unten, sondern auch noch seitwärts scrollen muss. Mit einer maximalen Breite von 650 Pixeln für den Desktop-Newsletter ist man aber auf der sicheren Seite. Für den sichtbaren Bereich in der Höhe gibt es kein festes Maß, denn der fällt je nach Endgerät, Programm und persönlicher Einstellung unterschiedlich aus. Banner sollten aber möglichst so angelegt werden, dass man nicht scrollen muss, um sie komplett ansehen zu können. Beim mobilen Newsletter empfiehlt sich alle Themen in etwa auf die Größe eines Smartphone-Screens zu designen.

Blickführung und Eye-Catcher im E-Mail-Design

Wir haben nur etwa acht Sekunden, um die Aufmerksamkeit des Lesers zu erlangen. Deswegen es ist wichtig, die Informationen auf das Wesentliche zu beschränken. Eine Headline, etwas Text, ein Call-to-action (CTA) und ein Störer pro Fläche sollten ausreichen, um die wichtigsten Informationen zu transportieren. Zu viele Störer, Farben oder Schriftarten sorgen schnell dafür, dass der Leser sich wie auf einem Rummelplatz fühlt: Er weiß gar nicht, wo er zuerst hingucken soll.

Strukturiert den Newsletter, unterteilt ihn mit Themen-Überschriften und macht dem Leser das Klicken einfacher durch gut erkennbare CTAs. Und wer es ganz geschickt anstellen will, sorgt dafür, dass die Visuals die Blicke leiten, z. B. durch eine Person, die zur CTA guckt.

Visuals 

Im Design setzen wir heute auf ausdrucksstarke, emotionale Bilder. Auch im Newsletter-Design sollten sich der Text- und Bild-Anteil die Waage halten. Ein passendes Bild zum Text kann helfen die Informationen leichter greifbar zu machen. Dabei sollte man es jedoch nicht übertreiben. Zu große Bilder können nicht nur zu langen Ladezeiten führen, sondern sogar den Spam-Faktor der Mail erhöhen.

Des Weiteren sollte eine einheitliche Bildwelt innerhalb einer E-Mail geschaffen werden. Macht das Design nicht nur klarer, sondern ist auch rein ästhetisch ansprechender. Viele Arten und Stile von Bildern zu mischen, sorgt für Unruhe und lenkt die Aufmerksamkeit unnötig ab. Im besten Fall ist bereits im Corporate Design eine Bildsprache festgelegt.

Animationen als wichtige E-Mail-Design Elemente

Animationen können eine hervorragende Unterstützung sein, um die Aufmerksamkeit des Empfängers zu gewinnen, sollten jedoch mit Bedacht eingesetzt werden, denn auch hier gibt es einiges zu beachten.Wussten Sie zum Beispiel, dass Outlook noch immer keine GIFs abspielen kann und dass nur der erste Frame der Animation angezeigt wird?
Deswegen müssen grundsätzlich alle wichtigen Informationen bereits auf dem ersten ersten Bild der Animation sichtbar sein. Auch auf die Dateigröße sollte unbedingt geachtet werden, denn diese kann durch verschiedene Faktoren, wie zum Beispiel einer hohen Bildauflösung, Farbtiefe oder auch FPS-Rate (frames per second) zu langen Ladezeiten führen.

Anteasern: Ja. Auflösen: Nein.

Bevor wir einen Newsletter verschicken, muss immer die Frage geklärt werden, welches Ziel wir damit verfolgen. Wollen wir den Kunden zum Kauf anregen und ihn animieren eine Website zu besuchen? Oder möchten wir den Kunden nur über etwas informieren? Wenn man auf diese Frage keine Antwort findet, ist es vielleicht besser auf einen extra Newsletter zu verzichten. Daher sollten bereits zum Anfang die Ziele der Kommunikation und somit ein Leitfaden für die entsprechende grafische Umsetzung geschaffen werden.

Hat der Newsletter einen Mehrwert, sollte darauf geachtet werden die Informationen kurz und knackig zu halten, denn Text-Wüsten mag niemand. Ist das Thema sehr umfangreich, ist es besser Inhalte im Newsletter nur anzuteasern und die Informationen auf einer Landingpage vollständig zu präsentieren. Denn wenn der Kunde wirklich Interesse hat, wird er klicken, um mehr zu erfahren.

Schriften und Texte im E-Mail-Design

Möglichst viel Text mit HTML umzusetzen ist bei Newslettern ratsam, denn je höher der Text-Anteil, desto niedriger der Spam-Faktor. Allerdings schränkt HTML-Text das Design stark ein, denn in E-Mails können keine Schriften eingebettet werden (wie auf einer Website), sondern nur Fonts und Font-Familien verwendet werden, die auf dem Gerät des Empfängers verfügbar sind. Deswegen sieht die tatsächliche Darstellung des Textes etwas anders aus als im Entwurf und besondere CI-Schriften können nur innerhalb von Bildern verwendet werden.

Auch Zeilenabstände und Umbrüche können nicht mit 100-prozentiger Sicherheit festgelegt werden. Das macht es manchmal schwierig Text auf Bilder zu legen, denn schon ein Umbruch könnte zu einer fehlerhaften Bild-Darstellung führen.

Mobile Optimierung

Hat man alle anderen Hürden gemeistert, bleibt noch die Königsdisziplin: Die mobile Newsletter-Optimierung. Da bereits die Hälfte aller E-Mails auf mobilen Endgeräten geöffnet wird, setzen wir heute auf “mobile first” im Design, d.h. zu erst die mobile Variante des Layout zu erstellen. Jedoch sollte individuell auf die mobile Öffnungsrate der Zielgruppe geachtet werden, um die beste Lösung zu finden. Bei einer hohen mobilen Öffnungsrate macht vielleicht sogar der “mobile only” Ansatz Sinn. Grundsätzlich ist es in jedem Fall ratsam den Newsletter mobil zu optimieren, um fehlerhafte oder schlecht lesbare Darstellungen und damit Abmeldungen vom Newsletter zu vermeiden.

Fazit

Ein Newsletter wirkt so simpel, wenn er in unseren Postfächern ankommt. Doch es steckt so viel mehr dahinter und der Teufel liegt oft im Detail. Auch mit 12 Jahren Erfahrung im E-Mail Marketing gibt es immer wieder Überraschungen, Herausforderungen und Chancen durch den technischen Fortschritt. Aber eins ist sicher: Die E-Mail wird auch in Zukunft relevant sein – und einfach richtig gut aussehen müssen.

Neugierig geworden?

Wie sieht Ihr Newsletter aus? Erfüllt er alles, was einen Newsletter erfolgreich macht?
Wir unterziehen ihn gerne unserem grafischen E-Mail-Design Check, geben Feedback, zeigen auf, was bereits gut ist und was noch verbessert werden kann und entwickeln passende Lösungen – vom Quick Fix bis zum neuen Template.

Über unser Kontaktformular könnt Ihr uns direkt erreichen.