← Alle Artikel
· 14 Min. Lesezeit

E-Mail-Client-Kompatibilität: Was wo funktioniert

Wissen Sie, welche CSS- und HTML-Funktionen in welchen E-Mail-Clients funktionieren.

Die Kompatibilität mit E-Mail-Clients ist die Kernherausforderung bei der Entwicklung von HTML-E-Mails. Im Gegensatz zu Webbrowsern, die sich weitgehend auf Standards geeinigt haben, rendern E-Mail-Clients HTML und CSS inkonsistent. Dieser Leitfaden dokumentiert, was wo funktioniert.

Wenn Sie sich nicht direkt mit Kompatibilitätsproblemen auseinandersetzen möchten, übernehmen E-Mail-Builder wie Sequenzy und Frameworks wie MJML diese Aufgaben für Sie. Aber das Verständnis der Landschaft hilft Ihnen, fundierte Entscheidungen zu treffen.

Die wichtigsten E-Mail-Clients

Outlook (Windows)

Der anspruchsvollste Client. Outlook 2007-2019 verwendet den Rendering-Engine von Microsoft Word, keinen Browser-Engine. Das bedeutet:

  • Keine CSS-Floats
  • Keine Hintergrundbilder auf divs (Tabellenzellen funktionieren)
  • Begrenzte Margin/Padding-Unterstützung
  • Keine CSS-Positionierung
  • Tabellen sind für Layout erforderlich

Outlook 365 (neues Outlook) ist etwas besser, hat aber immer noch erhebliche Einschränkungen.

Gmail

Gmail entfernt Style-Tags, es sei denn, sie sind im Head (für einige Clients). Es entfernt auch viele CSS-Eigenschaften. Wichtige Einschränkungen:

  • Entfernt einige CSS-Selektoren
  • Keine Unterstützung für eingebettete @media-Queries in einigen Kontexten
  • Inline-Styles für Zuverlässigkeit erforderlich
  • Blockiert externe Bilder standardmäßig

Gmail App (mobil) hat in einigen Bereichen bessere CSS-Unterstützung als Gmail Web.

Apple Mail (macOS/iOS)

Der fähigste E-Mail-Client. Verwendet WebKit, ähnlich wie Safari. Unterstützt:

  • Media Queries
  • CSS-Animation (begrenzte Anwendungsfälle)
  • Hintergrundbilder
  • Moderne CSS-Eigenschaften

Wenn Ihr Publikum hauptsächlich Apple-Nutzer sind, haben Sie mehr Designflexibilität.

Yahoo Mail

Mäßige CSS-Unterstützung. Entfernt einige Styles, aber weniger aggressiv als Gmail. Unterstützt Hintergrundbilder mit Fallbacks.

Outlook.com (Hotmail)

Unterschiedlich vom Desktop-Outlook. Verwendet einen browserbasierten Renderer. Bessere CSS-Unterstützung als Desktop-Outlook, aber immer noch Macken.

CSS-Eigenschaftsunterstützung

Überall sicher zu verwenden

/* These work in all major clients */
color: #333333;
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold;
line-height: 1.5;
text-align: center;
text-decoration: none;
background-color: #ffffff;
border: 1px solid #cccccc;
padding: 10px; /* on table cells */
width: 100%;
max-width: 600px;

Teilweise Unterstützung (Test erforderlich)

/* Work in most clients, issues in Outlook */
border-radius: 4px; /* No Outlook support */
background-image: url(...); /* Use VML for Outlook */
box-shadow: ...; /* Limited support */
margin: 10px; /* Inconsistent in Outlook */

Vermeiden oder vorsichtig verwenden

/* These cause problems */
display: flex; /* No email support */
display: grid; /* No email support */
position: absolute/relative; /* Very limited */
float: left/right; /* Outlook issues */
transform: ...; /* Limited support */
animation: ...; /* Only Apple Mail */

Layout-Techniken

Tabellen für Struktur

Tabellen bleiben die zuverlässige Layout-Methode:

<table role="presentation" width="100%" cellpadding="0" cellspacing="0">
  <tr>
    <td align="center" style="padding: 20px;">
      <table width="600" cellpadding="0" cellspacing="0">
        <tr>
          <td>Content here</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Outlook Conditional Comments

Outlook speziell ansprechen:

<!--[if mso]>
  <!-- Outlook-only code -->
  <table width="600"><tr><td>
<![endif]-->

  <div style="max-width: 600px;">
    Content for all clients
  </div>

<!--[if mso]>
  </td></tr></table>
<![endif]-->

VML für Outlook-Hintergrundbilder

Hintergrundbilder auf Abschnitten erfordern VML für Outlook:

<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:300px;">
<v:fill type="tile" src="background.jpg" color="#ffffff" />
<v:textbox inset="0,0,0,0">
<![endif]-->

<div style="background-image: url(background.jpg); background-color: #ffffff;">
  Content here
</div>

<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->

Bilder

Grundlegender Bildcode

<img
  src="https://example.com/image.jpg"
  alt="Description"
  width="600"
  height="300"
  style="display: block; max-width: 100%; height: auto; border: 0;"
>

Wichtige Attribute:

  • width/height: Dimensionen festlegen (Outlook benötigt diese)
  • display: block: Entfernt Lücke unter dem Bild
  • max-width: 100%: Responsive Skalierung
  • border: 0: Entfernt verlinkten Bildrand

Bildformate

  • JPG: Fotos, komplexe Bilder
  • PNG: Transparenz, einfache Grafiken
  • GIF: Animation (vorsichtig)
  • SVG: Begrenzte Unterstützung, in E-Mails vermeiden
  • WebP: Nicht in Outlook unterstützt

Schriften

Web-sichere Schriftstapel

font-family: Arial, Helvetica, sans-serif;
font-family: Georgia, Times, serif;
font-family: 'Courier New', Courier, monospace;

Benutzerdefinierte Schriften

Web-Schriftschriften funktionieren in einigen Clients (Apple Mail, iOS, einige Android). Mit Fallbacks verwenden:

<style>
  @import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
</style>

<p style="font-family: 'Open Sans', Arial, sans-serif;">
  Text with custom font
</p>

Outlook und Gmail verwenden den Fallback. Apple Mail verwendet die benutzerdefinierte Schrift.

Media Queries

Die Unterstützung variiert erheblich:

<style>
  @media screen and (max-width: 600px) {
    .mobile-full-width {
      width: 100% !important;
    }
    .mobile-hide {
      display: none !important;
    }
    .mobile-stack {
      display: block !important;
    }
  }
</style>

Media-Query-Unterstützung:

  • Apple Mail: Volle Unterstützung
  • iOS Mail: Volle Unterstützung
  • Gmail App (iOS): Unterstützung
  • Gmail App (Android): Unterstützung
  • Gmail (web): Begrenzt
  • Outlook: Keine Unterstützung

Verwendung von E-Mail-Buildern für Kompatibilität

E-Mail-Builder abstrahieren Kompatibilitätsbedenken. Sequenzy generiert HTML, das über Clients hinweg funktioniert. Sie gestalten visuell, das Tool kümmert sich um die technische Ausgabe.

Frameworks wie MJML kompilieren semantische Markup zu kompatiblem HTML. Sie schreiben sauberen Code, das Framework generiert die verschachtelten Tabellen und Inline-Styles.

Test-Tools wie Litmus zeigen die Darstellung über 90+ Clients. Sehen Sie Probleme, bevor Sie senden.

Teststrategie

  1. Zuerst in Outlook testen. Wenn es dort funktioniert, funktioniert es wahrscheinlich überall.
  2. Gmail überprüfen. CSS-Entfernung kann Probleme verursachen.
  3. Auf Mobilgeräten überprüfen. Über 60 % der Öffnungen sind mobil.
  4. Mit ausgeschalteten Bildern testen. Stellen Sie sicher, dass die Nachricht ohne Bilder klar ist.

Das Fazit

Die E-Mail-Client-Kompatibilität ist komplex, aber handhabbar. Halten Sie sich an bewährte Techniken: Tabellen für Layout, Inline-Styles, web-sichere Schriften mit Fallbacks. Testen Sie über Clients hinweg, bevor Sie senden.

Für Teams, die die Komplexität vermeiden möchten, übernehmen Tools wie Sequenzy und MJML die Kompatibilität automatisch. Die Ausgabe ist getestet, und Sie konzentrieren sich auf Inhalte statt auf Rendering-Macken.