Einschränkungen bei der Verwendung von HTML für Ihre E-Mail-Kampagnen

Bei der Erstellung einer E-Mail-Kampagne müssen Sie immer eine Vorschau der E-Mail anzeigen und die E-Mail vor dem Versand auf verschiedenen E-Mail-Clients testen. Einige E-Mail-Clients unterstützen nicht alle HTML-Inhalte, da E-Mail-HTML nicht als Web-HTML entwickelt wird. Interaktive Elemente wie Flash oder JavaScript funktionieren auf den meisten E-Mail-Clients nicht.

❗️ Wichtig

Wir empfehlen die Verwendung des HTML-Blocks nur fortgeschrittenen Benutzern. Das Hinzufügen eines benutzerdefinierten HTML-Codes kann sich auf die Anzeige Ihrer E-Mail-Kampagne auf einigen E-Mail-Clients auswirken. Benutzerdefiniertes HTML muss so E-Mail-kompatibel und reaktionsschnell wie möglich sein. Um sicherzustellen, dass Ihre E-Mail wie erwartet auf E-Mail-Clients angezeigt wird, empfehlen wir dringend, Ihre E-Mail-Kampagne zu testen, und das vor der Sendung an Ihre Kontakte. 

Was ist der Unterschied zwischen dem HTML-Editor und dem HTML-Block?

Können Sie das Design Ihrer E-Mail-Kampagne mit zwei verschiedenen HTML-Tools anpassen: 

HTML-Editor HTML-Block

Der HTML-Editor ermöglicht Ihnen, Ihre gesamte E-Mail-Kampagne mit HTML zu gestalten. Um den HTML-Editor zu verwenden, erstellen Sie eine E-Mail-Kampagne und wählen Sie den HTML-Editor im Schritt Design aus. Um mehr zu erfahren, lesen Sie unseren entsprechenden Artikel Laden Sie eine HTML-Datei hoch, um Ihre Kampagne zu gestalten.

html-editor.gif

 

Welche HTML-Formate kann ich in meiner E-Mail-Kampagne verwenden?

In der nachstehenden Tabelle erfahren Sie, welche HTML-Formate sicher in Ihrer E-Mail-Kampagne verwendet werden können: 

✅ Sicher 🟠 Mit Vorsicht verwenden ❌ Nie verwenden
  • Hintergrundbilder
  • Benutzerdefinierte Web-Fonts
  • Breite Layouts
  • Eingebettete CSS
  • JavaScript
  • <iframe>
  • Flash
  • Eingebettetes Audio
  • Eingebettetes Video
    Um sicher ein Video in Ihr Kampagnendesign einzufügen, lesen Sie unseren Artikel dazu.
  • Formulare
  • <div> Layering

🌐 CSS

CSS ist begrenzt, wenn sie in E-Mail-HTML verwendet wird. Um die besten Ergebnisse bei der Gestaltung Ihrer E-Mail-Kampagne zu erhalten, empfehlen wir Folgendes: 

  • Verwenden Sie sehr einfache CSS 
    Nutzen Sie diese Website als Wörterbuch, um zu überprüfen, ob Ihre CSS auf E-Mail-Clients unterstützt wird.  
  • Nutzen Sie CSS nur für allgemeine Elemente wie Fonts und Farben, 
  • Verwenden Sie Inline-CSS statt eingebetteter CSS. In Inline-CSS sollten Hintergrundfarben oder <body>-Einstellungen mit einer 100 % breiten <Tabelle>, um Ihre E-Mail formatiert werden.
    ❗️ Wichtig
    Einige E-Mail-Clients entfernen Code-Zeilen, die mit einem Komma oder einem Punkt anfangen. Fügen Sie am Anfang jeder Zeile, die mit einem Komma oder einem Punkt beginnt, ein Leerzeichen hinzu, um dies zu vermeiden.

🔤 Websichere Schriftarten

Verwenden Sie Schriftarten, die einfach zu lesen sind und von einem E-Mail-Client leicht lesbar sind. Überprüfen Sie die Schriftarten, bevor Sie Ihre E-Mail-Kampagne versenden. Um sicherzustellen, dass Ihre Clients Ihre E-Mail-Kampagne mit einem von Ihnen gewählten Font lesen können, fügen Sie im Drag & Drop-Editor eine Fallback-Schriftart ein. Sie können wählen, welche Schriftarten verwendet werden sollen, wenn die gewählte Schriftart vom E-Mail-Client Ihres Empfängers nicht unterstützt wird. Um mehr zu erfahren, lesen Sie den Artikel Google Fonts zum Drag & Drop-Editor hinzufügen.

Wir empfehlen außerdem, maximal zwei bis drei Schriftarten in einer E-Mail-Kampagne zu verwenden. Um Ihre E-Mail leicht lesbar zu machen, wählen Sie eine Größe zwischen 14 und 16 px für den Text im Körper: 14 px für lange E-Mails mit Paragrafen und 16 px für kurze (zwei bis drei Sätze). 

🏞 Bildkarten

Sie können mühelos Bildkarten zu Ihren Kampagnen hinzufügen, indem Sie einen Link zu Ihrem Bildblock im Drag & Drop-Editor hinzufügen:

  1. Fügen Sie einen Bildblock zu Ihrem Kampagnendesign hinzu und klicken Sie auf das Bild. 
  2. Klicken Sie auf Link hinzufügen. Das Fenster Link einfügen/bearbeiten öffnet sich.
  3. Geben Sie Informationen zu folgenden Elementen ein:
    • Link-Typ, häufig ein Absolute Link (URL), Sie können jedoch einen beliebigen anderen Link-Typ wählen.
    • Link-Ziel, der Link, zu dem Ihr Bild führen soll. 
    • Link-Titel, d. h. das Wort, das angezeigt werden soll, wenn über das Bild gefahren wird.
  4. Klicken Sie auf Einfügen.

add-link-image-dde.gif

🚨 Autoescape

Wir lassen die HTML- (und JS-) Inhalte aller Variablen standardmäßig aus. Das bedeutet, dass HTML, die in einer Variable weitergegeben wird, ausgelassen und als Text wiedergegeben wird. Wenn der Inhalt Ihrer Variable beispielsweise <h1>Mein Titel</h1> ist, wird in Ihrer E-Mail-Vorlage genau dieser Text angezeigt: <h1>Mein Titel</h1>, anstelle des als H1-Titel formatierten Satzes "Mein Titel". In Autoescape deaktivieren und doppelte geschweifte Klammern in Ihren E-Mails anzeigen erfahren Sie mehr.

⏩ Nächste Schritte

🤔 Sie haben eine Frage?

Wenden Sie sich bei Fragen an unser Support-Team: Erstellen Sie einfach ein Ticket über Ihr Konto. Wenn Sie noch kein Konto haben, können Sie uns hier kontaktieren.

💬 War dieser Beitrag hilfreich?

4 von 24 fanden dies hilfreich