Outlook-E-Mail-Rendering: Wie ich gelernt habe, mir keine Sorgen mehr zu machen und Outlook zu lieben

Veröffentlicht: 2021-07-02

Das haben wir alle schon durchgemacht. Sie erstellen eine schöne E-Mail mit interessanten GIFs, barrierefreien Schaltflächen und auffälligen Bildern. Dann testest du es und es sieht toll aus… außer in Outlook, wo es komplett kaputt ist. Personen können sich mit einer defekten E-Mail nicht so engagieren, wie Sie es möchten.

Outlook ist seit langem eine Plage für E-Mail-Marketer, aber muss es das sein? Wie können wir damit arbeiten? Lesen Sie weiter, um herauszufinden, wie ich Outlook trotz seiner vielen Fehler geliebt habe. Ich werde abdecken:

Versionen von Outlook
Tipps für Outlook-Macken
Der Code, um Korrekturen vorzunehmen

Die vielen Versionen von Microsoft Outlook

Der Name „Outlook“ umfasst mehrere verschiedene E-Mail-Clients mit einigen verschiedenen Rendering-Engines und mindestens zwei verschiedenen Anzeigeeinstellungen. All dies kann zu riesigen Kopfschmerzen führen, wenn Sie es zulassen. Lassen Sie uns eintauchen und sehen, ob wir es ein wenig begradigen können.

Ausblick 2007-2019

Dies sind die Windows-Desktopversionen von Outlook. Diese verwenden Word als Rendering-Engine, was zu einer Zeit sinnvoll war, als E-Mail wie Briefe schreiben war. Ach, einfachere Zeiten. Aber für E-Mail-Vermarkter reicht es nicht für das Rendern von HTML-E-Mails.

120 DPI (Punkte pro Zoll) erhöhen die Komplexität. Windows-Benutzer können 120 DPI wählen, um ihre Bildschirmauflösung zu erhöhen. Wenn dies der Fall ist, respektieren die Desktop-E-Mail-Clients dies und aktualisieren Bilder und Text, um größer zu sein. Was verheerende Auswirkungen auf Ihre E-Mails haben kann.

Outlook für Mac

Dies ist die Mac-Desktop-Version von Outlook. Es verwendet Webkit als Rendering-Engine. Was bedeutet, dass es in Bezug auf das E-Mail-Rendering normalerweise mit Apple Mail und iOS vergleichbar ist. Wenn es in Ihrem Browser gut aussieht, besteht eine gute Chance, dass es hier gut aussieht.

Outlook.com und die mobilen Outlook-Apps

Diese Clients verwenden Webkit- oder Webkit-basierte Rendering-Engines, sodass sie ein gutes HTML-Rendering bieten und Ihre E-Mails normalerweise nicht unterbrechen.

Outlook Office 365

Es gibt zwei verschiedene Versionen von Outlook Office 365, den Desktop-E-Mail-Client und den webbasierten E-Mail-Client. Die Desktop-Version ähnelt Outlook 2007-2019 und verwendet Word als Rendering-Engine (schwer für E-Mail). Der webbasierte E-Mail-Client verwendet Webkit oder Blink und rendert E-Mails ähnlich wie Outlook.com (viel einfacher).

Keine kaputten E-Mails mehr

Zeigen Sie eine Vorschau Ihrer E-Mails auf über 90 E-Mail-Clients, Apps und Geräten – einschließlich aller Versionen von Outlook – an, um ein markenkonformes, fehlerfreies Abonnentenerlebnis zu gewährleisten.

Erfahren Sie, wie →

Ein Ausblick, um sie alle zu beherrschen

Im Januar kündigte Microsoft seine Vision „One Outlook“ an, die Desktop-Clients ab 2022 durch einen Client zu ersetzen, der überall funktioniert.

Der neue E-Mail-Client basiert auf aktuellen Outlook-Web-Apps. Daher sind die Hoffnungen groß, dass es über eine Webkit-basierte Rendering-Engine verfügt und HTML-E-Mails gut wiedergibt. Leider werden all diese alten Desktop-Clients in diesem Fall nicht einfach verschwinden, also müssen sie noch in gewissem Umfang unterstützt werden.

Tun oder nicht, es gibt keinen Versuch

Dreht dir schon der Kopf?

Wenn ja, dann lassen Sie es uns für Sie destillieren: Die wichtigste Erkenntnis ist, dass wir mit zwei verschiedenen Rendering-Engines arbeiten – Word und Webkit. Webkit ist einfacher zu codieren und Word ist schwieriger. Beides ist nicht wirklich gut oder schlecht. Sie erfordern nur unterschiedliche Herangehensweisen und haben unterschiedliche Macken, die berücksichtigt werden müssen.

Sehen wir uns einige der häufigsten Renderingprobleme in Outlook-Desktopclients und deren Lösung an.

Fügen Sie Breiten- und Höhenattribute in Ihre Bilder ein

Outlook unterstützt keine CSS-Stile für Breiten und Höhen, und wenn Sie die Breiten- und Höhenattribute nicht einschließen, zeigt Outlook Ihr Bild in seiner tatsächlichen Größe an. Wenn Sie Retina-Bilder verwenden (was Sie sein sollten), bedeutet dies, dass Sie riesige Bilder erhalten, die Ihre E-Mails zerstören.

Ausblick — Netzhautbild ohne Breitenattribut in Outlook, wodurch die E-Mail breiter wird

Fügen Sie ALT-Text ein

Lassen Sie die Sicherheitsnachricht von Outlook nicht für Ihre Bilder sprechen. Stellen Sie sicher, dass Sie ALT-Text einschließen. Zumal Outlook standardmäßig keine Bilder anzeigt, es sei denn, die Leute aktivieren die Funktion.

E-Mail in Outlook mit blockierten Bildern

Verwenden Sie Tabellen

E-Mail hat einen langen Weg zurückgelegt und Sie können <div>-Blöcke in vielen E-Mail-Clients verwenden, aber Outlook gehört nicht dazu. Outlook ignoriert die meisten Stile, die Sie auf Ihre <div>-Tags anwenden, einschließlich Breiten und Abstände. Daher ist es wichtig, dass Sie stattdessen <table>-Tags für Ihre Inhalte verwenden.

Verwenden Sie Outlook-spezifischen Code, um Rendering-Probleme zu lösen

Dies löst möglicherweise nicht alle Ihre Probleme, aber es kommt oft vor, dass die Einbeziehung von Outlook-spezifischem CSS Ihnen helfen kann, ein Rendering-Problem zu lösen, das Sie nur in Outlook sehen. Oder Sie blenden einen kleinen Block aus, der in Outlook nicht funktioniert, und verwenden bedingten Code, um eine Version anzuzeigen, die für eine bestimmte Version von Outlook funktioniert. (Mehr zum bedingten Code später.)

Fügen Sie kleinen Bildern oder Tabellenzellen Zeilenhöhen hinzu

Outlook legt eine Mindesthöhe für Tabellenzellen und Bilder fest. Wenn Sie also eine Tabellenzelle als Abstandshalter verwenden oder ein kleines Bild haben, fügen Sie dem Element ein Zeilenhöhenattribut hinzu, das der Höhe entspricht, in der sie angezeigt werden sollen. Zum Beispiel:

<tr>
     <td style="font-size: 5px; line-height: 5px; mso-line-height-rule: exactly;">&nbsp;</td>
</tr>

Korrigieren Sie bei Problemen mit der DPI-Skalierung

Auf Windows-Computern gibt es eine globale Einstellung, die Benutzer ändern können (oder in einigen Fällen standardmäßig höher eingestellt sind), die den Text und die grafischen Elemente skaliert, um sie größer und leichter lesbar zu machen. Dies ist großartig für die Barrierefreiheit, aber nicht so großartig für Outlook, da nur einige Elemente hochskaliert werden, während andere nicht skaliert werden.

Zum Glück gibt es eine Lösung. Zuerst müssen Sie dem HTML-Tag einen XML-Namespace hinzufügen:

<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office">

Fügen Sie dann direkt vor dem Tag </head> etwas Code hinzu, um die Bildskalierung zu korrigieren:

<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->

Und schließlich stellen Sie sicher, dass Sie alle festgelegten Breiten als CSS-Eigenschaft mit Pixeln und nicht als Attribut in Ihre Tabellen aufnehmen.

✗ Nicht das mit width=”600″ :

<table cellpadding="0" cellspacing="0" border="0" role="presentation" width="600">

Ja, so mit style="width:600px;" :

<table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width:600px;">

Dadurch werden die meisten Ihrer Probleme für 120-DPI-Clients behoben. Sehen Sie sich diesen direkten Vergleich vor und nach diesem Fix an:

Outlook 2013 bei 120 DPI (ohne Fix)	Outlook 2013 bei 120 DPI (mit Fix)

Was für ein Unterschied, oder?

Erwarten Sie nicht, dass Hover-Effekte funktionieren

Outlook unterstützt die Hover-Pseudoklasse nicht. Sie sollten es dennoch einschließen, um Interaktionen zu erstellen, um die Zugänglichkeit Ihrer E-Mails in anderen E-Mail-Clients zu erhöhen, aber seien Sie nicht überrascht, wenn es in Outlook nicht funktioniert.

Verlassen Sie sich nicht auf ein animiertes GIF, um Ihren Standpunkt zu vermitteln

Outlook-Desktopclients unterstützen keine animierten GIFs. Sie können im ersten Frame das Bild anzeigen lassen, das Sie in Outlook anzeigen möchten, oder Sie können das animierte GIF aus Outlook ausblenden und bedingte Codierung verwenden, um ein gewünschtes Standbild anzuzeigen. (Wieder mehr zur bedingten Codierung als nächstes.)

Verwenden Sie keine interaktiven Inhalte ohne Fallback

Interaktive E-Mails sind ein großes Nein für Outlook. Sie hängen entweder von der AMP-Codierung oder dem Checkbox-Hack ab, die beide von Outlook nicht unterstützt werden.

Im Fall von AMP für E-Mail wird die HTML-Datei anstelle der AMP-Datei angezeigt, also keine zusätzliche Codierung dafür. Für das Kontrollkästchen Hack-Interaktivität müssen Sie den interaktiven Inhalt ausblenden und den Outlook-Fallback anzeigen. Auch hier ist die bedingte Codierung Ihr Freund.

Fügen Sie Bildern keine Abstände oder Ränder hinzu

Outlook entfernt Abstände und Ränder von Bildern. Stellen Sie sicher, dass Sie stattdessen die Tabellenzelle um das Bild herum auffüllen. Wenn sich das Bild in derselben Zelle wie die Kopie befindet, fügen Sie dem Tag um die Kopie einen Rand hinzu (<h1>, <h2>, <p> usw.).

Angst ist der E-Mail-Killer: Der Code, den Sie brauchen, um sich Ihren Outlook-Ängsten zu stellen

Um eine großartige E-Mail für die Desktop-E-Mail-Clients von Outlook zu codieren, müssen Sie das „normale“ HTML und CSS verlassen. Es gibt drei Arten von Code, die dazu beitragen, dass Ihre E-Mails in diesen Clients glänzen: bedingte Codierung, MSO-Eigenschaften und VML.

Es kann beängstigend sein, mit etwas Neuem zu arbeiten, aber ich verspreche, es lohnt sich. Und dieser Moment, in dem Sie es richtig zum Laufen bringen? Sie werden sich fühlen, als hätten Sie den Kessel Run in weniger als 12 Parsecs geschafft.

Bedingte Codierung

Bedingte Codierung ist eine Codierung, die untersucht, welchen E-Mail-Client oder Browser Ihr Abonnent verwendet, und den Code nur anzeigt, wenn er die Bedingung im Kommentar erfüllt, wie zum Beispiel:

<!--[if mso]>
<p>This content is only visible on Outlook desktop clients</p>
<![endif]-->

Sie können dies sogar verwenden, um bestimmte Versionen von Outlook-Desktopclients anzuvisieren, indem Sie die Versionsnummern hinzufügen:

<!--[if mso 14]>
<p>This content is only visible on Outlook 2010 desktop client</p>
<![endif]-->

Outlook ist jedoch alles andere als einfach, sodass die Versionsnummern nicht mit dem Namen des E-Mail-Clients übereinstimmen:

Outlook 2000 = mso 9
Outlook 2002 = mso 10
Outlook 2003 = mso 11
Outlook 2007 = mso 12
Outlook 2010 = mso 14
Ausblick 2013 = mso 15
Outlook 2016, Outlook 2019 und Office 365-Desktop = mso 16

Und dann können Sie noch komplexer werden, indem Sie eine Reihe von Kunden mit weniger als (lt), größer als (gt), kleiner oder gleich (lte) oder größer oder gleich (gte) ansprechen. Zum Beispiel:

<!--[if (gte mso 9) | (lte mso 11)]>
<p>This content is only visible on Outlook 2000 to Outlook 2003</p>
<![endif]-->

Wenn Sie also nur einige wilde Dinge bei einem bestimmten Client sehen, können Sie diesen Client gezielt ansprechen und bessere Inhalte dafür ausblenden und anzeigen.

Sie können auch bedingte Kommentare verwenden, um Inhalte aus Outlook auszublenden, indem Sie „if !mso“ sagen, was „wenn nicht mso“ bedeutet:

<!--[if !mso]><!-->
<p>This is visible on anything except Outlook desktop clients</p>
<!--<![endif]-->

Beachten Sie Folgendes: Bedingter Code funktioniert nur auf Outlook-Desktopclients. Da hier viele Probleme ins Spiel kommen, benötigen Sie diese wahrscheinlich mehr als jede Fehlerbehebung für die Webmail-Clients.

Es gibt jedoch auch Möglichkeiten, die Webclients als Ziel zu verwenden, jedoch keine Möglichkeit, einen Outlook-Webclient über den anderen abzuzielen. Wenn Sie auf Outlook.com abzielen, zielen Sie also auch auf den Office 365-Webclient (aber nicht auf den Desktopclient) ab.

Sie können auf die Outlook-Webclients abzielen, indem Sie die Tatsache ausnutzen, dass Outlook „x_“ an alle Klassennamen anhängt, dies jedoch nicht für den Attributselektor. Wenn Sie also eine Klasse „foo“ haben und diese für Outlook-Webclients anders behandeln möchten, können Sie sie mit diesem Code ansprechen:

[class~="x_foo"] { }

(Danke an Mark Robbins für diesen Fix und an Dylan Smith für howtotarget.email.)

MSO-Eigenschaften

Wie oben erwähnt, gibt es CSS-spezifisches CSS, das Sie hinzufügen können und das nur Outlook-Desktop-E-Mail-Clients betrifft. Hier sind ein paar, die ziemlich häufig vorkommen und von denen Sie vielleicht schon gehört haben:

mso-hide: alle;

Diese Eigenschaft blendet alles vor Outlook-Desktopclients aus. Es wird entfernt, wenn die E-Mail weitergeleitet wird. Seien Sie also vorsichtig, wenn Sie es alleine verwenden, wenn dies eine Funktion ist, von der Sie wissen, dass Ihre Abonnenten oft davon profitieren. Sie können es mit dem Bedingungscode „wenn nicht mso“ koppeln, wenn Sie ein „nur für den Fall“-Codierer sind.

mso-Zeilenhöhenregel: genau;

Diese Eigenschaft stellt sicher, dass Outlook Ihre Zeilenhöhe so anzeigt, wie Sie es in der line-height-Eigenschaft festgelegt haben. Ohne sie respektiert Outlook Ihre Zeilenhöhen nicht unbedingt. Wenn Sie in einer Branche arbeiten, in der es auf Präzision ankommt, sind Sie mit dieser Eigenschaft wahrscheinlich sehr vertraut.

mso-padding-alt

Dieser ist etwas seltener, aber ich musste ihn von Zeit zu Zeit verwenden. Sie können damit für Outlook spezifische Auffüllungen deklarieren. Wenn also die normale Auffüllung einer Zelle in Outlook nicht richtig gerendert wird, können Sie mso-padding-alt verwenden , um Werte festzulegen , die Ihrem Design für Outlook entsprechen.

mso-ansi-font-size

Dies ist ein weiterer, den ich nur gelegentlich benutze. Damit können Sie die für Outlook spezifischen Schriftgrößen festlegen. Wenn Outlook Ihre Schriftart also einen Hauch größer als andere E-Mail-Clients rendert und Sie am Ende eine kurze letzte Textzeile haben, die Sie nicht wollten, fügen Sie mso-ansi-font-size hinzu und legen Sie eine Schriftgröße fest, die Ihre Kopie passend macht.

Es gibt viele weitere MSO-Eigenschaften, die Sie verwenden können, also fahren Sie fort und sehen Sie, ob es etwas gibt, das ein Rendering-Problem für Sie behebt.

VML

VML steht für Vector Markup Language. Es ist die SVG-Version von Microsoft, aber die Sprache wurde abgewertet und wird sehr selten verwendet (yay email!). Microsoft hat die Dokumentation für VML online archiviert, sodass Sie immer noch nachschlagen können, wie Sie damit Vektoren in Outlook erstellen können, wo es noch unterstützt wird. Theoretisch werden wir beim Übergang von Microsoft zu ihrem „One Outlook“-Modell in der Lage sein, VML hinter uns zu lassen.

Stellen Sie sicher, dass Sie die VML-Namespace-Deklaration einschließen. Normalerweise füge ich es dem <html>-Element in meiner Boilerplate-Vorlage hinzu, damit ich VML verwenden kann, wann immer ich es brauche:

<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml">

Sobald Sie das haben, können Sie Ihrem Code innerhalb von MSO-Bedingungen eine beliebige VML hinzufügen:

<!--[if mso]>
    <v:rect fillcolor="blue" stroked="false" style="width:200px; height:50px;"></v:rect>
 <![endif]-->

Dieser Code würde ein blaues Rechteck von 200 x 50 Pixeln erstellen. Vielleicht nicht wirklich etwas, das Sie in einer E-Mail verwenden können, aber Sie können VML verwenden, um Ihrem Code, Hintergrundbildern und Hintergrundverläufen Schaltflächen mit abgerundeten Ecken hinzuzufügen. Campaign Monitor verfügt über zwei von Stig entwickelte Tools, mit denen Sie Hintergrundbilder oder Schaltflächen mit abgerundeten Ecken erstellen können. Ich habe festgestellt, dass dies eine großartige Möglichkeit ist, VML hinzuzufügen, wenn Sie gerade lernen.

Sie können VML auch verwenden, um eine falsche absolute Positionierung, Schatteneffekte oder einen Fallback zu erstellen, um CSS-Grafiken in Outlook zu unterstützen. Es gibt viel, was Sie mit VML tun können, sobald Sie eintauchen.

Lebe lange und maile

Outlook ist seit langem der Fluch von E-Mail-Marketern, aber das muss nicht sein.

Mit den richtigen Tools können Sie schöne E-Mails erstellen, die in Outlook korrekt gerendert werden. Sehen Sie sich die Ressourcen in diesem Beitrag an, um Ihre Outlook-Codierung aufzubauen, und testen Sie sie in Ihren E-Mails mit Litmus Builder und E-Mail-Vorschauen. Stellen Sie sich das Programmieren für Outlook als ein Rätsel vor, das darauf wartet, gelöst zu werden, und Sie werden Outlook und all seine Macken vielleicht lieben.

Testen Sie Ihre E-Mails in Outlook mit Litmus

Sehen Sie, wie Ihre E-Mails in Outlook aussehen, und beheben Sie alle Probleme, bevor Sie auf Senden klicken. Mit Litmus können Sie sicher sein, dass Sie pixelgenaue E-Mails erstellen, mit denen Ihre Abonnenten interagieren können.

Starten Sie Ihre kostenlose Testversion →