Intégration CSS/HTML de l'infolettre

arthurhavlicek · July 7, 2020, 11:43pm

Bonjour ! Je fais suite à l’invitation.

J’ai eu pas mal de demandes suite au mail sur club_entrepreneuriat_social et il se peut que nos maigres capacités soient un peu saturées, mais si ce que vous demandez n’est pas trop chronophage on doit pouvoir s’entendre.

Sur le sujet de la sécurité informatique j’ai été responsable sécurité pendant quelques mois donc je connais un peu le sujet mais j’ai besoin de me rapprocher de votre cas d’usage pour savoir comment vous aider au mieux.

La sécurité c’est beaucoup d’audit et de conseil mais bien sûr dites-moi si le service dont vous avez besoin est tout autre.

loicmla · July 8, 2020, 9:58am

Bonjour Et encore bravo pour l’initiative: ça manque de gens technique, pas seulement à la MLA!

Concrètement il s’agit du fine tuning d’une newsletter HTML dans phplist. Pour une personne qui fait de l’intégration CSS/HTML au quotidien ce n’est pas chronophage. Pour moi qui fait ça en dilettante, c’est très chronophage, sans surprise

Je suis aussi très intéressé d’en savoir plus sur Les Pirates De Croissance: est-ce qu’il y a un site web ou qqc que je peux lire pour apprendre? En tant que geek je suis aussi intéressé à proposer mes compétences (pas CSS/HTML mais plutôt adminsys/dev, tu l’auras compris ).

A++

arthurhavlicek · July 8, 2020, 1:22pm

Ah les mails en html, j’en ai fait un peu, mais même pour un professionnel HTML/CSS la compatibilité aux différents client mail c’est toujours un énorme problème…

Ce que je te propose c’est de venir nous voir sur notre slack pour nous rencontrer (on s’excuse d’utiliser cet outil si tu as des réticences avec les services cloud, qu’on peut comprendre). On est créé y’a une dizaine de jours donc encore un peu à la ramasse sur les outils internes et la présentation web, j’ai fait l’annonce de service un peu tôt et je ne m’attendais pas à un tel engoument. Tu pourras poser tes questions et aborder le sujet du mailing aussi, avec les autres membres (si j’arrive à coordonner tout le monde). Plus de chances qu’on soit là tous les 4 (on est petits pour le moment) si tu nous préviens en avance.

Tu peux m’envoyer en privé ton mail, je t’enverrai une invitation.

Blsd · July 9, 2020, 9:42am

Salut Arthur

Bienvenu, et merci pour ton aide et pour ton initiative ! C’est hyper précieux les compétences informatiques dans les assos qui ont plein d’idées, plein de trucs à valoriser mais souvent peu de capacités (ou de temps!) pour le faire. Et si en plus de ça, ça peut aider à développer les solutions libres dans les assos et les aider à contourner les solutions de facilité (mais d’insécurité) que proposent les gafams, c’est encore mieux

Je ne sais pas si vous pourrez nous aider sur ce besoin très précis de mails HTML (mais sinon ce sera peut-être sur autre chose - ou pas - vous verrez ) mais au cas où, je mets ici un exemple du problème (très classique) qu’on rencontre.

Le mail est déjà plutôt bien construit pour passer sur différents clients mail. A quelques défauts (minimes) près, il passe sur les principaux clients sans souci et sur pas mal d’écrans quelle que soit leur taille… sauf les Iphones of course !
A mon sens, ça demande “juste” l’ajout de media queries pour adapter la taille/place des éléments (ou les supprimer) en fonction de la taille de l’écran mais c’est déjà trop pour moi

Pour donner une idée : (les boutons devraient bien sûr être à l’horizontale et les icônes des réseaux sociaux tous alignés et pas sur 2 lignes)

Ou un autre exemple : (images et textes devraient être alignés, ou bien l’image plus grande, de la même largeur que le texte)

Bref, ce sont juste des exemples, je ne sais si on pourra travailler ensemble sur ça (mais ce sera peut-être sur d’autres choses ?) mais en gros, le gros du travail est fait et il manque des adaptations par quelqu’un d’un peu plus expert sur le sujet

De notre côté, on prévoit de garder cette solution imparfaite et d’essayer de trouver des bonnes volontés prêtes à nous aider à améliorer la situation à moyen terme donc il n’y a une méga urgence non plus.

Blsd · July 9, 2020, 9:45am

Et sinon, pour ça, juste une petite question toute bête, pourquoi pas un Framateam plutôt ? Ca fonctionne exactement comme Slack et ne demande pas d’installation particulière puisque Frama a installé Mattermost sur ses propres serveurs et propose un usage libre.

loic · July 9, 2020, 10:00am

@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

arthurhavlicek · July 9, 2020, 10:09am

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.

loic · July 9, 2020, 10:58am

Formidable Dans l’interim je viendrais volontiers discuter sur Slack et faire connaissance: mon courriel pour l’invitation loic@dachary.org.

Blsd · July 9, 2020, 11:16am

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

arthurhavlicek · July 10, 2020, 12:12am

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

Blsd · July 10, 2020, 12:24pm

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 !

arthurhavlicek · July 10, 2020, 12:41pm

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

Blsd · July 15, 2020, 7:57am

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…

loic · July 15, 2020, 8:41am

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 ?

arthurhavlicek · July 15, 2020, 10:56am

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.

Blsd · July 20, 2020, 9:52am

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.

arthurhavlicek · July 23, 2020, 5:01am

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.

loic · July 29, 2020, 5:33pm

Pour référence, une question dans le même champ:

loicmla · August 18, 2020, 9:09am

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

loicmla · August 20, 2020, 9:11am

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 ?