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)

Dreamweaver (payant)

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://litmus.com/ (payant)

https://www.emailonacid.com/ (payant)

 

Galerie de template email / Template Builder en ligne :

http://themeforest.net/category/marketing/email-templates

https://builder.stamplia.com/

 

Agences spécialisées dans la création de template e-mail :

http://agence.badsender.com/

https://email-designer.net

http://www.email-responsive.com

http://www.decoupe2psd.com/

 

Blogs dédiés à l’e-mail Marketing

http://www.badsender.com/

http://pignonsurmail.typepad.fr/pignonsurmail/

https://email-designer.net