Suche

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.

Wenn Sie Unterstützung bei einem Projekt mit Brevo suchen, können wir Sie mit dem richtigen zertifizierten Brevo-Expertenpartner zusammenbringen.

💬 War dieser Beitrag hilfreich?

5 von 35 fanden dies hilfreich