Visuell ansprechende Kampagnen sind entscheidend, um die Aufmerksamkeit Ihrer Kontakte zu gewinnen und Conversions zu steigern. Positive User unterstützt Ihr Team dabei, saubere und responsive E-Mail-Designs zu erstellen – dennoch stellen Desktop-E-Mail-Clients wie Microsoft Outlook diese Nachrichten häufig anders dar als Webmail-Dienste.
Wenn Sie verstehen, warum diese visuellen Inkonsistenzen entstehen, können Sie von Anfang an die richtigen Design-Entscheidungen treffen. Indem Sie Ihre Layout-Entscheidungen in Positive User anpassen, schützen Sie Ihr visuelles Branding und stellen sicher, dass Ihre E-Mails bei Ihrer Zielgruppe stets klar und ansprechend ankommen.
Darstellungsprobleme in Outlook entstehen, weil die Desktop-Versionen von Microsoft Outlook die HTML-Rendering-Engine von Microsoft Word nutzen, um E-Mails anzuzeigen – anstelle der üblichen Browser-Engines. Anders als moderne E-Mail-Dienste wie Gmail oder Apple Mail verarbeitet Outlook den E-Mail-Code über die Logik einer Textverarbeitung, was dazu führt, dass gängige Web-CSS-Styles, Hintergrundbilder und moderne Layout-Regeln häufig ignoriert werden.
Wenn Ihr Team über Positive User eine Kampagne erstellt und versendet, generiert die Plattform sauberen HTML-Code, der sich nahtlos an gängige E-Mail-Dienste anpasst. Empfängt Microsoft Outlook die E-Mail jedoch, interpretiert es diesen Code nach den Rendering-Regeln von Word neu.
Mehrere Umgebungsfaktoren bestimmen, wie eine E-Mail in Outlook dargestellt wird:
Outlook-Version: Bestimmte Desktop-Versionen verarbeiten CSS-Regeln anders als das Outlook-Webmail oder die mobilen Anwendungen.
Anzeigeeinstellungen und Multi-Monitor-Setups: Wenn Sie Outlook auf einen zweiten Bildschirm verschieben oder E-Mails auf unterschiedlichen Bildschirmauflösungen anzeigen, kann die Layout-Skalierung verzerrt werden. Ein erneutes Öffnen von Outlook auf Ihrem Hauptbildschirm behebt Darstellungsfehler auf Zweitmonitoren häufig.
Spam-Filter: Bestimmte Sicherheitsfilter verändern den eingehenden HTML-Code, bevor die Nachricht zugestellt wird, und stören dadurch das ursprüngliche Layout.
Ein Beispiel: Wenn Sie eine Kampagne mit einem abgerundeten Call-to-Action-Button versenden, stellen gängige E-Mail-Apps die weichen Ecken über Web-CSS (border-radius) dar. Outlook ignoriert diese Regel vollständig, entfernt das Styling und zeigt den Button als scharfkantiges Rechteck an.
Wenn Sie die HTML-Einschränkungen von Outlook kennen, kann Ihr Team gezielt festlegen, wie Assets und Layouts in Positive User aufgebaut werden.
Die Verwaltung Ihrer Kampagnenvorlagen und visuellen Assets erfordert bestimmte Design-Anpassungen, um typische Darstellungsfehler zu vermeiden:
Bild-Hosting vs. Einbettung: Outlook blockiert gehostete Bilder standardmäßig. Werden Bilder direkt in den E-Mail-Text eingebettet, werden sie zwar angezeigt, erhöhen aber das Nachrichtengewicht und beeinträchtigen die Zustellbarkeit. Beschränken Sie eingebettete Bilder auf besonders wichtige Assets wie Ihr Logo.
Bildabmessungen und Skalierung: Outlook ignoriert die HTML-Bildskalierung und erzwingt strenge Höhenbegrenzungen für Bilder. Nutzen Sie eine Bildbearbeitungssoftware oder den integrierten Bildeditor, um Bilder vor dem Upload auf die exakten Abmessungen zu bringen. Falls ein Bild abgeschnitten wird, teilen Sie es in mehrere kleinere Bildblöcke auf.
Bildabstände: Outlook entfernt häufig die Ränder rund um Bilder, sodass Text direkt am Bild anliegt. Um Abstände zu erzeugen, fügen Sie in einem Bildeditor einen Rahmen in derselben Farbe wie Ihr E-Mail-Hintergrund direkt in die Bilddatei ein.
Animierte GIFs: Outlook zeigt GIFs nicht animiert an, sondern nur den ersten Frame. Stellen Sie sicher, dass Ihre Kernbotschaft, Ihr Angebot und Ihr Call-to-Action bereits auf diesem ersten Frame erscheinen.
Hintergrundbilder: CSS-Hintergrundbilder werden in Outlook nicht nativ unterstützt und werden durch einfarbige Hintergrundfarben ersetzt. Vermeiden Sie es, wichtigen Text über Hintergrundbilder zu legen. Wenn Sie Ihre E-Mail-Nachricht im HTML-Editor erstellen, müssen Sie Ihre Hintergrundbilder über HTML statt über CSS definieren. Über HTML deklarierte Hintergründe werden unterstützt.
Schriften und Typografie: Benutzerdefinierte Web-Schriften (wie Google Fonts) werden im Desktop-Outlook unvorhersehbar dargestellt. Verwenden Sie Standard-Systemschriften wie Arial, Helvetica, Georgia oder Times New Roman, um eine einheitliche Formatierung sicherzustellen.
Abgerundete CTA-Buttons: Um in Outlook abgerundete Button-Ecken zu erzwingen, fügen Sie den Button als Bild-Asset ein. Beachten Sie: Wenn Kontakte den Bilder-Download deaktiviert haben, wird der Button erst angezeigt, sobald Bilder aktiviert sind.
Mehrspaltige Ausrichtung: Mehrspaltige Layouts (2, 3 oder 4 Spalten) können bei der Bildschirmskalierung brechen oder verrutschen. Passen Sie die Breite Ihres E-Mail-Layouts im E-Mail-Builder vom Standardwert 650 px auf etwa 400 px an, um die Ausrichtung zu stabilisieren.
Gepunktete und gestrichelte Rahmen: Word erzwingt weiße Hintergrundlinien zwischen den Punkten und Strichen, unabhängig von Ihrer Containerfarbe. Verwenden Sie gepunktete oder gestrichelte Rahmen nur auf weißen Hintergründen oder wechseln Sie auf farbigen Hintergründen zu durchgezogenen Rahmen.
Vermeiden Sie es, Text direkt aus externer Textverarbeitungssoftware wie Microsoft Word in den drag & drop E-Mail-Builder zu kopieren und einzufügen. Word fügt versteckte HTML-Auszeichnungen ein, die die E-Mail-Formatierung beschädigen.
Als reinen Text einfügen – kopieren Sie Text aus externer Software zunächst in einen einfachen Texteditor oder verwenden Sie beim Einfügen in Ihre Kampagne die Tastenkombination für unformatierten Text (Strg + Umschalt + V in Chrome).
