Leitfaden für das perfekte E-Mail-Design
©
Angesichts der zahlreichen E-Mails, die tagtäglich im Posteingang landen, gilt es aus dieser Masse positiv herauszustechen. Der Inhalt, aber vor allem auch das Design ist so zu gestalten und zu optimieren, dass diese die Aufmerksamkeit der Empfänger auf sich ziehen, ihre Botschaft effektiv mitteilen und zur erwünschten Handlung motivieren. Schon bei der Planung der Vorlage, aber auch bei der Erstellung von Kampagnen gibt es vieles zu beachten. Ein Einblick in die Grundlagen des E-Mail Designs.
Layout-Entscheidungen
Das E-Mail Layout besteht grundsätzlich aus den drei Bereichen Titelbild (Banner), Hauptteil und Fußzeile. Der Banner im Titelbild ist der erste Blickfang für Kunden: Sorgen Sie dafür, dass Sie diesen im Bezug zum Inhalt und zu Ihnen als Marke setzen sowie einen Wiedererkennungseffekt schaffen. Die Empfänger sollten auf den ersten Blick erkennen, dass die Nachricht von Ihnen stammt. Platzieren Sie hier zum Beispiel Ihr Logo.
Der Hauptteil beinhaltet den eigentlichen Inhalt. Dieser lässt sich bei Bedarf in verschiedene Bereiche (Spalten und Abschnitte) aufteilen. In der Fußzeile stehen die rechtlich verpflichtenden Informationen: Ihr Impressum sowie der Link, mit dem Empfänger sich von Ihren E-Mails abmelden können. Um eine bessere Übersicht zu schaffen, heben Sie Kopf- und Fußzeile deutlich vom Inhalt ab, zum Beispiel durch die Wahl unterschiedlicher Farben.
Ein Blick in die Farbpsychologie kann hilfreich sein: Bedenken Sie Ihre Zielgruppe (Geschlecht, Alter, usw.) und welche Emotion Sie hervorrufen möchten. Möchten Sie den Empfänger mit kräftigen Farben wie Rot oder Orange aktivieren oder mit Hilfe von beispielsweise Blau ein beruhigendes Gefühl erzeugen? Grundsätzlich gilt es, Farben gezielt und sparsam einzusetzen. Verwenden Sie als Faustregel nicht mehr als 3 Farben pro E-Mail. Um die Aufmerksamkeit auf bestimmte Botschaften, zum Beispiel eine Handlungsaufforderung, zu lenken, haben sich Komplementärfarben bewährt.
Responsive Vorlagen
Inzwischen werden E-Mails auf einer Vielzahl verschiedener Geräte und mit Hilfe verschiedener Clients gelesen. Um sicherzustellen, dass alle Inhalte unabhängig von der Bildschirmgröße lesbar sind, verwenden Sie ein einheitliches responsives Design. Nutzen Sie Ihr Logo sowie Ihre CI Farben und Schriftarten, um über alle Ihre Kanäle und Kampagnen ein einheitliches Marken-Erscheinungsbild zu erzeugen.
Halten Sie mobile E-Mails in einem einspaltigen Layout, um eine ordnungsgemäße Darstellung zu garantieren. Für die Desktop-Ansicht haben sich maximal 2-3 Spalten bewährt, um das Design nicht zu überfrachten. Achten Sie darauf, dass sich die Schriftgröße der Bildschirmgröße anpasst und gut lesbar ist. Links sollten vor allem mobil mit ausreichendem Abstand zueinander platziert werden, um fehlerhaftes Klicken zu vermeiden.
Beschränken Sie sich bei der Vorlagenbreite auf 600 Pixel. Horizontales Scrollen ist lästig und führt dazu, dass kaum ein Empfänger die E-Mail liest. Planen Sie ausreichend Leerraum in Ihrer Vorlage ein. Die Empfänger nehmen Ihre Inhalte auf diese Weise besser wahr. Auch teilt viel weiße Fläche Ihre Inhalte in übersichtliche Abschnitte ein. Um sicherzugehen, dass die Empfänger Ihre E-Mails optimal lesen, fügen Sie außerdem einen „Im Browser ansehen“-Link ein.
Strukturierung der Inhalte
Mit der Anordnung der Inhalte sorgen Sie dafür, dass Empfänger Ihre E-Mails in der richtigen Reihenfolge lesen. Sie werden durch Ihre Nachricht geleitet, bis Sie mit dem Call-to-Action zu einer Handlung aufgefordert werden. Die wichtigsten Inhalte sollten immer am Anfang einer E-Mail stehen, im besten Fall im sichtbaren Bereich der E-Mail Vorschau. Aufzählungen und Zwischenüberschriften im weiteren Text gliedern die Inhalte und ermöglichen das Überfliegen der Nachricht und das Erfassen der wichtigsten Punkte.
Besonders wichtig ist die Struktur und gezielte Anordnung der Elemente und Inhalte bei transaktionalen E-Mails. Standardmäßig erscheinen solche E-Mails, die durch bestimmte Aktionen ausgelöst und automatisch versendet werden in einem sehr schlichten, wenig ansprechenden Design. E-Mails mit Rechnungen beispielsweise oder Links zum Zurücksetzen des Passwortes bestehen häufig nur aus Text, enthalten mitunter nicht einmal ein Logo. Auch diese Nachrichten sind Bestandteil der Markenkommunikation und sollten entsprechend gestaltet werden, um kein Potential zu verschenken.
Achten Sie hier jedoch besonders darauf, dass der Kern der E-Mail sofort klar wird und die wichtigste Information im Zentrum steht. Betreff und erste Sätze der Nachricht müssen direkt ersichtlich machen, worum es geht und welche Handlung der Empfänger gegebenenfalls ausführen soll, beispielsweise das Anklicken eines Links. Der Call-to-Action muss sich deutlich abheben und eindeutig sein.
Verwendung von Bildern und anderen Medien
Bilder können die Performance Ihrer Kampagnen verbessern, wenn sie gezielt und mit einem guten Verhältnis zu den Texten eingesetzt werden. Unter einer zu großen Anzahl an Bildern kann die Übersichtlichkeit leiden. Verwenden Sie sehr viele oder sehr prägnante Bilder, halten Sie den Rest des Designs schlicht, um die Aufmerksamkeit auf den Bildern zu halten und die E-Mail nicht zu überladen.
Denken Sie auch bei der Verwendung von Bildern an die Botschaften, die Sie in Ihrer E-Mail mitteilen möchten und stellen diese auch in den Bildern in den Mittelpunkt. Was möchten Sie Ihren Lesern mitteilen, welche Emotion hervorrufen, welche Handlung sollen diese tätigen? Stellen Sie einen logischen Zusammenhang zwischen Design und Inhalt her und beachten Sie die Grundregel: Das Design soll den Inhalt unterstützen und nicht von diesem ablenken!
Möchten Sie interaktive visuelle Elemente verwenden, beschränken Sie sich auf eines pro E-Mail und achten Sie auf die Größe der Dateien. Zu große E-Mails, aber auch zu viele grafische Elemente, können zu einer geringeren Zustellbarkeit führen und in Spam-Filtern landen.
Testen und Optimieren
Testen Sie Ihre E-Mails immer auf verschiedenen Geräten und in verschiedenen Clients. Achten Sie darauf, ob Bilder korrekt und vollständig angezeigt werden. Funktionieren die Links und dazu gehörigen Landingpages, sowohl auf dem Desktop als auch auf mobilen Endgeräten? Werden die Inhalte korrekt personalisiert? Erscheint der Name des Empfängers oder hat sich ein Fehler eingeschlichen und es wird ein Platzhalter verwendet?
Sollen Empfänger eine bestimmte Handlung ausführen, platzieren Sie einen Call-to-Action in der E-Mail. Am Anfang einer E-Mail im sichtbaren Bereich „above-the-fold“ zieht dieser besondere Aufmerksamkeit auf sich. Doch auch wenn er weiter unten in der Nachricht erscheint, kann er durch Design-Tricks hervorgehoben werden: Elemente wie beispielsweise farblich abgehobene Boxen oder Pfeile lenken das Augenmerk des Nutzers auf den Call-to-Action. Führen Sie hier A/B-Tests durch, um die optimale Position oder Farbgestaltung zu ermitteln.
Platzieren Sie verschiedene klickbare Inhalte in Ihrer E-Mail (beispielsweise die neuesten Produkte), bedenken Sie, dass die meisten Nutzer vermutlich den ersten dieser Links anklicken werden und ordnen Sie Ihre Elemente entsprechend strategisch nach Bedeutung.
Fazit
Es ist gut, sich abzuheben. Einige grundlegende Designregeln sollten Sie jedoch beachten, um die bestmögliche Zustellbarkeit, Öffnungs- und Interaktionsrate für Ihre Kampagnen zu erzielen. Auch im Interesse Ihrer Nutzer, die eine übersichtliche Struktur zu schätzen wissen werden.
Layout-Entscheidungen
Das E-Mail Layout besteht grundsätzlich aus den drei Bereichen Titelbild (Banner), Hauptteil und Fußzeile. Der Banner im Titelbild ist der erste Blickfang für Kunden: Sorgen Sie dafür, dass Sie diesen im Bezug zum Inhalt und zu Ihnen als Marke setzen sowie einen Wiedererkennungseffekt schaffen. Die Empfänger sollten auf den ersten Blick erkennen, dass die Nachricht von Ihnen stammt. Platzieren Sie hier zum Beispiel Ihr Logo.
Der Hauptteil beinhaltet den eigentlichen Inhalt. Dieser lässt sich bei Bedarf in verschiedene Bereiche (Spalten und Abschnitte) aufteilen. In der Fußzeile stehen die rechtlich verpflichtenden Informationen: Ihr Impressum sowie der Link, mit dem Empfänger sich von Ihren E-Mails abmelden können. Um eine bessere Übersicht zu schaffen, heben Sie Kopf- und Fußzeile deutlich vom Inhalt ab, zum Beispiel durch die Wahl unterschiedlicher Farben.
Ein Blick in die Farbpsychologie kann hilfreich sein: Bedenken Sie Ihre Zielgruppe (Geschlecht, Alter, usw.) und welche Emotion Sie hervorrufen möchten. Möchten Sie den Empfänger mit kräftigen Farben wie Rot oder Orange aktivieren oder mit Hilfe von beispielsweise Blau ein beruhigendes Gefühl erzeugen? Grundsätzlich gilt es, Farben gezielt und sparsam einzusetzen. Verwenden Sie als Faustregel nicht mehr als 3 Farben pro E-Mail. Um die Aufmerksamkeit auf bestimmte Botschaften, zum Beispiel eine Handlungsaufforderung, zu lenken, haben sich Komplementärfarben bewährt.
Responsive Vorlagen
Inzwischen werden E-Mails auf einer Vielzahl verschiedener Geräte und mit Hilfe verschiedener Clients gelesen. Um sicherzustellen, dass alle Inhalte unabhängig von der Bildschirmgröße lesbar sind, verwenden Sie ein einheitliches responsives Design. Nutzen Sie Ihr Logo sowie Ihre CI Farben und Schriftarten, um über alle Ihre Kanäle und Kampagnen ein einheitliches Marken-Erscheinungsbild zu erzeugen.
Halten Sie mobile E-Mails in einem einspaltigen Layout, um eine ordnungsgemäße Darstellung zu garantieren. Für die Desktop-Ansicht haben sich maximal 2-3 Spalten bewährt, um das Design nicht zu überfrachten. Achten Sie darauf, dass sich die Schriftgröße der Bildschirmgröße anpasst und gut lesbar ist. Links sollten vor allem mobil mit ausreichendem Abstand zueinander platziert werden, um fehlerhaftes Klicken zu vermeiden.
Beschränken Sie sich bei der Vorlagenbreite auf 600 Pixel. Horizontales Scrollen ist lästig und führt dazu, dass kaum ein Empfänger die E-Mail liest. Planen Sie ausreichend Leerraum in Ihrer Vorlage ein. Die Empfänger nehmen Ihre Inhalte auf diese Weise besser wahr. Auch teilt viel weiße Fläche Ihre Inhalte in übersichtliche Abschnitte ein. Um sicherzugehen, dass die Empfänger Ihre E-Mails optimal lesen, fügen Sie außerdem einen „Im Browser ansehen“-Link ein.
Strukturierung der Inhalte
Mit der Anordnung der Inhalte sorgen Sie dafür, dass Empfänger Ihre E-Mails in der richtigen Reihenfolge lesen. Sie werden durch Ihre Nachricht geleitet, bis Sie mit dem Call-to-Action zu einer Handlung aufgefordert werden. Die wichtigsten Inhalte sollten immer am Anfang einer E-Mail stehen, im besten Fall im sichtbaren Bereich der E-Mail Vorschau. Aufzählungen und Zwischenüberschriften im weiteren Text gliedern die Inhalte und ermöglichen das Überfliegen der Nachricht und das Erfassen der wichtigsten Punkte.
Besonders wichtig ist die Struktur und gezielte Anordnung der Elemente und Inhalte bei transaktionalen E-Mails. Standardmäßig erscheinen solche E-Mails, die durch bestimmte Aktionen ausgelöst und automatisch versendet werden in einem sehr schlichten, wenig ansprechenden Design. E-Mails mit Rechnungen beispielsweise oder Links zum Zurücksetzen des Passwortes bestehen häufig nur aus Text, enthalten mitunter nicht einmal ein Logo. Auch diese Nachrichten sind Bestandteil der Markenkommunikation und sollten entsprechend gestaltet werden, um kein Potential zu verschenken.
Achten Sie hier jedoch besonders darauf, dass der Kern der E-Mail sofort klar wird und die wichtigste Information im Zentrum steht. Betreff und erste Sätze der Nachricht müssen direkt ersichtlich machen, worum es geht und welche Handlung der Empfänger gegebenenfalls ausführen soll, beispielsweise das Anklicken eines Links. Der Call-to-Action muss sich deutlich abheben und eindeutig sein.
Verwendung von Bildern und anderen Medien
Bilder können die Performance Ihrer Kampagnen verbessern, wenn sie gezielt und mit einem guten Verhältnis zu den Texten eingesetzt werden. Unter einer zu großen Anzahl an Bildern kann die Übersichtlichkeit leiden. Verwenden Sie sehr viele oder sehr prägnante Bilder, halten Sie den Rest des Designs schlicht, um die Aufmerksamkeit auf den Bildern zu halten und die E-Mail nicht zu überladen.
Denken Sie auch bei der Verwendung von Bildern an die Botschaften, die Sie in Ihrer E-Mail mitteilen möchten und stellen diese auch in den Bildern in den Mittelpunkt. Was möchten Sie Ihren Lesern mitteilen, welche Emotion hervorrufen, welche Handlung sollen diese tätigen? Stellen Sie einen logischen Zusammenhang zwischen Design und Inhalt her und beachten Sie die Grundregel: Das Design soll den Inhalt unterstützen und nicht von diesem ablenken!
Möchten Sie interaktive visuelle Elemente verwenden, beschränken Sie sich auf eines pro E-Mail und achten Sie auf die Größe der Dateien. Zu große E-Mails, aber auch zu viele grafische Elemente, können zu einer geringeren Zustellbarkeit führen und in Spam-Filtern landen.
Testen und Optimieren
Testen Sie Ihre E-Mails immer auf verschiedenen Geräten und in verschiedenen Clients. Achten Sie darauf, ob Bilder korrekt und vollständig angezeigt werden. Funktionieren die Links und dazu gehörigen Landingpages, sowohl auf dem Desktop als auch auf mobilen Endgeräten? Werden die Inhalte korrekt personalisiert? Erscheint der Name des Empfängers oder hat sich ein Fehler eingeschlichen und es wird ein Platzhalter verwendet?
Sollen Empfänger eine bestimmte Handlung ausführen, platzieren Sie einen Call-to-Action in der E-Mail. Am Anfang einer E-Mail im sichtbaren Bereich „above-the-fold“ zieht dieser besondere Aufmerksamkeit auf sich. Doch auch wenn er weiter unten in der Nachricht erscheint, kann er durch Design-Tricks hervorgehoben werden: Elemente wie beispielsweise farblich abgehobene Boxen oder Pfeile lenken das Augenmerk des Nutzers auf den Call-to-Action. Führen Sie hier A/B-Tests durch, um die optimale Position oder Farbgestaltung zu ermitteln.
Platzieren Sie verschiedene klickbare Inhalte in Ihrer E-Mail (beispielsweise die neuesten Produkte), bedenken Sie, dass die meisten Nutzer vermutlich den ersten dieser Links anklicken werden und ordnen Sie Ihre Elemente entsprechend strategisch nach Bedeutung.
Fazit
Es ist gut, sich abzuheben. Einige grundlegende Designregeln sollten Sie jedoch beachten, um die bestmögliche Zustellbarkeit, Öffnungs- und Interaktionsrate für Ihre Kampagnen zu erzielen. Auch im Interesse Ihrer Nutzer, die eine übersichtliche Struktur zu schätzen wissen werden.