Demande #2755
ferméRendre possible d'envoi de courriels en HTML
Ajouté par Benjamin Drieu il y a environ 7 ans. Mis à jour il y a environ 6 ans.
0%
Description
L'idée est de permettre d'envoyer de jolis courriels en HTML pour attirer l'attention des membres et les inciter à les lire, mais aussi pour faciliter le clic sur les liens.
Mais attention, il faut que les courriels soient également envoyés en version texte et que ça n'augmente pas la spamitude de nous mailings.
Mon idée: le formulaire d'édition de template de courriels doit permettre de saisir les templates en HTML basique avec l'aide de wysihtml (http://www.wysihtml.com/), qui est un composant permettant de saisir l'HTML visuellement et d'y insérer les balises propres à gDTC.
À l'envoi, gDTC envoie un mail multipart texte + HTML, dont le texte est converti à partir de l'HTML et correctement indenté.
Un exemple de template à utiliser: https://www.alsacreations.com/xmedia/tuto/email/responsive/email-template-responsive.html
Les bonnes pratiques d'envoi de courriel en HTML seront à respecter.
Fichiers
20171101-lettre-information-publique-courriel-partie-html.html (8,91 ko) 20171101-lettre-information-publique-courriel-partie-html.html | Frédéric Couchet, 13/11/2017 11:52 | ||
mail_view_images_off.png (202 ko) mail_view_images_off.png | Benjamin Drieu, 30/04/2018 16:41 | ||
pane_view_images_off.png (50,3 ko) pane_view_images_off.png | Benjamin Drieu, 30/04/2018 16:41 | ||
pane_view_images_off.png (42,7 ko) pane_view_images_off.png | Benjamin Drieu, 30/04/2018 16:41 | ||
mail_view_images_off.png (71,4 ko) mail_view_images_off.png | Benjamin Drieu, 30/04/2018 16:41 | ||
pane_view_images_off.png (72,7 ko) pane_view_images_off.png | Benjamin Drieu, 30/04/2018 16:42 | ||
mail_view_images_off.png (223 ko) mail_view_images_off.png | Benjamin Drieu, 30/04/2018 16:42 | ||
relance-courriels-html-gnus.png (172 ko) relance-courriels-html-gnus.png | Frédéric Couchet, 10/07/2018 14:26 |
Mis à jour par Benjamin Drieu il y a environ 7 ans
Par bonnes pratiques, j'entends HTML valide + accessible et multipart text+html
Mis à jour par Frédéric Couchet il y a environ 7 ans
- Fichier 20171101-lettre-information-publique-courriel-partie-html.html 20171101-lettre-information-publique-courriel-partie-html.html ajouté
S'inspirer peut-être de la lettre d'information publique https://listes.april.org/wws/info/april-actu
Le courriel est en multipart text/html et text/plain avec une css April et le logo, sans plus de fioritures.
Fichier html joint.
Mis à jour par Isabella Vanni il y a presque 7 ans
- Lié à Demande #2765: Permettre d'agrandir la prévisualisation des modèles de mailing ajouté
Mis à jour par Isabella Vanni il y a presque 7 ans
- Lié à Demande #2961: M'aider à faire les lignes de la bonne longueur dans un modèle de message ajouté
Mis à jour par Benjamin Drieu il y a plus de 6 ans
- Lié à Anomalie #3034: Impossibilité d'insérer un saut de ligne dans un modèle de courriel ajouté
Mis à jour par Benjamin Drieu il y a plus de 6 ans
- Statut changé de Un jour peut-être à En cours de traitement
Le modèle finalement choisi est Antwort, qui a l'avantage d'être mobile-friendly et annonc une compatibilité intéressante : https://github.com/InterNations/antwort
En tout cas, il fonctionne correctement avec k9mail par exemple.
Mis à jour par Benjamin Drieu il y a plus de 6 ans
- Fichier mail_view_images_off.png mail_view_images_off.png ajouté
- Fichier pane_view_images_off.png pane_view_images_off.png ajouté
- Fichier mail_view_images_off.png mail_view_images_off.png ajouté
- Fichier pane_view_images_off.png pane_view_images_off.png ajouté
- Fichier pane_view_images_off.png pane_view_images_off.png ajouté
- Fichier mail_view_images_off.png mail_view_images_off.png ajouté
Mis à jour par Benjamin Drieu il y a plus de 6 ans
En attachement de cette demande des screenshots de prévisualisation faits par un service en ligne.
Mis à jour par Frédéric Couchet il y a plus de 6 ans
Propositions générales suite à mes tests sur le courriel « Relance concernant votre cotisation individuelle à l'April [identifiant : {$additional.nickname}]'? » template_id = 33)
- ajouter le numéro de téléphone de l'April : 01 78 76 92 80 après « L'équipe Vie associative secretaire@april.org »
- ajouter le numéro de téléphone de l'April à la fin du courriel au niveau du logo et de l'adresse
- modifier l'adresse dans « Chèque bancaire Vous pouvez envoyer votre chèque à l'ordre de l'April à l'adresse suivante : Association April 44/46 rue de l'Ouest 75014 Paris France » en mettant
April 44/46 rue de l'Ouest, Bâtiment 8, 75014 Paris France
- modifier « Vous pouvez régler en espèces en remettant la somme en main propre à un membre du conseil d'administration » par
« Vous pouvez régler en espèces en remettant la somme en main propre à un membre du conseil d'administration ou de l'équipe salariée »
- Dans la signature, l'url du site de l'April devrait être en https non ? :
Association APRIL 44-46 rue de l'Ouest Bâtiment 8 75014 PARIS Tél : 01 78 76 92 80 www.april.org [http://www.april.org]
- faire les mêmes modifications dans les autres templates
Mis à jour par Frédéric Couchet il y a plus de 6 ans
Test de clonage de courriel, ça a l'air ok (j'ai cloné le template id=213 « Nous avons besoin de votre aide pour animer le stand April aux RMLL » en id=304 « Nous avons besoin de votre aide pour animer le stand April aux RMLL - Test Fred »). J'ai fait des modifications sur le template cloné et c'est ok.
Mis à jour par Frédéric Couchet il y a plus de 6 ans
Test d'édition d'un modèle, ça a l'air ok. Test fait sur le modèle « Nous avons besoin de votre aide pour animer le stand April aux RMLL - test Fred » (id=304).
J'ai modifié pour ajouter les dates, le lieu. J'ai aussi modifié les urls des RMLL et de la page wiki. Pour le site des RMLL j'ai juste tapé l'url du site (mauvaise pratique en terme d'accessibilité), pour la page wiki j'ai sélectionné « vous inscrire sur la page wiki dédiée » et cliqué sur le bouton « Insérer un lien » (bonne pratique). Pour les deux, c'est ok lors de la lecture du courriel(version texte, version html).
Mis à jour par Frédéric Couchet il y a plus de 6 ans
Test d'ajout d'un modèle de courriel ok (« Test Fred - ignorer », id=305). Création du modèle, ajout de texte, envoi/réception ok.
Mis à jour par Frédéric Couchet il y a plus de 6 ans
Le champ « Répondre à » des modèles de courriel ne semble pas pris en compte.
Envoi du courriel « Nous avons besoin de votre aide pour animer le stand April aux RMLL » (id=213). Dans le modèle de courriel, le champ "Répondre à" a pour valeur evenements@april.org mais à la réception du courriel le champ Reply-To du courriel n'est pas présent.
Il n'y a pas ce problème avec le même modèle en production.
Il est probable que le problème est valable pour tous les modèles.
Mis à jour par Frédéric Couchet il y a plus de 6 ans
Note concernant le template de courriel « Nous avons besoin de votre aide pour animer le stand April aux RMLL » (id=213) :
Les dates, page wiki exactes ne sont pas indiquées (vu que cela doit être un template générique pour les RMLL) mais dans la signature il y a
« Vous recevez ce mail car vous avez indiqué lors de votre adhésion que vous vivez dans la région Auvergne-Rhône-Alpes. »
Il faudrait peut-être ne pas spécifier la région dans le template ou mettre … comme pour les dates.
Isa : c'est corrigé.
Mis à jour par Frédéric Couchet il y a plus de 6 ans
Remplacer partout « mail » par « courriel ».
Mis à jour par Frédéric Couchet il y a plus de 6 ans
Proposition : modifier la couleur des titres des courriels.
Pour le modèle « Relance concernant votre cotisation individuelle à l'April [identifiant : fcouchet] » dans le corps du message le titre « Relance concernant votre cotisation individuelle à l'April [identifiant : fcouchet] » s'affiche en rouge, je suppose que c'est volontaire car c'est un courriel de relance. J'ai testé un autre template ("Nous avons besoin de votre aide pour animer le stand April à Pas Sage en Seine") et le titre est également en rouge.
Le rouge est souvent une couleur associée à des messages très importants, à traiter en urgence. Et c'est une couleur pour les alertes, dangers (le rouge est le niveau maximal dans les codes d'alertes). D'où l'utilité potentielle pour un courriel de relance de paiement de cotisation. Mais pour un courriel d'un autre tupe, cela peut être déplacé d'utiliser le rouge.
Pourquoi ne pas utiliser le bleu April pour le titre des autres courriels et ne garder le rouge que pour les courriels de relance pour les retards de cotisation ?
Mis à jour par Frédéric Couchet il y a plus de 6 ans
Test de lecture mutt, affichage version html :
le logo ne s'affiche pas, si je fais clic-droit et « Afficher l'image dans un nouvel onglet » j'ai comme message « Impossible d’afficher ce site Web Le site à l’adresse cid:// paraît indisponible. Il est peut-être momentanément inaccessible ou a été déplacé à une autre adresse. Pensez quand même à vérifier le bon fonctionnement de votre connexion à Internet ».
Avec firefox, clic-droit (cid:logo-april.png apparaît dans la barre d'url) et message d'erreur « L’adresse n’a pas été reconnue. Firefox ne sait pas ouvrir cette adresse car l’un des protocoles suivants (cid) n’est associé à aucun programme ou n’est pas autorisé dans ce contexte. Il est peut-être nécessaire d’installer une autre application pour ouvrir ce type d’adresse. »
Mais bon, c'est peut-être lié au fait que j'utilise pas mutt, sauf pour ce test, et qu'il y a peut-être un problème de configuration de mon côté.
Mis à jour par Frédéric Couchet il y a plus de 6 ans
- Fichier relance-courriels-html-gnus.png relance-courriels-html-gnus.png ajouté
Test avec Emacs 25.2.2/Gnus v5.13 : Gnus affiche bien le contenu en texte les urls sont bien reconnues), et en html (le logo April s'affiche bien).
Le courriel html a un fond blanc pour le texte, l'affichage sous Gnus n'est pas top, voir copie-écran. Mais le problème est peut-être du côté de Gnus.
Mis à jour par Frédéric Couchet il y a plus de 6 ans
Passage du validateur https://validator.w3.org/check sur le contenu html du courriel :
- des erreurs liées à xmlns:v="urn:schemas-microsoft-com:vml" et xmlns:o="urn:schemas-microsoft-com:office:office">, je ne sais pas à quoi servent ces lignes et si elles sont utiles
- des erreurs no attribute "LEFTMARGIN", "TOPMARGIN" et autres du même genre
- des erreurs liées à &key mais je ne sais pas si c'est corrigeable
- Line 226, Column 4: end tag for element "P" which is not open
C'est au niveau de :
<h2>Résiliation</h2> <p>Si vous ne souhaitez pas renouveler, merci de m'en informer (secretaire@april.org) pour que je mette fin à votre adhésion. </p> </p>
- Il faudrait passer un validateur sur les modèles
Mis à jour par Frédéric Couchet il y a plus de 6 ans
Dans le modèle « Relance concernant votre cotisation individuelle à l'April », il y a du texte qui est à la première personne alors que le courriel est signé « L'équipe Vie associative » donc plusieures personnes.
Exemples :
- « N'hésitez pas à me contacter si vous avez des questions ou des remarques. »
- « Je vous invite donc »
- « prévenez-moi pour que je mette en place »
- « pour que je mette fin à votre adhésion. »
- etc.
Il faudrait peut-être remplacer par « N'hésitez pas à nous contacter », « Nous vous invitons », « prévenez-nous pour que nous mettions », « pour que nous mettions fin » etc.
Et faire de même dans les autres templates.
....
Mis à jour par Benjamin Drieu il y a environ 6 ans
Frédéric Couchet a écrit :
Proposition : modifier la couleur des titres des courriels.
Pourquoi ne pas utiliser le bleu April pour le titre des autres courriels et ne garder le rouge que pour les courriels de relance pour les retards de cotisation ?Benj : OK, fait.
Tu as changé la couleur des titres de tous les courriels qui sont désormais en bleu. C'est évidemment mieux que tous les titres en rouge mais est-il possible que les courriels de relance pour des retards soient en rouge ?
Mis à jour par Benjamin Drieu il y a environ 6 ans
Frédéric Couchet a écrit :
Test de lecture mutt, affichage version html :
le logo ne s'affiche pas, si je fais clic-droit et « Afficher l'image dans un nouvel onglet » j'ai comme message « Impossible d’afficher ce site Web Le site à l’adresse cid:// paraît indisponible. Il est peut-être momentanément inaccessible ou a été déplacé à une autre adresse. Pensez quand même à vérifier le bon fonctionnement de votre connexion à Internet ».
Avec firefox, clic-droit (cid:logo-april.png apparaît dans la barre d'url) et message d'erreur « L’adresse n’a pas été reconnue. Firefox ne sait pas ouvrir cette adresse car l’un des protocoles suivants (cid) n’est associé à aucun programme ou n’est pas autorisé dans ce contexte. Il est peut-être nécessaire d’installer une autre application pour ouvrir ce type d’adresse. »
Mais bon, c'est peut-être lié au fait que j'utilise pas mutt, sauf pour ce test, et qu'il y a peut-être un problème de configuration de mon côté.
Visiblement, mutt ne sait pas gérer les cid: (standard pour insérer des images dans un courriel). Les autres possibilités sont: des liens des images externes (bloqués la plupart des fois), incorporer l'image en base64 (pas mieux) ou pas d'image du tout.
Si tu as enregistré l'HTML et tu l'as ouvert dans firefox, c'est normal vu que cid: est pur mail.
Mis à jour par Benjamin Drieu il y a environ 6 ans
Frédéric Couchet a écrit :
Test avec Emacs 25.2.2/Gnus v5.13 : Gnus affiche bien le contenu en texte les urls sont bien reconnues), et en html (le logo April s'affiche bien).
Le courriel html a un fond blanc pour le texte, l'affichage sous Gnus n'est pas top, voir copie-écran. Mais le problème est peut-être du côté de Gnus.
Oui c'est pas top, c'est dû au fait qu'on a deux tables enchassées l'une dans l'autre (pour des raisons de mise en page) et Gnus se débrouille comme il peut (donc mal).
Mis à jour par Benjamin Drieu il y a environ 6 ans
Frédéric Couchet a écrit :
Passage du validateur https://validator.w3.org/check sur le contenu html du courriel :
Tout est corrigé
Mis à jour par Benjamin Drieu il y a environ 6 ans
- Statut changé de En cours de traitement à Résolu
Implémenté et mis en production.
Mis à jour par Isabella Vanni il y a environ 6 ans
- Lié à Demande #3338: Éviter que le ponctuation précédée par un espace insécable aille à la ligne ajouté
Mis à jour par Isabella Vanni il y a environ 6 ans
- Lié à Demande #3339: Faire des modifications dans le AR de paiement par CB ajouté
Mis à jour par Isabella Vanni il y a environ 6 ans
- Lié à Demande #3284: Virer la ligne "Inscription liste" du message de confirmation de la demande d'adhésion ajouté
Mis à jour par Isabella Vanni il y a environ 6 ans
- Lié à Demande #3346: Faire des modifications dans les messages annonçant les demandes d'adhésion ajouté
Mis à jour par Isabella Vanni il y a environ 6 ans
- Lié à Demande #3284: Virer la ligne "Inscription liste" du message de confirmation de la demande d'adhésion supprimé
Mis à jour par Frédéric Couchet il y a environ 6 ans
Benjamin Drieu a écrit :
Frédéric Couchet a écrit :
Test de lecture mutt, affichage version html :
le logo ne s'affiche pas, si je fais clic-droit et « Afficher l'image dans un nouvel onglet » j'ai comme message « Impossible d’afficher ce site Web Le site à l’adresse cid:// paraît indisponible. Il est peut-être momentanément inaccessible ou a été déplacé à une autre adresse. Pensez quand même à vérifier le bon fonctionnement de votre connexion à Internet ».
Avec firefox, clic-droit (cid:logo-april.png apparaît dans la barre d'url) et message d'erreur « L’adresse n’a pas été reconnue. Firefox ne sait pas ouvrir cette adresse car l’un des protocoles suivants (cid) n’est associé à aucun programme ou n’est pas autorisé dans ce contexte. Il est peut-être nécessaire d’installer une autre application pour ouvrir ce type d’adresse. »
Mais bon, c'est peut-être lié au fait que j'utilise pas mutt, sauf pour ce test, et qu'il y a peut-être un problème de configuration de mon côté.
Visiblement, mutt ne sait pas gérer les cid: (standard pour insérer des images dans un courriel). Les autres possibilités sont: des liens des images externes (bloqués la plupart des fois), incorporer l'image en base64 (pas mieux) ou pas d'image du tout.
Si tu as enregistré l'HTML et tu l'as ouvert dans firefox, c'est normal vu que cid: est pur mail.
ok, laissons ainsi alors.
Mis à jour par Frédéric Couchet il y a environ 6 ans
Benjamin Drieu a écrit :
Frédéric Couchet a écrit :
Passage du validateur https://validator.w3.org/check sur le contenu html du courriel :
Tout est corrigé
super, merci
Mis à jour par Frédéric Couchet il y a environ 6 ans
- Statut changé de Fermé à En cours de traitement
Suite aux relances du 8 octobre 2018 j'ai noté quelques bugs :
- Par exemple, pour le modèle « Accusé de réception de paiement par carte bancaire pour » (modèle accuse-reception-cb) dans la version texte du courriel il manque des retours à la ligne pour la partie concernant les informations de paiement. Exemple avec le membre #5301 :
* Date de l'opération : le 09/10/2018 a 08:13:20 * Référence : 05301201810090812 * Montant : 20 Pour information, la prochaine date de renouvellement de votre cotisation est le 28/05/2019.
- Il manque aussi des retours à la ligne dans les modèles de relances concernant l'adresse postale de l'April qui s'affiche ainsi :
April 44/46 rue de l'Ouest Bâtiment 8 75014 Paris France
Il faudrait corriger ça.
Il y a peut-être d'autres problèmes, à vérifier.
À noter que les courriels sont passés de « X-Bogosity: Ham » à « X-Bogosity: Unsure » après passage de bogofilter sur mon laptop, mais c'est sans doute juste lié au fait que les courriels soient désormais en multipart.
Mis à jour par Frédéric Couchet il y a environ 6 ans
Benjamin Drieu a écrit :
Frédéric Couchet a écrit :
Proposition : modifier la couleur des titres des courriels.
Pourquoi ne pas utiliser le bleu April pour le titre des autres courriels et ne garder le rouge que pour les courriels de relance pour les retards de cotisation ?Benj : OK, fait.
Tu as changé la couleur des titres de tous les courriels qui sont désormais en bleu. C'est évidemment mieux que tous les titres en rouge mais est-il possible que les courriels de relance pour des retards soient en rouge ?
Réponse de benj sur irc : j'ai supprimé le titre en fait car c'était une redite avec le sujet du mail
Mis à jour par Frédéric Couchet il y a environ 6 ans
Frédéric Couchet a écrit :
Le champ « Répondre à » des modèles de courriel ne semble pas pris en compte.
Envoi du courriel « Nous avons besoin de votre aide pour animer le stand April aux RMLL » (id=213). Dans le modèle de courriel, le champ "Répondre à" a pour valeur evenements@april.org mais à la réception du courriel le champ Reply-To du courriel n'est pas présent.
Il n'y a pas ce problème avec le même modèle en production.
Il est probable que le problème est valable pour tous les modèles.
réponse de benj sur irc : c'est corrigé
Mis à jour par Benjamin Drieu il y a environ 6 ans
- Statut changé de En cours de traitement à Résolu
Modifications prises en compte.