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 :

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.

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.

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 :

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 :

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.

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.

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 :

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é :