Stripo_Outlook Rendering Issues_Featured Image1
23 Dezember 2019

Häufige E-Mail-Darstellungsprobleme in Outlook and wie Stripo sie löst

Optimieren Sie E-Mails für Outlook
Inhaltsverzeichnis
  1. 1. In einigen Outlook-Versionen werden runde Buttons quadratisch
  2. 2. Container oder Strukturhintergründe werden in Outlook nicht dargestellt
  3. 3. Menüpunkte verlieren in einigen Versionen von Outlook ihren Stil
  4. Schlusswort
1.
1. In einigen Outlook-Versionen werden runde Buttons quadratisch

Outlook ist ein ziemlich beliebter E-Mail-Client. Es hat 11% Marktanteil (Die Outlook-Apps haben 9% und die Web-Version wird von 2% der Menschen weltweit verwendet).

Es soll für alle Unternehmensbedürfnisse ausreichend sein.

Allerdings ist Outlook auch für seine „einzigartigen“ Darstellungsregeln berühmt. Die häufigsten Probleme, vor denen Nutzer stehen, wenn sie E-Mails in Outlook öffnen oder aus Outlook versenden, sind:

  • Runde Buttons werden quadratisch;
  • Hintergründe für individuelle Container und Zeilen werden nicht dargestellt;
  • Menüreiter verlieren ihr Stil.

Diese Probleme werden im Internet breit diskutiert, was uns dazu veranlasst hat, Lösungen dafür in unserem Blog zu präsentieren

Beim Versuch, diese Probleme zu lösen, nehmen manche Änderungen an ganzen Codes vor. Aber wie es manchmal passiert, bekommt man ein Problem behoben und das nächste tritt auf.

Zum Beispiel verändern E-Mail-Vorlagen mit erneuertem Code die Buttons in Outlook nicht, dafür stellen sie Banner nicht dar. Oder, was vielleicht noch schlimmer ist – diese E-Mail-Layouts sind in anderen E-Mail-Clients wie Gmail oder Yahoo fehlerhaft.

Darum glauben wir, dass das Problem lokal gelöst werden sollte — nur für die Elemente, die es erfordern und nicht ganze E-Mails.

1. In einigen Outlook-Versionen werden runde Buttons quadratisch

Es ist durch zahlreiche Untersuchungen erwiesen, dass die Form des CTA  button CTR und CTOR überhaupt nicht beeinflusst.

Die erste Kardinalsregel, um Buttons effektiv zu machen, ist — sie mit einem klaren und ansprechenden Text darauf auffällig zu machen.

Doch die Form der Buttons ist uns, den Designern, Programmierern und E-Mail-Vermarktern, wichtig, da wir wollen, dass unsere E-Mails markenkonsistent sind.

Stripo_Outlook Rendering Issues_Buttons1

Was macht Outlook also mit den Buttons?

Zunächst einmal machen einige Versionen einfach alle Winkel richtig. Dann entfernen sie alle Weißräume in Buttons, was sie weniger attraktiv aussehen lässt, aber sie sind trotzdem ziemlich auffällig.

Was verursacht diesen Bug?

Es gibt 3 Hauptmethoden für Button-Layouts in E-Mails:

  1. Die tabellenbasierte Methode.
  2. Die Stripo-Methode. Geben wir ihr diesen Namen, da sie für unseren E-Mail-Vorlagengenerator entwickelt wurde, und da sie, unserer Meinung nach, für unsere Bedürfnisse am besten geeignet ist.
  3. Die VML-Methode.

Die dritte wurde ausschließlich für Outlook erfunden. Während andere nicht von diesem E-Mail-Client unterstützt werden, aber eine breitere Unterstützung unter anderen E-Mail-Clients haben.

So legt man einen VML-basierten Button fest

Wenn Sie ein Stripo-Nutzer sind, brauchen Sie nur Ihre Buttons für Outlook zu optimieren:

  • Öffnen Sie die „Allgemeinen Einstellungen“ in der Seitenleiste;
  • Öffnen Sie den „Buttons“-Reiter;
  • Aktivieren Sie den "Support für Outlook"-Button.

Outlook_VML-ButtonDE

Jetzt bleiben die Buttons in Outlook abgerundet, behalten ihren Stil und ihre Farben.

(Outlook 2011, OSX 10.8)Outlook 2011

Möchten Sie das auch tun können?

Use Stripo

2. Container oder Strukturhintergründe werden in Outlook nicht dargestellt

Der Löwenanteil der Fragen zu Outlook im Web bezieht sich darauf, „wie man ein Hintergrundbild für Module und separate Elemente einrichtet“.

Stripo_Outlook Rendering Issues_Background Images1

Die E-Mail rechts sieht ziemlich cool aus, das Beispiel auf der linken Seite sieht jedoch komplett aus.

Das ist das Hauptziel aller Hintergründe — E-Mail-Designs komplett aussehen zu lassen.

Das Erstaunlichste und Interessanteste daran ist, dass Outlook Hintergründe, die für ganze E-Mails eingerichtet wurden, in seiner Webversion, in allen Versionen seiner Desktopanwendung und in Office 365 richtig darstellt.

Was also, wenn Sie einen Hintergrund für ein bestimmtes Element in Ihrer E-Mail einrichten müssen?

Zuerst möchten wir Sie daran erinnern, dass Sie die Hintergründe für die gesamte E-Mail-Vorlage im Reiter „Darstellung“ im Abschnitt „Allgemeine Einstellungen“ einrichten können — sie wird in allen Desktop-E-Mail-Clients korrekt dargestellt.

So richten Sie ein Hintergrundbild für eine Struktur/Zeile ein, das in Outlook dargestellt wird

Das ist ganz einfach — erstellen Sie es einfach als Banner. Denn alle Ebenen des Banners, das Sie mit Stripo erstellen, ergeben, wenn es irgendwohin exportiert wird oder als HTML-Datei heruntergeladen wird, ein einziges Bild. Und wie wir wissen, funktionieren Bilder gut über alle E-Mail-Clients hinweg.

Stripo_Outlook Rendering Issues_Background Image for Structure1

Um ein Banner zu erstellen, müssen Sie:
  • Ein Bannerbild hochladen, das als Strukturhintergrund dient;

  • Das „zusätzliche“ Bild hochladen, das als Hauptbild des Inhaltsmoduls dient oder das Bild des Buttons hochladen — denken Sie daran, unsere „Sticky notes”-Option zu nutzen, um zusätzliche Bilder in gleichen Abständen von allen Seiten des Bannerbildes zu platzieren;
  • Platzieren Sie Ihren CTA-Text über die Bilder;
  • Fügen Sie einen Hyperlink zu dieser Struktur hinzu.

Wichtig zu beachten:

Dieser Trick funktioniert nur, wenn Sie nur ein Produkt zu dieser Struktur/Zeile hinzufügen.

So richten Sie ein Hintergrundbild für einen Container/Element ein, das in Outlook dargestellt wird

In einigen Fällen müssen Sie möglicherweise einen Hintergrund für einen separaten Container oder eine Spalte in einer Zeile einrichten.

Unser Hintergrund für Container wird in allen Versionen von Outlook korrekt dargestellt:

Stripo_Outlook Rendering Issues_Background for Containers and Elements1

Es gibt zwei Wege, dies zu tun:

Weg 1. Ein Banner erstellen

Ja, Sie müssen es so erstellen, wie wir es im vorherigen Abschnitt beschrieben haben, aber Sie müssen eine 2-spaltige Struktur verwenden.

Rendering-Issues_Setting-Background-Images-for-Containers-with-Stripo_De

Weg 2. Einen VML-basierten Hintergrund erstellen

Sie müssen die Struktur und das Element, in das Sie einen Hintergrund einfügen möchten, vorbereiten.

Sobald das erledigt ist, müssen Sie mit dem Code der E-Mail-Vorlage arbeiten.

  • Setzen Sie den Mauszeiger auf das notwendige Element direkt in der Vorlage;
  • Über diesem Element finden Sie die „Container“-Beschriftung;

Rendering-Issues-in-Outlook_Activating-Container's-Settings_DE

  • Klicken Sie auf diese Beschriftung, um die Container-Einstellungen zu aktivieren;
  • Öffnen Sie nun den Code-Editor;

Stripo_Outlook Rendering Issues_Opening Code Editor1

  • Fügen Sie diesen Code direkt über der Zeile ein, die mit „Tabellenbreite“ startet
<!--[if gte mso 9]>

 <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:327px;height:100%;">

   <v:fill type="frame" src="https://iiqf.stripocdn.email/content/guids/CABINET_b696bac619e2a6fd60a2c756b8b7c9c5/images/26661559905688877.png" color="#7bceeb" ></v:fill>

   <v:textbox inset="0,0,0,0">

 <![endif]-->

(Quelle des Codes: backgrounds.cm. Wir haben diesen Code optimiert, damit er den Anforderungen unseres Editors besser entspricht);

  • Fügen Sie diesen Beispielcode unter der gleichen Zeile ein:
<!--[if gte mso 9]>

   </v:textbox>

 </v:rect>

 <![endif]-->
  • Ersetzen Sie die unterstrichenen Links mit der URL Ihres Hintergrundbildes;

Outlook_Rendring Issues_Inserting Code Samples for Backgrounds

  • Editieren Sie im Einbettungscode die Bildbreite in Übereinstimmung mit der Breite des Containers — Sie können diese in der obersten Zeile nach dem „Breite“-Tag sehen. In unserem Fall ist sie 600 px.
Wenn das Bild auf unseren Servern gehostet wird, dann können Sie die URL hier erhalten:
  • Klicken Sie in Ihrer HTML-E-Mail-Vorlage auf das Hintergrundbild, das Sie ausgewählt haben;
  • Klicken Sie in der Seitenleiste auf den „URL“-Button;
  • Kopieren Sie im Feld für den Bild-Pfad den Link.

Rendering-Issues-in-Outlook_Copying-URL-to-Background-Image_DE

Wichtig zu beachten:

Wenn Sie zuvor den VML-basierten Button dem Container oder einer Struktur hinzugefügt haben, dann funktioniert Ihr VML-basierter Hintergrund nicht. Outlook zeigt nur eines der beiden VML-Objekte an – und zwar dasjenige, das zuerst festgelegt wurde.

In Kürze:

Wir freuen uns, Ihnen mitteilen zu können, dass wir demnächst ein Steuerelement, ähnlich dem Buttonsteuerelement, zu den Hintergrundbildern hinzufügen werden. Das bedeutet, dass Sie sich nicht mit Code herumschlagen müssen — Sie müssen nur wählen, ob Sie spezielle Hintergründe für die Outlook-Benutzer einstellen wollen.

3. Menüpunkte verlieren in einigen Versionen von Outlook ihren Stil

Unsere Nutzer stehen nur selten vor diesem Problem, aber wir haben trotzdem beschlossen, es auch mit auf die Liste zu nehmen:

Menüs und Buttons können ihren Stil verlieren, einschließlich Farben, Schriftgrößen usw.

Wenn ich meine E-Mail erstelle, richte ich den Schrifttyp ein: Trebuchet und Schriftgröße 18 px.

Aber in Outlook sah ich das:

Stripo_Outlook Rendering Issues_Menus Lose Their Styles.1

Wenn Sie genau hinschauen, dann sehen Sie, dass das erste Menüelement in Times New Roman, 12 px und in Schwarz geschrieben wurde.

Was diesen Bug verursacht:

Sie haben einfach vergessen, einen Hyperlink zu diesen Elementen hinzuzufügen. Wenn ein Element, das einen Link haben sollte, keinen hat, verliert es seinen Stil.

Lösung:

Prüfen Sie, ob Sie Links zu allen Elementen hinzugefügt haben, bevor Sie testen oder E-Mails an Empfänger versenden.

Wichtig zu beachten:

Bei der Erstellung von E-Mail-Vorlagen, fügen wir zu allen Elementen Links hinzu, die einen haben sollten. Wenn Sie keinen absichtlich entfernen, sondern einfach vergessen, sie mit Ihren Links zu ersetzen, dann verliert Ihr Menü nicht seinen Stil, da es über alle notwendigen Links verfügt.

Schlusswort

Outlook ist wirklich ausreichend für die Bedürfnisse vieler Unternehmen. Und wir müssen keine Angst davor haben. Ganz im Gegenteil - wir müssen lernen, damit umzugehen. Außerdem unterstützt Outlook jetzt animierte GIFs und ab diesem Sommer auch AMP für E-Mails. Ist das nicht toll?

Dank unseres offenen HTML-Code-Editors können unsere Benutzer spezielle Code-Elemente einbetten, um schöne, anspruchsvolle E-Mails an alle Empfänger zu versenden, auch an diejenigen, die alte oder neue Versionen von Outlook verwenden.

Kurzfristig müssen Sie sich nicht mit Codes auseinandersetzen — wir machen das für Sie.

Sie müssen nur die entsprechenden Optionen aktivieren.

Bitte lesen Sie den Blog-Post, wie Sie mit Stripo E-Mail-Vorlagen erstellen und nach Outlook exportieren können.

Meine E-Mails für Outlook optimieren
War dieser Artikel hilfreich?
Tell us your thoughts
Vielen Dank für Ihr Feedback!
12 Kommentare
MisterIz vor 1 Jahr
Unfortunately the banners resize entirely on mobile devices making any text or CTA buttons very small.
nicoletta arena vor 1 Jahr
quando scarico l'html sui computer appaiono le immagini caricate, mentre la stessa mail letta sui cellulari non ha le immagini, Perchè?
Lea Simpkins vor 3 Jahren
The problem I am having when I export email templates to outlook is that they are not mobile friendly. From a laptop or computer the emails look fantastic but on mobile they are WAY TOO SMALL to read. Is there a fix to make them adapt to mobile?
Hanna Kuznietsova vor 3 Jahren
Hello, Lea. Sorry for the late reply. Unfortunately, Outlook removes the styles that make email design responsive. Thus, those users who see your emails on mobile devices will see the desktop version of it. Of course, there is no horizontal scroll on mobiles. But all the containers from one row that are normally moved to the second/third row on mobiles, will all remain in the same row. https://stripo-cdn.stripo.email/photos/shares/Blog//Containers-Get-Moved-to-Next-Rows.png -- email sent via an ESP https://stripo-cdn.stripo.email/photos/shares/Blog//Email-Sent-Through-Outlook.png -- email sent via Outlook.
Alaa Abdelrahim vor 3 Jahren
17620 views meaning so many people is having this problem and sorry to say this , but some of suggested solution is not working :(
Hanna Kuznietsova vor 3 Jahren
Alaa Abdelrahim, We're sorry to hear some solutions did not work for you. Could you clarify please which solutions did not work? We will try to find the reason why and provide you with a new way out. Thank you
GERWIN RUSSELL FARROÑAN ALBORNOZ vor 3 Jahren
Hola, tengo problemas para que la imagen de fondo del contenedor se pueda ver en outlook. Estoy siguiendo las indicaciones de insertar el código (https://stripo.email/photos/shares/Blog//Outlook_Rendring-Issues_Inserting-Code-Samples-for-Backgrounds.png) pero no me resulta. Adjunto el enlace de la plantilla que hice. https://viewstripo.email/f9949d8f-3dd3-4452-ab85-a2f603d0360e1599420348110 Agradecería que me digan que tengo que corregir para que resulte.
Hanna Kuznietsova vor 3 Jahren
Hola. Intente utilizar "New Email Copy 3" y este contenedor http://prntscr.com/ucvqve como se muestra en el ejemplo. Así es como se ve el fondo de este contenedor en nuestro Outlook: https://prnt.sc/ucvp5o Si necesita más ayuda, envíenos un correo electrónico a support@stripo.email oa través de nuestro chat que puede encontrar en la esquina inferior derecha de su pantalla en nuestro sitio.
Francis Monier vor 3 Jahren
Bonjour, Bravo pour votre article. Une remarque cependant car je suis toujours confronté au problème de l'image de fond sur Outlook. Problème récurrent qui me fait perdre énormément de temps. Vous avez dit "Nous sommes heureux d’annoncer que bientôt nous ajouterons un contrôle, similaire au contrôle des boutons, pour les images de fond. Cela signifie que vous n’aurez plus à jouer avec le code — vous n’aurez qu’à choisir si vous voulez un arrière-plan spécial pour les usagers d’Outlook ou non, nous sommes aujourd'hui en 2020 et cette option n'est toujours pas disponible. Où en êtes-vous par rapport à ce sujet là ? Cordialement (Problème mentionné étant "L’arrière-plan des conteneurs ou structures ne s’affiche pas dans Outlook")
Hanna Kuznietsova vor 3 Jahren
Francis, Bonne journée. Merci pour votre question. Malheureusement, la sortie de cette option est reportée au début de 2021. Lorsque la sortie aura lieu, nous en parlerons certainement sur notre site Web. Nous espérons que cette méthode d'ajout d'un arrière-plan vous a été utile et n'a causé aucun inconvénient. Nous vous souhaitons sincèrement des campagnes efficaces
Олег Темпов vor 3 Jahren
Метод stripo приводит к тому, что колонки в браузерном клиенте Gmail начинают скакать, чего бы не было при табличной вёрстке...
Hanna Kuznietsova vor 3 Jahren
Олег, Добрый день. Нам очень жаль, что у Вас возникли проблемы с отображением письма в Gmail. Метод верстки у нас табличный, и никакие контроллы, которые мы применяем для адаптации писем под Outlook, его не отменяют. Подскажите, пожалуйста, какое именно действие привело к тому, что колонки начали скакать в Gmail. Напишите, пожалуйста, здесь или на почту support@stripo.email, и мы постараемся помочь устранить данную проблему. Спасибо
Typ
Branche
Jahreszeiten
Integration
Stripo-Editor
Vereinfachen Sie den Prozess der E-Mail-Produktion.
Stripo-Plugin
Integrieren Sie den Stripo-Drag-n-Drop-Editor in Ihre Webanwendung.
Bestellen Sie eine individuelle Vorlage
Unser Team kann es für Sie entwerfen und programmieren. Füllen Sie einfach den Fragebogen aus und wir werden uns in Kürze bei Ihnen melden.