Ressources
La réalisation d’e-mails graphiques en HTML, au pixel près ou presque, compatible sur tous les webmail et clients de messagerie du marché est illusoire.
Voici quelques astuces et bonnes pratiques pour obtenir des e-mails au rendu proche sur la majorité d’entre eux.
Code HMTL :
- Largeur idéale de l’e-mail : 580 à 620 pixels
- Équilibre texte / images : 50/50 (chercher à tendre vers ce ratio)
- Code html : Utilisez html 4 et les CSS inline plutôt que la balise style ou un fichier CSS externe, pas de javascript
- Poids du template : jusqu’à 50 ko pour le body html. 200 Ko avec les images
- Si pièce jointe PDF : en téléchargement uniquement
- Encodage des caractères du template (Charset) :
- Langue US / UK / autres : charset=utf-8
- Langues “Europe de l’ouest” : charset=iso-8859-1
- Utiliser un doctype XHTML 1.0
- Ancres : à éviter (peu supportées par les webmail / clients de messagerie)
- Utiliser des tableaux pour la mise en page
Conseil : Mettre un maximum de zone cliquables (images, liens…) pour que l’e-mail soit cliqué
Images :
- Hébergement : sur votre site web ou un espace FTP avec votre nom de domaine
- Eviter les background (ne s’affichent pas dans dans certains webmail ou clients de messagerie comme Outlook pro) et les images au format png (ne s’affichent pas dans Lotus Notes)
- Indiquer le path complet des images dans le template html (http://monsite.com/img/image.jpg et non image/image.jpg)
- Compléter les balises « Alt » (pour donner des indications aux lecteurs dans le cas où les images ne s’affichent pas)
- Optimiser leur taille à la réalité de leur affichage ainsi que leur poids (éviter les images de 200ko…).
- Définir leurs attributs de taille dans le code html afin d’occuper la zone qui leur est réservée, même si l’image n’a pas été téléchargée (width=”450″ height=”156″ alt=”” style=”display:block;)
- Attention à l’ajout de bordures automatique par certains éditeurs html (border:none;)
- Alignement des images dans le template e-mail : Utiliser l’attribut align
Editeurs HTML / Services en ligne :
Il existe une multitude d’offres gratuites ou payantes d’éditeurs HTML ou de services en ligne :
SharePoint Designer 2007 (gratuit)
http://www.newslettercreator.com/fr/ (payant)
Retouche et compression d’images
https://compressor.io/compress
Solutions de tests e-mail
https://putsmail.com/ (gratuit)
https://www.mail-tester.com/ (gratuit)
https://www.emailonacid.com/ (payant)
Galerie de template email / Template Builder en ligne :
http://themeforest.net/category/marketing/email-templates
Agences spécialisées dans la création de template e-mail :
http://www.email-responsive.com
Blogs dédiés à l’e-mail Marketing
http://pignonsurmail.typepad.fr/pignonsurmail/