Das Wichtigste in Kürze

• E-Mail-Design ist wie Gestalten für einen sehr strengen Drucker. Was im Browser oder im Designtool gut aussieht, sieht im Posteingang nicht immer genauso aus.
• Eine „posteingangsfertige“ E-Mail wird in jedem E-Mail-Client korrekt dargestellt, ist auf Mobilgeräten gut lesbar, lädt ihre Bilder und kommt durch Spamfilter.
• Viele häufige Designfehler lassen sich leicht beheben: Verwenden Sie JPEG- oder PNG-Bilder, kontrastreichen Text und websichere Schriftarten – und testen Sie immer vor dem Versand.
• Sie brauchen keinen Entwickler. Mit Tools wie Stripo und Benchmark Email können auch kleine Teams professionelle HTML-E-Mails ohne Code erstellen und versenden.

Wenn Sie schon einmal eine E-Mail erstellt haben, die auf Ihrem Bildschirm einwandfrei aussah, dann aber in Outlook zerschossen oder auf dem Smartphone unlesbar klein dargestellt wurde, sind Sie nicht allein. Das passiert Einsteigern ebenso wie erfahrenen Marketern.

Deshalb haben wir uns mit Stripo zusammengetan. Gemeinsam zeigen wir Ihnen, warum HTML-E-Mail-Design wichtig ist, wie Sie in Stripo eine Vorlage richtig aufbauen und wie Sie diese in den neuen HTML-Editor von Benchmark Email übertragen, um sie zu versenden.

Warum HTML-E-Mail-Design wichtig ist (auch wenn Sie nie Code schreiben)

Ehrlich gesagt: Ich habe nicht vor, jemals eine Zeile Code zu schreiben. Aber ich versende viele E-Mails. Deshalb gilt: Zu verstehen, wie HTML-E-Mails funktionieren , ist nach wie vor wichtig.

Der Kerngedanke: HTML für E-Mails folgt anderen Regeln als der Rest des Webs. Viele Marketer gehen davon aus, dass etwas, das in einem Design-Tool oder im Browser gut aussieht, auch im Posteingang gut aussieht. Das stimmt nicht immer – und das möchten Sie nicht erst auf die harte Tour herausfinden. Vor allem Outlook ist dafür berüchtigt, Styles zu entfernen und Inhalte unerwartet darzustellen.

Die Gestaltung von E-Mails ist ein wenig so, als würden Sie für einen sehr strengen Drucker gestalten. Manches lässt sich einfach nicht übertragen – und das ist so gewollt. Gmail, Outlook und Apple Mail können dieselbe E-Mail jeweils unterschiedlich darstellen. Deshalb setzen E-Mails nach wie vor auf tabellenbasierte Layouts, Inline-Styles und websichere Schriftarten. Gehen Sie mit der Haltung „Gestalten innerhalb fester Grenzen“ an die Sache heran, und Sie ersparen sich viel Kopfzerbrechen.

Was „bereit für den Posteingang“ wirklich bedeutet

Eine E-Mail, die bereit für den Posteingang ist, sieht nicht nur auf Ihrem Bildschirm gut aus. Sie muss:

• Überall korrekt dargestellt werden: In Gmail, Outlook und Apple Mail – auf dem Desktop ebenso wie auf Mobilgeräten.
• Auf dem Smartphone gut lesbar sein: Mehr als die Hälfte der Menschen liest E-Mails auf dem Smartphone. Wenn Abonnenten erst mit zwei Fingern zoomen müssen, interagieren sie seltener mit Ihren Inhalten.
• Bilder zuverlässig laden: Und trotzdem verständlich bleiben, wenn die Bilder nicht geladen werden. Bauen Sie eine E-Mail nicht um ein einziges Bild herum auf.
• Intakt bleiben: Kein unsichtbarer Text, keine zerschossenen Layouts und keine entfernten Styles.
• Spamfilter passieren: So erreicht sie den Posteingang überhaupt erst.

5 häufige Fehler beim E-Mail-Design (und wie Sie es besser machen)

Diese Fehler können jedem passieren. Einige davon habe ich selbst schon gemacht.

1. SVG- oder WebP-Bilder verwenden. Viele E-Mail-Clients unterstützen diese Formate nicht. Verwenden Sie stattdessen JPEG oder PNG.
2. Heller Text auf hellem Hintergrund. Setzen Sie für eine gute Lesbarkeit auf kontrastreiche Text- und Hintergrundfarben.
3. Sich auf Webfonts verlassen. Sie werden häufig durch Standardschriften ersetzt. Verwenden Sie websichere Schriftarten wie Arial oder Georgia.
4. Das Testen vergessen. Prüfen Sie vor jeder Kampagne die Vorschau und versenden Sie Test-E-Mails – so sehen Sie, wie Ihre E-Mail in den verschiedenen Clients dargestellt wird.
5. Die Ausgabe von Design-Tools direkt in Ihren ESP kopieren. Erstellen Sie die E-Mail in einem speziellen E-Mail-Tool oder bereinigen Sie den Code vor dem Einfügen.

Warum sollten Sie HTML-E-Mails selbst erstellen?

Nicht jeder hat einen Entwickler zur Hand – vor allem, wenn Sie allein arbeiten oder Teil eines kleinen Marketingteams sind. HTML-E-Mails selbst zu erstellen – mit den richtigen Tools – bietet Ihnen folgende Vorteile:

• Schnellere Kampagnen, ohne in der Warteschlange anderer festzuhängen
• Volle Kontrolle über das Design, ohne endlose Abstimmungen darüber, was gut aussieht
• Mehr Markenkonsistenz über alle Kanäle hinweg – auch in Ihren E-Mails
• Niedrigere Produktionskosten für Teams ohne großes Budget

So erstellen Sie E-Mails in Stripo

Stripo konzentriert sich auf eine Sache: den Produktionsprozess von E-Mails. Hier erstellen Sie die E-Mail, bevor Sie sie in Ihre Versandplattform exportieren:

• Ein visueller Drag-and-Drop-Editor, mit integriertem HTML/CSS-Editor für alle, die tiefer in die Technik einsteigen möchten
• Mehr als 1.600 Vorlagen für verschiedene Branchen, Jahreszeiten und E-Mail-Typen, sodass Sie nie bei null anfangen müssen
• Praktische Abkürzungen für Inhalte, etwa um Inhalte über einen Link in einen Blogbeitrags-Block zu übernehmen oder einen Videolink einzufügen, der automatisch ein Vorschaubild und eine Wiedergabeschaltfläche erzeugt
• Zusammenarbeit in Echtzeit und teilbare Freigabelinks für Teams, die vor dem Versand eine Freigabe benötigen
• Export zu mehr als 90 ESPs, darunter Benchmark Email

Stripo ist so aufgebaut, dass gerade das Erstellen einer schlechten E-Mail die eigentliche Herausforderung ist.

Anschließend übertragen Sie sie in Benchmark Email.

Sobald Ihre Vorlage fertig ist, übertragen Sie sie in Benchmark Email, genauer gesagt in den neuen HTML-Editor. Fügen Sie Ihren Code ein oder laden Sie die Datei hoch und prüfen Sie anschließend die Vorschau in der Desktop- und in der Mobilansicht. Über die Auswahl „Personalize“ können Sie Personalisierungsfelder wie den Vornamen hinzufügen, ohne den Code anzufassen. Außerdem fügt Benchmark automatisch Ihren Abmeldelink und Ihre Postanschrift ein, sodass die rechtlichen Anforderungen abgedeckt sind.

Probieren Sie es selbst aus: eine kurze Checkliste.

Bevor Sie Ihre nächste HTML-E-Mail versenden:

• Ein Ziel, eine Kernbotschaft, ein CTA
• Kernbotschaft und CTA als echter Text, nicht als Bild
• JPEG- oder PNG-Bilder mit aussagekräftigem Alt-Text
• Kontrastreiche Farben und websichere Schriftarten
• Mobile Vorschau geprüft
• Test-E-Mail in Gmail, Apple Mail und Outlook geöffnet

Sie haben noch kein Benchmark-Konto? Registrieren Sie sich kostenlos und testen Sie den HTML-Editor mit Ihrem ersten Design.

Häufig gestellte Fragen

Warum sieht meine E-Mail in Outlook anders aus als in Gmail?

Jeder E-Mail-Client nutzt eine eigene Rendering-Engine, und Outlook ist dafür bekannt, Styles zu entfernen und viele moderne CSS-Eigenschaften zu ignorieren. Deshalb setzt E-Mail-HTML auf Tabellen, Inline-Styles und Tests in verschiedenen E-Mail-Clients.

Muss ich programmieren können, um eine HTML-E-Mail zu versenden?

Nein. Visuelle Builder wie Stripo erstellen E-Mail-taugliches HTML für Sie, und mit dem HTML-Editor von Benchmark Email können Sie es importieren, in der Vorschau prüfen und personalisieren, ohne Code bearbeiten zu müssen.

Welche Bildformate eignen sich am besten für E-Mails?

JPEG und PNG sind die sicherste Wahl. Viele E-Mail-Programme unterstützen SVG und WebP nicht.

Wie übertrage ich meine Stripo-E-Mail in Benchmark Email?

Stripo kann direkt in Benchmark Email exportieren. Alternativ exportieren Sie Ihren HTML-Code und fügen ihn in den HTML-Editor von Benchmark ein oder laden ihn dort hoch.