Comment rendre un email responsive pour Outlook

La création d’un email responsive doit prendre en compte les différentes caractéristiques de chaque messagerie. Si des messageries comme Gmail interprètent sans difficultés les fonctionnalités HTML et CSS, Outlook ne prend en compte que les fonctionnalités les plus basiques. On serait tenté de se passer d’Outlook (comme on souhaiterait se passer d’Internet Explorer) mais ce serait faire abstraction d’une grosse partie de ses utilisateurs (Microsoft revendique 400 million d’utilisateurs actifs). Alors il faut s’adapter et trouver le plus petit dénominateur commun afin que l’email soit visible dans l’ensemble des navigateurs.
template example 2

Quelles sont les limites d’Outlook ?

En examinant en premier lieu les limites d’Outlook, on peut déterminer les limites à prendre en compte pour la conception de l’email.

  • il n’accepte pas la propriété display
  • il n’accepte pas les marges
  • il ne prend pas en compte les media queries

La version d’Outlook 2013 utiliser le moteur d’interprétation HTML de Word
Toutes ces contraintes peuvent être considérées comme bloquantes, en particulier la non prise en compte des media queries. La méthode suivante permet une adaptation cohérente pour l’ensemble des webmails et client email.

La structure de l’email

ll faut donc faire dans la simplicité et créer une structure basique, basée uniquement sur HTML, avec des styles appliqués inline. Ainsi la newsletter est structurée comme un tableau, avec une section pour chaque paragraphe.

……

colonne gauche contenu central colonne droite

Une fois la structure défini dans le premier <tbody>, il n’est plus nécessaire de spécifier la largeur des éléments <td> pour les tbody suivants. Un <tbody> doit être utilisé pour faire des lignes de séparation entre les différentes parties.


Les images

Pour avoir un affichage optimisé il est préférable de choisir un format .jpg ou .png. Le svg et le gif ne passent pas sur toutes les clients/serveurs mail dont Outlook.

Utiliser une URL présente en ligne : cela limitera la taille de votre newsletter et permettra à vos images de s’afficher. Certaines messageries n’affichent pas les pièces jointes et risquent même de bloquer votre newsletter.

Voici un exemple de code permettant l’intégration d’une image :

logo

Pour tester les images vous pouvez utiliser le site http://lorempixel.com qui permet d’intégrer des images aléatoires afin de tester votre création sans avoir à chercher des images de test.

template example

Les fonts

Le CSS n’étant pas interprété de façon similaire dans toutes les messageries, il est préférable de se limiter à l’utilisation des font sans-serif. Vous pouvez notifier cet élément dans le body afin que cela s’applique sur l’ensemble de la structure.


Le call-to-action

Toute newsletter ou toute notification doit contenir un call-to-action simple et visible, en général sous la forme d’un bouton ou d’une image. Cet élément permet à l’utilisateur d’accéder directement à l’information ou l’offre présente dans l’email.

Pour styliser un minimum ce bouton et obtenir un affichage cohérent sur les différentes messageries, la meilleure solution est d’utiliser du padding.

Call to action

 

Le test

N’envoyez jamais une newsletter et encore moins une campagne sans avoir testé votre produite sur un maximum de messagerie. Je recommande ce site qui permet un test rapide de votre newsletter : putsmail.com

Il faudra ensuite ajuster votre code en fonction des comportements des messageries. Une fois cet exercice parfois douloureux mais nécessaire vous aurez un template fonctionnel et réutilisable pour vos prochaine communication.

Pour finir, n’oubliez qu’il est préférable de faire un visuel simple qui atteigne la cible plutôt qu’un visuel complexe dont l’affichage sera différent sur chaque messagerie.

Leave a Reply

Your email address will not be published. Required fields are marked *

*
*