Der tabellenbasierte Layout-Ansatz

E-Mail-Clients – insbesondere Outlook unter Windows, das die Rendering-Engine von Microsoft Word verwendet – unterstützen weder flexbox noch grid oder auch nur ein zuverlässiges Layout auf Blockebene. Tabellen sind das einzige strukturelle Element, das in allen großen E-Mail-Clients konsistent dargestellt wird.

Jede responsive E-Mail beginnt mit einer äußeren <table> mit 100 % Breite, die als E-Mail-Body dient. Darauf folgt eine Tabelle mit fester Breite (üblicherweise 600px), die den eigentlichen Inhalt enthält. Dieses zweistufige Muster bildet die Grundlage fast jeder Vorlage für den Produktiveinsatz.

Fügen Sie immer cellpadding="0" cellspacing="0" border="0" in jede Tabelle ein. Ohne diese Attribute fügt Outlook unerwartete Abstände ein. Mit role="presentation" weisen Sie Screenreader an, die Tabellensemantik zu überspringen. Das ist korrekt, weil Layouttabellen keine Datentabellen sind.

Um mehrere Spalten zu erstellen, verschachteln Sie eine Tabelle mit zwei <td>-Zellen in der Inhaltszeile. Jede Zelle enthält eine Spalte. Vermeiden Sie div+float – Outlook ignoriert float und stapelt die Spalten ohnehin vertikal, wodurch das Design beschädigt wird.

Der Desktop-Vorschaubereich ist de facto etwa 600px breit. Wenn Sie für diese Breite entwerfen, bleibt die E-Mail in Outlook, Gmail Desktop, Apple Mail, Yahoo und Thunderbird gleichzeitig gut sichtbar, ohne dass horizontal gescrollt werden muss.

Für kleine Bildschirme sprechen Sie die Zellen der inneren Tabelle mit einer Media Query an, die die width auf 100 % und display auf block setzt, sodass die Spalten vertikal gestapelt werden. iOS Mail und Gmail für Android unterstützen Media Queries; Outlook 365 Desktop ignoriert sie, behält aber das 600px-Desktop-Layout bei.

Hintergrundfarben und -bilder sollten auf <td>-Zellen angewendet werden, nicht auf divs. Outlook unterstützt das bgcolor-Attribut auf td zuverlässig, während CSS background-color auf einem div je nach Client entfernt oder vollständig ignoriert werden kann.

Outlook benötigt Vector Markup Language (VML) für Hintergrundbilder. Umschließen Sie ein modernes CSS background-image mit bedingten <!--[if mso]>...<![endif]-->-Kommentaren und einem Inline-v:rect-Fallback, damit Outlook das Bild rendert, während alle anderen Clients CSS verwenden.

Verzichten Sie auf flexbox, grid, benutzerdefinierte Eigenschaften (mit eingeschränkter Unterstützung) und die meisten Positionierungsangaben. Beschränken Sie sich auf display: block/inline, feste Breiten über Attribute und Inline-Styles. Nach Webstandards wirkt das Ergebnis veraltet, wird aber in jedem Posteingang identisch dargestellt.

Verwenden Sie cellpadding (Attribut) und eine einzelne gepolsterte <td>-Zelle für den Innenabstand. Margins bei Tabellenzellen sind in Outlook unzuverlässig; padding auf td funktioniert überall. Kombinieren Sie bgcolor und padding auf derselben td-Zelle für „Karten“-Komponenten ohne divs.

Fügen Sie jeder Layouttabelle role="presentation" hinzu, damit Screenreader nicht „Zeile, Spalte 1 von 2“ ansagen. Verwenden Sie außerdem für jedes Bild einen Alt-Text, echten Text für sämtliche Inhalte (keine Bilder mit Text) und eine klare hierarchische Reihenfolge der Überschriften.

Das Layout von HTML-E-Mails verwendet verschachtelte Tabellen mit cellpadding/cellspacing/border auf null und role="presentation". Eine äußere Tabelle mit 100 % Breite zentriert eine innere Tabelle mit 600px; verschachtelte td-Zellen bilden Spalten, die Media Queries auf Mobilgeräten stapeln können. Vermeiden Sie flexbox und grid, verwenden Sie bgcolor auf td und ergänzen Sie VML-Fallbacks für Outlook-Hintergründe.