Comment bien intégrer les emails

emails.png
L'intégration d'emails et newsletters a toujours été un défi particulier du fait de la diversité des webmails et clients mail à supporter.
Chacun a ses propres règles d'interprétation du code, qui diffèrent assez largement entre webmail et client mail.
Nous allons voir les bonnes pratiques à appliquer pour que le rendu de nos emails soit au maximum cohérent sur toutes les configurations.

Avoir un rendu d'email cohérent entre toutes les plateformes, navigateurs, webmails, clients mail est difficile.
Les règles imposées par les webmails sont différentes des clients mails, car les messages sont eux-mêmes affichés dans une page web ayant ses propres styles, qui peuvent entrer en conflit avec ceux de l'email.
Entre chaque webmail il est difficile de s'y retrouver. Par exemple Outlook.com ne supporte pas les marges. Outlook 2013 utilise toujours le moteur d'interprétation HTML de... Word ! Ce qui signifie virtuellement que la prise en charge de CSS dans Outlook n'a pas changé entre les versions 2007, 2010 et 2013, là où les navigateurs ont fait des bonds de géants.

Les bonnes pratiques à mettre en place

Expérience utilisateur et délivrabilité

  • Avoir un lien de visualisation en ligne (s’affranchir du client ou webmail). Cela permet à la personne de visualiser l'email en ligne, donc de ne pas subir les règles de son webmail ou client. De plus les images étant désactivées par défaut, elles seront imémdiatement visibles.
  • Proposer une version texte de l’email. Selon la configuration de la personne et de l'email, la version texte peut s'avérer plus pratique pour elle si elle visualise mal la version HTML. Les 2 versions peuvent être envoyées simultanément.
  • Ne pas avoir uniquement des images. Elles ne sont pas affichées par défaut, et ne voir aucun contenu n’incite pas l'internaute à les afficher. Il faut de plus renseigner l’attribut ALT de chaque image
  • Avoir un lien de désinscription est considéré obligatoire. L'internaute doit avoir la possibilité de choisir s'il veut continuer à recevoir les emails ou non
  • Proposer une phrase d’accroche avant le contenu même de l'email. Sur plusieurs clients mails et webmail (iPhone, Gmail...) la partie visible d'un email avant son ouverture est : expéditeur, objet et le début du texte de l'email. Le nerf de la guerre du monde de l'emailing est le taux d'ouverture : il faut qu'un maximum de personnes ouvrent le mail. Pour cela il faut qu'elles en aient envie avec le peu d'informations visibles sans l'ouvrir. Habituellement la 1ère phrase de l'email est la phrase indiquant la version en ligne ("si vous ne visualisez pas cliquez ici"). Cette phrase ne donne pas envie d'ouvrir le mail. La remplacer par une phrase complémentaire à l'objet pour accrocher l'internaute sera très bénéfique car il y aura plus d'ouvertures.

Sans phrase d'accroche, cela ne donne pas envie d'ouvrir le mail
iphone.jpg

  • Ne jamais utiliser de mots en majuscules, de points d’exclamation et de mots comme « jouez », « gagnez », « jeu » dans l'objet du mail.

Les webmails et clients mails considèrent souvent ce type de mail comme spam. Nous risquons alors identifié comme spammeur pour les prochains envois.

Technique

  • Utiliser des tableaux pour la mise en page avec cellpadding=0 et cellspacing=0
  • Un grand tableau de 100% de largeur contenant des tableaux centrés les uns sous les autres
  • Pas d’imbrications de tableaux, faire un tableau sous l'autre autant que possible (plus facile à débugger et moins de risque que le design casse)
  • Pas de colspan ni de rowspan si possible
  • Mettre le CSS en ligne sur chaque balise HTML car il n'est pas reconnu dans le <head> par certains clients et webmails (ex : Gmail desktop et mobile)
  • Utiliser le doctype XHTML 1.0 Strict
  • Encoder tous les caractères spéciaux en entités HTML
  • Pas de padding ni de margin. Outlook.com ne supporte pas les marges. Il faut créer des cellules de tableau vides pour créer des espaces
  • Aligner le texte avec l’attribut « align » sur la cellule
  • Styler les cellules contenant les images. Les images ne sont pas affichées par défaut. Pour ne pas perdre de l'information utile et donner envie de les afficher, il faut styler l'emplacement des images par un texte et une couleur de fond de remplacement.
  • Pas de background-image car la propriété n'est pas supportée. Utiliser l’attribut bgcolor, qui contraint de n'utiliser que des couleurs unis pour les fonds. Aucune image de fond n'est tolérée.

Découpage d'un email en tableaux
decoupage.jpg

Email avec les images
ce_ok.jpg

Email sans les images : grâce aux styles dans les cellules, l'aspect n'est pas trop éloigné de la version avec les images
ce_texte.jpg

Exemple de code typique d'un email avec utilisation des tableaux
code_nl.jpg

Pour les images de boutons arrondis avec un texte par exemple, nous pouvons styler un texte de remplacement et donner une couleur de fond à la cellule. Les bords ne seront pas arrondis mais la couleur de fond est là, la couleur de texte aussi et nous comprenons que c'est un bouton cliquable.

Des emails responsive !

Malgré tous les défauts de l'intégration des emails, il est tout à fait possible de faire du responsive !
Pour cela il faut mettre du CSS dans l'élément <head>. Seule ombre au tableau, il ne sera pas pris en compte par GMAIL qui ignore tout CSS placé à cet endroit.
Le principe est le même que pour une page web : utilisation des media queries pour détecter des largeurs d'écran et appliquer des styles différents.
Ici il s'agit de donner une largeur différente aux cellules et aux tableaux, et de les faire les passer les uns sous les autres quand l'écran est petit.

Exemple de CSS pour un email responsive
media_queries.jpg

Exemple d'un email responsive (réduire beaucoup la fenêtre du navigateur pour voir)

Tester efficacement

Une fois notre email fait, il est vital d'être capable de voir son rendu sur la plupart des webmails et clients mail. Leurs règles diffèrent tellement qu'il est pratiquement certain que nous aurons des modifications de code à apporter.
Premièrement il faut connaître quels sont les logiciels et webmails les plus utilisés. Cela nous permettra de passer du temps sur l'optimisation pour ceux-ci et de ne pas perdre trop de temps avec un logiciel qui n'est plus utilisé.
Voici les statistiques :
http://emailclientmarketshare.com/

Ensuite nous devons voir le rendu de notre email. Avec une seule machine il est impossible de tester toutes les configurations les plus répandues (Mac, PC, iPhone, Android, différentes versions de Outlook...).

Le moyen le plus fiable pour tester est d'avoir une machine virtuelle utilisant le véritable logiciel. Il en faudrait donc une pour chaque logiciel, plusieurs téléphones et tablettes... C'est donc impossible.

Pour cela, une société, LITMUS, a développé un système permettant de tester ses emails sur toutes les plateformes, webmails et versions des logiciels (PC, Mac, iPhone, Android...). Les logiciels et webmails tournent chacun sur une machine virtuelle à laquelle nous avons accès pour visualiser notre email.

Nous pouvons aussi faire des modifications de notre code dans leur outil et voir immédiatement le rendu de notre email changer sur toutes ces machines virtuelles.

Analyse du code et avertissements pour chaque client et webmail
analysis.jpg

Aperçu de notre email dans les principaux clients et webmail (version de bureau)
clients.jpg

Et versions mobiles
mobiles.jpg

C'est donc très fiable, nous sommes assurés d'avoir ce rendu au final.
Autres fonctionnalités :

  • Tests de spam avec recommandations
  • Avertissements et recommandations de code pour chaque client et webmail
  • Analytics : taux d'ouverture, équipement de l'internaute, export des données au format CSV...

Ce service est bien entendu payant mais très abordable pour toute entreprise.
http://litmus.com

Ressources

Code pour utiliser bg-image sur toute configuration
http://backgrounds.cm/

Code pour utiliser des boutons CSS sur toute configuration
http://buttons.cm/

Tableau de prise en charge des propriétés CSS des principaux clients et webmails
http://www.campaignmonitor.com/css/

Construire son email avec des templates
https://templates.campaignmonitor.com/build/
http://templates.mailchimp.com/

Articles plus poussés sur l’intégration d’emails responsive
http://www.hteumeuleu.fr/integration-emails-responsive/
http://blog.wixiweb.fr/responsive-web-design-les-autres-usages/#les-autres-usages-du-responsive-design

Un commentaire

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.