Les meilleurs hacks pour développer vos emails.

Email-Tricks_Hacks

Les meilleurs des hacks d’intégration d’email.

Il faut souvent redoubler d’effort et d’imagination pour trouver toutes les solutions aux challenges rencontrés dans le design d’email. Le nombre de devices et de versions de clients de messagerie ne facilite pas la tâche de nous autres Email designer.

Heureusement, il existe une communauté particulièrement développée sur internet qui s’entraide merveilleusement et qui propose régulièrement des solutions à tous les problèmes rencontrés.

J’ai donc décidé de mettre à l’honneur la communauté en partageant quelques-uns des hacks les plus intéressants et les plus utiles de l’email design.

1. Cibler les clients utilisant webkit.

Aujourd’hui dans le monde des clients de messagerie il y a ceux basés sur Webkit (Apple mail, IOS mail, gmail sur android 4.4 et inférieur,…) et les autres. Les premiers ont cette particularité de supporter de merveilleuse manière un grand nombre de règles de css3 et html5. Il est donc possible, sur ces clients de messagerie, de booster le potentiel des mails que nous envoyons.

Alors, après avoir designer un mail pour le maximum de plateforme, rien de tel que de l’améliorer en utilisant toutes les possiblités des clients basés sur Webkit. Voici un hack simplissime pour isoler vos règles css pour ceux-ci :

Placez ce code dans une deuxième balise <style> après la balise contenant le code commun et le tour est joué.

2. Cibler les différentes versions de outlook

Ce hack, l’un des plus utilisé aujourd’hui, consiste à utiliser les commentaires conditionnels proposés par Mircrosoft pour cibler, au besoin, les différentes versions de Outlook.

Ayant fait un article dédié au sujet je vous recommande de le consulter ici pour utiliser au maximum le potentiel de ces commentaires conditionnels.

3. Empécher gmail app de zoomer sur vos emails

Rien de plus frustrant que de voir gmail App casser l’affichage de vos emails en appliquant un zoom sur vos contenus textes.

Si vous souhaitez annuler ce zoom et garantir le meilleur affichage sur ce client il vous suffit simplement d’appliquer le code suivant sur n’importe quelle image qui prend la largeur de votre email. Voici un exemple pour un email de 600 pixels de large :

Il ne vous reste plus qu’à « reset » cette règle dans une media query pour la partie responsive et vous ne serez plus jamais embêté.

A noter que si vous ne disposez pas d’image faisant la largeur de votre email vous pouvez ajouter en fin de mail un « spacer » transparent (spacer.png) qui fera office d’image pour le hack.

4. Optimiser le texte des boutons en fonction du device (desktop ou mobile)

Il est possible en css, depuis assez longtemps, d’ajouter du contenu à un élément en utilisant les pseudo-class :before et :after. Il en va de même dans le design d’email où l’utilisation de ces pseudo-class peut s’avérer forte intéressante quand on souhaite modifier un contenu en fonction du « device/écran » rencontré.

Un membre de la communauté Litmus (Narong Saron) a partagé sa technique. Voici son code :

Et le css utilisé :

Ainsi, pour tous les clients de messagerie qui supportent les médias queries sur un écran inférieur à 600 pixels de large (viewport), le contenu de la balise <span class= »click »> sera caché et le mot « Tap » sera ajouté au contenu de la balise <span class= »tap »>.

On obtiendra alors sur mobile : « No Images ? Tap here »
et sur les écrans plus large : « No images ? Click here »

Je laisse libre votre imagination pour trouver les applications que vous ferez de ce petit hack.

5. Ajouter un saut de ligne sur mobile en css

On reste dans le registre des pseudo-class avec un hack qui vous permet de créer des sauts de ligne sur la version mobile de vos emails. Pour bien comprendre le principe voici un cas d’application de cette petite trouvaille :

Voici l’exemple d’un menu avec 2 liens. Celui-ci s’affichera de cette manière dans vos emails :

Link 1     |     Link 2

Si vous souhaitez placer link 1 et link 2 l’un en-dessous de l’autre dans la version mobile de votre email il suffit d’appliquer le code suivant :

On retrouve notre média query précédente mais cette fois nous allons utiliser un caractère spécial dans le contenu de la pseudo-class :after pour sauter la ligne « \A ». A noter que pour cacher la barre de séparation il est nécessaire de la mettre à la couleur du background de la cellule dans laquelle elle se trouve.

Le menu s’affichera alors de la manière suivante :

Link 1
Link 2

et vous évitera un affichage aléatoire tel que :

Link 1     |     Link
2

6. Créer des colonnes « invisibles » pour aligner des tables sur Outlook

Revenons cette fois aux commentaires conditionnels de Outlook vu précédemment avec une utilisation ultra simplifiée de ceux-ci mais non moins efficace. Vous souhaitez aligner 2 tableaux dans une cellule pour afficher du contenu sur 2 colonnes compatibles responsive design mais les tableaux passent l’un en dessous de l’autre sur Outlook ?

Et bien ne cherchez plus et utilisez le hack suivant :

Ce simple code créera 2 balises <td> sur Outlook au lieu d’une seule et génèrera ainsi 2 colonnes qui permettront un alignement des tableaux parfait.


Voila ! Il existe bien d’autres hacks et astuces pour parvenir à ses fins en matière d’intégration d’email et j’en présenterai surement dans de futurs articles.

En attendant n’hésitez pas à partager et commenter cet article avec les hacks que vous utilisez pour vos développements.