Hé copain ! Comment va ? La forme ? Dis, t’es venu à l’EMDay cette année ? P’t’être même que t’as kiffé ça ? Et, avec un peu de chance, t’as peut-être même pu assister à mon atelier sur les « F*ckin amazing tools » pour l’emailing ? Et tu souhaiterais ardemment retrouver l’ensemble des outils présentés ? Ou alors p’t’être que t’as pas pu v’nir, et à ce moment-là, t’as la chance d’avoir pu éviter mon atelier sur les « F*ckin amazing tools », mais bon, tu s’rais tout de même bin curieux de voir de quoi ça s’agit ? Alors voici un p’tit récap, on envoie le bouzin !
Lorsque j’ai commencé à préparer cet atelier, je ne m’attendais pas à me retrouver avec plus de 40 outils à vrai dire… Je me suis un peu emballé. A la base, c’est un atelier de 45 minutes, donc bon… Le calcul est vite fait, pas besoin de sortir de Saint-Cyr comme dirait ma mère. Alors il fallait trier tout ça, par catégorie ! On va donc essayer de s’y retrouver avec des « espèces » d’outils, pour rendre les choses un peu plus lisibles.
Soyons bien d’accord que cet atelier concernait les tools sur les parties Design et Intégration : si tu penses trouver des outils pour tester ta délivrabilité, passe ton chemin camarade ! De plus, par outil, j’entends « générateur » (du moins la plupart du temps) et non « Ressources/articles/blogs ». Si tu veux retrouver ce type d’infos, tu fais un tour sur notre site blog (de un, d’abord), ou tu vas consulter le site thebetter.email par Jason Rodriguez (de deux. D’ailleurs je comprends pas, je suis toujours pas dans la liste des influenceurs… Faut que j’fasse une réclamation…)
Mockup
Mockup, ou maquette d’une interface utilisateur. Maquette volontairement simpliste où les fonctionnalités priment, avant l’aspect esthétique. Le mockup permet avant tout de penser ergonomie et expérience utilisateur.
Balsamiq
L’objectif : aider le monde à se débarrasser des mauvais interfaces utilisateurs. Se concentrer donc sur la structure et le contenu, première étape du processus de maquettage : Le wireframe (avé l’accent). On oublie la mise en forme graphique, l’esthétisme, le design, on se concentre uniquement sur la structure et le contenu pour proposer ergonomie, placement des informations, confort de lecture et de l’utilisateur.
Placeholder
https://placeholder.com/ ou https://betterplaceholder.com/
Génère des images personnalisées à la volée en renseignant simplement la taille de l’image dans une url. Possible donc d’insérer des images dans un code directement, via une url. Permet de penser UX et UI avant tout (et gardien de la paix). Ceux qui viennent d’assister à notre formation sur le code HTML pour l’emailing ont eu l’occasion de le tester, encore, et encore, et encore…
Design
L’ensemble des éléments contribuant à l’apparence visuelle d’un produit, en l’occurrence ici, d’un email.
Pixlr
Editeur de photos en ligne, pour des retouches rapides et pros, gratuitement. Recadrer, redimensionner, découper, supprimer l’arrière plan, ajouter du texte… Photoshop en version light et free, comme un freedent (ouhhhh elle est bonne celle-là, faut que je la note pour mon prochain spectacle à Vezoul).
Vectr
Logiciel de création vectorielle en ligne, gratuit. Possibilité de partager les créas. Là-aussi, une version simple et intuitive d’Illustrator.
Subtle Patterns
https://www.toptal.com/designers/subtlepatterns/
Ok, je vous vois venir. Je sais, j’ai dit que j’abordai des générateurs, et pas des « ressources ». Mais fi! Des motifs, en veux-tu? EN VOILAAAA!!! Libres de droit, gratuits, pour des textures et modèles répétables à l’infini (cf Outlook et ses f* cking background images)…
Remove Bg
L’outil magique, comme une baguette ! (Elle est fine celle-là) Ch’bim , on supprime l’arrière plan d’une image en un battement de paupière. Ça porte bien son nom. C’est comme le Port Salut, c’est marqué d’ssus… Si t’es une quiche en détourage… Bah faudra t’améliorer ! En attendant, c’est fait pour toi !
Ressources
Moyens financiers, revenus. Possibilités d’action de quelqu’un, moyens intellectuels dont il dispose. Moyens matériels, produits dont un pays, une région peuvent disposer dans tel domaine. Moyens, possibilités qu’offre quelque chose. Ouais, je savais pas trop quoi mettre comme intro pour cette partie, j’ai fait du copier-coller de la définition Wikipedia, v’là.
Unsplash
Belles, gratuites photos. C’est la traduction littérale de la baseline . La communauté de photographes la plus généreuse au monde. Des miiiiiiiillions de photos, très esthétiques, libres de droit, en haute qualité. Un bijou. Vas-y tout-de-suite !!!!!!
Absurd Design
Des illustrations surréalistes sur fond transparent qui font sens, paradoxalement. Laissez l’imagination de vos destinataires s’envoler… Enfin pas trop quand même. Nouvelles illus régulièrement. On ne sait pas encore qui a créé ce site, s’il s’agissait à la base d’un projet de fin d’année pour un stagiaire sur Illustrator ou pas, toujours est-il que j’aime beaucoup.
Undraw
Une collection régulièrement mise à jour d’ illustrations thématiques au format SVG. Totalement gratuit. Super simple d’emploi. Paramètres pratiques en plus (choix de la teinte principale). Bref, que du bonheur, ça sent l’amour!
Streamline
https://app.streamlineicons.com
Besoin d'aide ?
Lire du contenu ne fait pas tout. Le mieux, c’est d’en parler avec nous.
Plus de 30 000 icônes, autoproclamée la plus grande bibliothèque d’icônes au monde. Rien que ça. 53 catégories, 720 sous catégories… L’icône comme nouveau moyen de communication, je le dis haut et fort.
Icomoon
«Tu m’remettras la p’tite soeur! »
«La même donc? »
«Oui tu m’remettras la p’tite soeur, j’t’ai répondu! »
Gif animé
Le Gif animé est un fichier gif comprenant plusieurs images qui permettent d’obtenir une animation paraffichages successifs en boucle. Le nombre de répétition de la boucle peut être limité pour éviter un phénomène d’irritation de l’internaute. Le gif animé dans un email est votre ami. Enfin, à petite dose quoi, mais si, quand même, ça peut être ton ami !
Ezgif
Tu n’y comprends rien, mais alors rien au gif animé hein… Tu ne sais pas comment ça fonctionne, comment on fait, comment on le découpe… Prends une vidéo et laisse faire ezgif (avec l’accent du Nord, y avait « Bienvenue chez les Ch’tis hier soir sur TF1), il s’occupe de tout…
Code
Les emails sont codés en langage HTML et incorporent du CSS, comme toutes les autres pages web. Mais coder un email HTML n’est pas la même chose que coder une page web. C’est plus complexe. Enfin, pas forcément avec les outils qu’on présente justement, mais de manière générale quoi… Oh et puis hein, j’dis c’que j’veux !
Backgrounds.cm
Un bien bel outil pour générer automatiquement un code VML pour afficher des images de fond correctement sur ce maudit Outlook (sans Brandbashing aucun). Attention hein tout de même, y a des choses à savoir… Pour ça, y a une jolie petite FAQ un peu plus bas sur le site, va y faire un tour, tu y trouveras le bonheur comme disait Chico.
Buttons.cm
«Tu m’remettras la p’tite so… » Ah non, je l’ai déjà faite celle-là. Fais attention mon ami, c’est pas toujours compatible avec le code généré sur backgrounds.cm. Et ca, c’est le petit plus de la maison Périglioni !
Howtotarget.email
Comment cibler un client de messagerie ? Non c’est pas une question, c’est la traduction de l’url en fait… Des hacks trouvés par Mark Robbins, Jay Oram… Une perle, je saurai pas dire autrement. Messieurs, je vous vénère !
Detergent.io
«Parce que blanc moi je sais c’que c’est comme couleur… C’est blanc… Moins blanc que blanc je m’doute… Ca doit être gris clair… Mais plus blanc que blanc… ». Pour nettoyer/formater/encoder vos codes HTML. Et t’en auras forcément besoin aussi, toi-même tu sais !
Nu Html Checker
Un outil pour vérifier et valider votre code HTML, avec des paramètres à régler pour ignorer certaines méthodes de codage propres à l’emailing. J’avoue, au début c’est un peu relou, mais très vite, tu sauras plus t’en passer !
Pois des images
Comment optimiser le poids des images, non seulement pour un temps d’envoi plus rapide, mais aussi pour une délivrabilité maximisée, un temps de réception optimisé, et une empreinte carbone réduite.
Squoosh
L’instrument à avoir à portée de main, pour squoosher vos images à gogo avec un simple drag and squoosh, réduire leur squoosh , et améliorer le squoosh final de votre dossier à squoosh…
Tiny JPG & Tiny PNG
https://tinyjpg.com/ & https://tinypng.com/
Tout pareil, mais pas dans le détail. C’est-à-dire qu’on y va à la pelle, on enfourne le tout (l’ensemble de tes images) et on récupère direct les images optimisées. C’est l’avantage principal : le traitement par lots. Ça va vite, ça va très vite ! Par contre, pas de prévisualisation du changement de rendu. Mais bon, quelque part, j’ai envie de dire, on s’en fout…
Voilà… Alors, heureux ? Et si tu crois que c’est fini, sache qu’il y en a encore, mais que ça sera dans un second article… Yep, je me sens l’âme d’un scénariste qui voudrait créer un certain suspens. Et la prochaine fois, viens directement à l’EMDay ! Tu n’auras pas besoin de lire mes blagues relous et mes références de film à trois francs six sous, et tu rencontreras tout plein de gens sympas, autour d’une bonne bière bien fraîche et d’une partie de pétanque endiablée ! Et si vous voulez rester au jus des derniers outils pour tout designer ou intégrateur emailing, apprenez chers amis que nous avons créé une chaîne dédiée à ce sujet sur le slack emailgeeks. Une raison de plus pour nous y rejoindre !
PS : Mon copain Fab’ a aussi fait sa petite liste d’outils pratiques pour les emails marketeurs 😉
