WRInaute accro
L'envoi de newsletter et autre lettre d'information au format HTML est un élément central du fonctionnement de nombreux sites. En effet, disposer d'un tel outil permet aux webmasters de donner des nouvelles à leurs
membres quand le besoin s'en fait sentir. Et disposer d'une lettre d'information HTML classieuse est nettement plus pro qu'une basique newsletter en texte brut, ou qui passe sur 1% des clients de messagerie et webmail.
L'idée principale pour que le rendu de la lettre d'information soit optimale sur l'ensemble des outils possibles
(webmail et clients de messagerie) est de s'affranchir complètement de l'utilisation du CSS. En effet, entre
les webmails qui incluent votre contenu html dans leur propre code html, ceux qui renomment les classes ou ceux qui les suppriment tout simplement, le parcours peut être long et prise de tête.
Après moults essais, j'ai ainsi pu réaliser des design de mail html qui passent sur l'ensemble des webmails (gmail, free, hotmail, yahoo, etc.) et sur les principaux clients. Outlook 2007 est un cas à part que j'aborderais en fin de post.
Cela risque de sembler archaïques à beaucoup mais les mails dont la mise en page est réalisé le plus simplement du monde, à partir de tableaux html et des attributs des différents éléments a nettement plus de chance de passer qu'un mail réalisé avec moultes feuilles de styles.
Dès lors ma logique est la suivante :
1/ Tous les calages d'éléments sont réalisés via des tableaux html. Aucune Div, pas de positionnement flottants,
etc.
2/ Les styles sur le textes sont appliqués au travers de balises font utilisées le plus simplement du monde :
De manière à offrir un rendu plus sympathique à ceux qui disposent de clients supportant les feuilles de styles, il est cependant possible d'utiliser des classes CSS (tout en sachant qu'elles risquent d'être bloquées) :
Mais dès lors il faut bien penser à préfixer chaque classe par l'élément sur lequel elle sera appliquée
(font.myclasse plutôt que .myclasse, certains webmails reformulant les éléments de styles commencant par un .)
Dans le même ordre d'idée, Outlook 2007 a la facheuse idée de bloquer la totalité des images de fond. A cela je n'ai trouvé aucune alternative. La solution peut donc être de doubler chaque utilisation de l'attribut html background par un appel à l'attribut bgcolor (qui lui est supporté), de manière à pouvoir proposer une couleur de remplacement dans le cas d'une image de fond bloquée.
Pour ne pas m'embêter, j'ai préféré supprimer toute utilisation d'image de background.
Un lien pour ceux qui veulent aller plus loin : http://www.campaignmonitor.com/blog/archives/2007/04/a_guide_to_css_support_in_emai_2.html#pc
membres quand le besoin s'en fait sentir. Et disposer d'une lettre d'information HTML classieuse est nettement plus pro qu'une basique newsletter en texte brut, ou qui passe sur 1% des clients de messagerie et webmail.
L'idée principale pour que le rendu de la lettre d'information soit optimale sur l'ensemble des outils possibles
(webmail et clients de messagerie) est de s'affranchir complètement de l'utilisation du CSS. En effet, entre
les webmails qui incluent votre contenu html dans leur propre code html, ceux qui renomment les classes ou ceux qui les suppriment tout simplement, le parcours peut être long et prise de tête.
Après moults essais, j'ai ainsi pu réaliser des design de mail html qui passent sur l'ensemble des webmails (gmail, free, hotmail, yahoo, etc.) et sur les principaux clients. Outlook 2007 est un cas à part que j'aborderais en fin de post.
Cela risque de sembler archaïques à beaucoup mais les mails dont la mise en page est réalisé le plus simplement du monde, à partir de tableaux html et des attributs des différents éléments a nettement plus de chance de passer qu'un mail réalisé avec moultes feuilles de styles.
Dès lors ma logique est la suivante :
1/ Tous les calages d'éléments sont réalisés via des tableaux html. Aucune Div, pas de positionnement flottants,
etc.
2/ Les styles sur le textes sont appliqués au travers de balises font utilisées le plus simplement du monde :
Code:
<font face="Verdana, Arial, Helvetica, sans-serif" color="#FFFFFF" size="-1" ><b>#TITRE_STD#</b></font>De manière à offrir un rendu plus sympathique à ceux qui disposent de clients supportant les feuilles de styles, il est cependant possible d'utiliser des classes CSS (tout en sachant qu'elles risquent d'être bloquées) :
Code:
<font face="Verdana, Arial, Helvetica, sans-serif" color="#FFFFFF" size="-1" class="myclasse" ><b>#TITRE_STD#</b></font>Mais dès lors il faut bien penser à préfixer chaque classe par l'élément sur lequel elle sera appliquée
(font.myclasse plutôt que .myclasse, certains webmails reformulant les éléments de styles commencant par un .)
Dans le même ordre d'idée, Outlook 2007 a la facheuse idée de bloquer la totalité des images de fond. A cela je n'ai trouvé aucune alternative. La solution peut donc être de doubler chaque utilisation de l'attribut html background par un appel à l'attribut bgcolor (qui lui est supporté), de manière à pouvoir proposer une couleur de remplacement dans le cas d'une image de fond bloquée.
Pour ne pas m'embêter, j'ai préféré supprimer toute utilisation d'image de background.
Un lien pour ceux qui veulent aller plus loin : http://www.campaignmonitor.com/blog/archives/2007/04/a_guide_to_css_support_in_emai_2.html#pc
