Bonjour ici !    
 
J'essaye de créer une signature HTML de mail, mais mes connaissances en HTML et CSS sont casi-inexistantes.
Je tâtonne en passant de tuto en tuto, mais il y a des choses sur lesquelles je bloque complètement !
 
Je me permets donc de vous soumettre mon problème au cas où certains seraient motivés pour m'apporter un peu d'aide et m'aider à progresser.
 
Mon fichier HTML est téléchargeable ici, au risque de terrifier les développeurs aguerris : https://uploadnow.io/f/XJwl0xC
Coordonnées et logos remplacés par du fictif bien sûr !
 
 
1. Typo :
Je souhaitais utiliser une webfont (Barlow), j'ai testé plusieurs techniques d'intégrations (link, @fontface): fonctionnelles sur navigateur mais pas lors de l'intégration au client mail.
J'ai cru comprendre que c'était un peu mission impossible car les clients mails compatibles avec les webfont sont très rares, maix peut-être avez vous une technique ?
Et j'ai une autre interrogation : en alternative (font stack) à ma webfont, j'ai indiqué Verdana, Helvetica, sans serif... Mais aucune de ces typo n'est utilisée. Je me retrouve automatiquement avec une "Segoe UI", qui n'est même pas la typo par défaut de signature (c'est Calibri) donc je ne comprend pas trop ce qu'il se passe...
Si même les "safefont" ne veulent pas s'afficher correctement, que faire ?    
 
2. Dark mode :
Si je ne spécifie pas de couleur sur mon texte, sera-t-il automatiquement passé en blanc chez les destinataires ayant un affichage dark ?
J'ai ajouté des icones noires en png, qui vont forcément être illisibles si elles apparaissent sur un dark mode, donc est-il possible de détecter ce dark mode pour afficher des icônes en version blanches quand nécessaire ?
 
3. Base64
Je viens de découvrir qu'une image peux être encoder en caractères (base64), et je me demandais si c'était intéressant que mes images soient toute en base64 plutôt qu'en lien externe.
Cela évite le problème d'affichage en cas de lien brisé, mais ça alourdit le fichier.
Bonne ou mauvaise idée selon vous ?
 
Voila, désolée si je dis des énormités, comme précisé plus haut, je fais vraiment ça à tâtons !
 
Merci d'avance à ceux qui auront pris le temps de me lire    
 

Je dirais surtout, pourquoi tu as besoin de connaître le HTML et CSS pour faire une signature de mail Ton client mail ne te propose pas un éditeur WYSIWYG te permettant de créer facilement ta signature sans devoir te préoccuper du HTML/CSS ?

Il y a en effet un "éditeur" sur Outlook pour créer une signature, MAIS :
 
- les images ajoutées sont considérées comme des pièces jointes plutôt que d'être chargées à distance, ce qui multiplie par 7 le poids de la signature (et 6 pièces jointes attachées à chaque mail)
 
- Les options de réglages et personnalisation sont restreintes : impossible de donner une largeur fixe au colonne d'un tableau, ou même de changer la couleur des bordures (en tout cas je n'ai pas trouvé), et on oubli évidemment les options plus poussées sur lesquelles je m’interrogeais (image alternative en dark mode, utilisation d'une webfont...).
 
- Quand j’envoie cette signature générée avec l'éditeur de Outlook, le destinataire la reçois complètement en vrac, images aplaties (ou mal positionnées)  
 
- Je voudrais pouvoir décliner cette signature pour plusieurs personne et donc la modifier et la "transporter" facilement, ce qui me semble beaucoup plus simple avec un fichier HTML fait soit même (donc lisible).
 
Bon à vous lire j'ai l'impression que ce que j'essaye de faire est complètement borderline, pourtant les tutos de créations de signature mail HTML sont nombreux, donc ça se fait, non ?    
Et oui, je ne suis pas une programmeuse de compétition, mais justement c'est l'occasion d'apprendre des choses, car ça m'intéresse.
 
Voila a quoi ressemble la signature reçu par le destinataire (sur un client mail différent)
N°1 : la signature générée via l'éditeur Outlook (sachant que j'ai quand même un peu triché en allant modifier le code html dans l'inspecteur juste pour changer la largeur des colonnes, dont je ne trouve nul part ailleurs comment modifier la largeur)

 
N°2 : celle que j'ai faites moi-même en HTML et "importée" un Outlook

Je suis aussi sur Outlook et j'ai aucun pb à faire une signature avec une image dedans qui se charge normalement... si l'utilisateur a bien autorisé l'affichage des images dans son outil de mail
Mais ça, tu ne peux pas le contrôler. Pas plus que tu peux garantir que ta signature HTML s'affichera sur n'importe quel outil mail correctement.
 
Astuce (un peu bourrin) : tu fais ta signature bien comme il faut dans Word ou un logiciel de traitement d'image et tu en sors un fichier image que tu mettras d'un bloc en signature. Au moins, là, tu maîtrises la mise en page/affichage. Par contre, le copier/coller d'une info de ta signature ne sera pas possible (pas plus que le clic sur l'url du site web).
 
Je précise que ma signature comporte aussi mon n° de tél et un lien vers un site web cliquable. Sur Outlook, Thunderbird et Zimbra, aucun pb d'affichage. Tu passes bien par le menu d'Outlook "Fichiers", "Options", Item "Courrier" puis section "Signature" et la fenêtre qui s'ouvre a comme libellé "Signatures et thème" ?
Tes mails sont bien envoyés au format HTML ?

Peut-être qu'une seule image sans mise en page particulière ne pose pas de problème, mais en tout cas moi quand j'essaye de mettre en forme avec un tableau, le résultat chez le destinataire est tout pourri !
Alors qu'elle apparait correctement dans l'éditeur de signature.
 
Chez le destinataire, les images s'affichent oui, mais mal. Et sont considérées comme pièce jointe (c'est franchement embêtant d'avoir systématiquement 6 pièces jointes signalé sur les mails à cause de la signature, sans parlé du poids supplémentaire).
 
J'ai bien compris que malheureusement je n'avais aucune garantie du bon affichage de ma signature dans les divers clients mail, mais on dirait qu'en faisant mon fichier HTML, la mise en forme reste un peu plus "stable" d'un client mail à l'autre.  
En tout cas c'est le cas quand je fais un envoi de Outlook web vers Apple Mail.
 
Faire une signature intégralement en image ne me convient pas : d'une part pour l'impossibilité de lien, ou de copié collé, mais aussi car je crains que certains client mail interprète l'image comme pièce jointe et qu'elle disparaisse donc du corps de mail (ce sont des choses qui arrivent d'après ce que j'ai pu lire sur internet).
Et puis j'aurais aussi un résultat très moche selon que le destinataire lise ou pas sur une interface dark.
Mais merci de l'idée
 
Pour l’accès à l'éditeur de signature, je n'ai pas exactement le même chemin que toi mais je vais bien dans Paramètres > Courrier > Composer et répondre > Signature électronique.  
Je suis sur mac et je passe par la version webmail de Outlook, pas l'application. (j'ai aussi l'application, c'est du pareil au même pour la signature)
 
Oui mes mails sont bien envoyés en HTML, j'ai vérifié à l'instant dans les paramètres.
 
Du coup c'est complètement délirant de faire une signature HTML trop complexe avec une webfont ou un affichage spécial dark mode ?  

Non, c'est pas délirant mais une webfont, j'ai pas l'impression que ça soit courant.
Ce qui est quand même bizarre, c'est la différence importante de comportement entre ton Outlook et le mien (puisque tu as l'air de dire que même avec le client lourd, tu as le même pb)