Et si on ravalait la façade de la newsletter de … Badsender !

Ces Messieurs dames bonjour ! Alors… Bon… Alors… BON ! Il faut que vous sachiez une chose : L’équipe m’a confié la superbe mais néanmoins complexe mission de repenser la newsletter Badsender. Du coup je me suis couché il était minuit dix, bonjour comment j’étais fatigué ! Tel le nain devant l’urinoir, je devais placer la barre très haut… Ça fait 7 ans que je suis dans ce métier, webdesigner de père en fils, fils de boulanger, je n’ai jamais vu ça : Je n’ai jamais mis autant de temps à présenter une maquette que cette fois-ci. J’avais pléthore d’idées, je souhaitais tenter, expérimenter, tester, innover… Et le résultat est là ! (il y a encore des trucs à lire en dessous du template)

« On est quand même pas venus là pour beurrer les sandwiches ! »

Jusqu’à présent, soyons honnêtes, la news de Badsender était quand même déjà pas mal foutue. Hein ? Si, si, il faut le dire ! Voilà, on est d’accord, c’est bien ce que je pensais… Mais je trouvais qu’il manquait un peu… Comment dire… D’ « alternatives »… La structure était souvent identique (On change rarement une équipe qui gagne sauf avec Raymond Domenech, poin poin poin), et le graphisme, quoique pertinent et à l’image du site, restait relativement basique et un peu léger.

J’ai donc voulu, après coup (ça c’est le priapisme… Réagir, après), proposer de nouveaux modules et faire vivre la news comme une seule et même entité, comme une machine en déploiement ! Debout les campeurs et haut les cœurs ! C’est parti pour une séance de brainstorming !

« Qu’est-ce qu’il dirait ton Montaigne ? »

Pour faire vivre une machine, il faut des mécaniques, des rouages ! Germe alors en moi l’idée d’illustrations mutées en gifs animés bouclés ! Vous allez me dire « Mais quel genre de gif, heuuuuu… Plutôt Braque ? Heeuu… Vasarely ? » Attention, pas du gros gif animé bien gras qui tâche ! Je veux parler de cette petite tendance du gif animé où seul un élément du gif est animé… Vous comprenez ? Non évidemment vous ne pouvez pas comprendre, ce n’est pas clair… Voilà un exemple !

Alors, voilà déjà une première roche posay (humour, humour, je précise !). Il fallait aussi établir une certaine identité à cette news, un certain style ! Quelque chose de chic, un peu original mais qui reste lisible sur tous les supports et logiciels de messagerie. J’ai donc pensé l’ensemble des modules en « Full responsive ». Bon, une petite explication technique s’impose : Ok, Gmail a annoncé que de nouvelles adaptations arrivaient pour le support du responsive et des media queries. Mais pour le moment, si on s’en tient aux tests d’email preview, pas vraiment de nouveautés… Il fallait donc concevoir l’email de sorte à ce qu’il s’adapte correctement sur Gmail App ou Android 5.1.0 ! Je pars donc sur un système de colonnes, soit full width, 50/50 ou 33% ! Vous me suivez toujours ? En clair, il faut organiser les choses de manière à ce que les contenus puissent passer facilement les uns sous les autres, sans avoir recours aux media queries !

« Je ne comprends pas cette histoire de jus de fruit »

Si le responsive sans media queries n’est toujours pas clair pour vous, je vous invite chaudement à consulter l’article rédigé par mon cher confrère Grégory Van Gilsen. Prenez votre temps… Voilà, maintenant que c’est chose faite, je continue à me pencher sur mes petits modules : un nouvel encart consacré à de petits morceaux / tips de code voit le jour et là vous dites « Et mais v’la comment qu’elle a l’air mortelle cette idée ! » Bah oui, on en connait un rayon sur le domaine de l’intégration html d’emailing, pourquoi ne pas en faire profiter nos fidèles abonnés ?

Mais on ne va non plus se mentir, le travail d’une création graphique passe souvent par une phase de veille, à consulter, éplucher ce qui se fait chez nos confrères et à en tirer les bonnes conclusions ! Ne pas s’intéresser à cela, c’est comme pousser mémé dans les orties, c’est plutôt mal vu… Alors je suis allé sur de nombreux sites de bloggeurs, de routeurs… Y a de ces horreurs sur internet, j’vous raconte pas… Et j’approche d’un âge où les hommes comme moi n’ont qu’une seule chose en tête… L’email marketing, bande de coquins ! Je m’inscris à de nouvelles newsletters, je cherche, pas le choix, c’est comme ça, je dois chercher sinon ils vont me sucrer mes allocations chômages, c’est la loi El Khomri ! Je fouille dans mes favoris et ma base de veille (Alors là attention hein, verbotten ! à partir de là c’est une zone secrète, area 51, comme le pastis !)

Et il y en a des bonnes idées qui fourmillent ! J’en tire les conclusions en me retirant de la vie politique (oulà non je m’égare) et j’en profite pour incorporer un nouveau module de feedback abonné pour avoir un peu de retour sur la satisfaction de nos fidèles ! Un nouveau module de signature d’article, avec une illustration / portrait décalé (toujours au format gif animé en boucle, ah bah ouais mais tout se tient ! C’est mon petit côté foufou !) L’idée est de créer un template béton utilisable depuis le nouveau Builder Badsender. Quelques pictos par ci par là, ça sert à rien mais je trouve ça joli ! Pour le footer, on reste sur quelque chose de relativement simple et pratique à mettre en place : un rappel de notre présence sur les réseaux sociaux, des petits liens vers les expertises et services Badsender, et les mentions légales.

« C’est toujours les mêmes gestes : d’abord la jambe gauche… Toujours… chaussettes, chaussures… »

Bien évidemment, vous noterez que nous restons sur une typo unique sur l’ensemble de l’email (ici, la Trebuchet MS). Il va de soi que nous utilisons une typo websafe, parce que le support des typos spécifiques dans l’emailing, que Dieu soit en location, ce n’est toujours pas ça ! Et pour la couleur, on va rester tout simplement sur la règle de « 2-3 couleurs, paplu-paplus » ! La teinte orangée propre à Badsender donc, du blanc pur, et des nuances de gris pour les textes et illustrations. Après, tout se joue dans les jeux de mise en forme des textes : italique, gras, souligné, surligné… C’est là que le texte prend vie aussi !

Alors, oui, vous avez raison de le souligner, il y a une ou deux images de fond très légères dans l’email ! Des petites lucioles dorées, semblant virevolter au gré du vent ! Vous vous dites « Ben, ce n’est pas déconseillé d’utiliser des images de fond dans un email ? » Ouaaaiis mais vous admettrez que ces images ne jouent en rien dans la compréhension de l’email ou sa bonne lisibilité ! Donc aucun souci, c’est juste de la déco, qui ne posera pas de souci si jamais ces images ne s’affichent pas sur les webmails ne supportant pas correctement les images de fond !

J’espère que vous avez kiffé ce petit article ! N’hésitez pas à partager, y a tout ce qui faut là-dessous pour en faire profiter un max ! La semaine prochaine nous parlerons de Freud et pourquoi il s’enfilait des doses de cocaïne à tuer un cheval.