Warum sehen meine E-Mails mit dem Outlook-Client schlecht aus?

Sehen wir der Wahrheit ins Auge. Das Erstellen von E-Mails ist eine ziemlich einfache Aufgabe. Aber diese E-Mails so zu formatieren, dass sie Outlook-kompatibel sind, ist eine ziemliche Aufgabe. Tatsächlich schwieriger als Sie denken.

Outlook ist der am häufigsten verwendete, aber uralte E-Mail-Client, den Sie jemals finden werden. Es unterstützt jedoch einige Verbesserungen nicht, die Sie in anderen E-Mail-Clients wie Gmail finden.

Probieren Sie dies aus:

Wenn Sie ein PNG-Bild mit Hintergrundtransparenz verwendet haben, flippt Outlook aus! Es weiß nicht, wie man solche Bilder wiedergibt. Ebenso fragen Sie sich vielleicht, warum Ihre abgerundeten Schaltflächen (die mit der CSS-Eigenschaft border-radius erstellt wurden) im Outlook-Client quadratisch aussehen. Weil Outlook border-radius und mehrere andere CSS-Eigenschaften nicht unterstützt.

Hier sind die Gründe, warum Ihre Outlook-E-Mails schrecklich aussehen und was Sie tun können, um Ihr E-Mail-Design zu verbessern.

Warum sehen meine E-Mails mit Outlook schlecht aus?

Die größte Herausforderung für E-Mail-Vermarkter besteht jetzt darin, eine E-Mail-Vorlage für Outlook zu erstellen. Dies liegt daran, dass Microsoft seit Outlook 2007 den Internet Explorer nicht mehr zum Rendern von E-Mails verwendet und damit begonnen hat, Microsoft Word als Rendering-Engine zu verwenden. Diese Umstellung eignete sich am besten für Microsoft Office-Benutzer, da sie Inhalte aus Word oder Excel einfach kopieren oder in Outlook-E-Mails einfügen konnten. Aber das machte das Szenario für HTML-basierte E-Mail-Builder schwierig. Da HTML-E-Mails in Outlook anders aussehen, befolgen Sie zur Bewältigung bestimmter Herausforderungen die folgenden Schritte zur Verbesserung von E-Mail-Kampagnen.

Herausforderungen beim E-Mail-Rendering mit Outlook

Ein E-Mail-Vermarkter muss viele Überlegungen anstellen, bevor er eine E-Mail-Kampagne entwirft. Er muss sein Kundenabonnement kennen, das Outlook verwendet. Die Desktop-Version, die mobile Version und die Web-Version von Outlook unterscheiden sich in der Wiedergabe einer E-Mail vollständig voneinander. Wenn es um das Rendern von E-Mails mit Outlook geht, sollten Sie Folgendes beachten.

Warum wird das Bild abgeschnitten und langsam geladen?

Wenn es um das Einfügen von Bildern in E-Mails geht, hat Outlook bestimmte Einschränkungen hinsichtlich der Bildgröße.

E-Mail-Newsletter spielen eine wichtige Rolle in E-Mail-Marketing-Kampagnen. Sie werden dynamisch gemacht, indem Bilder hinzugefügt werden. Wenn der Kampagnenvorlage ein langes Bild hinzugefügt wird, wird es manchmal auf der Empfängerseite abgeschnitten oder neu skaliert. Dies liegt daran, dass Outlook den oberen Teil des Bildes abschneidet, der eine Höhe von 1728 Pixel überschreitet. In diesem Fall müssen wir also die Größe des Bildes unter 1728 Pixel ändern, damit es ohne Beschneidung angezeigt wird.

In Situationen, in denen die Größe des Bildes nicht geändert werden kann, besteht die beste Alternative darin, das Bild in zwei separate Bilder zu schneiden und es dann in der Kampagne zu verwenden.

Bild wird nicht verkleinert

Outlook funktioniert nicht gut mit Bildern, die durch HTML eingeschränkt sind. Das heißt, wenn die E-Mail-Vorlage mit einem Bild hinzugefügt wird, dessen Größe mithilfe von HTML geändert wird, zeigt Outlook das Bild nur in der Originalgröße und nicht in dem geänderten Wert an. Daher müssen wir sicherstellen, dass die Größe des Bildes lange geändert wird, bevor es in einer der E-Mail-Automatisierungen verwendet wird.

Hintergrundbilder

Die beste Strategie, um einen Kunden zu begeistern, besteht darin, eine E-Mail mit einem Hintergrundbild zu erstellen, das die Marke zeigt. Wir können die Hintergrundbilder zielgerichteter gestalten, indem wir Live-Texte über das Bild legen. Der Live-Text hilft uns auch, den Zweck der E-Mail zu vermitteln, auch wenn der Kunde nicht mit dem Bild angezeigt wird.

Outlook unterstützt jedoch keine Hintergrundbilder mit HTML. Wir müssen VML (Vector Markup Language) verwenden, damit die Hintergrundbilder vom Abonnenten angezeigt werden können.

Geben Sie den folgenden Code in das <body> -Tag Ihres HTML-Codes ein, damit das Hintergrundbild das gesamte E-Mail-Fenster abdeckt

 <div> <!--[if gte mso 9]> <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t"> <v:fill type="tile" src="/IMAGE.png" color="#000000"/> </v:background> <![endif]--> <table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0"> <tr> <td valign="top" align="left" background="IMAGE.png">

Der obige Code funktionierte perfekt bei der Anzeige des Hintergrundbilds mit E-Mails, die in Outlook 2007, 2010 und 2013 geöffnet wurden. Aber Windows Mail 10 benötigte einige Änderungen im Code, um das Bild mit seiner Quelle hinzuzufügen, die das Hintergrundbild zulässt.

Der folgende Code ermöglicht es, dass die oberste Ebene des Bildes transparent ist, und hilft, das Hintergrundbild zu korrigieren.

 <td valign="top" height="700" background="Image Live URL Here" bgcolor="#f7901e"> <!--[if gte mso 9]> <v:image xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" src="/Image Live URL Here" /> <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false"> <v:fill opacity="0%" color="#f7901e" /> <v:textbox inset="0,0,0,0"> <![endif]--> <div> <!-- HTML Content Here --> </div> <!--[if gte mso 9]> </v:textbox> </v:fill> </v:rect> </v:image> <![endif]--> </td>

Animierte GIFs passen nicht

Videos sprechen mehr als Worte.

Technisch gesehen benötigt eine E-Mail-Vorlage jedoch eine komplexe Codierung, um Videos zu unterstützen. Wenn ich über Alternativen nachdenke, sehe ich als E-Mail-Vermarkter GIF als dynamische Option. GIFs sind animierte Bilder, um eine Botschaft in einfachster Form zu vermitteln. Outlook unterstützt kein GIF.

Das GIF-Bild wird geladen, aber nur der erste Frame des GIF wird für den Kunden gerendert.

Wenn Sie Outlook-Abonnenten in der E-Mail-Liste haben, stellen Sie sicher, dass der erste Frame des Bildes den Hauptkontext des GIF teilt.

Erwägen Sie die Verwendung des Animationsteils als zusätzlichen Vorteil für Abonnenten mit anderen E-Mail-Clients.

Randradius-Eigenschaft

Apropos E-Mail-Marketing, Call-to-Action-Button ist eine Funktion, die die E-Mail dazu bringt, einen Lead zu generieren. Wie oft haben wir auf den runden CTA-Button geklickt?

Die Border Radius-Eigenschaft ist eine gängige CSS-Eigenschaft, die jedoch mit Outlook nicht gut funktioniert. Bei Outlook werden den Abonnenten CTA-Buttons mit quadratischen Umrandungen zur Verfügung gestellt.

Zusätzliche Leerzeichen

Manchmal Leerzeichen über dem Bild, wie wir es früher in der Druckvorschau-Option gesehen haben, nachdem die E-Mail mit Outlook gerendert wurde.

Wie bereits in diesem Blog erwähnt, liegt dies daran, dass Outlook 2007 Microsoft Word zum Rendern von HTML-E-Mails verwendet.

Daher sieht die E-Mail etwas anders aus als das tatsächliche Design.

Problem mit der primären Schriftart

Wenn auf dem Gerät des Abonnenten der primäre Schriftartstil fehlt, rendert Outlook die gesamte E-Mail in Times New Roman und ignoriert die im Code erwähnte Fallback-Schriftart.

 <!--[if mso]> <style> h1 { font-family: Primary font, Fallback font; } </style> <![endif]-->

E-Mail-Vorlage sollte perfekt sein

Sie führen eine E-Mail-Kampagne für einen E-Commerce-Shop durch. Die von Ihnen entworfene Vorlage sollte beim Versenden effektiver E-Mails helfen, da dies nicht das althergebrachte Feldmarketing ist, bei dem Kunden Sie persönlich treffen können.

Das Aussehen der Marketingperson definiert die Glaubwürdigkeit der Marke. Also, was senden wir jetzt, um unsere Marke zu repräsentieren?

E-Mails. Die Designvorlage Ihrer E-Mail gibt dem Kunden den ersten Eindruck Ihrer Marke. Je besser eine E-Mail mit dem Inhalt aussieht, desto besser ist die Marke

Wir haben jedoch nicht die Freiheit, erweiterte Formatoptionen zu verwenden, um unsere E-Mail attraktiv aussehen zu lassen. Wir können sehen, dass die E-Mail in Outlook perfekt aussieht, aber das ist nicht das Szenario, wenn sie von anderen E-Mail-Empfängern gerendert wird.

Sie sollten sich an die Verwendung von Tabellen in Ihrem E-Mail-HTML halten. Versuchen Sie nicht, div-Elemente mit Position und Floats zu verwenden, da Outlook dies nicht unterstützt. Leider gibt es dafür bisher keinen Workaround.

Abmeldeoption ist ein Muss

Als Betreiber eines E-Commerce-Shops möchten wir unsere Kunden immer mit unserer Marke in Verbindung bringen.

Wie es geht?

Newsletter. Geben Sie potenziellen Kunden Informationen zu Trends und Updates in Ihrer Geschäftsnische.

Aber letztendlich entscheidet der Kunde, ob er Ihrer Marke folgt oder nicht. Einmal bei uns abonnierte Kunden sollten die Möglichkeit haben, sich jederzeit von der Abonnementliste abzumelden.

Die Schaltfläche zum Abbestellen ist ein Muss in jedem Newsletter, den wir an unsere Kunden senden, und wenn unsere Kunden diese Schaltfläche nicht sehen,
Außer was?
Wir könnten Spam bekommen!

Das Versenden von E-Mails aus Outlook bringt unsere Marke in dieses Risiko, da diese Standardoption nicht verfügbar ist.

Links werden in unterstrichenen blauen/violetten Text geändert

Als E-Mail-Vermarkter müssen wir die E-Mails, die wir an die Kunden senden, vollständig nutzen.

Wir können Abonnement-Links, Links zu unseren Trend-Blogs und Weiterleitungslinks zu unserer Website einfügen, um Kundenbindung zu erreichen.

Wenn eine HTML-E-Mail von Outlook gesendet wird, werden solche Links in blauem/violettem Text unterstrichen angezeigt, wenn sie auf verschiedenen E-Mail-Clients angezeigt werden.

Verwenden Sie zur Vermeidung dieses Problems das <font> -Tag und umschließen Sie den Text mit einem <span> -Tag und einem style-Attribut.

Versuchen Sie es mit dem folgenden Code-

 <a> <span> <font color="#E3A216"> Click me </font> </span> </a>

Outlook kann in Ordnung sein, um Ihren persönlichen Posteingang zu füllen.

Apropos Geschäft – Look out of the Box.