Innenabstände in Microsoft Outlook - so werden sie richtig dargestellt

mynewsletter.rocks nutzt für die Gestaltung von E-Mail Newslettern in moderne HTML-Elemente vom Typ DIV. So sind beispielsweise Überschriften und Text immer in einem DIV enthalten, damit sie sich Blockweise anordnen und verschieben lassen.

Um ansprechende Layouts zu ermöglichen, lässt sich bei allen Text- und Überschrifte-Elementen in mynewsletter.rocks ein Innenabstand definieren, der im Englischen als Padding bezeichnet wird. Innenabstand bezeichnet den Abstand vom Rand eines Elements zum Inhalt des Elements – im Fall eines Text-Elements also der Abstand vom Rand zum Text.

Dieses Bild zeigt den gleichen Text einmal ohne Abstand, mit 10px und mit 15px Innenabstand:

Mit ein Abstand ist der Text deutlich lesbarer, nicht wahr?

Beim Thema Innenabstand gibt es nur ein kleines Problem:

Das Verhalten von Microsoft Outlook ist nicht immer vorherzusehen. Speziell Innenabstände in Microsoft Outlook werden nicht immer richtig dargestellt.

Weil wir für ein schönes Newsletter-Design aber in jedem Fall mit Abständen arbeiten müssen, ist es notwendig, herauszufinden, unter welchen Umständen Innenabstände von Microsoft Outlook berücksichtigt werden.

In Ermanglung eines Regelwerks starten wir eine Reihe von Experimenten.

Experiment #1: DIVs mit Padding

Als erstes definieren wir einen Newsletter mit 5 Überschriften, die in jeweils einem DIV enthalten sind. Jedes dieser DIVs hat auf einer Seite einen Abstand von je 50px. Zusätzlich fügen wir eine weitere Überschrift hinzu, die auf keiner Seite einen Abstand hat.

Damit wir dem jeweiligen DIV einen Abstande richtig zuordnen können, verwenden wir knallige Farben – auch auf die Gefahr hin, davon Augenkrebs zu kriegen!

So sehen die Elemente im Editor von mynewsletter.rocks aus:

Und das ist die Darstellung in Microsoft Outlook 365:

Wir sehen:

Die Innenabstände in Microsoft Outlook werden links und rechts des Texts ignoriert, während oben und unten jeweils der gleiche Abstand zugewiesen wird.

Insgesamt schaut das Ergebnis ganz und gar nicht so aus, wie wir uns das vorgestellt haben. 🙁

Experiment #2: DIVs mit Rand auf der Seite, wo wir das Padding definiert haben

Auch wenn es alles andere als Intuitiv ist: was passiert, wenn wir bei jedem Element einen Rand definieren, und zwar genau auf der Seite, auf der wie einen Abstand definiert haben?

Ich füge jedem Element einen entsprechenden Rand mit einer Breite von 1px in der Farbe grau hinzu.

So sieht es in mynewsletter.rocks aus:

Und das ist die Darstellung in Microsoft Outlook 365:

Dies entspricht schon eher unserer Vorstellung.

Aber wir möchten noch mehr über das Verhalten von Innenabständen in Microsoft Outlook in Erfahrung bringen.

Experiment #3: Was passiert, wenn wir irgendwo irgendeinen Rand definieren?

Wir wissen also, dass Microsoft Outlook einen Innenabstand berücksichtigt, wenn ein Rand (Border) definiert ist.

Aber welchen Rand müssen wir definieren? Reicht es, auf irgendeiner Seite einen Rand hinzuzufügen? Muss es ein Rand auf jeder Seite sein? Oder reicht es, wenn überhaupt irgendwo eine Rand definiert ist?

Ändern wir probehalber nur das Element mit dem Abstand auf der linken Seite und fügen einen Rand auf der oberen Seite ein.

So sieht das Element in mynewsletter.rocks aus:

Und dann wieder in Microsoft Outlook:

Enttäuscht?

Aber wir sind um eine Erkenntnis reicher: Sind ein Rand oben und ein Innenabstand links definiert wird, ignoriert Outlook den Innenabstand links.

Und was passiert, wenn wir überall einen Rand definieren?

Experiment #4: Innenabstand mit Rand auf allen Seiten

Definieren wir ein Element mit einem Innenabstand auf der linken Seite und einem Rand (Border) auf allen Seiten.

So schaut es im Newsletter-Editor aus:

Und so in Microsoft Outlook:

Auch in diesem Fall wird der Innenabstand berücksichtigt – allerdings fällt der Abstand unten ein wenig größer als, als wir uns das vorgestellt haben.

Auf jeden Fall können wir das Ergebnis von Experiment #2 bestätigen: es wird von Microsoft Outlook in DIVs nur dann ein Innenabstand berücksichtigt, wenn auf der gleichen Seite auch ein Rand definiert ist.

Und was passiert, wenn wir statt eines DIVs eine Tabelle nutzen?

Experiment #5: TABLE statt DIV

In diesem Experiment nutzen wir statt eines DIVs für jedes Element eine Tabelle mit einer Zeile und einer Zelle, die einen Text enthält. Wie in Experiment #1 definieren keinen Rahmen, sondern nur einen Innenabstand für je eine Seite.

Einmal in im Editor von mynewsletter.rocks:

Und das Ergebnis in Microsoft Outlook:

Das schaut doch aus wie beabsichtigt, oder?

Fazit: Innenabstände (Padding) in DIVs werden von Outlook nur dann berücksichtigt, wenn auf der entsprechenden Seite auch ein Rand definiert ist. Tabellen hingegen haben das Problem nicht, dort wird der Innenabstand immer berücksichtigt. Die Mindestabstände auf der unteren Seite sind in Outlook immer ein wenig größer als in anderen Programmen.

So löst mynewsletter.rocks die Problematik

Zum Glück brauchst du dir als Nutzer von mynewsletter.rocks über die gesamte Innenabstands-Problematik keine Gedanken zu machen.

In mynewsletter.rocks basieren alle Texte-Element grundsätzlich auf DIVs.

Beim Versand deines Newsletters wird automatisch für jedes DIV eine eigene Geistertabelle definiert, die nur dann zum Einsatz kommt, wenn ein Empfänger die E-Mail in Microsoft Outlook öffnet.

Ist ein Innenabstand vorhanden, ohne dass es für die Seire einen Rand gibt, wird automatisch ein 1px Rand in der Hintergrundfarbe des Elements zugeordnet.

Dadurch wird sichergestellt, dass dein Newsletter auch in Microsoft Outlook (ungefähr) so dargestellt wird, wie du es beabsichtigt hast 🙂