Réaction d’un web-designer lambda avant de créer son premier email: « Pwahaha! Laisse moi 5 minutes que j’te code ça rapidos! »… Mais 3 div, 1 float left et 10px de margin plus tard, il commencera à comprendre que… créer un email n’est pas si simple!
Voici les thèmes que je traiterai:
1) Les Styles CSS
2) Les Paragraphes et les Liens
3) Les TABLES
4) Les IMAGES
5) Tester, tester et tester!
Si vous venez de lire un tuto sur l’HTML5 et le CSS3, oubliez tout et reprenez vos livres d’HTML3 de 1997… Comme je le disais il y a exactement un an jour pour jour, l’email c’est old school!
Prêts pour la séquence Nostalgie? Proust avait sa madeleine, nous on a nos tables et nos styles inline… D’ailleurs créer des e-mails propres et compatibles sur tous les clients de messagerie, c’est un peu comme préparer un bon petit plat traditionnel, n’est-ce pas Mercotte:P:
- des ingrédients peu nombreux, simples et authentiques
- un peu d’HTML et de CSS à l’ancienne
- goûter, goûter et goûter avant de servir.
Après la recette du SEO, c’était la recette de l’email! Mais passons aux choses pénibles sérieuses et laissons le tablier et les gourmandises aux experts…
1) Les Styles CSS
Tout d’abord, je vous conseille de jeter un coup d’œil au formidable tableau récapitulatif (de Campaign Monitor) des styles supportés par chaque client de messagerie:
Certains clients de messagerie ignorent l'<head> et les feuilles de styles externes (Gmail par exemple) donc:
- Ne pas utiliser de styles dans la partie <head>, quelques webmails la coupent. Commencer donc à coder après le tag <body>.
- Utiliser des CSS INLINE (des outils tels que Premailer existent pour vous aider à traduire vos styles externes en styles inline.)
- Ne pas utiliser de CSS « shorthand » mais favoriser les styles « longhand » (voir exemple ci-dessous).
<p style="font:bold Arial, Helvetica, sans-serif 12px">blabla… </p>
A privilégier:
<p style="font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold;">blabla… </p>
2) Les Paragraphes et les Liens
Le tag <p> est supporté par tous les clients de messagerie donc vous pouvez l’utiliser mais personnellement je préfère écrire le code le plus neutre possible… C’est pourquoi je vous conseille d’utiliser des <span> et non des <p>. Si vous souhaitez une précision optimale, gérez la hauteur de ligne dans votre <td>:
<td width="350" style="font-weight:bold; font-size:12px; line-height:16px; font-family: arial;">blabla…</td>Pour que vos liens se visualisent bien sur tous les clients de messagerie vous allez devoir écrire une première fois vos styles dans le tag <a>, puis une deuxième fois dans un tag <span> à l’interieur du tag <a>::
<a href="http://www.tonsite.fr/" style="color:#cccccc"><span style="color:#cccccc">blabla stylé ;-)</span></a>3) Les TABLES
Des clients tels que Gmail, Outlook 00/07, Lotus ne supportent pas les float, les margin, les padding… Je vous déconseille d’utiliser des <div> mais plutôt des <table>… et surtout de suivre ces conseils utiles:
- Créer une <table> « conteneur » de 100% de largeur
- Définir la couleur de fond dans le <td> avec « bgcolor » et non style= »background-color »…
- Définir la Largeur dans chaque <td> (et non dans la <table>)
- Ne pas utiliser le padding pour chaque <td> mais cellpadding pour chaque <table>
- Utiliser plusieurs <td> et éviter d’utiliser padding/margin pour créer des espaces aux extrémités de votre <td>.
- Ne pas spécifier l’unité en PX dans le <td> (width= »95″)
- Il est préférable d’imbriquer vos Tables jusqu’à 5 niveaux maximum.
- Colspan est supporté par de nombreux clients de messagerie, mais malheureusement Rowspan ne l’est pas. Si par exemple, vous souhaitez insérer une image de 250px de hauteur et à sa droite une image ou une marge de 50px au dessus d’un texte de 200px de haut, vous pouvez créer une <table> dans votre second <td> avec 2 <tr> dont une image ou un spacer de 50px dans votre premier <tr><td>.
Exemple de structure:
<table><tr><td>1ère colonne</td><td>
<table><tr><td>2ème colonne ligne 1/2</td></tr>
<tr><td>3ème colonne ligne 2/2</td></tr></table>
</td>
</tr></table>
4) Les IMAGES
Par défaut, les images sont bloquées, il est donc essentiel d’essayer d’avoir une répartition texte/image équilibrée et essayez toujours de placer le « call to action » en version textuelle dans les premiers 250/350px de la hauteur.
- Éviter les images « spacer » servant uniquement à créer des espaces.
- Insérer les dimensions exactes des images.
- Ne pas oublier de renseigner l’attribut ALT.
- Éviter les images gif/png transparentes.
- Éviter les background-image, outlook07 et lotus notes ne les supportent pas…
- Ne pas utiliser les float mais utiliser l’alignement… align= »right »…
- Ne pas oublier de préciser DISPLAY:BLOCK; pour ne pas avoir des traits de séparation blancs sur gmail et hotmail comme sur l’image ci-dessus…
Exemple:
<img src="image.jpg" align="top" style="display:block;" alt="Image">5) Tester, tester et tester!
Pour être sûre que votre email se visualise correctement sur tous les clients de poste, il n’y a qu’une seule solution: TESTER!
Si vous avez la possibilité de connaître les clients de messagerie utilisés par vos utilisateurs, optimisez votre e-mail sur les clients utilisés, si en revanche vous n’en avez pas la moindre idée, adaptez vous à votre cible…
Si votre cible est B2C, contrôlez bien vos e-mails sur les différents webmails (gmail, hotmail, orange…), si votre cible est B2B, vérifiez les différents software (Outlook, Thunderbird, Eudora, Lotus Notes, AOL), et pour finir n’oubliez pas les clients mobiles (Blackberry, Android, iPhone…).
Si vous n’avez pas d’ « email tester » comme Litmus ou EmailonAcid vous permettant de réaliser ces tests automatiquement, patience et courage!
L’article Comment créer un email, une newsletter en HTML? est apparu en premier sur LRWEB.
Jeu de briques
Snake
Pacman
Bubble