Pour alimenter le sujet, voici un exemple d’infolettre HTML envoyée via phpList cité dans une discussion lancée aujourd’hui. Ca vaut peut-être le coup de comparer ce que ça donne dans les contextes qui posent problème ? Si ça passe nickel il y a une source d’inspiration. Sinon … bah tant pis 
Merci beaucoup pour la référence ! C’est très utile de voir ce qui se dit ailleurs sur ce sujet / outil.
Pour l’exemple en question, la mise en page m’a l’air plus simple que ce que nous avons tenté à la MLA.
Donc ça peut inspirer oui, mais il faut prendre ce facteur en compte. A titre indicatif par exemple, les parties “texte simple” passent très bien partout à l’heure actuelle.
Evidemment, il reste toujours cette option si les tests d’intégration ne donnent pas de résultats : simplifier la mise en forme (enlever les boutons de l’en-tête serait déjà un premier pas nécessaire dans ce cas)
1 Like
Salut @justinem 
Est-ce que tu penses que tu auras un peu de temps prochainement à consacrer à la newsletter ?
J’aimerais en envoyer une pour octobre et je me dis que ça peut être l’occasion de travailler sur un cas concret, qu’en penses-tu ?
1 Like
Bonjour !
Extrêmement désolée pour mon silence pendant ces jours, j’ai changé de projet au travail je suis un peu sous l’eau.
Je passe 1h ce soir sur l’amélioration de la newsletter, ensuite malheureusement je pense que je verrai avec WebAssoc pour qu’ils remettent l’annonce en ligne pour trouver une nouvelle personne pour vous aider car je n’ai pas assez de temps à y consacrer.
Je vous tiens au courant ce soir
1 Like
Aucun soucis et bon courage pour ce nouveau projet. C’est les aléas du bénévolat et grâce à toi on a pu mettre bien à plat ce qu’il faut faire et une saine méthode pour travailler à l’amélioration. C’est un bon pas en avant
Est-ce que tu serais d’accord pour qu’on te sollicite pour jeter un regard de professionnelle sur ce qui sera produit à l’avenir ? C’est moins consommateur en temps mais ton regard expert sera très précieux.
Ce serait très sympa de ta part et je suis persuadé qu’ils apprécieront la transparence de la démarche 
Avec plaisir, 19h ce soir c’est possible ?
1 Like
C’est très aimable à toi d’être disponible si vite. Mais je pensais plutôt à te solliciter dans l’avenir plus lointain, lorsqu’un travail aura été fait
J’ai réussi à régler ce souci en fixant la taille des miniatures et en leur changeant la max-width (sinon celle d’img s’appliquait, c’est à dire 100% et les images n’avaient pas toutes la même taille) :
width: 130px; & max-width: fit-content; sur la classe 'miniature'
Cependant le problème est que sur un petit écran (ex: iphone) 130px c’était trop.
J’ai donc utilisé des media query, pour dire si l’écran est petit alors plus petite taille d’image:
@media screen and (max-width:760px) { .infolettre .miniature { width: 70px; height: auto; border: 0; max-width: fit-content; } }
Problème qu’il subsiste, sur mon Android qui a pourtant un écran plus grand que 760px, les images s’affichent en petit. Il faudrait faire des tests sur d’autres téléphones avec ‘grand’ écran.
Voici ce que ça donne :
- Gmail web :
- Boite mail Mac:
- Gmail mobile android :
- Boite mail iphone :
1 Like
Ok @justinem, merci pour ton honnêteté et merci déjà pour tout ce que tu as fait
On va voir aussi avec Webassoc si quelqu’un peut prendre le relais.
N’hésite pas à nous faire signe si tu as un peu plus de temps à l’avenir et que tu veux nous donner un coup de main, tu es toujours très bienvenue !
Merci aussi pour cet apport de plus !
Je prends bonne note de ces améliorations pour la suite !
Juste pour être sure @justinem, tu les as faites directement dans les modèles/brouillons phpList ?
(dans le modèle “Newsletter type” ou dans le brouillon de campagne où ton nom est mentionné)
1 Like
Oui c’est bien cela
J’ai communiqué avec Jean-Daniel de WebAssoc, lui disant que vous souhaiteriez un autre bénévole, il devrait donc relancer une recherche
2 Likes
Bonjour @HeryRavelo,
Un grand merci par avance d’accepter de vous pencher sur le sujet
Les problèmes concrets qui se posent actuellement sont l’affichage de l’infolettre dans ces deux contextes:
- le webmail de Yahoo!
Lors des premiers tests, le modèle (CSS) ne s’appliquait pas du tout. Il y avait donc de gros défauts d’affichage des images (de tailles disparates) et du texte.
Aux dernières nouvelles, le problème est réglé (?) mais certains défauts restent gênants comme les marges des sections / titres des sections (absence de marge en haut, le titre est collé au contenu précédent, ce qui est assez peu esthétique) :
- le lecteur de courriel de iOS
Dans certains cas, l’affichage présente juste un défaut d’alignement des contenus :
Dans d’autres cas, un sérieux problème d’affichage du header s’ajoute au problème d’alignement :
A noter aussi que sous iPhone, le mail ne passe pas bien sous Outlook via le navigateur (problème de largeur des sections, hormis le header) :
Et voici les éléments techniques à la date d’aujourd’hui. Je les ai collectés en allant dans Campagne => Liste des campagnes et en selectionnant la dernière infolettre envoyée (l’ordre de tri n’est pas chronologique, il faut chercher sur le titre, par exemple). J’ai ensuite cliqué sur l’icone de l’oeil pour afficher la campagne. Puis sur le bouton Modifier afin de visualiser les détails de préparation de la campagne avant son envoi. Dans l’onglet 1 Contenu on trouve content.html et footer.html dont on peut copier le source en cliquant sur Source dans l’éditeur visuel. Il faut passer à l’onglet 2 Format pour déterminer quel modèle a été utilisé. Pour retrouver le modèle correspondant il faut aller à Gestion des modèles de campagne dans le menu de gauche et cherche celui qui a le même nom. Il faut ensuite cliquer sur ce modèle et cliquer sur Source dans l’éditeur visuel pour obtenir le contenu de modele.html.
- content.hml (7.3 KB)
- footer.html (2.1 KB)
- modele.html (8.9 KB)
Et voici l’aspect attendu une fois le contenu ci dessus assemblé par phpList. Pour l’obtenir je suis allé dans Campagnes => Campaign archive, j’ai cliqué sur le nom de l’infolettre envoyée en dernier et qui correspond donc au contenu collecté ci dessus. Je prend une capture écran de l’affichage sous Firefox, en réduisant la taille avec Control - afin que tout soit visible, même si ce n’est pas lisible. Puis je fais bouton droite Sauvegarder sous et dans un fichier infolettre.html. Je met dans une archive zip le contenu du dossier infolettre_files (qui contient les images) et le fichier infolettre.html.
-
infolettre.zip (1.7 MB)
-
Affichage de référence, dans un navigateur Firefox:
-
Affichage de référence sous Android (Gmail for Android) :
Pour faciliter les tests lorsqu’on a pas accès au serveur phpList, j’ai envoyé un test de campagne (il faut pour cela éditer la campagne en suivant la même méthode que pour extraire le fichiers content.html ci-dessus).
- infolettre.mbox (47.5 KB)
Connaissez vous déjà phpList ?
Cordialement
1 Like
Bonjour je retravaille le modèle pour qu’il soit bien compatible et responsive et je vous le renvoi
1 Like
Je confirme reception des fichiers, que je publie ici pour archive.
content.html (68.2 KB)
footer.html (12.1 KB)
modele.html (18.1 KB)
@HeryRavelo il y a des différences importantes, pourriez-vous s’il vous plait expliquer ce que vous avez modifié, par quel logiciel et pourquoi ? Il serait aussi utile de comprendre comment il faudrait tester (de la même façon que vous l’avez fait) que cela fonctionne bien sur Yahoo! et iOS ?
@loicmla Oui j’ai tout recoder car la structure est importante pour les clients mails pour que ça fonctionne et ne finissent pas dans les spams.
Ce n’est pas du html ni du css récent pour tous. La balise style n’est pas supporter par tous.
L’ancien modèle ne fonctionnait pas bien non plus sur Outlook.
Le modèle que je vous ai fait est responsive son affichage différent en fonction de la taille d’écran.
Après je n’est pas testé sur tous les clients mails un par un mais je connais les normes ayant l’habitude d’en faire régulièrement.
N’hésitez pas si ça ne fonctionne pas chez vous ou si vous avez besoin d’aide pour l’intégration dans php list ou de retouche si elle sont possible évidemment 
.
Rendu sur Mail ios
Quel outil avez-vous utilisé pour cela ?
Quel client mail ne supporte pas la balise style ?
Notez que le rendu souhaité correspond à ceci sur un navigateur:
et ceci sur mobile:
l’image de votre message ci-dessus a un aspect différent.
@HeryRavelo juste un petit mot pour m’assurer que vous avez vu le message ci dessus. Et aussi vous inviter à assister, si vous le pouvez, à la prochaine visioconférence entre les bénévoles et les permanents de la MLA.