Une newsletter est destinée à plusieurs boites de messagerie différentes (hotmail, yahoo, gmail, outlook, thunderbird…) et chacune réagit différemment. La simplicité et l’accessibilité est de mise! Voici quelques règles à suivre pour maximiser la compatibilité:

- Ne pas excéder 600 pixels de large

- Ne pas dépasser 30 Ko

- Insérer le code à l’intérieur de la balise BODY (oublier le reste)

- Intégrer complètement en tableaux (aucun div!)

- Déclarer le CSS à l’interieur du code (CSS inline)

- Lier toutes les images (et autres médias) en liens absolus

- Utiliser les entités HTML

- Valider le code (Validator du W3C)

- Supprimer les espaces inutiles et les commentaires

Conseils éclairs

Il semble y avoir des problèmes de compatibilité avec la couleur de background déclaré dans le HTML, BODY ou un DIV. Je vous recommande donc de créer un tableau 100% avec un BGCOLOR.

Il semble aussi avoir des troubles avec les BORDER dans hotmail. Vous pouvez toujours créer des bordures artificielles à l’aide de TR et TD en spécifiant une couleur de fond et un width ou un height.

Privilégiez les IMG au lieu des BACKGROUND-IMAGE. Vous constaterez que hotmail et outlook sont capricieux sur ce point.

Quelques liens très utiles sur le sujet :
http://www.email-standards.org/
http://www.campaignmonitor.com/css/
http://www.xavierfrenette.com/articles/css-support-in-webmail/