Weiter zum Hauptinhalt

Hol dir Hilfe von Experten

Von Schulungen bis hin zum Full-Service-Marketing: Unsere Partnercommunity kann dir dabei helfen, deine Ideen in die Tat umzusetzen.

Engagiere einen Experten

CSS in HTML-E-Mails

Artikel-URL kopieren
Kopiert

Hinweis

Die Informationen in diesem Artikel gelten nur für den klassischen Builder. Wie du den neuen Builder verwendest, erfährst du in den Artikel Eine E-Mail mit dem neuen Builder gestalten.

CSS funktioniert in HTML-E-Mails, hat jedoch Einschränkungen. Im Allgemeinen ist möglichst einfacher CSS-Code für E-Mails am besten geeignet.

Anbei findest du unsere Empfehlungen für die Verwendung von CSS in HTML-E-Mails sowie einige Informationen zur Behebung von CSS-Problemen.

CSS: Allgemeine Tipps und Fehlerbehebung

Anbei eine Reihe von allgemeinen Hinweisen, die dir helfen, beim Schreiben von CSS-Code für deine Kampagnen die bestmöglichen Ergebnisse zu erzielen. Vergiss nicht, dass CSS zwar mit HTML-E-Mails kompatibel ist, in diesem Zusammenhang jedoch eine höhere Unvorhersehbarkeit aufweist.

  • Vermeide unnötig komplizierten Code.
    Das Codieren von HTML-E-Mails unterscheidet sich vom Codieren einer Website. Je einfacher der Code, desto geringer ist das Risiko von Fehlern.
  • Beschränke die Verwendung von CSS auf allgemeine Stilelemente.
    Die besten Ergebnisse erzielst du, wenn du CSS ausschließlich für allgemeine Stilemente wie Schriftarten oder Farben verwendest.
  • Inline-CSS verwenden
    Da browserbasierte E-Mail-Anwendungen wie Gmail - und -Tags entfernen, solltest du stets Inline-CSS statt eingebettetem CSS verwenden.

Inline-Ausrichtung für eingebetteten CSS-Code einstellen

Wir empfehlen dir ausdrücklich, unser CSS-Inliner-Tool für die automatische Inline-Ausrichtung deines eingebetteten CSS-Codes zu verwenden.

Wenn du deinen CSS-Code manuell ausrichten möchtest, solltest du für sämtliche Hintergrundfarben oder -Einstellungen einen

-Außenrand mit 100-prozentiger Breite um deine E-Mail einfügen.

Dein CSS-Code sollte ungefähr wie im folgenden Beispiel aussehen.

<span style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #BBBBBB;"> 

 Dein Inhalt hier …

 </span> 

Hinweis

Gelegentlich entfernt der E-Mail-Dienst eines Abonnenten Codezeilen, die mit Punkten beginnen. Dies kann dazu führen, dass dein CSS-Code nicht mehr wie erwartet funktioniert. Wenn du die Inline-Ausrichtung deines CSS-Codes manuell vornimmst, kannst du dieses Problem vermeiden, indem du vor jeder Zeile, die mit einem Punkt beginnt, ein Leerzeichen einfügst.

Technischer Support

Hast du eine Frage?

Zahlende Nutzer können sich anmelden, um E-Mail- oder Chat-Support zu erhalten.

War dieser Artikel hilfreich?

Ähnliche Inhalte

CSS Inliner verwenden

Der CSS Inliner von Mailchimp konvertiert eingefügten Stil in Inline-CSS und spart dir Zeit. Wir erklären dir, wie du die CSS Inliner und die CSS-Selektoren aktivieren kannst.

Einschränkungen von HTML-E-Mails

Das Codieren von HTML-E-Mails unterscheidet sich nicht sehr vom Codieren einer Website in den 1990ern. Hier erfährst du mehr über die Einschränkungen von E-Mails und wie du sie umgehen kannst.