Affichage anarchique d'un Mail HTML

Affichage anarchique d'un Mail HTML Le mail ne s'affiche jamais de la même manière selon le lecteur Noter :

#1 Cebastien

Groupe : Actif
Messages : 39
Inscrit(e) : 20-février 11
Genre:Homme
Localisation:Franche-Comté

Posté 02 février 2012 - 14:53

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...

Ce message a été modifié par Cebastien - 02 février 2012 - 15:08.

Haut

#2 captain_torche

Danacol / Orangina rouge

Groupe : Admin
Messages : 6 722
Inscrit(e) : 08-février 06
Genre:Homme
Localisation:Savigny / Orge

Posté 02 février 2012 - 15:28

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 ?

Vous avez rêvé cette nuit ? Partagez vos rêves sur l'Onironaute !
Bijoux fantaisie
Recherche nounou

Haut

#3 Cebastien

Groupe : Actif
Messages : 39
Inscrit(e) : 20-février 11
Genre:Homme
Localisation:Franche-Comté

Posté 02 février 2012 - 16:05

captain_torche, le 02 février 2012 - 15:28, dit :

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

captain_torche, le 02 février 2012 - 15:28, dit :

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.

captain_torche, le 02 février 2012 - 15:28, dit :

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.

Haut

#4 captain_torche

Danacol / Orangina rouge

Groupe : Admin
Messages : 6 722
Inscrit(e) : 08-février 06
Genre:Homme
Localisation:Savigny / Orge

Posté 02 février 2012 - 16:28

Cebastien, le 02 février 2012 - 16:05, dit :

C'est une newsletter, pas un site web, donc m'en fou des standards

Ce n'est pas parce que tu mets le CSS dans les attributs style que tu ne respectes pas les standards

Vous avez rêvé cette nuit ? Partagez vos rêves sur l'Onironaute !
Bijoux fantaisie
Recherche nounou

Haut

#5 Ernestine

Groupe : Fondatrice
Messages : 1 034
Inscrit(e) : 21-août 03
Genre:Femme

Posté 02 février 2012 - 17:46

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).

Haut

#6 Cebastien

Groupe : Actif
Messages : 39
Inscrit(e) : 20-février 11
Genre:Homme
Localisation:Franche-Comté

Posté 03 février 2012 - 14:19

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...

Haut

#7 Cebastien

Groupe : Actif
Messages : 39
Inscrit(e) : 20-février 11
Genre:Homme
Localisation:Franche-Comté

Posté 25 février 2012 - 19:20

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.