Dein Guide für perfekte Emails - Teil 2: Design

Perfekte Email Teil 2 Header

Im ersten Teil unseres großen Guides für perfekte Emails hast du bereits gelernt, an welchen Stellschrauben du für eine ansprechende Copy und gelungenen Content drehen kannst. Im zweiten Part geht es nun um alles, was du für überzeugendes Email-Design brauchst. Betreffzeilen und knackige Texte sind wichtig, doch wenn deine Email nicht ansprechend gestaltet ist, wirst du weder hohes Engagement noch viele Conversions erzielen. Dabei sollte das ja eigentlich das Ziel deiner Emails sein. Vielen Marketing-Emails fehlt es aus unserer Sicht häufig an zwei entscheidenden Dingen: Fokus und Übersichtlichkeit. Wie du diese beiden Komponenten herstellst und welche Email-Design Elemente du darüber hinaus beachten solltest, erfährst du im Folgenden. Ein Tipp vorweg: Weniger ist mehr!

Tim

22.08.2021

News & Inspiration

Email-Templates

Zu Beginn empfehlen wir dir, ein Email-Template designen zu lassen, welches du dann entweder im Drag & Drop Editor deines ESPs oder als HTML-Template umsetzt. Der wesentliche Unterschied dieser beiden Methoden besteht darin, dass die meisten ESPs bereits viele Vorlagen enthalten, die dann beliebig angepasst werden können. Außerdem sind für die Bedienung des Drag & Drop Editors in der Regel keine speziellen Vorkenntnisse nötig. Ein HTML-Template kannst du hingegen weitaus individueller gestalten, jedoch sind HTML-Kenntnisse hilfreich, um das Optimum rauszuholen und fehlerfreie Darstellungen zu garantieren. Kleinere Veränderungen kannst du aber auch ohne Programmier-Skills vornehmen. 

Achte auf jeden Fall darauf, dass alle deine Emails mithilfe des Templates einen einheitlichen, aber trotzdem abwechslungsreichen Aufbau haben. Ein gutes Template erspart dir viel Zeit bei der Email-Erstellung und sorgt dafür, dass sich durch alle deiner Emails ein roter Faden zieht − ganz gleich ob Newsletter oder Automation Email

Es ist außerdem wichtig, dass für Empfänger direkt ersichtlich ist, von wem die Email stammt. Setze dafür dein Markenlogo ganz oben in den Header-Bereich und baue wiederholende Elemente, die typisch für dein Unternehmen sind, in deine Emails ein. Einheitliches Branding lässt die Emails basierend auf deinem Template professionell aussehen und konsistent wirken. Wähle deshalb am besten auch nur eine oder zwei Farben pro Email aus einer festgelegten Farbpalette (am besten deinen CI-Farben) aus. Je weniger Farben du nutzt, desto klarer sieht dein Design aus, was dazu führt, dass Empfänger nicht von der eigentlichen Message abgelenkt werden.

Layout

Ein klar strukturiertes Email-Layout ist unserer Meinung nach essentiell für den Erfolg. Es sorgt dafür, dass Leser “sinnvoll” durch die Email geführt werden. Im besten Fall sollten sie mit nur einem Blick auf deine Email erkennen, wo der Fokus liegt und die Aussage direkt verstehen. Denn ein Großteil der Empfänger verbringt nicht einmal 15 Sekunden damit, eine Marketing-Email zu lesen. Somit solltest du dir diese Zeitspanne als Referenzpunkt setzen und evaluieren, ob deine Email in wenigen Sekunden verrät, worum es geht. Logische Hierarchien können hierbei der Retter in der Not sein. Ordne deine Inhalte nach ihrer Wichtigkeit: Die Key-Message sollte in jedem Fall am Anfang deiner Email stehen, damit sie keiner deiner Abonnenten übersieht. Achte außerdem darauf, genügend “white space” zu nutzen. Er ist der Schlüssel, um ein Gefühl von Übersichtlichkeit zu vermitteln und erleichtert es, die Email zu lesen. Allgemein besteht jedes Email-Layout grundsätzlich aus drei Komponenten:

Header

Der Header verleiht seinem Namen alle Ehre und bildet den Kopf deiner Email. Somit steht er ganz oben und ist das erste, was dein Abonnent sieht, wenn er deinen Newsletter öffnet. Äußerlich sollte sich der Header nach dem Design deiner Brand oder Website richten und das Markenlogo deines Unternehmens beinhalten. Dieses kannst du beliebig entweder an die äußeren Ränder oder mittig platzieren. Der Header kann ebenfalls genutzt werden, um Links zu hinterlegen, die entweder auf die Hauptkategorien deines Shop verweisen können oder auf die Browseransicht deiner Email führen. Somit bietest du auch den Lesern, denen deine Email nicht korrekt angezeigt wird, ein flüssiges Leseerlebnis.

 

Email Header

 

Body

Das Herzstück der Email wird auch als Email-Body bezeichnet. Er bildet den Hauptteil und sollte aus Gründen der Übersichtlichkeit aus maximal drei Modulen bestehen. Auch wenn eine Struktur erkennbar sein sollte, heißt das nicht, dass der Body langweilig gestaltet sein muss. Wie du Bild- und Textelemente am spannendsten und übersichtlichsten anordnest, erfährst du im Folgenden.

 

Email Bodies Beispiele

 

Footer

Als dritte Hauptkomponente schließt der Footer deine Email ab. Dieser wird ganz unten am Ende der Email angezeigt, ist dadurch aber nicht weniger wichtig. Denn der Footer muss zwingend einige Elemente enthalten, um nicht gegen rechtliche Auflagen zu verstoßen. Hierzu zählen Impressum, AGB´s, Datenschutzrichtlinien und die Möglichkeit, sich von deinem Newsletter wieder abzumelden. Da durch so viele Regeln oft das Design des Footers zu kurz kommt, kannst du ihn noch durch Social Media Icons oder deinem Logo anreichern. Wir empfehlen außerdem, den Footer-Bereich farblich vom Rest der Email abzuheben.

 

Footer Beispiele

 

Im Prinzip besteht also jede Email aus diesen drei Hauptkomponenten, die in etwa folgendes Gesamtbild ergeben:

 

Email Struk

Das Email-Layout sorgt für ein ansprechendes Erscheinungsbild und eine klare Struktur. Dazu gehört auch, die Email hinsichtlich einer erfolgreichen Conversion zu gestalten. Das gesamte Design muss also einige Email-Design Standards berücksichtigen und darüber hinaus gestalterisch zum Markenimage passen. Folgende Layout-Beispiele werden häufig verwendet, da sie deiner Email einen strukturierten Aufbau verschaffen:

Die umgedrehte Pyramide

Hierbei handelt es sich eher um eine visuelle Hilfestellung, als um eine wirkliche Struktur deiner Elemente. Der Leser soll durch die Email geleitet werden und seinen Fokus auf die Key-Message nicht verlieren. Zu Beginn kann die ganze Breite für Elemente genutzt werden, um die Aufmerksamkeit des Abonnenten zu gewinnen. Danach spitzt sich der Inhalt im Laufe der Email immer weiter zu und mündet schlussendlich in einem Call-to-Action Button.

 

Pyramide Beispiel

Zick Zack

Eine häufig genutzte Struktur in Newslettern und Marketing-Emails ist wohl die Zick-Zack-Variante. Und das hat einen guten Grund: Sie bietet sich immer dann an, wenn mehrere Produkte beworben oder verschiedene Inhalte angeschnitten werden sollen. Hierbei wird der Leser vom Beginn der Email bis zum Footer im Zick Zack durch die einzelnen Element-Blöcke geführt. Diese Anordnung des Layouts hat zwei entscheidende Vorteile: sie sieht optisch ansprechend aus und die Elemente deiner Email werden durch die Anordnung so vereinfacht, dass sie gut lesbar sind.

 

Zick Zack Beispiel

Lesbarkeit

Damit wären wir auch direkt beim nächsten Punkt: Der Lesbarkeit deiner Email. Sie ist eng mit einem strukturierten Layout verknüpft, denn beides geht quasi miteinander einher. Ein roter Faden ist auch für eine gute Lesbarkeit unerlässlich. Demnach sind lange Textblöcke zu vermeiden, da sie an der Konzentration des Lesers zehren und aufgrund von Zeitmangel eher übersprungen werden. Teile deinen Text lieber in verschiedene Abschnitte ein, z.B. durch die Verwendung von Trennlinien oder Rahmen, und lockere sie mit Bildern oder anderen visuellen Elementen auf.

Denk auch daran, deinen Inhalt zu zentrieren. Wenn es sich allerdings um etwas längere Texte handelt (was sich ja manchmal nicht ganz vermeiden lässt), sollten diese linksbündig ausgerichtet sein, da sie so besser lesbar sind. Auf jeden Fall sollte darauf geachtet werden, innerhalb einer Email eine einheitliche Ausrichtung zu wählen, um ein harmonisches Layout zu gewährleisten.

Zur weiteren Strukturierung deiner Textpassagen kannst du außerdem Fett- oder Kursivschrift und Aufzählungspunkte nutzen. Der Leser behält somit optimal den Überblick und kann gegebenenfalls leichter an die Textstelle springen, die ihn am meisten interessiert. Darüber hinaus kannst du so natürlich auch Inhalte markieren, die deinen Abonnenten besonders auffallen sollen. Dies garantiert, dass sie die Message erhalten, die du ihnen mitgeben möchtest.

CTAs

In der Regel wird mit einer Marketing-Email das Ziel einer Conversion der Abonnenten verfolgt (Klick auf eine Landingpage, auf eine Produktseite, zum Shop usw.). Deshalb muss die Nutzung von Call-to-Action Buttons (CTAs) richtig gemanagt werden. Auch in diesem Fall ist weniger tatsächlich mehr, denn zu viele Call-to-Actions wirken abschreckend und überfordernd auf den Leser. In empirischen Untersuchungen haben Emails mit nur einem einzigen CTA am besten performed. Unser Tipp: Nutze in deiner Email nur einen primären CTA. Natürlich muss der CTA auch gut in Szene gesetzt werden. Platziere ihn gut sichtbar und zentral. Verwende kurze und klare Formulierungen, die zum Handeln motivieren (z.B. “Jetzt kaufen”, “”Mehr erfahren”, “Zum Shop”, “Jetzt downloaden” usw.) − ein perfekter CTA-Text sollte nicht länger als 120 Zeichen sein. “Vage” Begriffe sind hingegen zu vermeiden: Der Leser sollte direkt wissen, was genau er tun soll und was ihn durch Klick auf den CTA erwartet. Wir empfehlen, und Studien geben uns Recht, das Design des CTAs so zu gestalten, dass er tatsächlich wie ein Button aussieht − so steigerst du deine Click Rate um bis zu 45 %. Sorge außerdem dafür, CTAs “above the fold” zu platzieren und baue, wenn es sich anbietet, bis zu zwei Links in deinen Text ein, um eine Alternative zu deinem CTA zu bieten.

 

CTAs Beispiele

Bilder & GIFs

Zum Auflockern deiner Textblöcke sollten unbedingt visuelle Elemente wie Bilder oder GIFs genutzt werden. Sie können dabei helfen, Aufmerksamkeit zu generieren, Emotionen hervorzurufen und mit ein wenig Geschick sogar den Verkauf von Produkten verbessern. Kein Wunder also, dass heutzutage nahezu jeder Newsletter und jede Email, die zu Werbezwecken verschickt wird, Bildmaterial beinhaltet. Es ist somit schwer, auf Bilder zu verzichten, doch trotzdem solltest du bei ihrem Einsatz auf einige Dinge Acht geben: Ein einziges Bild oder Video als Hauptinhalt deiner Email zu benutzen kann nämlich gefährlich werden. Alleine 43% aller Gmail-User haben die Option, Bilder zu blockieren, aktiviert. Statt dem Bild wird dann ein sogenannter ALT-Text angezeigt, der mit wenigen Worten das Bild beschreibt. Doch wenn sich die gesamte Email um die Grafik dreht, diese aber nicht sichtbar ist, hat deine Nachricht quasi keinen relevanten Inhalt mehr. Bilder und Texte sollten also ein ausgewogenes Verhältnis haben, um derartige Probleme zu umgehen. Eine optimale Text-zu-Bild Ratio ist etwa 60:40. Verwendest du zu viele Bilder und zu wenig Text läufst du Gefahr, dass deine Email als Spam eingestuft wird. Um die Ladegeschwindigkeit deiner Email nicht negativ zu beeinflussen, sollten deine Bilder nur eine maximale Größe von 1MB besitzen (im Idealfall sogar nur 300kb). Unscharfe oder verpixelte Bilder sind in deiner perfekten Email natürlich ein No Go, sie sollten immer in einer guten Qualität angezeigt werden. Dies erreichst du, indem du sie in der richtigen Größe anlegst. 

Unser Tipp: Lege Bilder immer mind. doppelt so groß an, als sie letztlich in der Email angezeigt werden – die meisten Emails haben i.d.R eine Breite von 600 Pixeln. Das Headerbild zum Beispiel, wenn es über die gesamte Email-Breite geht, sollte mit einer Breite von 1200 Pixeln angelegt werden. Entscheide dich außerdem für das “richtige” Bild-Format: JPEG, PNG, SVG oder GIF. Bei Bildern, die nicht quadratisch oder rechteckig sind, bietet sich meistens PNG als Format an, das sie mit transparentem Hintergrund gespeichert werden können. So sehen die Bilder z.B. auch im Dark Mode gut aus.

Um mehr Interaktivität und Lebendigkeit in deine Emails zu bekommen, eignet sich die Nutzung von GIFs. Aber Achtung: Auch hier sollte die Dateigröße möglichst unter 1 MB liegen. Inzwischen zeigen die meisten Email-Clients GIFs problemlos an − und falls nicht, wird automatisch das erste Bild angezeigt. Wenn das nicht gewünscht ist, kann im Email-Code programmiert werden, dass ein anderes Bild als “Fallback” angezeigt wird.

Everlane GIF

Fazit

Mit einem gut strukturierten und ansprechend gestalteten Email-Design lassen sich zwei große Ziele erreichen: 1) Empfänger werden dazu gebracht, deine Email bis zum Ende zu lesen (und zu verstehen) und 2) können dadurch höhere Conversions und somit letztlich höhere Umsätze erzielt werden. Gerade vor dem aktuellen Hintergrund von iOS 15 und dem Verlust der Möglichkeit, Open Rates von Apple Mail-App Nutzern durch aktivierte Privacy Protection zuverlässig tracken zu können, werden ansprechender Content in Kombination mit einem tollen Design noch wichtiger, um mehr Klicks zu generieren. Auch um sich aus der Masse an Emails hervorzuheben, ist es essentiell, für ein positives Email-Erlebnis zu sorgen. Und dazu gehört neben dem richtigen Content und guter Copy auch ein überzeugendes Design mit klarer Struktur, guter Übersichtlichkeit und ansprechenden Bildern.

Mit einem soliden Template und der Berücksichtigung von einigen Email-Design Standards in Bezug auf Layout, Struktur, Lesbarkeit und dem Einsatz von Bildern, gelingt dies auch Email-Frischlingen im Handumdrehen. In unserem dritten und letzten Teil erfährst du, was genau hinter der äußerst wichtigen sogenannten Accessibility deiner Email steckt und wie du deinen Abonnenten ein benutzerfreundliches Erlebnis garantierst.