Bonjour Loïc,
Savez-vous quel outil utilisait les précédentes personnes pour envoyer le mail en HTML pour tester? Car je viens de faire des tests d’envoi avec la boîte mail MAC mais j’ai des souci de design sur les logos Facebook et autre.
Je me dis que le mieux est peut être la première solution (utiliser phpList) pour être vraiment iso dans les conditions de tests.
Bonjour Justine!
@Blsd utilisait phpList. De mon coté j’utilisais un script barbare pour simuler l’envoi à partir de la ligne de commande. Si vous êtes à l’aise avec ça je peux vous communiquer les éléments.
Oui, je vous envoie les codes d’accès en message privé tout de suite. Les liens vers les pages contenant le éléments et la façon d’envoyer le courriel de test sont ici. Pour vous permettre de le faire j’ai importé votre email. N’hésitez pas à me dire si quelque chose est confus: l’interface peut être déroutante 
C’est vraiment bien qu’on entre dans le vif du sujet: c’est précisément le genre de soucis qu’il s’agit de corriger. A contrario la newsletter doit s’afficher correctement via GMail, roundcube, sogo, thunderbird ou evolution.
Super merci ! J’ai réussi à faire mon premier test depuis phpList, la procédure était très claire.
Pour être sûre d’adresser les bons problèmes, je vous joins les captures du mail reçu sur un iphone en l’ouvrant avec la boite mail iOS. Les problèmes que je vois sont les suivants:
Y-a-t-il d’autres points ?
En fait quand je compare à Gmail, les problèmes sont assez flagrants. L’idée est d’obtenir le même rendu que sur Gmail.
Est-ce possible de modifier le brouillon de la campagne “Base newsletter régulière” ? Je ne voudrais pas casser l’existant. Sinon on peut peut être le dupliquer ? Sinon si ce n’est pas le cas, je veux bien vos scripts
Merci
Bonjour,
Je prends la discussion en cours de route, je vais essayer de répondre correctement mais si je suis un peu à côté de la plaque, n’hésitez pas à me dire (je reviens de 3 semaines de déconnexion, faut se remettre dans le bain ^^")
Merci d’avoir fait cet effort de doubler le test et comparer visuellement, c’est beaucoup plus facile que d’expliquer le détail des points qui pêchent textuellement !
Les deux problèmes principaux sont effectivement l’affichage du header et l’agencement des articles.
(Enfin pour ce qui est de l’intégration CSS∕HTML)
De mémoire, le pied de page ne posait pas problème mais cela reste à vérifier car je n’ai plus les tests disponibles.
Ce que j’ai fait, si ça te convient, c’est que j’ai créé une campagne similaire (j’ai simplement tout copié-collé aux bons endroits) sur laquelle tu peux faire tout ce que tu veux 
Elle s’appelle “Test 3 formats pour Justine” !
Par contre, à savoir : il y a, en fait, 3 types de newsletter qui sont tous les trois similaires (ils ont le même CSS, le même header et pied de page) mais correspondent à 3 cas différents d’envoi de mail. Les 3 sont regroupés dans le brouillon de campagne “Test 3 formats” : c’est pour ça que j’ai utilisé celui-ci pour créer un brouillon de campagne sur lequel tu peux tout modifier.
En réalité, seule la partie équivalant à “Base newsletter régulière” pose réellement problème mais je trouve toujours préférable d’avoir les 3 dans le même test pour voir s’il n’y a pas des problèmes ailleurs.
Si ce n’est pas clair, ou si tu préférais la version plus simple, n’hésite pas, je créerai un nouveau brouillon sans problème !
Merci beaucoup en tout cas, et hâte de travailler avec toi sur cette newsletter ! C’est vraiment l’outil qu’on peine à perfectionner et qui est d’une importance cruciale pour les activités de l’association
Bonjour,
Pour mémoire, je consigne ici les résultats des tests effectués avec le code remanié par @arthurhavlicek de sorte à remplacer les div par des tables (cf. : renommage_table.html (25.4 KB). A titre indicatif, dans phpList, il s’agit du brouillon “Test tables”)
Malheureusement, le résultat n’est pas particulièrement plus probant sur iPhone :
le header fait toujours n’importe quoi :
versus ceci en Gmail Android :
l’agencement des articles ne me semble pas réglé non plus (à noter que je suis parvenue à résoudre le problème de superposition texte / image a posteriori) :
Les images sont toujours relativement petites par rapport au résumé. La taille des images et/ou du texte ne s’adapte manifestement pas en fonction de la largeur de l’écran.
Par ailleurs, la propriété vertical-align: top dans le CSS ne semble pas fonctionner.
Bonjour!
Merci c’est très clair.
Merci pour la campagne de test que tu m’as créé !
Et pour le récap de ce qui a déjà été testé.
Je pense que j’ai tous les éléments nécessaires pour commencer des tests.
Je vous tiens au courant
Justine
Super
N’hésite pas si tu as d’autres questions ou besoin d’autre chose !
Bonjour,
J’ai commencé par travailler sur l’agencement des blocs dans les sections sur iOs.
J’ai dû modifier le modèle de campagne ‘Newsletter type’, car tout le css s’y trouve. J’ai sauvegardé le fichier chez moi d’abord mais j’ai vu qu’il y a également un modèle sauvegarde que je n’ai pas touché.
Voici ce que j’ai réussi à obtenir pour l’instant (je ne peux publier qu’une image par post je vais donc faire cela en plusieurs posts):
Boîte mail Apple sur Macbook :
Boite mail Apple sur iPhone 7 : cf post associé
Gmail : cf post associé
L’image est peut être un peu petite sur Gmail, je pourrai regarder pour l’avoir un peu plus grande si possible.
Je peux également centrer verticalement l’image par rapport au texte.
Que pensez-vous de cette première modification ?
Justine
Boite mail Apple sur iPhone 7 :
Gmail :
Oui, j’ai fait cette sauvegarde cette semaine, elle permettra donc de comparer. Bien vu!
Tes permissions ont été changées pour lever toutes les restrictions, désolé pour l’inconfort que ça a généré 
Alors je serais bien incapable de juger de l’aspect esthétique. Par contre en faisant un diff du modèle j’ai pu apprécier le coté minimaliste des modifications 
--- a2.txt 2020-08-28 10:32:49.485743716 +0200
+++ a1.txt 2020-08-28 10:32:08.026221760 +0200
@@ -331,20 +331,20 @@
border-color: #000000;
}
- .infolettre .chapter-left {
- display: inline-block;
- width: 20%;
+ .infolettre .chapter-container{
+ display: flex;
+ flex-direction:row;
+ justify-content: space-around;
}
- .infolettre .chapter-left img {
- width: 100%;
+ .infolettre .chapter-left {
+ width: 30%;
+ flex:1;
}
.infolettre .chapter-right {
- margin-left: 5%;
- vertical-align: top;
- width: 74%;
- display: inline-block;
+ margin-left: 10%;
+ flex:3;
}
/* FOOTER */
Bonjour Loïc,
Top! À qui dois-je m’adresser pour faire valider les changements esthétiques ?
C’est plutôt @Blsd qui saura te faire un retour sur le fait que l’aspect est celui qui est voulu. Moi je ne suis que le geek de service 
Tant que l’aspect, quel que soit le support, est fidèle à
je pense que le reste tient du détail. Mais … parfois le diable est dans les détails 
Salut Justine,
Merci pour tout ça déjà 
C’est vraiment très bien pour l’agencement des articles
Je pense que c’est mieux avec l’image en haut. Avec la différence de taille entre l’image et le texte (surtout sur la boite mail de l’iPhone 7), je trouve que ça ne serait pas terrible si l’image était centrée.
D’ailleurs, je me demandais s’il y avait un moyen que la taille de l’image et celle des textes (titre et résumé) s’ajustent de sorte à ce qu’il n’y ait pas cette différence et que la hauteur de l’image corresponde grosso modo à la hauteur du texte ?
En regardant la capture d’écran de l’iPhone 7, je me demande si c’est possible de modifier ça et que le texte reste lisible. J’ai l’impression que si on grossit l’image et diminue le texte en parallèle, le texte sera trop petit pour la lecture.
Dernière question / remarque concernant les tests Gmail :
Les tests sur Gmail sont sous Gmail web ou mobile ?
On avait eu des soucis avec la version mobile (sous Android) alors que la version web marchait bien en parallèle. Si besoin de faire des tests sous Gmail-Android, tu peux envoyer à l’adresse blandine.sillard@gmail.com
J’ai l’impression qu’il y a un décalage sur le texte du 2è article, par rapport au 1er, ici plus précisément :
Ce n’est pas très gênant à ce stade (ça n’empêche pas la lecture et le rendu visuel reste élégant) mais je le signale au cas où ce soit simple à régler (je sais pas que j’ai bidouillé un peu le code, de manière assez artisanale, parfois, pour régler des petits soucis dont je ne comprenais pas l’origine et il peut suffire parfois de supprimer un attribut inopportun)
Je n’ai pas l’impression de retrouver ce décalage sur les autres affichages (boîte mail Macbook et iPhone 7).
Désolée si j’ai mis un peu de temps à répondre, je me suis concentrée sur autre chose en fin de semaine dernière et puis il y a eu le week-end où j’ai été moins disponible
N’hésite pas à me dire si tu as des échéances ou un planning en tête, ça m’aidera à prioriser et à te répondre dans le délai qui te convient à toi et qui t’arrange !
Ca me fait penser que ce serait vraiment top si, à la fin, on pouvait faire un point pour que je connaisse et comprenne toutes les modifs apportées (de sorte à pouvoir travailler le code comme je veux en autonomie par la suite). Je le signale dès maintenant car je me dis que cela peut influer sur la manière de travailler, les notes prises ou je ne sais quoi…
Juste pour information à ce sujet (notamment pour @justinem qui travaille dessus en ce moment) je vais envoyer prochainement (quelque part avant la fin de la semaine idéalement ) une nouvelle newsletter.
Cela n’est pas lié au travail d’amélioration : on a convenu que la version actuelle était suffisamment satisfaisante pour que la newsletter reprenne du service (il faut savoir qu’aucune NL n’a été envoyée depuis fin 2019 et que c’est clairement pénalisant) mais que son amélioration restait une priorité n°1 car elle était loin de l’être assez (satisfaisante).
C’est ce qui permet, par contre, de réduire l’urgence, à défaut de diminuer la priorité
Bonjour Blsd,
Je n’ai pas d’échéances ou de planning en tête, j’essaie d’y consacrer du temps dès que j’en ai. Je travaille la journée donc je n’ai pas forcément beaucoup de temps en semaine. J’aurai sûrement un peu de temps ce week-end.
C’était des tests sur Gmail mobile. Je penserai à tester les 2 en effet.
Je vais regarder ce que je peux faire pour l’alignement en haut entre image et texte ce week-end.
Et pour le décalage sur le 2è article également.
Si nous conservons bien la sauvegarde, nous aurons toutes les modifications apportées grâce à un diff entre les 2 fichiers. Je peux également noter dans les grandes lignes les modifications apportées dans une prise de note à côté.
Bonne soirée,
Justine
Très bien ! C’était juste pour être sûre de te répondre dans des temps qui te conviennent
Ok parfait, c’était le plus problématique !
On peut fonctionner avec un diff, c’est juste qu’il faudra surement me l’expliquer car j’ai un peu de mal à le lire
Et aussi parce que je ne connais pas, souvent, les attributs que tu as ajoutés / modifiés. J’apprends l’html sur le tas en reproduisant des codes observés par ci par là donc je ne connais pas ce que je n’ai jamais eu l’occasion de voir !
Bonjour,
Je n’ai pas eu beaucoup de temps disponible et n’ai donc pas encore eu le temps de faire d’autres modifications. Je vous tiens au courant, bonne journée Justine
Ok @justinem, merci beaucoup de tenir au courant !
Refais signe quand tu es disponible.
On a envoyé la première newsletter sans trop de casse mais on sait que ce n’est pas passé partout !