Vous avez testé votre email avec SPREAD et le résultat était comme vous le souhaitiez. Vous décidez alors de diffuser votre newsletter à votre cible.

Mais lorsque vous recevez l'email et l'ouvrez dans Outlook, vous vous rendez compte que le rendu n'est plus du tout celui que vous souhaitiez : images qui ne s'affichent pas, contenu décalé... etc

Malheureusement, cela n'est pas dû à l'outil d'emailling de SPREAD, mais au moteur de rendu d'Outlook.

Si vous regarder votre newsletter sur une autre messagerie, vous observerez que le résultat est correct.

Format desktop / responsive

Outlook.com ne permet pas de détecter la taille de l'écran lors du rendu de l'email pour choisir d'afficher soit le format desktop, soit responsive.

Ainsi, sur Outlook.com, les emails seront toujours affichés au format responsive par défaut.

Utiliser des GIF

Si vous avez des soucis à voir les GIFs animés s'afficher dans Outlook, le tableau ci-dessous référence les versions d'Outlook qui affichent ou non les GIFs.

Version d'Outlook	Affichage des GIF animés	Remarques
Outlook Express	Oui
Outlook 2000 – 2003	Oui
Outlook 2007 – 2010	Non	Microsoft a commencé à utiliser Word comme éditeur, ce qui a engendré la perte de la fonctionnalité du HTML.
Outlook 2013 – 2016	Non	Microsoft continue à utiliser un nouvel éditeur similaire à Word, le problème est le même.
Outlook pour Mac	Oui
Outlook.com	Oui

Source : https://www.crossware.co.nz/blog/issues-with-gifs-in-outlook/

Pourquoi le rendu est différent ?

La gestion HTML d’Outlook : ce que vous voyez n’est pas le code que vous avez créé !

"Outlook utilise le moteur de rendu HTML de la suite Office et réécrit totalement votre code.

Par exemple, le code CSS que vous avez placé dans le header de votre email est inséré “inline”.

Autre phénomène lié à cette réécriture : si Outlook juge que certaines balises ne sont pas présentes, par exemple la balise <p> autour d’un texte (ce que l’on évite de faire dans un email), il va l’ajouter automatiquement.

Cela donne toute une série d’effets non désirés, comme par exemple des marges qui bougent, des couleurs d’arrière plan qui ne s’appliquent pas partout... etc"

http://www.badsender.com/2013/02/20/outlook-code-html-css

"De plus, par défaut, Outlook n'affiche pas les images. Il faut mettre en place un paramétrage pour les images des emails s'affichent automatiquement."

http://www.kalligo.com/videos/861-outlook-afficher-systematiquement-images-newsletters.htm

"Les clients e-mails lourds (Outlook, Thunderbird, Lotus Notes...) ont un fonctionnement radicalement différents des webmails (Gmail, Yahoo Mail, Hotmail, Outlook.com...).

Ces mêmes webmails imposent des règles très strictes sur le code HTML et CSS contenu dans les e-mails car les messages sont eux-mêmes affichés dans une structure de page web qui a ses propres styles. Entre autres, Outlook.com ne supporte pas les marges.

Et enfin le plus consternant : certains moteurs sont très exotiques, par exemple Outlook 2013 utilise toujours le moteur d'interprétation HTML de... Word ! Ce qui signifie virtuellement que la prise en charge de CSS dans Outlook n'a pas changé entre les versions 2007, 2010 et 2013, là où les navigateurs ont fait des bonds de géants."

http://www.alsacreations.com/tuto/lire/1533-un-e-mail-en-html-responsive-multi-clients.html

Attention

Actuellement, Outlook ne respecte pas les attributs HTML et CSS sur les dimensions des images.

Par exemple, si vous intégrez une image aux dimensions natives 1200 x 300px et que vous demandez en HTML et/ou en CSS à ce que l'image fasse 400 x 100px, l'image sera redimentionnée en 400 x 100px partout sauf sur Outlook qui affichera l'image dans sa taille native (1200 x 300px).

=> Il faut donc que la taille native de vos images soit adaptée.

Dans l'éditeur simplifié, un email fait 600px de large sur une colonne.

Pour que l'image apparaisse correctement sur Outlook, il faut donc diviser par le nombre de colonnes et retirer les marges :

2 colonnes
- 600 / 2 - marge gauche - marge droite (une marge = 25px par défaut)
- = 300 - 25 - 25
- = 250px de large
3 colonnes
- = 600 / 3 - 25 - 25
- = 150px de large
4 colonnes
- = 600 / 4 - 25 - 25
- = 100px de large

"L'encodage de vos emaillings doit se réduire à du langage HTML strict avec très peu voire aucun CSS à l'intérieur."

http://www.nicolasaguenot.com/nicoandco/index.php?post/2009/08/02/Outlook-2007-et-newsletters-%3A-Des-probl%C3%A8mes-d-int%C3%A9grations!

Pour tester vos emaillings sur différentes messageries, nous vous proposons deux applications web :

Email On Acid : https://www.emailonacid.com/

Litmus : https://litmus.com/

Ils vous permettent obtenir des informations instantanées sur votre code avec des aperçus en temps réel.

N'hésitez pas à consulter notre article sur les bonnes pratiques des emaillings !

Browser not supported