Rendu des e-mails Outlook : comment j'ai appris à ne plus m'inquiéter et à aimer Outlook

Corrigez les problèmes de mise à l'échelle DPI

Sur les ordinateurs Windows, il existe un paramètre global que les utilisateurs peuvent modifier (ou, dans certains cas, sont définis plus haut par défaut) qui agrandit le texte et les éléments graphiques pour les rendre plus grands et plus faciles à lire. C'est génial pour l'accessibilité, mais pas si génial pour Outlook car seuls certains éléments sont mis à l'échelle tandis que d'autres ne le sont pas.

Heureusement, il y a un correctif. Tout d'abord, vous devez ajouter un espace de noms XML à la balise HTML :

Ensuite, ajoutez du code pour corriger la mise à l'échelle de l'image juste avant la balise </head> :

Et enfin, assurez-vous d'inclure toutes les largeurs définies en tant que propriété CSS avec des pixels et non en tant qu'attribut sur vos tableaux.

✗ Pas ceci avec width=”600″ :

Oui, comme ça avec style="width:600px;" :

Cela résoudra la plupart de vos problèmes pour les clients 120 DPI. Jetez un œil à cette comparaison côte à côte avant et après ce correctif :

Outlook 2013 à 120 DPI (sans correctif)	Outlook 2013 à 120 DPI (avec correctif)

Quelle différence, hein ?

Ne vous attendez pas à ce que les effets de survol fonctionnent

Outlook ne prend pas en charge la pseudo-classe de survol. Vous devez toujours l'inclure pour créer des interactions afin d'augmenter l'accessibilité de votre courrier électronique dans d'autres clients de messagerie, mais ne soyez pas surpris si cela ne fonctionne pas dans Outlook.

Ne comptez pas sur un GIF animé pour faire passer votre message

Les clients de bureau Outlook ne prennent pas en charge les GIF animés. Vous pouvez faire en sorte que le cadre initial affiche l'image que vous souhaitez afficher dans Outlook, ou vous pouvez masquer le GIF animé d'Outlook et utiliser un codage conditionnel pour afficher une image fixe de votre choix. (Encore une fois, plus sur le codage conditionnel ensuite.)

N'utilisez pas de contenu interactif sans solution de secours

Les e-mails interactifs sont un grand non pour Outlook. Ils dépendent soit du codage AMP, soit du piratage de la case à cocher, qui ne sont tous deux pris en charge par Outlook.

Dans le cas d'AMP pour les e-mails, le fichier HTML sera affiché à la place du fichier AMP, donc pas de codage supplémentaire pour cela. Pour l'interactivité du piratage de la case à cocher, vous devrez masquer le contenu interactif et afficher le repli Outlook. Encore une fois, le codage conditionnel est votre ami ici.

Ne pas ajouter de remplissage ou de marges aux images

Outlook supprime le remplissage et les marges des images. Assurez-vous d'ajouter un rembourrage à la cellule du tableau autour de l'image à la place. Ou si vous avez l'image dans la même cellule que la copie, ajoutez une marge à la balise autour de la copie (<h1>, <h2>, <p>, etc.).

La peur est le tueur d'e-mails : le code dont vous avez besoin pour faire face à vos peurs Outlook

Le codage d'un excellent e-mail pour les clients de messagerie de bureau d'Outlook nécessite de sortir du HTML et du CSS «normaux». Il existe trois types de code qui aideront à faire briller vos e-mails dans ces clients : le codage conditionnel, les propriétés MSO et le VML.

Cela peut être effrayant de travailler avec quelque chose de nouveau, mais je vous promets que cela en vaut la peine. Et ce moment où vous le faites fonctionner correctement ? Vous aurez l'impression de faire le Kessel Run en moins de 12 parsecs.

Codage conditionnel

Le codage conditionnel est un codage qui examine le client de messagerie ou le navigateur utilisé par votre abonné et n'affiche le code que s'il remplit les conditions à l'intérieur du commentaire, telles que :

Vous pouvez même l'utiliser pour cibler des versions spécifiques des clients de bureau d'Outlook en ajoutant les numéros de version :

Outlook est tout sauf simple, cependant, les numéros de version ne correspondent pas au nom du client de messagerie :

• Outlook 2000 = mso 9
• Outlook 2002 = mso 10
• Outlook 2003 = mso 11
• Outlook 2007 = mso 12
• Outlook 2010 = mso 14
• Perspectives 2013 = mso 15
• Outlook 2016, Outlook 2019 et bureau Office 365 = mso 16

Et puis vous pouvez devenir plus complexe en ciblant une gamme de clients avec moins de (lt), plus de (gt), moins ou égal à (lte) ou supérieur ou égal à (gte). Par exemple:

Donc, si vous ne voyez que des trucs sauvages se produire sur un client spécifique, vous pouvez cibler ce client spécifiquement et masquer et afficher un meilleur contenu pour lui.

Vous pouvez également utiliser des commentaires conditionnels pour masquer le contenu d'Outlook en disant « if ! mso » signifiant « si ce n'est pas mso » :

Quelque chose à garder à l'esprit : le code conditionnel ne fonctionne que sur les clients de bureau Outlook. Comme c'est là que de nombreux problèmes entrent en jeu, vous en aurez probablement plus besoin que n'importe quel correctif pour les clients de messagerie Web.

Mais il existe également des moyens de cibler les clients Web, mais aucun moyen de cibler un client Web Outlook plutôt qu'un autre. Ainsi, lorsque vous ciblez Outlook.com, vous ciblez également le client Web Office 365 (mais pas le client de bureau).

Vous pouvez cibler les clients Web Outlook en exploitant le fait qu'Outlook ajoute « x_ » à tous les noms de classe, mais ne le fait pas pour le sélecteur d'attributs. Donc, si vous avez une classe « foo » et que vous souhaitez la traiter différemment pour les clients Web Outlook, vous pouvez la cibler avec ce code :

(Merci à Mark Robbins pour ce correctif et à Dylan Smith pour howtotarget.email.)

Propriétés MSO

Comme mentionné ci-dessus, il existe un CSS spécifique à Outlook que vous pouvez ajouter et qui n'affectera que les clients de messagerie de bureau Outlook. En voici quelques-unes que vous trouverez assez courantes, et vous en avez peut-être déjà entendu parler :

mso-cacher : tout ;

Cette propriété masquera tout des clients de bureau Outlook. Il est supprimé lorsque l'e-mail est transféré, alors méfiez-vous de l'utiliser seul s'il s'agit d'une fonction dont vous savez que vos abonnés profitent souvent. Vous pouvez le coupler avec le code conditionnel « sinon mso » si vous êtes un codeur « juste au cas où ».

mso-line-height-rule : exactement ;

Cette propriété garantit qu'Outlook affiche votre hauteur de ligne à ce que vous désignez dans la propriété line-height. Sans cela, Outlook ne respecte pas forcément vos hauteurs de ligne. Si vous travaillez dans une industrie où la précision est la clé, vous connaissez probablement très bien cette propriété.

mso-padding-alt

Celui-ci est un peu moins courant, mais j'ai dû l'utiliser de temps en temps. Il vous permet de déclarer un remplissage spécifique à Outlook. Donc, si le remplissage normal que vous avez sur une cellule ne s'affiche pas correctement dans Outlook, vous pouvez utiliser mso-padding-alt pour définir des valeurs qui correspondent à votre conception pour Outlook.

taille de police mso-ansi

C'est un autre que je n'utilise qu'occasionnellement. Il vous permet de définir des tailles de police spécifiques à Outlook. Donc, si Outlook rend votre police un peu plus grande que les autres clients de messagerie et que vous vous retrouvez avec une courte dernière ligne de copie que vous ne vouliez pas, ajoutez mso-ansi-font-size et définissez une taille de police qui adapte votre copie.

Il y a beaucoup plus de propriétés MSO que vous pouvez utiliser, alors allez-y et voyez s'il y a quelque chose qui résoudra un problème de rendu pour vous.

VML

VML signifie Vector Markup Language. Il s'agit de la version Microsoft de SVG, mais le langage est déprécié et très rarement utilisé (yay email !). Microsoft dispose de la documentation pour VML archivée en ligne, vous pouvez donc toujours rechercher comment l'utiliser pour créer des vecteurs dans Outlook, où elle est toujours prise en charge. Théoriquement, lorsque Microsoft passera à son modèle « One Outlook », nous pourrons abandonner le VML.

Assurez-vous d'inclure la déclaration d'espace de noms VML. Je l'ajoute généralement à l'élément <html> dans mon modèle passe-partout afin que je puisse utiliser VML chaque fois que j'en ai besoin :

Une fois que vous avez cela, vous pouvez ajouter n'importe quel VML à votre code dans les conditions MSO :

Ce code ferait un rectangle bleu de 200 px sur 50 px. Peut-être pas quelque chose que vous pouvez réellement utiliser dans un e-mail, mais vous pouvez utiliser VML pour ajouter des boutons avec des coins arrondis à votre code, des images d'arrière-plan et des dégradés d'arrière-plan. Campaign Monitor dispose de deux outils créés par Stig pour vous aider à créer des images d'arrière-plan ou des boutons avec des coins arrondis. J'ai trouvé que c'était un excellent moyen d'ajouter du VML lorsque vous appreniez tout simplement.

Vous pouvez également utiliser VML pour créer un faux positionnement absolu, des effets d'ombre ou une solution de secours pour prendre en charge l'art CSS dans Outlook. Il y a beaucoup de choses que vous pouvez faire avec VML une fois que vous avez plongé.

Vivez longtemps et envoyez un courriel

Outlook a longtemps été le fléau des spécialistes du marketing par e-mail, mais cela n'a pas à l'être.

Avec les bons outils, vous pouvez créer de beaux e-mails qui s'affichent correctement dans Outlook. Consultez les ressources tout au long de cet article pour créer vos côtelettes de codage Outlook et testez-les dans vos e-mails avec Litmus Builder et les aperçus d'e-mail. Considérez le codage pour Outlook comme un casse-tête qui attend d'être résolu, et vous pourriez vous retrouver à aimer Outlook et toutes ses bizarreries.

Testez vos e-mails dans Outlook avec Litmus Voyez à quoi ressembleront vos e-mails dans Outlook et résolvez les problèmes avant d'appuyer sur envoyer. Avec Litmus, soyez assuré que vous créez des e-mails au pixel près avec lesquels vos abonnés peuvent interagir. Commencez votre essai gratuit →