webleads-tracker

WordPress & Référencement naturel
Mes servicesWordPress - Référencement
Hébergement WordPress
Vous êtes ici : SeoMix » WebMarketing » CSS et emailing

CSS et emailing

Emailing et CSSLes newsletters sont un excellent moyen d'augmenter les ventes et de fidéliser la clientèle. Mais il est souvent difficile de les concevoir pour qu'elles soient compatibles avec tous les webmails, notamment au niveau de l'utilisation du CSS. J'ai le souvenir de plusieurs grosses prises de tête en fonction du fournisseur d'accès et du navigateur utilisé...

Quels éléments CSS peut-on utiliser sans risque ? Suivez le guide!

Pour ceux qui ne le savent pas, je travaille notamment pour Bien et Bio, une boutique de produit Bio. Dans le cadre de mon travail, je suis en charge de la création, de l'optimisation et des envois des différentes campagnes d'emailing. Le problème, c'est que ce n'est pas mon premier domaine d'expertise (WordPress, reviens !).J'ai donc eu parfois de mal à concevoir des newsletters pertinentes et graphiques, et surtout, j'ai eu du mal à ce qu'elles soient compatibles avec tous les webmails du marché.Je suis heureusement tombé sur une excellente ressource de Campaign Monitor, qui explique pas à pas quelles sont les balises CSS que l'on peut utiliser ou non.

Utiliser des CSS dans une newsletter

Le  guide étant à l'origine en anglais, aucune information n'est disponible sur Orange, Free et le reste des webmails français. Mais cela donne cependant une bonne indication de ce que l'on peut faire ou ne pas faire avec les CSS et l'emailing (notamment avec le PDF récapitulatif qu'ils ont créés).

CSS et newsletters

La compatibilité des CSS pour vos newsletters

Dans cet article, je me suis surtout attardé sur l'analyse de ces webmails et de ces logiciels:

  • Outlook 2003
  • Outlook 2007/2010
  • Windows Live
  • Yahoo !
  • Apple Mail
  • Iphone
  • Google Mail

Après l'avoir décortiqué, voici ce que j'ai retenu du guide sur l'utilisation des CSS dans une newsletter. Il faut bannir l'utilisation de certains éléments, à commencer par les sélecteurs spéciaux du type :

  • e:first-line
  • e:first-letter
  • e > f
  • e:focus
  • e+f
  • e[foo]

De même, il ne faut même pas envisager l'utilisation des CSS3 (ombres, arrondis, opacité, ...) ni le positionnement absolute (top, left, right et bottom).

A l'inverse, certaines fonctionnalités sont à peu près sûr. On peut donc ajouter allègrement ces types de CSS dans nos newsletters :

  • table-layout
  • border
  • border-collapse
  • background-color
  • text-transform
  • color
  • font
  • font-family
  • font-style
  • font-variant
  • font-size
  • font-weight
  • letter-spacing
  • line-height
  • text-align
  • text-decoration
  • text-indent

Pour les autres balises de style, je vous invite à lire directement le guide, car en fonction du webmail, elles peuvent être complètement, partiellement ou pas du tout implantées...

Ce qui est marrant dans le guide, c'est que l'on se rend compte que le meilleur webmail est celui d'Apple, et que la version 2003 d'Outlook est plus performante avec les CSS que la version 2007 (c'est Microsoft, hein ^^).

Autrement dit, rien ne vaudra une bon tableau HTML ou des images pour obtenir le rendu graphique sur l'on souhaite. Sauf que cela comporte un risque. Trop d'image et d'HTML tendent à ce que les webmails considèrent vos emails comme un spam...

Le guide complet des CSS pour l'emailing

Pour approfondir ma brève analyse, je vous conseille donc fortement de télécharger le guide complet des CSS sur le site de Campaign Monitor, ou de consulter directement leur tableau récapitulatif sur le top 10 des webmails. Tout est disponible à cette adresse Campaignmonitor CSS.

Les thèmes relatifs

Voici les thématiques abordées par CSS et emailing:

8 commentaires
  1. Verzuli
    1 message

    Verzuli - Le 22 mars 2011, 09:09

    Attention aux bourrins : un lien sur une DIV entière, ça optimise le click rate, mais non seulement c’est sale, mais en plus ça bloque sur Outlook (donc le width//height en relatif est à bannir dans certains cas aussi)

  2. RaphSEO
    6 messages

    RaphSEO - Le 22 mars 2011, 09:43

    C’est bon tout ça, bravo pour le partage de ton travail.
    Moi ce que j’adore c’est l’extrême tolérance de gmail ^-^

  3. Florian
    8 messages

    Florian - Le 22 mars 2011, 10:27

    Je suis dans la même situation que toi, ce n’est pas mon métier mais j’en fais également. J’ai donc du apprendre sur le tas et faire de nombreux tests pour voir ce qui fonctionne.

    J’avais vu ce tableau il y a quelques temps, très pratique !

  4. Benoit
    5 messages

    Benoit - Le 22 mars 2011, 11:53

    As tu une idée du coup sur free et orange des balises possibles ?
    Un tableau avec les webmail français serait top ;)

  5. Mamzelle Print
    3 messages

    Mamzelle Print - Le 25 mars 2011, 09:52

    Vraiment très intéressant, je me suis imprimé le petit tableau qui me sera fort utile ^^

  6. Nick
    1 message

    Nick - Le 26 mars 2011, 23:29

    Merci pour cet article.
    Un exemple de newsletter ainsi qu’un guide pour réaliser une newsletter reussie serait interessant.

  7. Nana
    1 message

    Nana - Le 01 mars 2012, 09:41

    Précieuse information que je recherchais depuis longtemps pour la transmetre à mes prestas… La compatibilité avec Outlook 2007 était jusqu’à présent un vrai casse-tête !

  8. Moi
    1 message

    Moi - Le 11 juillet 2012, 17:59

    Précieuse information que je recherchais depuis longtemps pour la transmetre à mes prestas… La compatibilité avec Outlook 2007 était jusqu’à présent un vrai casse-tête !

» Commentez cet article !
(Merci de donner un vrai prénom)
(Ne sera jamais publié)
(Modèration subjective)
Html accepté <a> <i> <b> [codesyntax]CODE[/codesyntax]
» Prévisualisez votre message

© 2010-2012 SeoMix : WordPress & Référencement
Propulsé par WordPress et Daniel Roch. Logo créé par Willy-Bahuaud

Indispensable
WordPress
A propos de SeoMix
Mes servicesWordPress - Référencement
Suivez-nous !
  • 8812 abonnés
  • 197 articles
  • 4605 messages
Vous devriez lire
Seo et emarketing
Les amis
1fdc0fcf69db299e75ca103231402a4caaaaaaaaaaaaaaaaaaaa