HTML-E-Mail: was in Mailclients noch funktioniert

HTML für E-Mails zu schreiben bedeutet, für rund dreißig Rendering-Engines zu programmieren, von denen keine denselben Regeln folgt wie Browser. Outlook unter Windows nutzt weiterhin die Rendering-Engine von Microsoft Word. Gmail schreibt Stile um. Apple Mail wendet Systemeinstellungen an. Hier steht, was 2026 tatsächlich funktioniert und was weiterhin zu vermeiden ist.

#Die Tabelle bleibt die Referenzstruktur

Das angekündigte Ende der Layout-Tabellen ist nicht eingetreten. Die Desktop-Versionen von Outlook unter Windows stützen sich weiterhin auf die Word-Engine, die float, display: flex und display: grid ignoriert. Ein darauf gebautes Layout bricht in eine einzelne Spalte zusammen — manchmal vertretbar, oft nicht.

<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td align="center" style="padding: 24px 16px;">
      <table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0">
        <tr><td style="font-family: Arial, sans-serif; font-size: 16px; line-height: 24px;">
          Inhalt
        </td></tr>
      </table>
    </td>
  </tr>
</table>

Das Attribut role="presentation" ist nicht dekorativ: Es teilt Screenreadern mit, dass die Tabelle das Layout trägt und keine Daten enthält, was ein zellenweises Vorlesen verhindert.

#Was tatsächlich verfügbar ist

#Dark Mode, die wichtigste jüngere Änderung

Dieses Thema erzeugt die meisten unerwarteten Ergebnisse. Drei Verhaltensweisen bestehen nebeneinander: Clients, die prefers-color-scheme beachten, solche, die helle Farben automatisch invertieren, und solche, die nichts anwenden. Ein fest gesetzter weißer Hintergrund mit schwarzem Text kann so zu einem dunklen Hintergrund mit weiterhin schwarzem Text werden — unlesbar.

<style>
  :root { color-scheme: light dark; supported-color-schemes: light dark; }

  @media (prefers-color-scheme: dark) {
    .koerper { background-color: #14181d !important; }
    .text    { color: #e8edf3 !important; }
    .logo-hell   { display: none !important; }
    .logo-dunkel { display: block !important; }
  }
</style>

Zwei praktische Regeln begrenzen den Schaden: nie ein schwarzes transparentes PNG-Logo verwenden (es verschwindet auf dunklem Grund — eine helle Variante vorsehen), und extreme Kontraste vermeiden, die invertierende Clients aggressiv behandeln.

Eine E-Mail wird so gebaut, dass sie lesbar bleibt, selbst wenn sämtliche CSS-Regeln ignoriert werden. Was dann übrig bleibt, muss weiterhin funktionieren.

#Bilder: unverzichtbar, nie wesentlich

Ein erheblicher Teil der Empfänger liest Nachrichten mit standardmäßig blockierten Bildern. Drei Konsequenzen für die Praxis:

• Durchgängig ein alt-Attribut, zum Lesen verfasst — es ist der Text, der stattdessen erscheint.
• Keine wesentliche Information in einem Bild allein: Eine Handlungsschaltfläche bleibt ein per HTML gestalteter Link, kein anklickbares Bild.
• Explizite Maße (width und height als Attribute), um Umbrüche bei der Anzeige zu vermeiden.

#Die Schaltfläche als Lehrbeispiel

Der „bulletproof“ Button bleibt die Referenztechnik: ein gestalteter Link in einer Tabellenzelle, mit bedingtem Fallback für Outlook.

<table role="presentation" cellpadding="0" cellspacing="0" border="0">
  <tr><td bgcolor="#0a6cff" style="border-radius:6px;">
    <a href="https://beispiel.de/"
       style="display:inline-block; padding:14px 28px; font-family:Arial,sans-serif;
              font-size:16px; color:#ffffff; text-decoration:none;">
      Artikel lesen
    </a>
  </td></tr>
</table>

#Prüfungen vor dem Versand

1. Gesamtgewicht des HTML unter 102 kB: darüber kürzt Gmail die Nachricht und zeigt einen Link „gesamte Nachricht anzeigen“, was Tracking und Darstellung bricht.
2. Textversion hinterlegt: Ihr Fehlen ist ein negatives Signal für Filter.
3. Darstellung geprüft mindestens in Outlook Windows, Gmail Web, Gmail Mobil und Apple Mail — dieses Quartett deckt die wesentlichen Abweichungen ab.
4. Absolute Links über HTTPS, Bilder eingeschlossen.
5. Sichtbarer, funktionierender Abmeldelink, zusätzlich zum Header List-Unsubscribe.

#Was bleibt

HTML für E-Mails nähert sich nicht dem Web-HTML an, und auf diese Annäherung zu setzen erzeugt bei einem Teil der Empfänger kaputte Nachrichten. Die tragfähige Methode: eine Tabellenstruktur schreiben, inline gestalten, den Dark Mode ausdrücklich behandeln und jede CSS-Verbesserung als Zugabe betrachten, die verschwinden kann.

#Ebenfalls auf Mail Studio

• SPF, DKIM und DMARC: die Authentifizierungsbasis
• Design Tokens in CSS: wartbares helles/dunkles Design