Intégration CSS/HTML de l'infolettre

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 ?

justinem · August 21, 2020, 5:12pm

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.

loic · August 23, 2020, 10:04pm

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.

justinem · August 24, 2020, 12:29pm

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

Blsd · August 24, 2020, 3:30pm

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

Blsd · August 25, 2020, 8:14am

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.

justinem · August 25, 2020, 3:39pm

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

Blsd · August 27, 2020, 2:43pm

Super
N’hésite pas si tu as d’autres questions ou besoin d’autre chose !

justinem · August 27, 2020, 7:13pm

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

justinem · August 27, 2020, 7:13pm

Boite mail Apple sur iPhone 7 :
mail-iphone

justinem · August 27, 2020, 7:14pm

Gmail :
mail-gmail

loic · August 28, 2020, 8:25am

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 */