[Retour d'expérience]Comment créer des emails au format HTML.

Je tenais à vous faire part de mon retour d’expérience sur la création de mail au format HTML.

Pour l’un de nos clients je devais personnaliser ses mails pour obtenir une bonne identité visuelle auprès de ses clients.

J’ai alors fait une maquette en HTML avec un appel de css et des divs.

On nous le dit souvent fini les tableaux, maintenant il faut travailler avec des divs!!!

Après avoir fait ma template, je teste l’envoie de mail sous différents lecteurs de mails.

Quelle fut ma surprise, quand j’ai vu que mes images ne s’affichaient pas !!! et que ma mise en page était différente d’un lecteur à l’autre.
En effet il existe plusieurs façons de lire les mails soit avec un logiciel comme thunderbird, Outlook,
soit en webmail(ce sont des services par fournisseur de mail du type YahooMail,Gmail, Hotmail, Aol, etc..).

Bien sur pour compliquer le tout suivant la version des logiciels, les CSS/HTML ne sont pas interprétés de la même façon.

Le mieux pour répondre au besoin de notre client est de connaître la cible. Donc connaître le pourcentage d’utilisation de tel ou tel lecteur de mail.
Pour cela il faut regarder ses statistiques mais sinon nous pouvons nous baser sur des études de campagnes de mail.

Un site comme http://www.campaignmonitor.com/stats/email-clients/ permet de nous donner une bonne idée de ceux qu’utilisent nos clients.

campagne_mail_client_2009

En 2009 on peut noter qu’avec plus de 27 % de part de marché c’est Outlook (2000,2003,Express) qui est en tête suivi de Hotmail (environ 16%),Yahoo Mail (14%).

J’ai constaté que Thunderbird et Yahoo Mail sont assez permissifs et les mails passent bien en HTML div et CSS.

Cependant Gmail et Outlook n’interprètent pas les CSS placées dans le <head>.

Après quelques recherches sur le net je me suis rendu compte que GMAIL et Outlook n’interprètent pas bien les CSS.
En faisant quelques recherches j’ai pu tirer une liste de recommandations pour que notre template passe sous tous les gestionnaires de mail.

Voici quelques trucs & astuces qui permettent de réussir votre template.

  • Fixer une taille maximale en px de largeur pour votre template.

En effet, de nombreux lecteurs ont des bandeaux publicitaires votre écran n’est pas à 100% pour afficher vos mails.

  • Être identifiable au premier coup d’œil.

Mettre les informations principales en début du mail, pour éviter de scroller.

  • Proposer à vos lecteurs de vous ajouter à leur carnet d’adresse afin d’éviter de passer dans la boite de réception des spams ou que les images soient bloquées.
  • Ne pas proposer que des images, sinon la plupart des web-mails vont vous considérer comme du spam.
  • Il faut aussi absolument proposer Un texte alternatif sur vos images, dans le cas où celles-ci ne seraient plus disponibles ou ne s’afficheraient pas.

Voire même que l’utilisateur n’affiche pas les images. Je vous conseille de mettre le code suivant:

<img alt="Texte de description" title="Texte description"/>
  • Pour ne pas détruire la mise en page, il faut fixer la taille des images en HTML.
<img width="100px" height="200px" alt="Texte de description" title="Texte description"/>
  • Éviter les images sur les éléments importants

Les url de vos mails devraient si possible ne pas être intégrées sous forme d’images pour être les plus efficaces possible.

  • Éviter les termes à risque dans l’intitulé des liens, comme « Gagnez 100 000 euro ».
  • Éviter les URL dans l’intitulé des liens
  • Attention à la détection de phishing(hameçonnage), pour cela vous devez éviter des urls pointant vers d’autres sites.
  • Éviter de faire plus de 8 tableaux imbriqués si vous voulez que votre mail passe sous Lotus.

Côté animation :

  • Attention aux GIF animés

Suivant les lecteurs de mail notamment Outlook 2007 seul la 1ère image apparaît, sinon pour les autres ça a l’air de passer.
Si vous tenez absolument à en utiliser il vaut mieux inclure votre message dans la 1ère image de vos GIF animés.

  • Pas de contenu Flash

En effet celui ci n’est pas affiché et il peut même être considéré comme une faille de sécurité.

  • Pas de javascript. Un message de sécurité sera affiché chez votre client.
  • Éviter la transparence sur les PNG

En effet suivant les lecteurs, la transparence ne fonctionne pas.

  • Éviter le mapping d’images

Cette technique consiste à déclarer plusieurs liens sur une seule image grâce à un système de coordonnées.

  • Éviter les images CSS

Si vous utilisez la notation suivante dans votre style « background:url(image.jpg); ».

L’image risque de ne pas s’afficher. Vous allez vous retrouver avec une zone blanche. J’ai remarqué cela notamment sur Gmail et Outlook 07.

  • Éviter les formulaires

En effet ils ne seront pas actifs dans la plupart des lecteurs mail et ne seront même pas affichés dans Outlook 07.

Dans ce cas il vaut mieux afficher un lien vers votre site contenant le formulaire.

  • Déclarer tout vos styles en ligne dans les balises HTML.

J’ai fait plusieurs essais pour que le rendu soit correct sur l’ensemble des lecteurs de mail, la meilleure solution est de faire les styles à l’intérieur des balises HTML comme « <p style= « color:#fff; »> ».

Pourquoi ?
Car sinon Gmail ne vous affiche pas votre css. Forcément en terme de ré-utilisabilité du code c’est pas le top.

Si vous décidez tout de même d’utiliser les balises styles, placez les dans le <body> et non dans le <head>.
Car Hotmail ne les interprète pas sinon.

  • Pour la css n’y faites pas référence de l’extérieur
  • Certains recommandent d’avoir une version brute de vos mails.

A Placer en fin de mail pour ne pas entacher votre design.

  • Mise en page <div> ou tableaux ?

Dans le meilleur des mondes il faudrait utiliser plutôt des divs, mais encore une fois, tous les lecteurs ne sont pas encore
au même niveau. Et si vous voulez faire quelques chose de compatible il vaut mieux utiliser les tableaux.
En effet pour l’instant, à ma connaissance il n’existe pas encore de norme pour la gestion des mails, comme on peut l’avoir avec le W3C pour le Web.
De plus peu de propriétés CSS de positionnement sont interprétées.
Les tableaux sont donc une valeur sûre.
On est d’accord que ce n’est pas top mais c’est pour l’instant la solution qui permet de passer correctement sur les lecteurs de mails.

  • Dans le cas d’une newsletter il vaut mieux proposer un lien sur votre site pour visualiser celle ci.
  • Proposer un lien de désabonnement.
  • Pour finir vérifier votre template et formater correctement votre HTML et vos CSS.

Si une balise n’est pas refermée correctement vous risquez d’avoir votre email considéré comme un spam.

Chez Campaign Monitor, ils ont testé le support des CSS dans tous les environnements courants de gestion d’email .

Client Email À utiliser

Yahoo! Mail CSS

Hotmail CSS*

GMail Tableaux + CSS en ligne

Outlook et Outlook Express CSS

Lotus Notes Tableaux + CSS en ligne

AOL 9 CSS

Thunderbird CSS

Mac Mail CSS

Entourage CSS

Eudora pour Mac Tableaux et pas de CSS

  • Pour Hotmail, attention à bien inclure votre élément <style> dans le <body> et non dans le <head> sinon il ne sera pas interprété.

Un site intéressant permettant de voir ce que nous pouvons faire avec les différents clients mail.

http://www.email-standards.org/

Un tableau récapitulatif des propriétés des CSS prises dans les clients.

http://www.campaignmonitor.com/css/

Voici un exemple de template qui fonctionne sur tous les lecteurs de mail.

ma_template

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> 
<title>Ma template Mail</title>
 
</head> 
 
<body style="font-family:Verdana,Geneva,sans-serif;font-size:14px;font-weight:100;letter-spacing:normal;" bgcolor="#eee;" alink="#F09923" link="#F09923" vlink="#F09923"> 
<style type="text/css" media="screen"> 
<!--
body 
{
	margin:20px 0px; padding:0px; /* Need to set body margin and padding to get consistency between browsers. */
	font-family:Verdana,Geneva,sans-serif;
	font-size:14px;
	font-weight:100;
	letter-spacing:normal;
	background-color:#eee;
}
 
	a:hover
	{
		text-decoration:underline;
		color:#F09923;
	}
 
	a
	{
		text-decoration:none;
	}
 
	img {
		border:medium none;
		margin:0;
	}
 
-->	
</style> 
 <table align="center" style="font-family:Verdana,Geneva,sans-serif;font-size:14px;font-weight:100;letter-spacing:normal;background-color:#eee;">
 <tr>
	<td>
		<table style="width:800px;margin:0px auto;text-align:left;background:#FFFFFF;border: 1px solid #BFBFBF;	border-right:2px solid #BFBFBF;	border-bottom:2px solid #BFBFBF;">
		<tr>
			<td width="800px">
				<table style="width:800px;margin:5px auto;text-align:left;background:#FFFFFF;">
				<tr>
					<td>
						<img src="http://www.netapsys.fr/squelettes/netapsys/image/logo/netapsys_header.jpg" style="background-color:#FFFFFF;"	height="63px" width="180px" title="Logo Netapsys" alt="Netapsys" />
					</td>
					<td style="font-family:Verdana,Geneva,sans-serif;font-size:25px;font-weight:bold;
					letter-spacing:normal;color:#990000;width:735px;padding-top:10px;padding-left:10px;	padding-bottom:10px;padding-right:25px;
					line-height:17px;text-align:right;">
						Ma Première template
					</td>
				</tr>
				<tr>
					<td colspan="2"><img src="http://www.netapsys.fr/IMG/rubon11.jpg"  width="800px"></td>
				</tr>
				</table>
 
 
			</td>
		</tr>
 
		<tr>
			<td >
				<table cellpadding="10px" style="color:#737373;">
				<tr>
				<td>
					<p>Bonjour Madame, Monsieur</p>
					<p>Vous pouvez retrouver sur notre <a href="http://blog.netapsys.fr" title="Bog Netapsys">Blog</a>, 
					des articles int&eacute;ressants.</p>
				</td>
				</tr>
 
 
				<tr>
				<td align="right" cellpadding="15px" style="padding-top: 10px;	padding-bottom: 15px; padding-right:59px;" width="710px">
					<p>Cordialement,
					<br/>L'&eacute;quipe Netapsys</p>
				</td>
				</tr>
				<tr>
					<td style="font-size:12px;margin-top:15px;">
						<p><u>Contact:</u> <span style="font-weight:bold;">contact@netapsys.fr</span><br/>
						<br/><span style="font-weight:bold;">Netapsys Atlantique</span><br/>
						17, rue Sanlecque 44000 Nantes<br/>
						Tel: <span style="font-weight:bold;">02 40 89 82 09</span><br/>
						Fax: <span style="font-weight:bold;">02 40 89 38 64</span></p>
					</td>
				</tr>
				</table>
			</td>
		</tr>
		</table>
	</td>
 </tr>
 
 </table>
</body> 
</html>

Sources :

http://www.pompage.net/pompe/emails-html-dompter-la-bete/
http://www.campaignmonitor.com
http://www.campaignmonitor.com/stats/email-clients/
http://www.email-standards.org/

4 commentaires

  1. Petite précision, l’analyse via FxCope n’est disponible que dans les éditions Premium et Ultimate de Visual Studio, très peu utilisée par les développeurs

    source :
    Achievements marked with Uses FxCop only work on Visual Studio 2010 Premium or Ultimate unless FxCop is installed

    http://visualstudiogallery.msdn.mic

    L’impact sur les performances générales de Visual Studio ne devrait donc pas trop se faire sentir

Laisser un commentaire

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

− 1 = cinq

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>