Aller au contenu

Mail et CSS


Ombre

Sujets conseillés

Bonjour,

Dans le cadre du boulot, je suis amené à créer une newsletter (que je ne peux malheureusement pas vous monter :( ) pour notre site internet. Une société externe nous à fourni un gabarit avec une mise en page en mode tableau et j'ai donc conscieusement détruit tous ces tableaux pour les remplacer par des divs et utiliser un balisage sémantique avec CSS comme décrit dans un article de pompage.net. Ça marche bien dans les logiciels clients mails.

Là où le bât blesse c'est que tous les styles sautent quand on regarde la mise en page sur le site d'hotmail. Certes, grâce aux balisage, il est parfaitement lisible mais niveau présentation : bof... :( Vous allez me dire : «On s'en fout d'hotmail» et vous auriez bien raison mais nos futurs abonnés auront la possiblité de s'abonner via le site de Microsoft et s'ils recoivent une lettre avec une mise en page merdique ça ne le fera pas trop.

Connaissez-vous une solution à ce problème?

En attendant, je vais essayer de mettre les styles dans une feuilles externe. Si vraiment cela ne marche pas, je mettrai les styles inline pour chaque balises ou, horreur, repasserai en mode tableau. Crotte de crotte... :(

Ombre

P.S. : grâce à l'extension webdeveloper de firefox, j'ai vu que les indications de class et id étaient conservées. Reste plus qu'à réussir à lui attacher les styles.

Lien vers le commentaire
Partager sur d’autres sites

Comme tu l'as dit, Hotmail supprime automatiquement les styles CSS, ainsi que tout ce qui se trouve entre <head> et </head>...

La solution est donc les styles en ligne.

Pas glorieux, mais c'est imposé.

Un article de Pompage décrit précisement les différentes techniques pour décorer un mail en CSS, et pour que ça passe dans tous les clients Mail, mais j'arrive pas à accéder au site en ce moment, aussi je ne pourrais te donner l'URL...

Amicalement,

Loupilo

Lien vers le commentaire
Partager sur d’autres sites

Quand CSS et Courriel s'embrassent sous le gui., de Mark Wyner, sur pompage.net

Hotmail : le plus démoniaque de tous. Aucune pitié pour les mails en HTML qui s'appuient sur des CSS. Il ne se contente pas d'éradiquer les styles, mais aussi les balises suivantes des courriels : <head>, <title>, <meta>, et <body>. Dites adieu à votre beau design.

Solution :

Je vous recommande de considérer soigneusement jusqu'où vous voulez vous plier à l'ineptie d'Hotmail, car la méthode suivante va demander du dévouement et de la rigueur. Comme la balise <body> et toutes celles qui précèdent se sont évaporées, la seule option consiste à utiliser les styles CSS en-ligne. Les styles définis en-ligne sont pénibles et peu productifs, et vous préféreriez sans doute ne pas avoir à les utiliser, mais ils fonctionnent tout de même. Si vous prévoyez une utilisation massive d'Hotmail par votre public, vous pouvez vous tourner vers cette méthode. Mais si vous n'avez pas à vus soucier d'Hotmail, sautez donc cette étape et pensez aux choses importantes de la vie, comme manger et dormir.

Modifié par LaurentDenis
Lien vers le commentaire
Partager sur d’autres sites

Youpie! Ça marche! :yoot:

Je vous donner la recette : il faut placer les styles non pas dans le HEAD mais dans le BODY. Le webmaster de la boîte m'a dit d'aller voir dans la mise en page d'une autre newsletter (qui utilise le mode tableau, les balises FONT mais aussi un peu de CSS) pour voir comment c'était fait : et voilà. :P

Bon, il y a encore 2 ou 3 petit problèmes avec les images dans les styles mais rien d'insurmontable je pense. <_<

Merci à tous. :up:

Modifié par Ombre
Lien vers le commentaire
Partager sur d’autres sites

Re-Bonjour,

Alors voilà, la newsletter fonctionne... :) Je suis content car j'ai appris pas mal de choses, en plus de vos renseignements, en travaillant sur ce projet :

  • Quoiqu'on fasse les background ne passe pas sur le site de Hotmail, faut se débrouiller autrement
  • Pour les divs, il vaut mieux utiliser un div conteneur avec les attributs de base (fonte, taille, etc) et encapsuler des divs flottants à l'intérieur mais en utilisant des margin pour le positionnement plutôt que le padding qui ne marche pas
  • Les css doivent bien se trouver dans le body

Si ces deux ou trois renseignements peuvent servir...

Encore merci à tous :up:

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...