Lunaweb, une réflexion sur la création web et le marketing Internet

Premailer, transformer vos CSS pour l’email HTML

Par le
No Gravatar

Support du CSS dans les emailsUn des gros soucis de rendu d’un email HTML envoyé à différents services de webmail (Hotmail, Gmail, Yahoo Mail, etc.) ou vers des softs de messagerie électronique (Apple Mail, Outlook, Eudora, etc.) consiste en le support partiel, voire l’absence totalement de support, du CSS, qu’il soit décrit dans une feuille de style externe ou bien intégré directement dans la balise HEAD du document. Le guide to CSS support in Email, de Campaign Monitor (déjà mentionné ici), retrace toutes les balises acceptées ou refusées par tous les grands services ou logiciels d’emails.

Pour pallier à ce problème, la seule solution consiste à mettre tous les attributs de mise en forme directement dans la balise concernée (méthode du CSS inline) . Par exemple, un paragraphe à styler en gras et en vert, au lieu d’être habituellement parée d’un attribut class suffisant :

(p class=grasvert)Le phrasé de ma grand mère est une tuerie.(/p)

Devient ceci :

(p style=color:green;font-weight:bold)Le phrasé de ma grand mère est une tuerie.(/p)

Je vous laisse imaginer le côté « pratique » d’un emailing complet à styler tout à la main, et surtout à maintenir (surtout quand le client demande d’inverser les couleurs au denrier moment). Du pur bonheur, et un retour aux années Dreamweaver…

Jusque là, nous en étions arrivés au point de créer un script PHP qui moulinait la page HTML avec son CSS « classique » en feuille externe, mais pour cela fallait-il encore avoir la connaissance et l’infrastructure pour le faire.
Et voici que sort premailer, qui vous le fait en deux temps et en mode Web. Pratique !

> Visiter le site de Premailer.

Pour en savoir plus sur l'auteur de cet article...  Nicolas a fondé LunaWeb en 2004. Passionné d'ergonomie Web, d'utilisabilité et d'analyse des comportements utilisateurs, il revendique l'Internet fait à la main. Fan d'Apple invétéré, grand utilisateur des RSS, pratique trop peu la pêche à la ligne... Lire plus d'articles de cet auteur...

  • http://www.palleas.com Palleas

    Effectivement c’est plus pratique :o
    J’pensais que Gmail desactivait purement et simplement le css, du coup j’étais reparti à faire des gabarits de mails à la HTML 4 (vomitif à souhait :/)…

    Merci pour le site du coup :)

↑ Haut de page