Project

General

Profile

Demande #2755

Rendre possible d'envoi de courriels en HTML

Added by Benjamin Drieu almost 3 years ago. Updated almost 2 years ago.

Status:
Résolu
Priority:
Normale
Target version:
-
Start date:
11/12/2017
Due date:
% Done:

0%

Estimated time:

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.


Files

20171101-lettre-information-publique-courriel-partie-html.html (8.91 KB) 20171101-lettre-information-publique-courriel-partie-html.html Frédéric Couchet, 11/13/2017 11:52 AM
mail_view_images_off.png (202 KB) mail_view_images_off.png Benjamin Drieu, 04/30/2018 04:41 PM
pane_view_images_off.png (50.3 KB) pane_view_images_off.png Benjamin Drieu, 04/30/2018 04:41 PM
pane_view_images_off.png (42.7 KB) pane_view_images_off.png Benjamin Drieu, 04/30/2018 04:41 PM
mail_view_images_off.png (71.4 KB) mail_view_images_off.png Benjamin Drieu, 04/30/2018 04:41 PM
pane_view_images_off.png (72.7 KB) pane_view_images_off.png Benjamin Drieu, 04/30/2018 04:42 PM
mail_view_images_off.png (223 KB) mail_view_images_off.png Benjamin Drieu, 04/30/2018 04:42 PM
relance-courriels-html-gnus.png (172 KB) relance-courriels-html-gnus.png Frédéric Couchet, 07/10/2018 02:26 PM

Related issues

Related to gDTC - Demande #2765: Permettre d'agrandir la prévisualisation des modèles de mailingFermé11/15/2017

Actions
Related to gDTC - Demande #2961: M'aider à faire les lignes de la bonne longueur dans un modèle de messageFermé02/20/2018

Actions
Related to gDTC - Anomalie #3034: Impossibilité d'insérer un saut de ligne dans un modèle de courrielFermé03/21/2018

Actions
Related to gDTC - Demande #3338: Éviter que le ponctuation précédée par un espace insécable aille à la ligneRésolu10/04/2018

Actions
Related to gDTC - Demande #3339: Faire des modifications dans le AR de paiement par CBRésolu10/04/2018

Actions
Related to gDTC - Demande #3346: Faire des modifications dans les messages annonçant les demandes d'adhésionAttente d'information10/05/2018

Actions

Associated revisions

Revision b7efdb46 (diff)
Added by Benjamin Drieu almost 2 years ago

Intégration des remarques de Fred (ref: #2755)

Revision b21ed19c (diff)
Added by Benjamin Drieu almost 2 years ago

Fix reply-to (ref: #2755)

History

#1

Updated by Benjamin Drieu almost 3 years ago

Par bonnes pratiques, j'entends HTML valide + accessible et multipart text+html

#2

Updated by Frédéric Couchet almost 3 years ago

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.

#3

Updated by Isabella Vanni over 2 years ago

  • Related to Demande #2765: Permettre d'agrandir la prévisualisation des modèles de mailing added
#4

Updated by Isabella Vanni over 2 years ago

  • Related to Demande #2961: M'aider à faire les lignes de la bonne longueur dans un modèle de message added
#5

Updated by Benjamin Drieu over 2 years ago

  • Related to Anomalie #3034: Impossibilité d'insérer un saut de ligne dans un modèle de courriel added
#6

Updated by Benjamin Drieu over 2 years ago

  • Status changed from Un jour peut-être to 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.

#8

Updated by Benjamin Drieu over 2 years ago

En attachement de cette demande des screenshots de prévisualisation faits par un service en ligne.

#9

Updated by Frédéric Couchet about 2 years ago

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 »

- 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

#10

Updated by Frédéric Couchet about 2 years ago

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.

#11

Updated by Frédéric Couchet about 2 years ago

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

#12

Updated by Frédéric Couchet about 2 years ago

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.

#13

Updated by Frédéric Couchet about 2 years ago

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

#14

Updated by Frédéric Couchet about 2 years ago

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

#15

Updated by Frédéric Couchet about 2 years ago

Remplacer partout « mail » par « courriel ».

#16

Updated by Frédéric Couchet about 2 years ago

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 ?

#17

Updated by Frédéric Couchet about 2 years ago

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

#18

Updated by Frédéric Couchet about 2 years ago

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.

#19

Updated by Frédéric Couchet about 2 years ago

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

#20

Updated by Frédéric Couchet about 2 years ago

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

#21

Updated by Benjamin Drieu almost 2 years ago

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 ?

#22

Updated by Benjamin Drieu almost 2 years ago

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.

#23

Updated by Benjamin Drieu almost 2 years ago

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

#24

Updated by Benjamin Drieu almost 2 years ago

Frédéric Couchet a écrit :

Passage du validateur https://validator.w3.org/check sur le contenu html du courriel :

Tout est corrigé

#25

Updated by Benjamin Drieu almost 2 years ago

  • Status changed from En cours de traitement to Résolu

Implémenté et mis en production.

#26

Updated by Isabella Vanni almost 2 years ago

  • Related to Demande #3338: Éviter que le ponctuation précédée par un espace insécable aille à la ligne added
#27

Updated by Isabella Vanni almost 2 years ago

  • Status changed from Résolu to Fermé
#28

Updated by Isabella Vanni almost 2 years ago

  • Related to Demande #3339: Faire des modifications dans le AR de paiement par CB added
#30

Updated by Isabella Vanni almost 2 years ago

  • Related to Demande #3284: Virer la ligne "Inscription liste" du message de confirmation de la demande d'adhésion added
#31

Updated by Isabella Vanni almost 2 years ago

  • Related to Demande #3346: Faire des modifications dans les messages annonçant les demandes d'adhésion added
#32

Updated by Isabella Vanni almost 2 years ago

  • Related to deleted (Demande #3284: Virer la ligne "Inscription liste" du message de confirmation de la demande d'adhésion )
#34

Updated by Frédéric Couchet almost 2 years ago

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.

#35

Updated by Frédéric Couchet almost 2 years ago

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

#36

Updated by Frédéric Couchet almost 2 years ago

  • Status changed from Fermé to 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.

#37

Updated by Frédéric Couchet almost 2 years ago

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

#38

Updated by Frédéric Couchet almost 2 years ago

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

#39

Updated by Benjamin Drieu almost 2 years ago

  • Status changed from En cours de traitement to Résolu

Modifications prises en compte.

Also available in: Atom PDF