Génèse du projet

EPFL nous a initialement approchés pour nous demander de développemer et tester une série de maquettes e-mail HTML qu'ils avaient conçues et qu'ils souhaitaient utiliser sur leurs comptes Mailchimp. L'un des composants dans les designs contenait un élément apparemment difficile à implémenter, composé d'une image partiellement recouverte par un bloc de couleur contenant un titre et un texte.

Alors que ceci est trivial à réaliser en HTML et CSS modernes, ça devient surprenamment difficile à mettre en place de manière consistante en "HTML e-mail", car la plupart des client e-mail (Outlook, Gmail, Thunderbird, etc.) utilisent encore des moteurs de rendu HTML archaïques, qui n'implémentent qu'un sous-ensemble relativement restreint des fonctionnalités que nous considérons acquises sur des navigateurs modernes. L' "HTML e-mail" utilise souvent encore les layouts basés sur des tableaux HTML que nous adoptons pour développer pour des navigateurs il y a 25 ans!

Nous avons développé avec Cruncher un outil qui permet à la communauté de l'EPFL de créer et éditer des newsletters, en quelques clics, avec des contenus riches et adaptés à différents écrans, de gérer des listes d'abonnés et de créer, programmer et faire le suivi de nos campagnes de communication.

Nous avons apprécié l'implication de l'équipe Cruncher dans le projet, leur efficacité et leur réactivité. A ce jour l'outil est utilisé par plus de 120 collaborateur·trice·s et le développement de nouvelles fonctionnalités et modules graphiques est envisagé pour ces prochains mois.

Si vous cherchez de vrais professionnels pour développer vos outils digitaux n'hésitez pas !

La solution au problème "image avec du texte par dessus" a été de développer un "découpeur d'images": une petite web app qui permettait aux utilisateurs d'uploader une image, qui la découpait en trois tranches (une pour la section de l'image avant la boîte de texte, une pour la section à côté de la boîte, une pour celle en dessous.)

Les trois bandes étaient ensuite re-assemblées dans un layout tableau avec la boîte de couleur: problème résolu!

La prochaine étape

Du coup maintenant les utilisateurs devaient instancier le composant sur Mailchimp, se rendre sur l'outil de découpage d'image, télécharger un fichier, récupérer les trois tranches, les télécharger sur Mailchimp, ... tout cela fonctionnait, mais n'était pas très "user-friendly".

Durant une séance de brainstorming avec le client, nous avons eu l'idée suivante: pourquoi ne pas franchir un pas de plus et développer un outil qui permettrait à leur communauté d'utilisateurs de créer des campagnes e-mail dans un environnement intégré, et qui permettrait d'assembler des newsletters par glisser-déposer des composants que nous avions développé?

Le résultat de cette opération serait une newsletter prête à être envoyé, mélangeant et assemblant les maquettes "HTML e-mail" testées et validées avec des contenus produits par les utilisateurs (des textes riches, des images, des évènements, etc...)

Heureusement nous avons un outil très versatile sous la main qui permet de faire cela pour les sites que nous développons: DjangoCMS.

Voici ce que ça donne.

Au final, des dizaines de composants peuvent être sélectionnés depuis la liste de blocs disponibles et ajoutés à la newsletter, réarrangés par glisser-déposer, copiés-collés, etc...

La section centrale de l'éditeur affiche toujours un aperçu côte-à-côte de l'affichage final sur desktop et mobile de la newsletter entrain d'être conçue.

Pour tester la newsletter, l'utilisateur peut, en deux clicks, s'envoyer une copie de celle-ci par e-mail, ou peut en télécharger le rendu en différents formats.

Listes, segments et formulaires

Les utilisateurs peuvent créer et gérer des listes d'abonnés. Des nouveaux abonnés peuvent facilement être ajoutés via un formulaire, mais surtout ils peuvent être importés en vrac en téléchargeant des fichiers CSV ou Excel.

Les contenus de chaque colonne dans le document uploadé sont automatiquement détectés, transformés en champs séparés (p.ex. "Prénom", "Nom", "Langue") et liés à l'abonné importé.

En utilisant ces champs, les utilisateurs peuvent ensuite créer des segments dynamiques, basés p.ex. sur la langue de l'abonné, pour mieux cibler leur audience.

Il est donc possible de créer en quelques clicks des segments par assemblage de filtres complexes, comme p.ex. "La langue est Japonais OU Français, ET l' e-mail contient @epfl.ch".

Les utilisateurs peuvent également créer des formulaires d'abonnement liés aux listes, en sélectionnant les champs (parmi ceux définis plus haut) qui devraient apparaître dans le formulaire. Ces derniers peuvent ensuite facilement être incrustés sur leur propre site.

Quand un visiteur remplit le formuaire et le soumet, il sera directement inséré dans la liste liée au formulaire et recevera du coup automatiquement la prochaine newsletter envoyée.

Campagnes

Une fois qu'une newsletter est prête à être envoyée, l'utilisateur peut simplement sélectionner les destinataires parmi ses listes et segments d'abonnés.

L'utilisateur peut également choisir d'envoyer sa campagne immédiatement, ou en progammer l'envoi à un moment ultérieur.

Une fois tous les paramètres définis, l'utilisateur vérifie une dernière fois sa campagne et peut prévisualiser exactement comment chacun de ses abonnés verra la newsletter qu'il/elle recevra.

Après que la campagne ait commencé à être envoyée, l'utilisateur aura accès à une vue indiquant tous les chiffres clés de celle-ci, p.ex à combien d'abonnés elle a été envoyée, combien de ceux-ci l'ont lue, combien d'abonnés se sont désabonnés, etc. L'utilisatuer peut ainsi également télécharger un rapport détaillé de chaque chiffre clé.

Respect de la sphère privée

Le système entier est hébergé sur site, dans les datacenter de l'EPFL, à Lausanne.

Ceci offre l'avantage très important de ne pas devoir partager les données personnelles des abonnés avec des services tiers, opérant dans des juridictions moins soucieuses de la vie privée.