Outlook 2016 : 7 tips à connaître pour intégrer vos emails.

Email-Tricks_Outlook2016-Astuces-1

7 tips à connaitre pour créer vos emails pour outlook 2016

Outlook 2016 est le dernier né de Microsoft en matière de logiciel de messagerie. Malheureusement, malgré toutes nos espérances, ce dernier s’est avéré être dans la lignée des précédentes versions… un casse tête pour intégrateur d’email !

Je vous invite donc à découvrir 7 tips indispensables pour vous simplifier la tâche.

1. Outlook 2016 ne stylise pas les liens si ceux-ci ne possèdent pas d’attribut href !

Les liens sans attribut href, souvent utilisés comme « ancre » dans l’intégration d’email ne sont pas stylisés par Outlook 2016.

Solution : Englobez votre lien dans une balise <span> et stylisez cette dernière.

2. Les textes et urls trop longs (insécables) ne sont pas « coupés » par défaut.

La plupart des clients de messagerie découpent correctement par défaut les urls trop longs et les textes qui ne rentrent pas dans leur conteneur. Ce n’est pas le cas de Outlook 2016.

Solution : Ajoutez le code suivant (en inline ou dans <style>) pour les balises concernées.

3. Les line-height ne sont pas respectés !

Outlook (versions inférieures comprises) ne respecte pas correctement les paramètres de line-height. Si cette propriété est importante pour vous, vous risquez de vous arracher les cheveux.

Solution : Utilisez le style mso (spécifique à microsoft outlook) suivant juste avant votre propriété line-height :

4. Outlook 2016 définit une hauteur minimum des <td> à 17px par defaut !

Rien de plus frustrant que de constater une hauteur minimale définie par défaut pour les <td> mise en place dans votre email. On ne demandera pas pourquoi 17 !

Solution : Utilisez font-size et line-height à 1px (ou plus en cas de besoin). Cela aura pour effet de « reset » la hauteur minimum définie ! En réalité MSO 2016 définit un line-height minimal par défaut qui, par extension, définit la hauteur d’une cellule.

Je vous conseille d’utiliser cette méthode pour toutes vos intégrations de manière générale.

5. Les images de fond (background-image) ne sont TOUJOURS PAS supportées sur Outlook 2016

Comme toujours, Outlook est le mauvais élève en matière de support des images de fond. Comme avec ses prédécesseurs avant lui il faudra ruser pour cette compatibilité.

Solution : Outlook : hack du background images dans vos emails

6. Outlook ne redimensionne pas les images via votre propriété CSS

On utilise aujourd’hui, dans de plus en plus de cas, des images plus grandes que l’on réduit en css pour assurer un affichage optimal sur les écrans à fort DPI (Ex: Retina). Attention cependant à bien déclarer votre redimensionnement sur Outlook au risque de vous retrouver avec un email tout déformé.

Solution : En plus de votre déclaration css, vous devez déclarer l’attribut « width » de la balise <img> concernée comme suit :

Comme ma recommandation pour la solution 4. je vous conseille de toujours utiliser la double déclarations dans vos images ! Le seul cas où vous n’auriez pas à le faire serait que l’image est affichée à sa dimension maximale directement.

7. Les GIFs animés ne sont toujours pas pris en compte par le logiciel de messagerie de microsoft.

Malheureusement pour ce point vous ne pouvez rien y faire. Cependant prenez bien en compte ce fait pour vos intégrations futures et choisissez bien la première frame de vos GIFs afin de garantir le maximum d’efficacité sur ce client de messagerie.


Voila, j’espère une nouvelle fois que cet article vous aura aidé. N’hésitez pas à poser vos questions et à laisser vos commentaires à la suite.

A bientôt !