Litmus Live Recap: So bleibt Ihr E-Mail-Design aktuell

2024-11-07 · Blocks team · 7 Min. Lesezeit

Bei durchschnittlich 333 Milliarden verschickten E-Mails pro Tag ist E-Mail-Marketing ein hart umkämpftes Feld. Weil E-Mails so günstig sind, werden sie uns wohl noch sehr lange erhalten bleiben. Deshalb sollten Sie lernen, hochwertige E-Mails zu erstellen – falls Sie es nicht schon beherrschen.

Neben der großen Konkurrenz warten auf E-Mail-Marketer noch weitere Herausforderungen.

Die Herausforderungen für E-Mail-Marketer heute:

Mehr E-Mail-Clients und Geräte als je zuvor. Laut Statista gibt es 2022 rund 4,3 Milliarden E-Mail-Nutzer. Das bedeutet sehr, sehr viele Geräte und E-Mail-Clients, an die wir uns anpassen müssen.
E-Mail-Müdigkeit und sinkende Aufmerksamkeit.
Nutzereinstellungen wie der Dark Mode. 2020 fand Android Authority in einer Umfrage heraus, dass fast 82% der Android-Nutzer den Dark Mode bevorzugen.
Automatische Bots sortieren aus und filtern Posteingänge.
Spam und Phishing-E-Mails nehmen zu. Laut Statista waren im September 2021 rund 88,88 Milliarden von 105,67 Milliarden E-Mails Spam.
Firewalls blockieren oder verändern E-Mails standardmäßig.

Und das ist erst der Anfang der Liste. Trotzdem sollten wir darin kein Hindernis für eine wirksame E-Mail-Kampagne sehen. Im Gegenteil: So können Marketer ihr Können ausbauen und erstklassige Inhalte schaffen.

3 Prinzipien des E-Mail-Designs, an die Sie sich halten sollten

E-Mail-Design ruht auf drei Säulen:

Barrierefreiheit.
Responsivität.
Schönheit.

Sehen wir uns jede davon genauer an.

Barrierefreiheit. Früher hieß barrierefrei bei E-Mails meist: Alt-Texte, gut überfliegbarer Aufbau, lesbare Schriftarten und -größen. Heute gehören auch Prägnanz und klare Hierarchie, optimaler Kontrast und der bewusste Einsatz von Weißraum dazu.

Responsivität. Früher galt als wichtigste Anforderung an eine responsive E-Mail: Sie passt sich an verschiedene Bildschirmauflösungen an und wird korrekt angezeigt. Mit der Entwicklung des E-Mail-Marketings kamen neue Anforderungen hinzu. Heute müssen E-Mails den Dark Mode, Bildblocker und die optimale Darstellung auf Mobilgeräten berücksichtigen.

Schönheit. Denken Sie daran: Eine E-Mail soll nicht nur ins Auge fallen, sondern auch ein vollwertiges Produkt sein.

Vor dem Design: Prüfen Sie Ihre E-Mail-Plattform

Bei dem rasanten Tempo, in dem sich E-Mail-Plattformen heute entwickeln, verliert man schnell den Anschluss. Nicht nur die Plattformen entwickeln sich weiter, sondern auch Ihr Unternehmen. Und wenn Sie viele neue Abonnenten gewinnen, können diese Ihr E-Mail-Marketing spürbar verändern: Vielleicht nutzen sie einen anderen E-Mail-Client als den gewohnten oder lesen lieber mobil als am Desktop. All das kann sich direkt auf das E-Mail-Design auswirken.

Um bei Veränderungen auf dem Laufenden zu bleiben, sollten E-Mail-Marketer jedes Jahr eine Bestandsaufnahme machen und:

die wichtigsten E-Mail-Clients ermitteln;
das Verhältnis von Desktop- und Mobilnutzern verfolgen;
das Verhältnis von Freemail- und geschäftlichen E-Mail-Adressen verfolgen.

Beispiel für eine Bestandsaufnahme

Angenommen, Sie arbeiten im B2B-Bereich und stellen bei der Bestandsaufnahme fest, dass die meisten Ihrer Nutzer:

Outlook oder Gmail als E-Mail-Client verwenden;
geschäftliche E-Mail-Adressen haben;
E-Mails am Desktop-Computer lesen.

Dann könnten beim E-Mail-Design unter anderem diese Punkte wichtig sein:

Desktop-Clients haben Vorrang. Das heißt nicht, dass Sie die mobile Version ganz vergessen sollen. Sie achten nur besonders darauf, dass die Desktop-Version Ihrer E-Mails möglichst makellos ist.
Firewall (Bildblocker). Darauf haben Sie leider keinen Einfluss. Der beste Rat lautet also: Gestalten Sie E-Mails so, dass sie auch ohne Bilder verständlich sind.
Clients mit schwacher CSS-Darstellung. Farben, Tabellen, Buttons und andere Elemente einer E-Mail können anders aussehen als geplant. Das sollten Sie beim Gestalten unbedingt berücksichtigen.

Worauf Sie beim Gestalten von HTML-E-Mail-Vorlagen achten sollten

Tabellen – Denken in Kästchen

Tabellen sind das Fundament für robustes, responsives E-Mail-Design, denn sie:

werden am einheitlichsten dargestellt (im Vergleich zu Floats, Padding, Margins und Ausrichtung). Informationen in Tabellenform lassen sich leichter erfassen. Stellen Sie sich das Beispiel unten ohne die horizontalen Balken vor – die Orientierung in der E-Mail wäre schwierig.

Beispiel für ein E-Mail-Vorlagendesign mit Tabelle

lassen sich für Mobilgeräte leichter gestalten und steuern – Spalten klappen zu Zeilen um. Anders als reines CSS funktionieren HTML-Tabellen in E-Mail-Clients gut und verwandeln Ihr schönes Layout nicht in etwas völlig anderes.

Optimierung für Text

Bewährt hat sich: Vermitteln Sie Text und Buttons nicht über Bilder. Bilder werden oft blockiert oder gar nicht geladen. Wenn Sie Text und Bild kombinieren, bleibt das Hauptangebot lesbar, auch wenn das Bild blockiert wird. So erreichen Sie die meisten Kunden.

Außerdem:

Media Queries oder automatische Größenanpassung helfen, Text auf Mobilgeräten besser darzustellen;
HTML-Buttons passen sich im Dark Mode an und fallen stärker auf als Bilder.

Angebot als Text plus Bild und als reines Bild bei blockierten Bildern: Lesbar bleibt nur die Version mit echtem Text

Im ersten Beispiel können Nutzer das Angebot trotzdem lesen, neugierig werden und auf der Website mehr erfahren. Im zweiten nicht – sie verpassen jede Chance, vom Angebot zu erfahren und zu kaufen. Eine Situation, in der Nutzer und Unternehmen gleichermaßen verlieren.

Welche Bildformate sich für Ihre E-Mail-Vorlage eignen

PNGs

Dieses Bildformat ist sehr nützlich für innovatives Design und um unberechenbares CSS zu umgehen.

Es ermöglicht Gestaltungsoptionen wie:

Transparenz/Verlauf

E-Mail von Sensei, in der ein PNG-Foto über einen transparenten Verlauf in den weißen Hintergrund übergeht

Schlagschatten

Beispiel einer E-Mail-Vorlage mit einem PNG mit Schlagschatten

PNG-Bilder lassen sich auch in Streifen schneiden, um Abschnitte der E-Mail zu trennen – besonders für Übergänge zwischen verschiedenen Hintergrundfarben.

So schaffen Sie visuelle Trennung, heben Informationen hervor und verbessern die Lesbarkeit.

Beispiel für ein E-Mail-Vorlagendesign mit einem PNG als visuelle Trennung

GIFs muss man nicht mehr meiden:

Sie sind Flash vorzuziehen, das E-Mail-Clients nie unterstützt haben und das inzwischen ganz eingestellt ist.
Schleifen sorgen für nahtlose Animationen. Wenn Sie alles richtig machen, merken Nutzer gar nicht, dass sich das GIF wiederholt.
Weniger Farben = kleinere Dateien, Ihre E-Mails laden also schneller.

Beispiel einer E-Mail-Vorlage mit GIF

Digitale Illustrationen sind 2022 im E-Mail-Design ebenfalls ein Muss. Eine digitale Illustration ist Kunst, die mit digitalen Werkzeugen entsteht. Verwechseln Sie sie nicht mit bearbeiteten Fotos: Digitale Illustrationen werden von Grund auf neu gezeichnet.

Ihre Vorteile:

Sie sind vielseitig und lassen sich leicht skalieren, bearbeiten und wiederverwenden. So brauchen Sie viel weniger Zeit für visuelle Inhalte Ihrer E-Mails.
Sie transportieren Ihre Marke, auch wenn CSS-Elemente unberechenbar sind. CSS-Elemente können ihre Farbe ändern (und Ihre ursprüngliche Idee zunichtemachen), digitale Illustrationen bleiben dagegen gleich – egal, in welchem E-Mail-Client die Abonnenten Ihre E-Mails lesen.

So holen Sie das Beste aus digitalen Illustrationen heraus:

Gestalten Sie sie mit Schlagschatten, Kontur oder Innenabstand (bei JPEG). So wirkt die Illustration lebensechter.
Wählen Sie mittlere Farbtöne, damit die Bilder im Dark Mode nicht mit dem Hintergrund verschwimmen. So sehen sie in jedem Modus großartig aus, in dem Abonnenten Ihre E-Mail lesen.

Beispiel einer digitalen Illustration eines Computers in einer E-Mail-Vorlage

CSS (Cascading Style Sheets) ist der Teil des Codes von HTML-E-Mails, der das Design bestimmt: Schriften, Farben, Innenabstände usw. Ein sehr praktisches, aber tückisches Werkzeug, denn in manchen Clients wird CSS falsch dargestellt und Ihre E-Mail sieht plötzlich ganz anders aus – wie im Beispiel unten.

Wie sich mit CSS gestaltete Markenfarben im Dark Mode von E-Mail-Clients verändern

Seien Sie deshalb vorsichtig und testen Sie E-Mails mit CSS in verschiedenen E-Mail-Clients, um böse Überraschungen zu vermeiden.

Das Wichtigste in Kürze

Setzen Sie Prioritäten nach den Anforderungen der E-Mail-Clients Ihrer Abonnenten und gestalten Sie entsprechend. Verschwenden Sie keine Zeit mit Dingen, die sich als unnötig erweisen.
Sparen Sie Zeit und Ressourcen (bauen Sie robuste Vorlagen für wiederkehrende Anlässe). So bleibt mehr Zeit für andere wichtige Aufgaben.
Nehmen Sie Umbrüche an und passen Sie sich an, etwa an Responsivität und Dark Mode. Nur wer mit der Zeit geht, verschickt E-Mails, die ankommen.
Trauen Sie sich, Ihre Entwicklungs- und Designteams zu schulen – Sie bringen wichtige Erkenntnisse und Fachwissen mit. Denken Sie daran: Sie alle verfolgen dasselbe Ziel und erreichen es nur gemeinsam.

Litmus Live ist eine Marketingkonferenz, die 2 Tage dauert und sehr viele Experten für digitales Marketing zusammenbringt. Wir haben beim Vortrag von Ali Mahad „Accessible, Responsive, and Beautiful Email Design in 2022“ mitgeschrieben, eigene Zahlen und Ideen ergänzt und daraus einen Artikel gemacht, der Ihnen bei der Orientierung im E-Mail-Design hilft.

Erstellen Sie eine E-Mail-Vorlage in Blocks und probieren Sie diese Techniken aus!

Mehr über andere Konferenzen und Messen rund ums E-Mail-Marketing lesen Sie in unseren Artikeln über die kommenden E-Mail-Marketing-Konferenzen 2023.