• #SPIP : un modèle pour mettre en forme le contenu des newsletters

    Un besoin qui remonte régulièrement quand on envoie des newsletter avec SPIP et le trio magique Newsletter/Mailsubscriber/Mailshot, c’est la possibilité de mettre en forme le contenu pour le rendre plus dynamique. Bien sûr, et c’est là que se cache le pot de pus, ça doit fonctionner sur toutes les plateformes et avec tous les logiciels, webmails compris.

    Principe

    J’ai donc utilisé l’astuce lue je ne sais plus où (de @rastapopoulos je crois ?) de passer par des sélections éditoriales (https://contrib.spip.net/Selections-editoriales) pour afficher le contenu dans les newsletters.

    Il suffit donc de faire un modèle simple qui affiche ces sélections et le tour est joué.

    Pour ça, j’ai regardé ce qui se faisait chez Mailjet et le principe est d’avoir un template qui affiche de base tout en une colonne et, via des Media Queries, gérer les mises en forme plus complexes (ligne, 2 colonnes, etc...). Ça semble malin car les cas où on doit afficher le contenu en 1 colonne, c’est sur smartphone et ces applis sont les moins aptes à gérer Media Queries.

    Il y a donc 2 fichiers

    La feuille de styles insérée dans le modèle de la newsletter :
    https://gitlab.com/jmoupah/zcm/blob/master/css/newsletter_rwd.css.html
    le modèle
    https://gitlab.com/jmoupah/zcm/blob/master/modeles/selection_newsletter.html

    Le modèle

    {{Affichage pleine largeur}} <selection_newsletterX>
    {{Affichage par ligne}} <selection_newsletterX|affichage=ligne>
    {{Modèle par colonne}} <selection_newsletterX|affichage=colonne>

    Le résultat

    D’après mes 1ers tests, ça semble fonctionner sur pas mal de configs (Thuberbird, Yahoo/GMail/Zimbra webmail, GMail sur Android). Étonnamment ^^, MS Outlook n’affiche pas bien les 2 colonnes. N’ayant pas cette usine à gaz, je n’ai pas encore pu creuser. Et je n’ai pas encore pu tester sur Mail de MacOS non plus.

    Donc voilà, si qq1 veut tester et faire des retours, je prends.

    #spip_recette #webdev #integrationweb