Code HTML pour tous les webmails

**Aquellito** · 25/01/2016, 15h26

Bonjour à tous,

Je cherche un outil qui permettrait de transformer un code HTML pour qu'il puisse se lire sans trop de régression par tous les WebMails (surtout Gmail car le client fait ses tests dessus

) ).

Axel

**Bisûnûrs** · 26/01/2016, 11h17

Je doute que tu puisses trouver un tel outil. Si tu as un code HTML avec des section, div, et autres balises sémantiques, le tout mis en page par du CSS, je vois mal comment un interpréteur pourrait savoir le rendu qu'il doit estimer pour en faire une mise en page avec des tableaux.

**Aquellito** · 26/01/2016, 11h27

Dur dur, comment expliquer au client que rien ne marchera sur Gmail ou autre... Savez-vous comment font ceux qui veulent balancer de la pub sur Gmail ? Tout est en mode bloc note ? J'ai du mal à le croire...

**Bisûnûrs** · 26/01/2016, 11h30

C'est quoi le rapport avec le bloc notes ?

Dis-nous clairement ce que tu as, comment tu l'obtiens et ce que tu veux obtenir.

**Inikaam** · 26/01/2016, 11h39

Bonjour Aquellito,

L'intégration mail est un travail très différent de l'intégration plus classique, car on retourne loin arrière dans l'histoire du HTML. Malheureusement, il n'existe à ma connaissance aucun outil permettant ce genre de conversion automatique.
C'est à toi de le construire intégralement, pas de choix de ce côté. Gmail m'a fait pleurer des larmes de sang tant il est contraignant, mais on finit par y arriver. D'ailleurs, en conservant le travail déjà fait, on gagne de plus en plus de temps à force

**Aquellito** · 26/01/2016, 15h17

Bonjour,

Le mode "bloc note", c'était une image pour expliquer qu'aucun de mes styles n'étaient pris en compte. Ce qui donne un effet bloc note : "Que du texte noir sur un fond blanc".
Ce que j'aurais aimé obtenir, c'est une méthode "universelle" qui permettent de coder du HTML/CSS qui s'interprète de la même façon par tous les WebMails.

@Inikaam: ça m'intéresserait de savoir comment tu procèdes pour Gmail. Tu utilises les styles proposés par Google ? Si oui, comment fais-tu quand on ouvre avec un autre WebMail ?

Désolé avec toutes mes questions mais le client s'attend à ce que sa mise en page Html marche sur tous les WebMails et j'ai du mal à lui faire comprendre que ce n'est pas si simple que ça

Merci,
Axel

**Bisûnûrs** · 26/01/2016, 15h28

Indice : Mise en page avec des tableaux à la manière fin des années 90, début des années 2000.

**Aquellito** · 26/01/2016, 15h32

J'ai justement changé mes tableau en CSS par des bons vieux tableaux en HTML mais à part bien placer les éléments dans ma page, je n'ai rien d'autre. Ni police, ni bordure, ni couleur, en fait rien à part le style HTML par défaut.

**Bisûnûrs** · 26/01/2016, 15h55

Il faut éviter dans de très nombreux cas le CSS traditionnel et retourner à l'élément <font> pour mettre en forme le texte. Les images de fond ne sont jamais affichées, les couleurs de fond normalement le sont dans une grande majorité. Il faut utiliser les attributs bgcolor, border, align, etc. des éléments HTML plutôt que d'utiliser le CSS.

**Inikaam** · 26/01/2016, 16h30

Envoyé par Bisûnûrs

Il faut utiliser les attributs bgcolor, border, align, etc. des éléments HTML plutôt que d'utiliser le CSS.

Je me permets de te contredire sur ce point pour avoir déjà vu les bgcolor ne pas fonctionner par moments (j'ai jamais su pourquoi). align et valign fonctionnent bien par contre. Je passe la plupart du temps par des styles inline (style="..."). Seuls les styles inline et les balises de style html fonctionnent, inutile de passer par autre chose, ça ne marchera pas.

@Aquellito : l'idée est de prévoir effectivement une structure complète en tableaux, des placements prévus au pixel, on oublie tout ce qui a trait aux divs : des td pour les conteneurs de contenu et des font pour les texte. Les td doivent contenir toutes les infos de taille et doivent systématiquement être définis : width, height, background toujours définir padding, line-height et font-size à 0. Les fonts contiendront les informations liées au texte, donc couleur, line-height, font-size, etc. La typo peut-être définie dans le premier tableau, l'héritage fonctionne sur ce point.

A savoir : toujours rappeler à chaque td ses tailles et son background, il y a des fois où les interpréteurs de boîtes mails font ce qu'ils ont envie si ce n'est pas précisé.

Pour info, pour savoir les propriétés css qui fonctionnent ou non, je me réfère souvent au tableau des CSS de campainmonitor : https://www.campaignmonitor.com/css/b/
C'est très pratique. Pour tester les mails, il existe différentes plateformes qui émulent des clients mails (pour s'assurer que ça passe partout). C'est pas fiable à 100% mais ça donne une idée. Pour ma part j'utilise litmus, mais c'est payant, donc à toi de voir.

Et pour finir : il faut que le client ait conscience qu'on ne peut pas obtenir le même résultat dans un mail que dans un site. Ton rôle est donc de l'informer de cette différence, de maîtriser ces différences et d'être force de proposition par rapport à ses remarques. C'est une limitation technique, tu ne pourras donc pas faire de miracles, mais on peut faire de très beaux mails malgré ça, c'est juste plus long.

En espérant t'avoir ouvert des pistes, et bon courage pour ton intégration