@arthurhavlicek la Maison des Lanceurs d’Alerte a articulé les raisons pour éviter Slack et les autres services de ce genre. Cela explique (j’espère) la réticence que nous pouvons avoir à y aller. Cependant, si c’est un peu gênant de votre coté j’y viendrais, bien sur. Ce serait vraiment dommage de se priver de votre compagnie pour ce genre de détails technique. Et je comprends d’autant mieux votre situation que c’est exactement celle de la plupart des organisations qui se lancent 
1 Like
pourquoi pas un Framateam plutôt ?
Je plaide coupable, je ne connaissais pas l’offre cloud. C’est dans tous les cas du temporaire pour notre propre noeud mattermost, qui va venir assez vite. Après, prendre des capacités ce n’est pas forcément soutenir, donc sur l’impact de notre choix je reste mitigé. On est pas trop préoccupés par la privacy dans notre usage de la messagerie, c’est plutôt assez publique notre activité.
Mais oui. On sait jamais, pour transmettre des secrets… donnez nous 1 à 2 semaines.
Pour les problèmes d’alignement j’ai souvent entendu que le plus compatible c’est d’utiliser de bons vieux < table >. J’ai un doute sur la capacité d’un client mail de lire les media queries.
1 Like
Formidable Dans l’interim je viendrais volontiers discuter sur Slack et faire connaissance: mon courriel pour l’invitation loic@dachary.org.
1 Like
Ahah! Aucun problème, on ne peut pas tout connaître 
Et comme l’a dit loic, on fait bien comme on peut quand on se lance et on adapte en avançant, je connais très bien cette problématique !
Ok merci pour le tip !
Passer par des table me demanderait de refaire une bonne partie de mon code et ça me déprime d’avance 
(j’ai 0 connaissance en html à la base, j’apprends sur le tas et ça me demande un temps fou pour un truc ultra basique)
Mais je le note dans la liste des choses à tester / faire pour améliorer la situation à moyen terme !!
1 Like
Pour un soutien plus concret on aurait besoin d’un exemple de code, on devra se coordonner avec toi pour tester sur iPhone. Je peux proposer une façon de le refactorer si tu veux. Je ne sais pas ce que tu trouves pratique pour échanger du code, sachant que pour le moment on a pas nos propres serveurs.
On peut échanger par mail, c’est moins pratique qu’un git ou un service cloud mais comme je peux tester sur client en local c’est tout à fait faisable. Mail hors gafam depuis peu disponible à contact@lespiratesdecroissance.fr
1 Like
Je m’adapte
Je ne sais pas utiliser un git de toute façon
A la rigueur, un pad en dehors des gafams c’est tout ce que je vois !
Je peux envoyer mon code de base par mail sans souci mais il faudra être indulgent : j’ai appris l’html en le faisant presque !
Après je peux aussi vous rejoindre sur Slack (ou ailleurs) si vous voulez en discuter en direct à un moment car il y a des petites subtilités pas forcément évidentes vues de l’extérieur
Bref, je peux vous envoyer ça et être dispo comme et quand ça vous arrange (sauf au mois d’août )
Pour l’iPhone, on a une nouvelle membre de l’équipe qui en a un et à qui je pourrai demander pour faire des tests !
2 Likes
On est conscient qu’il y a rien d’urgent comparé à d’autres projets mais plus tôt on a les détails plus tôt on peut s’organiser, donc j’ai envie de dire envoie-nous un mail dès que possible. Avec ton adresse je pourrais t’inviter sur Slack et tu nous fera part des détails techniques.
Il n’y a aucune honte à pas avoir fait du code propre, si tu savais le nombre de professionels qui font de temps en temps des choses très sales. Si je devais m’arrêter à ça je pense que j’aurais changé de métier. Je suis plutôt admiratif que tu aies fait quelque chose d’aussi technique sans que ce soit ta formation
2 Likes
Pour info/suivi, suite aux retours d’Arthur (merci 
) je vais tester les solutions suivantes :
- insérer * {-webkit-text-size-adjust: none} dans le CSS
- redéfinir la police du titre en em plutôt qu’en pt
La suite au prochain épisode…
Cool @arthurhavlicek ça m’interesse de suivre l’évolution de l’histoire. Pour éviter de te faire répéter ce que tu as déjà écrit à Blandine, est-ce que tu pourrais le copier ici ?
Ce que j’ai mis est séparé en deux mail donc pour plus de clareté je vais résumer.
Le problèmes css du titre est lié à une taille de police trop grande par rapport à la place prévue ce qui provoque les contenus de taille variable (les deux autres colonnes du tableau) à être redimensionnés trop petits. Ce problème n’aparaissant que sur iPhone et les polices étant de tailles raisonnable par ailleurs, j’ai fait des recherches (1, 2) qui m’ont amené vers une propriéte css qui, par défaut activée sur iPhone, peut redimensionner les polices de caractère. La désactiver devrait résoudre le problème de la banière titre, et potentiellement résoudre aussi les problèmes liés aux articles.
* {-webkit-text-size-adjust: none}
Si ça ne fonctionne pas, on pourra toujours tenter de redéfinir la police du titre en em plutôt qu’en pt. C’est plus spéculatif mais les bonnes pratiques de développement responsive recommandent de convertir en unité em les tailles de police. 1em est égal à, selon la taille de police par défaut, 14 ou 16 pt. Donc pour arriver à 21pt comme avant, tenter de changer la propriété font-size des polices de titres à 1.5em.
On en est là, il y a des tests à faire sur ces pistes et on verra si ça corrige et si d’autres problèmes surviennent.
3 Likes
Compte-rendu des tests effectués ce jour :
J’ai testé sur un autre iPhone que la première fois (je ne peux plus tester sur celui sur lequel ça n’apparaissait pas) et il y a une bonne et une mauvaise nouvelle :
- la bonne : sur cet iPhone (dont l’écran est certainement différent - autre taille, autre résolution…) la newsletter apparaît à peu près correctement sans modification supplémentaire (il y a toujours un problème d’alignement des images et des titres des articles - le titre+résumé se place en dessous de l’image et non à côté - mais il est minime : ça reste lisible et ce n’est pas complètement inesthétique / le header est correct, ce qui est le plus important)
-
la mauvaise :
* {-webkit-text-size-adjust: none}ne change rien.
Je n’ai pas changé la taille de police puisque le problème du header ne se pose pas ici…
C’était un test sous Gmail pour iPhone (le première fois aussi).
@loic Pour information aussi, au sujet d’améliorations que tu avais faites avant, la mise en forme passait sous l’appli Gmail mais pas sur Gmail-navigateur mobile… C’est plutôt à titre informatif / de documentation du problème. Ce point particulier ne me semble pas très gênant et ne me semble pas nécessiter d’y passer du temps à ce stade.
2 Likes
Bon… Je ne sais pas si il est nécessaire que je m’y penche davantage si les problèmes principaux sont résolus, et que mes pistes sont sans effet 
J’ai quand même regardé pour les articles et je pense que là ma piste initiale d’utiliser des tableaux va être utile pour éviter que les éléments se placent en dessous l’un de l’autre. Je te renvoie une proposition de code.
Par ailleurs pour ce qui est des ressources j’ai trouvé quelque chose d’intéressant, il y a un site qui répertorie les propriétés css compatibles sur le mail de différents supports, https://www.caniemail.com/ que j’ai découvert en faisant des recherches et peut s’avérer pratique.
2 Likes
Pour référence, une question dans le même champ:
Pour plus de clarté, les problèmes concrets qui se posent actuellement sont l’affichage de l’infolettre dans ces deux contextes:
- le webmail de Yahoo!
- le lecteur de courriel de iOS
Et voici les éléments techniques:
- modele.html (8.9 KB) (trouvé ici)
- content.html (5.5 KB) (trouvé ici)
- footer.html (2.1 KB) (trouvé ici)
- Pour envoyer un test de newsletter à une adresse, cliquer Tester - envoyer un message de test sur cette page
- newsletter.mbox (32.1 KB) l’infolettre envoyée par courriel à titre d’essai, c’est à dire les éléments ci-dessus assemblés
Question d’une personne qui voudrait donner un coup de main:
Avec quel outil (client mail) est envoyé le mail de l’infolettre ? Pour que je puisse faire des essais dans les mêmes conditions que vous l’utiliserez.
Nous utilisons https://www.phplist.org/ et la méthode de test la plus simple serait que je vous fasse un compte sur https://infolettre.mlalerte.fr/lists/admin/ afin que vous puissiez éditer les modèles ci dessus directement dans l’interface web. L’inconvénient de cette méthode est qu’elle demande de se familiariser avec phpList.
Une alternative consiste à assembler soi même les éléments du modèle ci dessus, c’est à dire mettre modele.html au début, puis content.hml puis footer.html dans un fichier et de l’utiliser dans le corps d’un courriel de test pour faire des expériences. C’est de cette façon que l’on a procédé au tout début et c’est assez pratique.
Une dernière possibilité consiste à importer dans votre boite le courriel qui se trouve dans newsletter.mbox et de le modifier pour qu’il apparaisse bien dans les deux contextes qui posent problème (iOS et Yahoo!) tout en s’assurant qu’elle continue a fonctionner dans les autres contextes. Il suffit ensuite de me communiquer la version corrigée et je peux la découper dans phpList ce qui vous économise l’effort d’apprendre comment cela fonctionne.
Qu’en dites vous ?
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.
1 Like
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:
- Les boutons sur le header “L’actualité de l’alerte”, et le logo tout petit
- L’agencement des photos/description ici :
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
1 Like
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
1 Like
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: topdans le CSS ne semble pas fonctionner.