Aller au contenu

Affichage anarchique d'un Mail HTML

Cebastien

Par Cebastien
dans (X)HTML et CSS

 Partager

Sujets conseillés

Cebastien

Cebastien

Posté
Posté (modifié)

Bonjour à tous,

Une petite question mêlant HTML et fonction mail Php mais le problème se trouvant au niveau de l'affichage HTML, j'ai posté ici.

J'ai créé pour deux de mes sites un petit bout de code pour que certains membres des assoss' puissent envoyer une newsletter aux autres membres. La news est en HTML.

Au niveau technique, tout fonctionne parfaitement, les mails arrivent à destination.

Par contre, niveau affichage, c'est du grand n'importe quoi, je m'explique :

Pour l'instant je suis en pahse test en utilisant plusieurs de mes adresses mail.

Donc :

- Réception sur adresse mail de Free via Outlook express : No problèmo !!

- Réception sur adresse hotmail constultée en ligne depuis un pc : Affichage HTML comme prévu avec prise en compte du CSS, à l'exception de l'image background du bandeau supérieur (l'image avec le nom et le logo de l'assoss).

- Réception sur adresse gmail lu en ligne depuis un pc : Le mail ne contient que le texte, il n'y a aucune prise en compte du CSS.

Et c'est là que ça devient dingue :

- Réception sur cette même adresse gmail mais lu en ligne depuis mon téléphone portable : Affichage niquel !!!

Petites précisions :

- Mon CSS est en style imbriqué (entre les balises <head> et </head>.

- Dans mon CSS, le lien vers l'image du background qui ne s'affiche pas est en adresse absolue.

- Pour la lecture des mails en ligne depuis le PC, même résultat pour I.E 8, Firefox et Chrome dernières mises à jour.

- O.S de mon PC : Win XP

- O.S de mon tph : Samsung Bada

Et pour finir le HEADER du mail : 


$headers ="From: \"mon site\"<contact_AT_monsite.fr>"."\n";
$headers .='Reply-To:' .$mail_retour ."\n";
$header.= 'MIME-Version: 1.0'."\n";
$headers .='Content-Type: text/html; charset="UTF-8"'."\n";
$headers .='Content-Transfer-Encoding: 8bit'."\n";

Y a-t-il une solution pour que ce mail s'affiche correctement quelle que soit l'adresse du destinataire, et quelque soit l'engin utilisé pour le lire?

Merci d'avance,

Seb...

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

captain_torche

Posté
Posté

Les webmails et les logiciels de mails traitent tous différemment les mails en HTML.

Certains suppriment les CSS externes, d'autres ne prennent que le body du message (D'où la disparition des styles en head).

La solution la plus fonctionnelle, mais qui fait hurler les intégrateurs : mettre tout le code CSS dans l'attribut style des balises. Mais aussi : simplifier le code au maximum pour ne pas avoir à trop surcharger, et éviter les images de fond, qui ne sont lues que par très peu d'outils de mails.

Je te conseille la lecture de ces deux articles, traduits sur pompage.net : Emails HTML : dompter la bête, et Comment vous assurer que vos emails HTML s'affichent correctement et arrivent à bon port ?

Lien vers le commentaire
Partager sur d’autres sites
Cebastien

Cebastien

Posté
  • Auteur
Posté

Les webmails et les logiciels de mails traitent tous différemment les mails en HTML.

Certains suppriment les CSS externes, d'autres ne prennent que le body du message (D'où la disparition des styles en head).

La solution la plus fonctionnelle, mais qui fait hurler les intégrateurs : mettre tout le code CSS dans l'attribut style des balises.

Merci. Je m'en vais de ce pas déplacer mes codes CSS pour les mettre en ligne. C'est une newsletter, pas un site web, donc m'en fou des standards ;)

Mais aussi : simplifier le code au maximum pour ne pas avoir à trop surcharger, et éviter les images de fond, qui ne sont lues que par très peu d'outils de mails.

Simplifier le code, si tu parles du CSS ça va être dur loll. Pour l'image de fond, je vais la remplacer par une insertion d'image, puisque ça passe, et ça permettra d'avoir une texte alternatif au cas ou le destinataire empêche l'affichage des images.

Je te conseille la lecture de ces deux articles, traduits sur pompage.net : Emails HTML : dompter la bête, et Comment vous assurer que vos emails HTML s'affichent correctement et arrivent à bon port ?

J'ai lu ces deux articles intéressants en effet, merci.

Lien vers le commentaire
Partager sur d’autres sites
  • Message populaire.
Ernestine

Ernestine

Posté
  • Message populaire.
Posté

Faire une newsletter qui va s'afficher correctement partout, des vieux Outlook (enfin pas trop vieux quand même) aux récents mobiles, c'est souvent la croix et la bannière, et ça demande de faire aussi quelques concessions car tout n'est possible.

En vrac :

_ faire une mise en page tout en tableaux imbriqués. Oublier tout ce qui est positionnement absolute, flottant, etc. Faire des tableaux imbriqués les uns dans les autres, en utilisant au minimum (si possible pas du tout) tout ce qui colspan et rowspan.

_ aucune image en background. Toutes les images doivent être inclues en dur. Cela rend compliqué les boutons (coins arrondis) contenant du texte : il faut découper le bouton pour en faire plusieurs images. Il n'est pas non plus possible d'écrire du texte par dessus une image (et donc pas par-dessus un dégradé).

_ tous les styles CSS doivent être inline, c'est à dire directement dans le code.

_ limiter les propriétés CSS aux plus élémentaires : color, font-size, etc...

_ spécifier systématiquement les largeurs des lignes et les hauteurs des cellules.

_ toujours spécifier cellspacing=0 et cellpadding=0 pour chaque tableau.

_ mettre un display:block sur chaque image (ça corrige certains bugs de certains clients)

_ ne pas utiliser de margin ni de padding (il faut créer les marges avec des cellules vides).

_ les alignements horizontaux et verticaux devront être gérés avec align et valign sur les cellules.

_ les cellules doivent être fermées juste après les images (vieux bug bien connu d'IE6, qu'on retrouve encore sur Outlook, qui sans ça crée une vieille marge entre l'image et la bordure bottom de la cellule).

etc...

Au final, c'est très long, beaucoup plus long que pour une simple page web, mais si tu veux que ta newsletter s'affiche parfaitement chez tout le monde, c'est un passage obligé.

C'est souvent d'autant plus long que les tests sont difficiles, vu qu'il faut s'envoyer un mail pour chaque test (si tu testes uniquement dans ton navigateur web ce n'est pas suffisant).

  • Vote 1
Lien vers le commentaire
Partager sur d’autres sites
Cebastien

Cebastien

Posté
  • Auteur
Posté

Voilà j'ai fait les modifs qui conviennent. Je voulais faire une résumé des choses à faire et ne pas faire à l'attention de ceux qui comme moi allaient se poser la question à l'avenir, mais Ernestine m'a pris de vitesse et l'a très bien fait.

Pour ma part pas eu besoin de tableaux car ma présentation est très simple avec le bandeau du site en en-tête, le corps du message et un pied de page, donc les div les uns en dessous des autres s'affichent parfaitement de partout. Mais effectivement, en cas de mise en page plus complexe, la bonne vieille technique des tableaux est de rigueur.

Ces recommandations fonctionnent avec Outlook, hotmail et gmail, et donc probablement avec tout le reste.

Bien penser aux textes alternatifs des images, comme ça un nouveau lecteur via hotmail ou autre aura une news bien lisible et compréhensible même si il n'a pas activé l'affichage des images.

Seb...

Lien vers le commentaire
Partager sur d’autres sites
  • 4 semaines plus tard...
Cebastien

Cebastien

Posté
  • Auteur
Posté

Je reviens sur ce que j'ai dit dans mon dernier message. Les excellentes recommandations d'Ernestine sont valables même pour une présentation des plus simples. Même juste trois "div" les un en dessous des autres, les dernières versions d'Outlook ne supportent pas. Donc tableaux quoi que l'on fasse.

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
 Partager
Aller sur la liste des sujets
×
×
  • Créer...