Intégration CSS/HTML de l'infolettre

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.

2 Likes

Bonjour :slight_smile: 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 :sweat_smile:

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

A++

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.

1 Like

Salut Arthur :slight_smile:

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 :face_with_hand_over_mouth:

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 :slight_smile: ) 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 :smiley:

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

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

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 :sweat_smile:

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.

2 Likes

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.

1 Like

@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 :slight_smile:

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 :slight_smile: 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 :wink:
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 :pensive: (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 :slight_smile:
Je ne sais pas utiliser un git de toute façon :wink:
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 :wink:

Bref, je peux vous envoyer ça et être dispo comme et quand ça vous arrange (sauf au mois d’août :wink: )

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 :slight_smile:

2 Likes

Pour info/suivi, suite aux retours d’Arthur (merci :pray: ) 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 :slight_smile: @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 :smiley:

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: