10 Best Practices für HTML-E-Mail-Design

Create your very own Auto Publish News/Blog Site and Earn Passive Income in Just 4 Easy Steps

E-Mail-Design ist eine einzigartige Praxis. Zum einen gibt es einige große Unterschiede zwischen Web- und E-Mail-Entwicklung. Aber es gibt noch viele andere Faktoren, die E-Mail-Entwickler und -Designer bei der Erstellung auffälliger und effektiver Kampagnen berücksichtigen müssen.

In diesem Artikel behandeln wir einige Standardtipps und Best Practices für das E-Mail-Design. Wir beantworten außerdem die häufigsten Fragen zum E-Mail-Layout und erklären, warum manche Dinge funktionieren und andere nicht.

Aber gestatten Sie uns zunächst eine kurze Geschichtsstunde …

Eine kurze Geschichte der E-Mail

Bevor wir uns mit den Best Practices für das E-Mail-Design für Entwickler befassen, machen wir eine Reise zurück in das dunkle Zeitalter der E-Mail-Geschichte.

E-Mail entstand in den frühen Tagen des Internets. Die Akteure der Branche waren in Eile, so viele E-Mail-Benutzer wie möglich zu gewinnen, und zeigten kaum Interesse an der Zusammenarbeit bei der Entwicklung kompatibler oder standardisierter E-Mail-Clients und Rendering-Engines.

Deshalb ist die E-Mail-Codierung immer noch eine der schwierigsten Aufgaben, die Sie mit Hypertext Markup Language (HTML) erledigen können. Die E-Mail-Clients, die wir heute verwenden, haben sehr unterschiedliche E-Mail-Rendering-Engines und die Standardisierung schreitet sehr langsam voran.

Glücklicherweise möchte eine neue Gruppe namens Email Markup Consortium dies ein für alle Mal ändern. Erfahren Sie mehr über die Standardisierungspläne des EMC.

10 Fragen zu Best Practices für E-Mail-Design

Okay, die Standardisierung von E-Mails ist im Moment eine Qual und es ist schwierig, eine einheitliche HTML-E-Mail-Lösung zu programmieren. Dennoch sind hier 10 häufig gestellte Fragen und die Best Practices, die wir für das E-Mail-Design empfehlen:

1. Was ist die richtige Pixelbreite (px) für E-Mails?
2. Soll ich in E-Mails Videos verwenden?
3. Kann ich jede beliebige Schriftart verwenden?
4. Soll ich Hintergrundbilder verwenden?
5. Warum sollte ich responsive E-Mail-Designs erstellen?
6. Soll ich Emojis verwenden?
7. Wie verwendet man eine CTA-Schaltfläche am besten?
8. Wie kann ich meiner E-Mail eine persönliche Note verleihen?
9. Muss ich überhaupt schicke HTML-E-Mails versenden?
10. Sollten meine E-Mails einem IA/B-Test unterzogen werden?

Lassen Sie uns im Folgenden jeden einzelnen Punkt durchgehen.

1. Was ist die beste Größe für E-Mails?

Wenn Sie schon länger mit E-Mails zu tun haben, haben Sie wahrscheinlich schon von der E-Mail-Breite von 600 Pixeln gehört. Ist das nun Mythos oder Realität? Das ist eine knifflige Frage: Es ist ein bisschen von beidem.

Aufgrund der kleineren Bildschirmgröße war in der Anfangszeit von HTML-E-Mails 600 Pixel die gängigste E-Mail-Breite.

Aber müssen E-Mails heutzutage immer noch eine Breite von 600 Pixeln aufweisen?

Obwohl die Bildschirmgröße seitdem stark zugenommen hat, könnten einige E-Mail-Clients wie Yahoo Mail und Outlook Probleme mit breiten E-Mails haben.

Die meisten Microsoft Outlook-Benutzer verwenden die 3-Spalten-Ansicht. Dabei werden die ersten beiden Spalten des Bildschirms größtenteils abgedeckt, und für die Anzeige von E-Mails bleiben weniger als 50 % des Bildschirms übrig.

Auch in Yahoo Mail verwenden Benutzer eine ähnliche 3-Spalten-Ansicht. Darüber hinaus werden auf der rechten Seite des Bildschirms Banneranzeigen angezeigt, die zusätzlichen Platz beanspruchen.

Wir haben eine Reihe von E-Mail-Rendering-Tests durchgeführt, um festzustellen, wie sich unterschiedliche E-Mail-Breiten in Yahoo und Outlook verhalten.

Schauen wir uns unten eine E-Mail-Vorlage mit einer Breite von 750 Pixeln von Econsultancy.com in Yahoo Mail an.

Sie können sehen, dass die rechte Seite der E-Mail bei der gängigsten Auflösung von 1366 × 768 Pixeln abgeschnitten ist. Die E-Mail würde in Outlook abgeschnitten, selbst wenn die Bildschirmgröße gleich ist.

Basierend auf unseren Tests beträgt die maximale E-Mail-Breite, die in Outlook und Yahoo auf den Bildschirm passt, etwa 650 Pixel. Wenn also eine erhebliche Anzahl Ihrer Abonnenten diese E-Mail-Clients verwendet, empfehlen wir Ihnen, unter 650 Pixel zu bleiben oder einfach die gängigste Breite von 600 Pixel zu verwenden.

2. Sollte ich Videos in E-Mails verwenden?

Die meisten E-Mail-Clients unterstützen keine eingebetteten Videos in E-Mails – nur einige E-Mail-Clients, wie z. B. Apple Mail oder iOS, unterstützen eingebettete HTML5-Videos.

Anstelle von Videos empfehlen wir die Verwendung animierter GIFs. Mit animierten GIFs können Sie fast den gleichen Effekt wie mit einem Video erzielen. Sie funktionieren in den meisten E-Mail-Clients, lassen sich jedoch in Outlook 2007-2013 nicht abspielen. Dort wird das GIF nur als erstes Bild der Animation angezeigt. Schauen Sie sich einige kreative Beispiele für animierte GIFs an, die uns gefallen.

3. Kann ich jede beliebige Schriftart verwenden?

E-Mail-Designer und Vermarkter fragen Sie wahrscheinlich ständig nach speziellen Schriftarten. Wir können es ihnen nicht verdenken: Websichere Schriftarten wie Arial oder Times New Roman sind ziemlich langweilig. Allerdings ist die Schriftartenunterstützung über diese „websicheren Schriftarten“ hinaus nicht in allen E-Mail-Clients standardisiert.

Eine Lösung besteht darin, Webfonts zu verwenden, die auf einem Server gehostet werden, wie z. B. Google Fonts. Sie können diese Webfonts mit den CSS-Tags @font-face oder @import verwenden. Bei einigen E-Mail-Clients können Sie auch die Methode. Erfahren Sie mehr über die Verwendung von Webfonts und wie Sie mithilfe von Font-Stacks Sicherungsoptionen erstellen, falls Ihre ausgewählte Schriftart ausfällt.

4. Soll ich Hintergrundbilder verwenden?

Einige E-Mail-Clients, insbesondere die Desktopversionen von Outlook, deaktivieren Bilder in Ihren E-Mail-Kampagnen automatisch. Das kann insbesondere bei Hintergrundbildern problematisch sein. Wenn Sie beispielsweise hellen Text auf einem dunklen Hintergrundbild verwenden, kann der E-Mail-Text unlesbar sein, wenn das Hintergrundbild nicht geladen wird (und ein leerer/weißer Hintergrund übrig bleibt).

Vermeiden Sie möglichst die Verwendung von Hintergrundbildern und erstellen Sie Designs, bei denen Text und Bilder klar voneinander getrennt sind. Stattdessen können Sie einen kugelsicheren Hintergrund erstellen, indem Sie CSS und HTML verwenden, um das Aussehen eines Hintergrundbilds nachzubilden.

Achten Sie neben der Verwendung eines kugelsicheren Hintergrunds immer darauf, dass Sie eine ausfallsichere Hintergrundfarbe haben, sodass Ihre E-Mail-Nachrichten auch dann angezeigt werden, wenn dies bei Ihrem Hintergrund nicht der Fall ist.

Kugelsicherer Hintergrund

Blaue Fallback-Hintergrundfarbe mit deaktivierten Bildern

5. Warum sollte ich meine E-Mails responsive gestalten?

Im Jahr 2019 wurden 60 % aller E-Mails auf Mobilgeräten geöffnet. Responsive E-Mail-Design, also die Optimierung von E-Mails für unterschiedliche Bildschirmgrößen, ist ein wichtiger Bestandteil der E-Mail-UX. Erreichen Sie Ihre Zielgruppe, indem Sie sicherstellen, dass Ihre Abonnenten Ihre Nachrichten auf jedem Gerät lesen können.

Sie wissen nicht, wo Sie anfangen sollen? Schauen Sie sich unser Tutorial zum responsiven HTML-E-Mail-Design an.

6. Sollte ich Emojis verwenden?

Emojis oder keine Emojis – das ist hier die Frage! Wir haben diesbezüglich keine klare Linie. Schließlich unterscheidet sich die Emoji-Unterstützung bei verschiedenen Kunden erheblich. Stattdessen können wir Ihnen empfehlen, zu prüfen, ob bei Ihren Abonnenten eine breite Emoji-Unterstützung besteht, und unsere Best Practices für die Verwendung von Emojis zu befolgen.

7. Wie fügt man am besten eine CTA-Schaltfläche hinzu?

Wir empfehlen die Verwendung eines kugelsicheren Buttons, um einen Call-to-Action (CTA) oder andere anklickbare Buttons hinzuzufügen. Wie kugelsichere Hintergründe basieren kugelsichere Buttons auf CSS und HTML, um Buttons darzustellen. Dies macht diese Buttons in verschiedenen E-Mail-Clients viel zuverlässiger als bildbasierte Buttons. Bildbasierte Buttons können Ihre Klickraten und Ihren ROI beeinträchtigen. Schließlich können Sie keine Conversions erzielen, wenn Ihre Abonnenten aufgrund eines Darstellungsproblems im E-Mail-Client nicht auf Ihren Button klicken können.

Wenn ein Abonnent einen E-Mail-Client verwendet, bei dem Bilder deaktiviert sind, verschwindet außerdem Ihre CTA-Schaltfläche. Und das ist ein ziemlich wichtiges Element, das verloren geht.

8. Wie kann ich dem E-Mail-Design eine persönliche Note verleihen?

Wenn Sie an Personalisierung denken, fällt Ihnen als Erstes einfach die Verwendung des Namens eines Abonnenten in der Betreffzeile oder im E-Mail-Text ein. Sie können aber auch das E-Mail-Design verwenden, um das Posteingangserlebnis zu personalisieren.

Wenn Sie beispielsweise eine segmentierte Liste für Ihr E-Mail-Marketing verwenden, können Sie Ihr E-Mail-Design an die Vorlieben und Präferenzen dieser Segmente anpassen.

Dynamischer Inhalt ist eine noch fortschrittlichere Möglichkeit, das E-Mail-Design zu personalisieren. Er bietet E-Mail-Inhalte, die sich je nach Abonnentendaten oder deren Verhalten ändern. Dazu können beispielsweise ihr Standort, die Tageszeit, zu der sie die E-Mail öffnen, oder sogar das Wetter an ihrem Wohnort gehören.

Eine Möglichkeit hierfür ist die Verwendung der Variablenzuordnung in Ihrer HTML-E-Mail-Vorlage. Sie können die Kundendaten in Ihren Datenbanken, wie Namen oder Kaufmuster, verwenden und diese Variablen in einer HTML-E-Mail-Vorlage zuordnen.

Wenn Ihnen das ein bisschen zu technisch klingt, keine Sorge. Es gibt einige großartige Lösungen, die Ihnen dabei helfen können, E-Mails dynamische Inhalte hinzuzufügen. Dazu gehören NiftyImages, Movable Ink und Zembula.

9. Muss ich überhaupt schicke HTML-E-Mails versenden?

Es gibt einige Anwendungsfälle, in denen minimalistische E-Mails im Klartext besser funktionieren als solche mit viel Design. Beispielsweise sind B2B-E-Mails (kalte E-Mails) und Transaktions-E-Mails in ihrem Design oft überwiegend simpel.

Wenn Ihre E-Mail viel Text enthält und Sie sich wirklich auf die Macht der Worte konzentrieren möchten, ist es sehr wahrscheinlich, dass Sie überhaupt kein besonders ausgefallenes E-Mail-Design benötigen. In diesen Fällen könnten Sie eine einfache HTML-E-Mail-Vorlage verwenden, die fast wie eine reine Text-E-Mail aussieht. Sie können sich bei der Verwendung von Bildern auf das Wesentliche konzentrieren:

• Dein Logo: Zeigen Sie, dass die angegebene E-Mail zu Ihrer Marke gehört. Dies ist eine hervorragende Gelegenheit, Ihren Firmennamen hervorzuheben.
• Bilder Ihrer Produkte oder Dienstleistungen: Können Sie sich eine reine Text-E-Mail von Bestbuy vorstellen? Die meisten Menschen erwarten von Unternehmen bildreiche, optisch ansprechende und stilvolle E-Mails mit schönen Bildern.
• Social-Media-Symbole: Machen Sie Ihre anderen Online-Kommunikationskanäle bei Ihren E-Mail-Abonnenten bekannt.

Bevor Sie mit dem Entwurf Ihrer ersten E-Mail-Vorlage beginnen, sehen Sie sich an, welche Art von E-Mails Ihre Konkurrenten versenden, damit sich Ihre E-Mails von der Masse abheben und Ihren eigenen Stil finden, um im harten Wettbewerb von heute erfolgreich zu sein.

10. Sollten meine E-Mails einem IA/B-Test unterzogen werden?

Ja. Nutzen Sie die Daten, die Sie aus Ihren E-Mail-Kampagnen erhalten, um bessere E-Mail-Designs für zukünftige Kampagnen zu erstellen. Verwenden Sie A/B-Tests, um verschiedene Designs bei Teilmengen Ihrer Abonnenten auszuprobieren und herauszufinden, welches besser funktioniert. Berücksichtigen Sie dies und wiederholen Sie es für zukünftige E-Mail-Kampagnen.

Einpacken

Wir hoffen, dass wir Ihnen mit diesen 10 Tipps und Tricks geholfen haben, einige große Fallstricke zu vermeiden. Sie sind sich nicht sicher, wie Ihre E-Mail aussehen wird? Mit dem Testtool von Email on Acid können Sie in Sekundenschnelle in der Vorschau sehen, wie Ihre E-Mail in verschiedenen E-Mail-Clients angezeigt wird.

Dieser Artikel wurde am 26. Juli 2022 aktualisiert. Er wurde erstmals im März 2017 veröffentlicht.

Autor: Das Email on Acid Team

Das Content-Team von Email on Acid besteht aus digitalen Vermarktern, Content-Erstellern und echten E-Mail-Freaks. Verbinden Sie sich mit uns auf LinkedIn, folgen Sie uns auf Facebook und twittern Sie unter @EmailonAcid auf Twitter für weitere interessante Sachen und tolle Gespräche zum Thema E-Mail-Marketing.

Create your very own Auto Publish News/Blog Site and Earn Passive Income in Just 4 Easy Steps