Règles d'intégration

Sommaire du guide d’intégration:

Introduction

Identique, mais différent

Si vous débutez dans le monde de l’emailing, vous allez devoir apprendre que l’emailing est un art plutôt complexe. Il vous faudra apprendre à jongler entre tout les clients de messagerie. Il est important de comprendre qu’un même mail peut s’afficher de manière totalement différente sur Gmail, Hotmail, Yahoo ou Thunderbird. Chaque client a ses propres règles, il n’existe aucun standard. De plus, les clients modifient régulièrement leurs règles: un mail qui s’affiche parfaitement bien sur Hotmail cette semaine, ne le saura pas forcément la semaine prochaine. Vos principes de développeur vont sans doute être mis à mal par l’emailing. Il vous faudra revenir quelques années en arrière et (ré)apprendre à coder avec des tableaux. Bon courage et bienvenue dans le monde de l’intégrateur emailing.

Quel est l’objectif de ce guide?

L’objectif est simple. Ce guide est là pour vous aider lors de l’intégration et vous aider à augmenter votre délivrabilité.


Mise en page

La balise <body>

La balise body doit posséder les attributs bottommargin= »0″ topmargin= »0″ rightmargin= »0″ leftmargin= »0″ marginheight= »0″ marginwidth= »0″ alink= »#000000″ vlink= »#000000″ link= »#000000″ bgcolor= »#000000″. Ces attributs ont pour but de maximiser la zone de prévisualisation. Les attributs alink, vlink et link, eux, ont pour but d’éviter que les liens perdent leurs couleurs après un clic.

Garder une taille inférieure à 600 pixels

Voici une règle importante à respecter, pensez à ne pas faire de mail dont la largeur (width) est supérieur à 600 pixels. La raison vient des clients smartphones, l’iPhone, par exemple, a une fenêtre de 320 pixels, contre 480 pixels sur Android et environ 320 sur Blackberry. Ne pas dépasser 600 pixels permet à votre email d’être lisible sur tous les matériels.

Table vs Div

Certains clients comme Gmail ou Outlook 2007 supportent mal les propriétés float, margin et padding. Ainsi, si vous voulez un email avec un affichage optimal, vous n’aurez pas le choix, vous devrez utiliser une structure en tableaux.

Avec les divs/css

Indication: un email avec des divs ne sera pas compatible sur tout les clients de messagerie.

Utiliser le code HTML suivant:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  <html>
    <head>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
          <title></title>
             <style type="text/css">
                  <!--
                      a:link {
	              color: #FFFFFF;
	              text-decoration: none;
                      }
                      a:visited {
	              text-decoration: none;
	              color: #FFFFFF;
                      }
                      a:hover {
	              text-decoration: none;
	              color: #FFFFFF;
                      }
                      a:active {
	              text-decoration: none;
	              color: #FFFFFF;
                      }
                      -->
            </style></head>

 <body style="padding:0; margin:0; margin-left:auto; margin-right:auto; width:620px; height:825px; position:relative; background-   color:#000000;">

 <div style="position:absolute; top:0; left:0; width:620px; height:73px;">
 <a href="XXXXX" target="_blank">
 <img src="XXXXX/header.jpg" border="0"></a>
 </div>

  <div style=" position:absolute; top:74px; left:67px; width:489px; height:62px; color:#FFFFFF; font-family:Arial, Helvetica, sans-serif; font-size:11px;">
    <a href="http://XXXXXX" target="_blank">UN TEXTE</a>
 </div> ...
 </body>
 </html>

Avec les tableaux

Je vous invite à consulter la partie suivante « La structure en tableaux ».


La structure en tableaux

Utiliser un tableau « conteneur »

Il faut d’abord utiliser un tableau de taille 100%. Ainsi l’ensemble du mail sera contenu dans ce tableau conteneur de hauteur/largeur 100%.

Si vous avez une couleur de fond sur votre mail. Vous devez appliquer votre couleur sur ce tableau de 100%. Certains clients suppriment la balise <body>, donc ne mettait pas votre couleur de fond dans cette balise.

Voici un exemple de code à utiliser:


<table width="100%" height="100%" cellspacing="0" cellpadding="0" border="0" bgcolor="#FFFFFF">
    <tr>
       <td valign="top" align="center, left ou right">
        /*ICI SE TROUVE LE CONTENU DU MAIL*/
       </td>
    </tr>
 </table>

Vous pouvez utiliser la même approche pour les images de fond. N’oubliez pas que certains clients de messagerie ne les supportent pas, il faut donc toujours donner une couleur de fond en cas de repli.

Divers astuces sur les tableaux

Éviter la balise tbody

N’utiliser pas la balise <tbody>, son utilisation augmente le score spam de votre email.

Éviter l’attributs Rowspan

Eviter les attributs rowspan dans les tableaux. Rowspan n’est pas reconnu par tous les clients.

Indiquer la largeur sur tous les tableaux

Penser à indiquer sur chaque élément </table > sa largeur avec l’attribut width.

Cellspacing et cellpadding à 0

Pour chaque élément </table >, penser à ajouter cellspacing= »0″ cellpadding= »0″.

Les cellules

Votre cellule est vide ou contient une image ?

Si la cellule est vide ou contient une image, il faut préciser le style: style= »font-size :0px ; ». Si vous ne le faites pas, vous avez de grandes chances de voir apparaitre des décalages non voulus entre les cellules de votre mail.

Votre cellule contient du texte ?

Si la cellule contient du texte, précisez la police, la couleur de la police et la taille de la police. Par exemple : style= »font-family :verdana ;font-size :10px ;color :#000000″.

Éviter les images en background dans vos cellules

Outlook 2007, pour ne citer que lui, ne prends pas en compte les images en background dans les cellules. Donc, vous allez devoir prévoir une couleur de fond qui remplacera l’image de fond.

Par exemple, si vous souhaitez un bouton « Cliquez ici » avec des bords arrondis. Vous allez devoir découper les bords arrondis gauche (btn_bord_gauche.gif) et droit (btn_bord_droit.gif), puis mettre le texte « Cliquez ici » dans une cellule entres les deux bords, avec une couleur de fond qui correspond à la couleur des bords.

Indiquer la tailles des cellules

N’oubliez pas d’indiquer sur chaque cellule sa taille dans le code HTML.

Évitez les espaces inutiles dans des cellules de tableau

Si possible, évitez les espaces entre les balises <td>. Certains clients de messagerie (ahem, Yahoo et Hotmail) peuvent ajouter un espace supplémentaire ci-dessus ou au-dessous le contenu des cellules entrainant dans certains cas, la rupture de votre design sans raison apparente.

Penser à l’attribut align

L’alignement par défaut est encore une fois différent selon les clients. Il faut donc penser à ajouter l’attribut align sur chaque cellule (par défaut, donner la valeur left).


CSS

Toujours mettre vos CSS à l’intérieur du code

C’est difficile à croire, mais cette fois ci, c’est bien Google et son fameux Gmail le coupable. Google supprime tous le CSS des balises Head et Body. Nous sommes donc obliger de déplacer le CSS et aller le mettre à l’intérieur des balises. Cependant, il y a une bonne nouvelle dans tout ça. Cette opération peut être très facilement automatisés. Je vous recommande l’outils Premailer qui fait cette opération en 1 clic.

Oublier la propriété CSS globale Font

Quelques clients de messagerie n’acceptent pas la propriété CSS Font. Donc, si on prend un exemple, il ne faut jamais faire ceci:


p {
   font:bold 1em/1.2em georgia,times,serif;
}

Au lieu de ça, il faut déclarer toutes les propriétés individuellement, comme ceci:


p {
   font-weight: bold;
   font-size: 1em;
   line-height: 1.2em;
   font-family: georgia,times,serif;
}

Les paragraphes

Tout comme l’espacement des cellules, il peut être difficiles d’obtenir un résultat convenable pour l’espacement des paragraphes. J’ai vu de nombreux designers, revenir à l’utilisation de double
ou des DIV avec des margin pour contourner ce problème, mais des tests récents ont montré que la propriété paragraphe (p) est maintenant suffisamment supportée pour une utilisation dans la plupart des cas (il fut un temps où Yahoo! ne prennais pas du tout en charge la balise p).

La meilleure approche est donc celle-ci:


p {
   margin: 0 0 1.6em 0;
}

Comme nous avons vu précédemment, utiliser l’outil Premailer afin de mettre vos propriétés CSS directement dans la balise p.


Les liens

Garder la couleur du lien lors d’un clic

Certains clients de messagerie remplacent les couleurs de votre lien avec leurs valeurs par défaut, cependant vous pouvez éviter cela en prenant deux mesures. Tout d’abord, définir une couleur par défaut pour chaque lien comme ceci:


<a href="http://mySiteWeb.com/" style="color:#ff00ff">this is a link</a>

Ensuite, vous devez ajouter une balise <span>, comme ceci:


<a href="http://mySiteWeb.com/" style="color:#ff00ff"><span style="color:#ff00ff">this is a link</span></a>

Je comprends bien que ça peut paraitre très redondant, mais c’est une solution efficace.

Utiliser l’attribut target

Il est important de ne pas oublier d’ajouter sur chaque lien l’attribut target= »_blank », ceci permet d’ouvrir la page cible du lien dans une nouvelle fenêtre. Certains clients de messagerie bloqueraient le lien sinon.

Ce qu’un lien peut contenir

Un lien ne peut contenir que du texte ou une image. Il ne faut pas mettre de tableau ou de div par exemple.

Gérer le soulignement des liens

Certains clients vont afficher les liens en les soulignant de la couleur bleue par défaut qu’on connait tous. Ceci n’est pas très esthétique. Il peut aussi arriver qu’on ne souhaite pas que les liens soient souligner.

Pour gérer ça, il y a une solution. Il faut utiliser la propriété CSS text-decoration:none;

Si vous ne voulez pas de soulignement, ajouter uniquement cette dernière propriété, comme ceci:
style= »font-family :verdana ;font-size :10px ;color :#000000 ;text-decoration :none »

Si vous voulez le soulignement, ajouter bien la propriété text-decoration:none, mais aussi la balise <u&gt, comme ceci:


<a href="http://www.myWebSite.com" target="_blank" style="font-family :verdana ;font-size :10px ;color :#000000 ;text-decoration :none"><u>Votre texte</u></a>

Un lien sur une image

Si vous faites un lien sur une image, vous devez penser à ajouter l’attribut border= »0″ à l’image, afin d’éviter qu’il y ait une bordure visible autour de l’image.


Les images

Indiquer la taille des images

Si vous oubliez de définir les dimensions de chaque image, un certain nombre de clients vont inventer leurs propres formats lorsque les images sont bloquées et va ainsi briser votre mise en page. En outre, veiller à ce que toutes les images soient correctement dimensionnées avant de les ajouter à votre e-mail. Certains clients de messagerie ignorer les dimensions spécifiées dans le code et s’appuyer sur les véritables dimensions de votre image.

Format des images

Lotus Notes 6 et 7 ne prennent pas en charge des images PNG 24-bit, ainsi les images doivent être aux formats GIF ou JPG pour toutes les images, même si cela signifie une certaine taille de fichiers supplémentaires. Je vous conseille d’utiliser le format JPG pour vos photos et GIF pour les petites images avec peu de couleurs.

Les GIF animés

Les GIF animés ne sont pas supportés par tous les clients. Certains afficheront correctement l’animation, d’autres afficheront uniquement la première image. Il est donc important de bien choisir la première image de votre animation.

Les clients ne chargent pas les images à la même vitesse, alors il ne faut pas faire une grosse animation découpée sur plusieurs images.

Prévoir une couleur de fond

Outlook 2007 ne supporte pas les images de fond (en dehors de ce hack pour obtenir des images background). Si vous souhaitez utiliser une image de fond dans votre conception, fournissez toujours une couleur de fond pour que le client de messagerie puisse l’afficher à la place de l’image qu’il ne peut pas afficher. Cela résout à la fois le blocage d’images et le problème avec Outlook 2007.

Ne pas oublier l’attribut alt

Fournir un texte à l’aide de l’attribut alt est important en cas de blocage des images par le client de messagerie. Même avec des images supprimées par défaut, de nombreux clients de messagerie affichent le texte alt fourni à la place. N’oubliez pas que certains clients de messagerie comme Outlook 2007, Hotmail et Apple Mail ne prennent pas du tout en charge le texte alt quand les images sont bloquées.

Utiliser un hack pour Hotmail

Pour une raison inexplicable, Windows Live Hotmail ajoute quelques pixels de rembourrage supplémentaire au-dessous des images. Une solution consiste à définir les propriétés d’affichage des images comme ceci:


img {display:block;}

Ceci suffit à supprimer le décalage sur Hotmail, sans modifier l’affichage final sur les autres clients.

Ne pas utiliser Float

Outlook 2007 et les versions antérieures de Notes n’offrent aucun support pour la propriété float. Au lieu de cela, utiliser l’attribut align de la balise img afin de faire « flotter » des images dans votre email.

Si vous observez un comportement étrange dans Yahoo! Mail, ajouter align = « top » à vos images, ceci peut souvent résoudre ce problème.


La vidéo dans les emails

En l’absence de prise en charge JavaScript ou de la balise object, la vidéo dans les e-mail a longtemps été limitée aux gifs animés. Cependant, certaines études récentes avec la balise vidéo de HTML5 a montré des résultats prometteurs.

Il s’avère que la vidéo avec HTML5 fonctionne dans de nombreux clients de messagerie à l’heure actuelle, y compris Apple Mail, Entourage 2008, MobileMe et l’iPhone. Le véritable avantage de cette approche est que si la vidéo n’est pas supporté, vous pouvez fournir des contenus, dit de replis, comme un GIF animé ou une image cliquable renvoyant vers la vidéo dans le navigateur.


L’email mobile

L’email mobile (si on peut appeler ça ainsi) a été un grand échec jusqu’à récemment. Avec l’arrivé de l’iPhone, Android et autres, c’est de moins en moins nécessaire de voir les smartphone comme une plate-forme e-mail tout à fait différent des autres.

Cela dit, il y a quelques conseils à garder à l’esprit lors de l’intégration de vos e-mails pour obtenir un résultat décent pour vos abonnés les plus mobiles.

Prévoir une version Web

Pensez également à prévoir une version web de votre email. Rajouter ensuite un lien en entête de l’email « Si vous ne pouvez pas lire cet email correctement, cliquez ici. » qui pointe sur la version web de votre email.


Le lien de désinscription

Ce lien est très important et doit être placé d’une manière à être facilement visible par l’utilisateur. Et ceci pour plusieurs raisons. La première est que vous y êtes obliger par la loi. La deuxième c’est qu’il vaut 1000 fois mieux qu’un utilisateur se désinscrive plutôt qu’il clic sur le bouton « Courrier indésirable ». Si vos mails sont considérés comme des spams par les utilisateurs des clients, vous pouvez dire adieu votre belle délivrabilité. Il ne faut pas prendre ce lien de désinscription à la légère.


Ne pas oublier les tests

Dernière étape et sans aucun doute la plus importante: les tests. N’oubliez jamais de tester vos emails avant le moindre shooting. Vérifier l’affichage finale sur différents clients de messagerie et faites un test anti-spam. Pour cela, il existe à votre disposition plusieurs outils, plus longuement détaillés sur la page « Tester vos emails », comme Litmus ou encore Email à table. En effet, nous proposons ce type de tests indispensable à l’intégrateur emailing.

10 reflexions sur “Règles d'intégration

  1. Pingback: Intégration emailing: Table ou Div « Email à table!

  2. pandaka

    des bonnes révisions ca ma fait du bien de lire ton post.
    en uen traite tout est dit simplement. pas besoin d’aller voir 40 mille sites . bravo !

  3. Pingback: Ami du print, un emailing n’est pas un flyer | Maeva Cecchi - Graphiste/Webdesigner freelance

  4. wolff

    Salut Jdrean
    déjà un grand merci, ce post m’a permis de comprendre comment construire tout ça.
    J’ai une question: tu dis éviter l’attribut rowspan, est-ce que ça comprend aussi éviter l’attribut colspan ? Et si oui, comment s’y prendre pour segmenter des colonnes de largeur variables ? merci

Laisser un commentaire

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

Ne manquez jamais une mise à jour. Inscrivez-vous pour recevoir un email lorsque nous publions quelque chose de nouveau dans le blog.

Vous recevrez au maximum un email une fois par mois. Nous ne partagerons jamais votre adresse email et nous détestons les spams.