Outlook ist einer der meistgenutzten E-Mail-Clients, doch die verschiedenen Versionen stellen E-Mails unterschiedlich dar. Frühere Versionen wie Outlook 2000–2003 verwendeten Internet Explorer als Rendering-Engine. Mit der Veröffentlichung von Outlook 2007 wurde die Rendering-Engine auf Microsoft Word umgestellt. Microsoft Word unterstützt viele standardmäßige HTML- und CSS-Eigenschaften nicht und bringt eigene Fehler mit sich.

Sowohl Internet Explorer als auch Microsoft Word haben eigene Einschränkungen, die dazu führen können, dass E-Mails fehlerhaft angezeigt oder verzerrt dargestellt werden.

Häufige Darstellungsprobleme in Outlook und Lösungen

Beachten Sie beim Entwerfen Ihrer E-Mails die folgenden häufigen Probleme:

Hintergrundbilder und Button-Styling in Outlook

• ⚠️Problem: Viele Outlook-Versionen — insbesondere klassische Desktop-Versionen, die Microsoft Word als Rendering-Engine verwenden — unterstützen CSS-basierte Hintergrundbilder und moderne Button-Stile wie abgerundete Ecken nur eingeschränkt. Um diese Elemente korrekt anzuzeigen, ist klassisches Outlook auf VML (Vector Markup Language) angewiesen. Ohne VML werden Hintergrundbilder möglicherweise nicht gerendert, und Buttons können flach oder fehlerhaft dargestellt werden.

  Obwohl neuere Webversionen von Outlook, wie Outlook.com und Microsoft 365 Webmail, CSS-Hintergründe unterstützen, benötigen klassische Desktop-Versionen weiterhin Fallbacks.

• 📉Auswirkung:
  • Hintergrundbilder werden möglicherweise nicht angezeigt.
  • Buttons können ihr Styling verlieren und als einfache Rechtecke erscheinen.
  • E-Mails können unvollständig oder in verschiedenen Outlook-Versionen visuell inkonsistent wirken.
• 🛠️Lösung:
  • Verwenden Sie eine einfarbige Hintergrundfarbe als Fallback.
  • Für vollständige Kompatibilität verwenden Sie VML, um Buttons und Hintergrundbilder in klassischem Outlook Desktop zu rendern.
  • Alternativ können Sie ein statisches Button-Bild verwenden, das mit einer URL verlinkt ist, oder Hintergrundgrafiken als reguläre <img>-Blöcke einfügen.

• Beispiele für Hintergrundbilder:

  • ❌ Standard-CSS, funktioniert in modernen Clients, aber nicht in klassischem Outlook Desktop:

  <table width="600" height="200" cellpadding="0" cellspacing="0" border="0" style="background-image:url('https://via.placeholder.com/600x200'); background-size:cover;">
    <tr>
      <td align="center" valign="middle" style="color: #fff; font-size: 24px;">
        Dies ist ein Hintergrundbild (CSS-Methode).
      </td>
    </tr>
  </table>

  • ✅ VML-Fallback, funktioniert in klassischem Outlook Desktop:

  <!--[if gte mso 9]>
    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:200px;">
      <v:fill type="frame" src="https://via.placeholder.com/600x200" color="#cccccc"/>
      <v:textbox inset="0,0,0,0">
  <![endif]-->
  <table width="600" height="200" cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td align="center" valign="middle" style="color: #fff; font-size: 24px;">
        Dies ist ein Hintergrundbild (VML für Outlook).
      </td>
    </tr>
  </table>
  <!--[if gte mso 9]>
      </v:textbox>
    </v:rect>
  <![endif]-->

• Beispiele für abgerundete Buttons:

  • ❌ Standard-CSS-Button, nicht unterstützt in klassischem Outlook Desktop:

  <table cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td align="center">
        <a href="#" style="display:inline-block; background:#1a73e8; color:#fff; padding:12px 30px; border-radius:24px; text-decoration:none; font-family:sans-serif;">
          Abgerundeter Button
        </a>
      </td>
    </tr>
  </table>

  • ✅ VML-Button für klassisches Outlook Desktop:

  <!--[if mso]>
  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="#" style="height:40px;v-text-anchor:middle;width:200px;" arcsize="50%" strokecolor="#1a73e8" fillcolor="#1a73e8">
    <w:anchorlock/>
    <center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;">
      Abgerundeter Button
    </center>
  </v:roundrect>
  <![endif]-->
  <!--[if !mso]><!-- -->
  <a href="#" style="display:inline-block; background:#1a73e8; color:#fff; padding:12px 30px; border-radius:24px; text-decoration:none; font-family:sans-serif; font-size:16px; font-weight:bold;">
    Abgerundeter Button
  </a>
  <!--<![endif]-->

Standardmäßiges Blockieren von Bildern

• ⚠️Problem: Outlook kann Bilder blockieren, sofern der Absender nicht als vertrauenswürdig gilt.
• 📉Auswirkung: E-Mails können beim ersten Öffnen leer oder fehlerhaft aussehen.
• 🛠️Lösung: Fügen Sie immer einen beschreibenden Alt-Text hinzu und erwägen Sie die Verwendung von Hintergrundfarben oder HTML-Fallback-Inhalten.

Bildgrößenanpassung in Outlook

• ⚠️Problem: Klassisches Outlook kann Bilder in ihrer ursprünglichen nativen Größe darstellen und CSS-definierte Breiten ignorieren. Dies ist besonders problematisch, wenn große, hochauflösende Bilder nur mit CSS verkleinert werden sollen — eine gängige Praxis zur Unterstützung von High-DPI-Displays.
• 📉Auswirkung:
  • Bilder können in klassischem Outlook zu groß erscheinen.
  • Layouts können in verschiedenen E-Mail-Clients fehlerhaft oder inkonsistent dargestellt werden.
• 🛠️Lösung: Um eine konsistente Bildgröße in Outlook sicherzustellen, verwenden Sie das width-HTML-Attribut immer direkt im <img>-Tag. Outlook berücksichtigt dieses Attribut und passt die Höhe automatisch an, um die Proportionen beizubehalten.

✅ Richtig, wird in klassischem Outlook skaliert:

<img src="image.jpg" width="300" style="width:300px;">

❌ Falsch, klassisches Outlook kann dies ignorieren:

<img src="image.jpg" style="width:300px;">

Eingeschränkte Unterstützung für animierte GIFs

• ⚠️Problem: Klassisches Outlook für Windows 2007–2016 zeigt nur den ersten Frame eines GIFs an.

  GIF-Animationen werden in neueren Outlook-Versionen für Microsoft 365, in den mobilen Outlook-Apps und in Outlook.com unterstützt. In Outlook für Microsoft 365 kann die Wiedergabe außerdem von den Windows-Einstellungen für Animationen des Benutzers abhängen.
• 📉Auswirkung: Wenn wichtige Informationen in späteren Frames erscheinen, werden Benutzer sie nicht sehen.
• 🛠️Lösung: Stellen Sie sicher, dass der erste Frame Ihren CTA oder Ihre wichtigste Botschaft enthält.

Inkonsistente Schriftartdarstellung

• ⚠️Problem: In vielen Desktop-Versionen von Outlook werden benutzerdefinierte Schriftarten nicht unterstützt. Wenn Sie eine benutzerdefinierte Schriftart in Ihrer Font-Stack-Liste an erster Stelle platzieren, kann Outlook die gesamte Liste ignorieren und standardmäßig Times New Roman verwenden, selbst wenn Sie sichere Fallback-Schriftarten definiert haben.
• 📉Auswirkung: Dies führt zu inkonsistenter Typografie und kann Branding, Layout und Lesbarkeit Ihrer E-Mail beeinträchtigen, wenn sie in Outlook angezeigt wird.
• 🛠️Lösungen:

  • ✅ Verwenden Sie Attributselektoren, um benutzerdefinierte Schriftarten zu überschreiben:
    Schreiben Sie Ihren Font-Stack wie gewohnt, platzieren Sie Ihre benutzerdefinierte Schriftart jedoch am Ende der Liste. Fügen Sie anschließend dieses CSS hinzu:

    [style*="CustomFont"] { font-family: 'CustomFont', Helvetica, serif !important; }

    Dieser Code stellt sicher, dass E-Mail-Clients, die Attributselektoren unterstützen, wie Gmail, Apple Mail und die meisten Webmail-Dienste, Ihre benutzerdefinierte Schriftart verwenden, sofern sie verfügbar ist. Klassisches Outlook ignoriert Attributselektoren wie [style*="..."], sodass die von Ihnen angegebenen Fallback-Schriftarten verwendet werden.

    <html>
      <head>
        <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Tangerine">
        <style>
          div {font-family: Helvetica, sans-serif, 'Tangerine';}
    
          [style*="Tangerine"] { font-family: 'Tangerine', Helvetica, serif !important; }
        </style>
      </head>
      <body>
        <div style="font-family: Helvetica, sans-serif, 'Tangerine';font-size: 48px;">Beispiel für benutzerdefinierte Schriftart</div>
      </body>
    </html>

  • ✅ Wenden Sie bedingtes CSS nur für Outlook mit MSO-Kommentaren an:

    Alternativ können Sie Ihren benutzerdefinierten Font-Stack in Ihrem CSS definieren und eine bedingte MSO-Anweisung verwenden, um ihn speziell für Outlook durch Standardsystemschriftarten zu ersetzen.

    <style>
      div { font-family: 'CustomFont', Helvetica, sans-serif; }
    </style>
    
    <!--[if gte mso 9]>
      <style type="text/css">
        div { font-family: Helvetica, Arial, sans-serif !important; }
      </style>
    <![endif]-->

  • ✅ Oder verwenden Sie einfach Standardsystemschriftarten wie Arial, Calibri, Times New Roman oder Verdana, die in allen Outlook-Versionen vollständig unterstützt werden.

Probleme mit Listenformatierungen in Outlook

• ⚠️Problem: Aufzählungspunkte und Nummerierungen werden möglicherweise nicht wie erwartet angezeigt. Klassisches Outlook behält die Standardformatierung von Listen nicht immer bei, insbesondere wenn Listen in Tabellen oder Divs verschachtelt sind.
• 📉Auswirkung: Listen können als reiner Text ohne Aufzählungspunkte oder Nummern erscheinen.
• 🛠️Lösung: Verwenden Sie Inline-Stile oder Fallback-Inhalte. Sie können auch manuell Symbole wie • hinzufügen oder <td>-Zellen für eine simulierte Listenformatierung verwenden.

❌ Problematisches HTML, wird in klassischem Outlook möglicherweise nicht korrekt angezeigt:

<table>
  <tr>
    <td>
      <ul>
        <li>Erster Punkt</li>
        <li>Zweiter Punkt</li>
      </ul>
    </td>
  </tr>
</table>

✅ Verbessertes HTML, Outlook-kompatible simulierte Liste:

<table>
  <tr>
    <td style="font-family: Arial, sans-serif; font-size: 14px;">
      • Erster Punkt<br>
      • Zweiter Punkt
    </td>
  </tr>
</table>

Ghost Columns: Spaltenausrichtung in Outlook korrigieren

• ⚠️Problem: Klassisches Outlook Desktop verarbeitet exakte Spaltenbreiten in nebeneinanderliegenden Layouts häufig falsch. Selbst responsive E-Mails mit zwei Spalten, z. B. zweispaltige Layouts mit insgesamt 600 px, können falsch ausgerichtet oder fehlerhaft gestapelt erscheinen.
• 📉Auswirkung:
  • Spalten können springen, falsch gestapelt werden oder Lücken anzeigen.
  • Layouts, die in Webmail oder auf Mobilgeräten korrekt dargestellt werden, können in klassischem Outlook Desktop fehlerhaft erscheinen.
• 🛠️Lösung: Umschließen Sie Ihre Spaltentabellen mit einer nur für Outlook sichtbaren „Ghost“-Tabelle mit fester Breite und verwenden Sie dafür bedingte MSO-Kommentare. Outlook erkennt diese Ghost-Tabelle und rendert die Spalten, während andere E-Mail-Clients sie ignorieren und das responsive Verhalten beibehalten.

🎯 HTML-Beispiel

<table width="600" align="center" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td class="main_container">

      <!--[if (gte mso 9)|(IE)]>
        <table width="600" align="center"><tr>
          <td width="450">
      <![endif]-->

      <table width="450" align="left" border="0" cellpadding="0" cellspacing="0">
        <tr><td>Inhalt der linken Spalte</td></tr>
      </table>

      <!--[if (gte mso 9)|(IE)]>
          </td><td width="150">
      <![endif]-->

      <table width="150" align="right" border="0" cellpadding="0" cellspacing="0">
        <tr><td>Inhalt der rechten Spalte</td></tr>
      </table>

      <!--[if (gte mso 9)|(IE)]>
        </td></tr></table>
      <![endif]-->

    </td>
  </tr>
</table>

Zusammenfassung: Verwenden Sie Ghost Columns mit MSO-Kommentaren, um Spaltenbreiten in klassischem Outlook Desktop zu erzwingen, ohne das Layout in anderen Clients zu beeinflussen. Dies ist eine schlanke, Outlook-spezifische Lösung, die ein sauberes, responsives Design in allen anderen Clients beibehält.

Weiße Linien in Outlook-E-Mails

• ⚠️Problem: Klassisches Outlook Desktop kann gelegentlich unerwartete weiße horizontale Linien zwischen Inhaltsblöcken einfügen. Ursache sind Rundungsfehler bei der Umrechnung von Pixeln in Punkte sowie eine inkonsistente Behandlung von Tabellenhöhen.
• 📉Auswirkung:
  • Unerwünschte Lücken erscheinen in Layouts.
  • Der visuelle Fluss und die Markenkonsistenz werden beeinträchtigt.
  • Schwer vorhersehbar — kann zufällig auftreten.
• 🛠️Lösungen, versuchen Sie eine oder mehrere:

1. Verwenden Sie gerade Pixelwerte, vorzugsweise Vielfache von 4
   Setzen Sie font-size, line-height, padding und height auf gerade Zahlen, idealerweise durch 4 teilbar, um Rundungsfehler zu reduzieren.

2. Fügen Sie Outlook-spezifische Ghost Breaks ein
   Verhindern Sie Lücken mit einem nur für MSO sichtbaren Zeilenumbruch:

   <!--[if gte mso 12]><br /><![endif]-->

3. Verwenden Sie Microsoft-spezifischen Code
   Dieses Snippet kann helfen, unerwünschte Lücken zu reduzieren, indem Tabellenränder und Abstände in Outlook explizit zusammengeführt werden:

   <!--[if gte mso 9]>
   <style type="text/css">
     table {
       border-collapse: collapse;
       border-spacing: 0;
     }
   </style>
   <![endif]-->

   Fügen Sie diesen Code in den <head>-Bereich Ihrer E-Mail ein und testen Sie gründlich. Je nach Layout kann er andere Elemente beeinflussen. Daher sollten Sie Ihre E-Mail immer in Outlook in der Vorschau anzeigen, bevor Sie sie finalisieren.

4. Fügen Sie ein geschütztes Leerzeichen als Puffer hinzu
   Ein gängiger Workaround besteht darin, ein geschütztes Leerzeichen ( ) direkt vor dem schließenden <td>-Tag einzufügen:

   <table border="0" cellspacing="0" cellpadding="0">
     <tr>
       <td>
         Ihr exklusives Angebot wartet auf Sie — klicken Sie unten, um Ihren Rabatt zu sichern!<br>&nbsp;
       </td>
     </tr>
   </table>

   Dies kann etwas zusätzlichen Abstand unter Ihrem Inhalt erzeugen. Prüfen Sie daher die Vorschau und passen Sie Ihr Layout bei Bedarf an.

5. Hintergrundfarben angleichen
   Blenden Sie Linien aus, indem Sie dem Body und problematischen Tabellenzeilen denselben Hintergrund zuweisen:

   <!--[if gte mso 9]>
     <style>body { background-color: #123456 !important; }</style>
   <![endif]-->

🎯 Kombiniertes Beispiel

<!--[if (gte mso 9)|(IE)]>
  <style>
    table { border-collapse: collapse !important; border-spacing: 0 !important; }
  </style>
<![endif]-->

<table width="600" cellpadding="0" cellspacing="0" border="0" style="background:#fff;">
  <tr>
    <td style="font-size:16px; line-height:16px; padding:0;">
      Inhalt oberhalb der Linie
      <!--[if gte mso 12]><br /><![endif]-->
      &nbsp;
      <table width="100%" cellpadding="0" cellspacing="0" border="0">
        <tr><td>Inhalt unterhalb der Linie</td></tr>
      </table>
    </td>
  </tr>
</table>

🛠 Schnellübersicht mit Lösungen