Les emails responsive multi-clients

L'usage du smartphone a révolutionné l'usage des emails, en effet, les internautes utilisent de plus en plus leurs mobiles pour lire leurs emails et, désormais, l'email connait un taux d'ouverture supérieur sur mobile par rapport à l'ordinateur.
L’emailing, restant un levier marketing important, il est donc important que celui-ci s'adapte à tous les supports que ce soit mobile ou sur un ordinateur.

Nous allons donc faire une revue des techniques pour transformer son email classique en email responsive sur la plupart des webmails et applications car certains clients mails ne supportent pas les media-queries.
En effet, les media-queries sont lues sans problème par presque toutes les applications sauf Gmail, que ce soit sur Android ou sur iPhone.

La balise head, moteur du responsive

La première chose à faire étant de rajouter dans la balise <head> le code ci-dessous :

tuto1.png

Cela permet de récupérer la surface de la fenêtre du navigateur sur mobile.

Les media-queries, essentielles au responsive

Ensuite il faut mettre le style directement après la balise <title>, ce sont les styles qui seront utilisés seulement lorsque la newsletter est lue sur un téléphone.

tuto2.png

J'utilise ici un max-width à 640px, tout simplement pour prendre en compte la plupart des smartphones.

Comme la taille de l'iPhone est de 320px, je conseille de prendre cette dimension pour adapter une newsletter sur mobile et de cacher ce qui est inutile avec une classe noMobile.
De même il est conseillé de mettre la hauteur des images en automatique pour éviter les étirements de celles-ci lorsqu'on les redimensionne.

Enfin, vous allez le voir, je mets le nom des classes entre crochets au lieu d'utiliser un point comme en css classique: .maClasse, tout simplement parce que yahoo mail ne comprend que les noms de classe entre crochets.

Il est conseillé aussi de mettre des !important à la fin de chaque déclaration car certains clients mails mobiles ne les prennent pas en compte sinon.

tuto3.png

Tous les tableaux doivent avoir une classe (en l'occurence ici w600) ainsi que les <td> et les images, en somme tout ce que l'on souhaite modifier sur téléphone.

Le code HTML

Une fois que l'on a défini les media-queries, nous pouvons passer au code HTML, le premier élément à styliser est la balise <body>, sur celle-ci, il y a une petite astuce pour éviter que la newsletter soit ferrée à gauche sur iPhone, la voici :

tuto4.png

Il faut ensuite faire un <table> qui contiendra tous les tableaux de la newsletter, ce table doit avoir le style text-align:center pour permettre à l'emailing d'être centré sur iPhone :

tuto5.png

Pour qu'Android prenne en compte la version responsive de l'email et lorsque qu'un tableau contient plus qu'une seule colonne, il faut faire des tableaux imbriqués.
Les tableaux imbriqués sont plusieurs <table> à l'intérieur d'un <td> et les ferrer tous à gauche sauf le dernier qui doit être à droite.

tuto6.png

Seulement en corrigeant les problèmes sur Android, cela provoque un bug sur Outlook, il faut donc rajouter un border-collapse: collapse; dans la balise <style> et ce style doit être placé au dessus des media-queries.

tuto7.png

Ensuite, quand l'email dispose de plus d'une seule colonne et que donc nous devons faire des tableaux imbriqués, il faut que chaque tableau contienne ce style :

tuto8.png

Cela permet aux tableaux imbriqués de bien s'afficher dans Outlook et qu'ils ne passent pas à la ligne.
La couleur est à changer en fonction de la couleur de fond de l'emailing, de même il faut enlever les 2px des bordures à la largeur du tableau.

Ensuite il faut rajouter ce style dans le premier <td> de chaque tableau imbriqué :

tuto9.png

Et voilà, notre email est responsive et compatible sur tous les clients PC et mobiles (sauf Gmail mobile) !

Un exemple de mail responsive :

Emailing Zoom pour Cadremploi

Tester son email

Pour tester l'email, j'utilise le site putsmail qui permet de s'envoyer des newsletters de test.

Ressources :

En général : http://www.alsacreations.com/tuto/lire/1533-un-e-mail-en-html-responsive-multi-clients.html

Pour Outlook :

Enlver les espaces blancs non voulus dans Outlook

Régler les problèmes avec les espaces horizontaux dans Outlook

Pour iPhone :

https://gist.github.com/puzzleland/7875785

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.