Einige E-Mail-Programme – insbesondere – stellen HTML-Newsletters nicht wie ein Browser dar. Outlook verwendet dafür eine eingeschränkte Rendering-Engine, was bei häufiger zu Umbrüchen, verschobenen Bildern oder unerwarteter Skalierung führt. Zusätzlich können Empfänger-Einstellungen (z.B. „Bilder standardmässig blockieren“) die Darstellung beeinflussen.
- (z.B. 3–4 Bilder nebeneinander in einer Zeile)
- Spaltenbreiten im HTML als (z.B.
width:25%) - Bilder, deren tatsächliche Pixelbreite zur vorgesehenen Slot-Breite passt
- CSS-Eigenschaften wie
auto, die in Outlook anders interpretiert werden als in modernen Clients
Für maximale Stabilität wird empfohlen, Newsletter oder mit wenigen, klar definierten Spalten zu gestalten. Je mehr Spalten pro Zeile, desto höher das Risiko von Darstellungsproblemen in Outlook.
In mehrspaltigen Abschnitten sollten Spaltenbreiten möglichst definiert werden, z.B. statt:
besser:
width:150px (Beispielwert)
So kann Outlook die Tabelle zuverlässiger berechnen.
Das eingesetzte Bild sollte haben wie der Bildbereich (Slot) in der Vorlage. Wenn der Slot z.B. 150 px breit ist, sollte auch das Bild auf zugeschnitten (oder exportiert) werden. Das reduziert Skalierungsartefakte und Layout-Sprünge.
Je nach Template kann es helfen, Bilder „Outlook-freundlicher“ einzubinden:
width/height als direkt im <img>-Tag setzen (nicht nur per CSS)display:block; verwenden, um unerwünschte Abstände zu vermeidenborder:0; line-height:0; kann ebenfalls helfen- Sinnvolle
alt-Texte setzen (wichtig, wenn Bilder blockiert sind)
Eine kann nicht garantiert werden. Unterschiede ergeben sich durch:
- Outlook-Version und System (Windows/Mac/Web)
- Sicherheits- und Datenschutzeinstellungen (z.B. Bildblockierung)
- Zoom/DPI-Skalierung und individuelle Client-Einstellungen
- Sind kritische Bereiche oder nur wenig spaltig?
- Haben Tabellenzellen/Spalten statt Prozentwerte?
- Haben Bilder wie der Slot in der Vorlage?
- Wurden Newsletter in testweise geprüft?