Das beste Design für deine E-Mails (Teil 9)

Über Geschmack lässt sich streiten. Es gibt aber durchaus einige Design-Elemente, die besser ankommen als andere oder die einen bestimmten Zweck erfüllen. Wir geben dir heute Tipps, wie du das Design deines Newsletters auf ein neues Level heben kannst. Eins aber vorne weg: Gehe Step by Step vor. Ändere nicht alles auf einmal, sondern nimm einzelne Anpassungen vor, um deine Leser:innen nicht zu verwirren und damit du einzelne Reaktionen nachvollziehen kannst.

Tipp 1: Konsistenz
Bringe Konsistenz in dein Newsletter-Design und orientiere dich dabei an deiner Website. Leser:innen sollen sofort erkennen, von wem die E-Mail kommt. Dazu platzierst du am besten dein Logo oben in der E-Mail und hältst dich an die Farben deiner CI. Gewisse Farbabweichungen, zum Beispiel bei Call-to-Actions sind aber kein Problem.

Tipp 2: Responsives Design beachten
Nutzer:innen lesen ihre E-Mails auf allen erdenklichen Geräten und verwenden dafür die unterschiedlichsten Browser, Apps und E-Mail-Clients. Entwirf daher ein responsives Design, das sich an die verschiedenen Bildschirmbreiten anpasst. Für die Einfachheit und eine gewisse Sicherheit empfehlen wir, den Newsletter auf eine Spalte zu beschränken und nicht mehrere nebeneinander zu setzen. Das minimiert das Risiko, dass Elemente falsch dargestellt werden. Zusätzlich sind die Inhalte so für die Nutzer:innen leichter zu erfassen.

Mit Email On Acid kannst du die Darstellung deiner Mails auf verschiedenen Geräten und in unterschiedlichen Browsern testen.

Tipp 3: Fake-Player
Du willst oder kannst kein komplettes Video in deine E-Mail einbauen? Löse das Problem mit einem “Fake Player”. Schnappe dir das Thumbnail deines Videos als Bilddatei und baue mit einem Bildbearbeitungsprogramm (z. B. Canva) einen Playbutton auf dieses Bild. Anschließend setzt du in das Bild einen Link direkt zum Video. Klickt ein:e Leser:in nun auf das Bild, weil es aussieht wie ein Videoplayer, wird er oder sie direkt zum Video weitergeleitet.

Tipp 4: Der Blinzel-Test
Letzte Woche haben wir über die Call-to-Actions in deiner E-Mail berichtet. Wenn du sichergehen möchtest, dass diese in der E-Mail tatsächlich wahrgenommen werden, solltest du den Blinzel-Test (engl.: squint test) anwenden. Sieh dir deine Mail an und kneife dabei die Augen zusammen. Das Ganze sieht dann in etwa so aus:

Newsletter Squint-Test

Wenn trotz der verschwommenen Sicht noch klar wird, wo sich die Call-to-Actions befinden, hast du vieles richtig gemacht. Die Nutzer:innen werden damit gut geführt, ohne dass der Text gelesen werden muss.

Tipp 5: Above the Fold
Alles, was ein:e Leser:in sieht, ohne scrollen zu müssen, befindet sich im sogenannten “Above the Fold”. Dieser Bereich zieht besonders viel Aufmerksamkeit auf sich. Passe das Design deiner E-Mail so an, dass hier die absolut wichtigsten Informationen zu finden sind.

Tipp 6: Whitespace
Wird leider oft vergessen: freie Flächen, auch Whitespace genannt. Wir tendieren dazu, möglichst viele Informationen auf möglichst wenig Raum unterzubringen, allerdings wirkt das dann schnell überladen und deine Leser:innen können gar nicht alles wahrnehmen. Indem du Flächen frei lässt, gönnst du ihnen und ihren Augen eine kurze Pause, bevor sie weitere Elemente wahrnehmen.

Tipp 7: Bilder & Grafiken
Verwendest du ein Teaserbild, sollte dieses zum Inhalt des Newsletters passen. Dafür eignet sich ein hochwertiges Bild, welches die Neugier steigert und keinen bis sehr wenig Text enthält. Das Bild darf deine Leser:innen aber gleichzeitig nicht überfordern, da sie sonst nicht mehr weiterlesen.
Für Bilder gilt generell, dass sie maximal 600 Pixel breit sein sollten, da es bei größeren Bildern zu Lade- und Darstellungsproblemen kommen kann.
Pro Tipp: Verwende GIFs. Diese werden im Gegensatz zu Videos direkt im Newsletter abgespielt. Setze sie aber nur sporadisch ein. Ein GIF pro E-Mail reicht vollkommen aus.

Tipp 8: Achte auf die Farben
Farben vermitteln Gefühle. Sie stellen aber auch einen wirksamen Wiedererkennungswert dar. Bei der Auswahl der Farben in deinem Newsletter achtest du also auf zwei Dinge: deine Corporate Identity und die Gefühle, die du mit deiner E-Mail auslösen willst. Erfahre mehr in der ausführlichen Infografik zur Wirkung von Farben in der Werbung.

Tipp 9: Strukturelemente
Stelle dir das Layout deiner E-Mail wie eine Wegbeschreibung vor. Leser:innen sollten intuitiv durch deinen Newsletter geführt werden, um zum “Ziel” (a.k.a. das Ende deiner E-Mail) zu gelangen, ohne dabei das Interesse zu verlieren. Baue die Struktur von oben nach unten und von links nach rechts auf und nutze Design-Elemente, um verschiedene Teile des Newsletters voneinander zu trennen. Dazu eignen sich Trennlinien, Absätze, Leerzeilen etc. Auch Aufzählungszeichen geben Struktur.

Tipp 10: Lenke den Blick
Wenn du Bilder von Personen in deinem Newsletter einbaust, achte darauf, wo der Blick der abgebildeten Person hin geht. Menschliche Gesichter lenken einen Großteil unserer Aufmerksamkeit auf sich und wenn sich in deiner E-Mail ein Bild mit einem Gesicht befindet, ist es sehr wahrscheinlich, dass deine Leser:innen als erstes dorthin sehen, wo auch die abgebildete Person hinsieht. Wähle deine Bilder gezielt aus und sorge dafür, dass abgebildete Personen ihren Blick auf das wichtigste Element im Newsletter werfen.

Tipp 11: Beachte den Dark Mode
Immer mehr Nutzer:innen verwenden auf mobilen Endgeräten und dem Desktop den Dark Mode. Beachte das bei deinen Grafiken und wähle Formate mit einem transparenten Hintergrund wie zum Beispiel gif- oder png-Dateien.

Quellen: de.sendinblue.com, rapidmail.de, omr.com