{"id":70,"date":"2020-01-28T14:43:55","date_gmt":"2020-01-28T14:43:55","guid":{"rendered":"http:\/\/mail-next.net\/blog-emailing\/?p=70"},"modified":"2024-05-01T12:40:50","modified_gmt":"2024-05-01T12:40:50","slug":"design-emailing-newsletter","status":"publish","type":"post","link":"https:\/\/www.mail-next.net\/blog-emailing\/design-emailing-newsletter\/","title":{"rendered":"Design : 10 r\u00e8gles graphiques et techniques pour vos newsletters sur mobiles ou  ordinateurs"},"content":{"rendered":"\n<p>U<strong>n design attrayant<\/strong>&nbsp;est le premier crit\u00e8re pour mettre en avant votre marque, produit ou service parmi tous vos concurrents.<br>Gr\u00e2ce aux <strong>\u00e9diteurs par glisser-d\u00e9poser<\/strong>, concevoir un&nbsp;mod\u00e8le emailing&nbsp;attractif et moderne est aujourd&rsquo;hui <strong>\u00e0 la port\u00e9e de tous.<\/strong> <\/p>\n\n\n\n<p>Posez vous la question si votre cible est <strong>BtoB, graphismes plus sobres<\/strong>, ou du <strong>BtoC, graphismes plus \u00ab\u00a0tape \u00e0 l\u2019\u0153il\u00a0\u00bb<\/strong> . La newsletter doit \u00eatre en ad\u00e9quation avec l&rsquo;identit\u00e9 visuelle de votre marque et de votre site internet et ce sur chaque support (mobiles, ordinateurs, tablettes).<\/p>\n\n\n\n<p>Pour du BtoB, vous trouverez des exemples de coldmailing ici: <a href=\"https:\/\/www.mail-next.net\/blog-emailing\/4-modeles-demailing-btob-coldmailing\/\">4 mod\u00e8les de prospection BtoB en coldmailing<\/a><br>Pour du <strong>Btoc<\/strong>, nous allons voir comment <strong>enrichir notre newsletter<\/strong> gr\u00e2ce \u00e0  10 points:<\/p>\n\n\n\n<ul><li>Charte visuelle de votre marque<\/li><li>Tendances graphiques en email marketing<\/li><li>Couleurs psychologiques<\/li><li>Personnalisation maximale<\/li><li>Call-to-action<\/li><li>Le responsive<\/li><li>L&rsquo;\u00e9quilibre textes \/ images<\/li><li>Les widgets<\/li><li>L&rsquo;A\/B testing<\/li><li>Les mentions l\u00e9gales<\/li><\/ul>\n\n\n\n<h2><br>1.  Personnalisez aux couleurs de  votre marque, charte visuelle et branding content<\/h2>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/my.mail-next.net\/Petit-bateau-jpg.jpg\" alt=\"\"\/><\/figure>\n\n\n\n<p>Votre newsletter refl\u00e9te votre <strong>image de marque<\/strong>, soignez votre<strong> typographie<\/strong> et les <strong>images choisies<\/strong>.<\/p>\n\n\n\n<p>N&rsquo;oubliez pas d&rsquo;ins\u00e9rez votre logo et la baseline et n\u2019h\u00e9sitez pas \u00e0 cr\u00e9er des infographies gr\u00e2ce au site <a href=\"https:\/\/www.canva.com\/fr_fr\/outils%E2%80%8B\/infographie-v1\/?utm_source=google_sem&amp;utm_medium=cpc&amp;utm_campaign=REV_FR_FR_CanvaPro_Branded_Tier2_EM&amp;utm_term=REV_FR_FR_CanvaPro_Branded_Tier2_Infographic_Maker_EM&amp;gclid=Cj0KCQiAvc_xBRCYARIsAC5QT9lf1dvqRfwmV_dsc4LNR-08vn2jRGdPJfvH9WOPLoebizPuRufL7gkaAsgMEALw_wcB&amp;gclsrc=aw.ds\">Canva<\/a> (branding content).<\/p>\n\n\n\n<p>Travaillez <strong>au pixel pr\u00e8s<\/strong> vos gabarits et hi\u00e9rarchisez vos \u00e9l\u00e9ments en fonction de <strong>leur importance<\/strong> au scroll. <br>Optimisez <strong>vos accroches, <\/strong>pensez a<strong> a\u00e9rer<\/strong> et<strong> n&rsquo;ayez pas peur du vide<\/strong>. Les <strong>alignements<\/strong> sont primordiaux et donneront un aspect professionnel \u00e0 votre newsletter.<br><br><strong>Des exemples de newsletters r\u00e9ussies<\/strong>:<br> INVISION ICI : <a href=\"http:\/\/get.invisionapp.com\/weekly-digest-32\">http:\/\/get.invisionapp.com\/weekly-digest-32<\/a> ou les suivantes:<\/p>\n\n\n\n<h2><br>2. Coller aux tendances<\/h2>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/my.mail-next.net\/Google-Home.jpg\" alt=\"\"\/><\/figure>\n\n\n\n<p>Ne n\u00e9gligez pas les tendances graphiques et les modes actuelles. Que ce soit le <strong>flat design<\/strong> ou encore le<strong> material design<\/strong>, la tendance est aussi aux <strong>images fait main<\/strong>, aux&nbsp;<strong>couleurs punchy&nbsp;<\/strong>et&nbsp;aux <strong>motifs<\/strong>. <\/p>\n\n\n\n<p>De la m\u00eame fa\u00e7on que la page d&rsquo;accueil de votre site, votre emailing doit <strong>convaincre en quelques secondes<\/strong>. Supprimez les \u00e9l\u00e9ments non essentiels, ainsi que les longs textes (pr\u00e9f\u00e9rez des<strong> boutons \u00ab\u00a0Lire la suite\u00a0\u00bb<\/strong>). Utilisez un <strong>maximum de 2 colonnes<\/strong> ainsi que des menus si vous pr\u00e9sentez plusieurs produits\/services. N&rsquo;oubliez pas l&rsquo;objectif: <strong>convertir<\/strong> et offrir \u00e0 l&rsquo;internaute une sortie rapide vers une landingpage optimis\u00e9e pour transformer.<\/p>\n\n\n\n<p>Un fois termin\u00e9,<strong> cr\u00e9ez un mod\u00e8le<\/strong> par type de newsletter (relances commerciales, promotions exceptionnelles, bilan&#8230;) et utiliser ce mod\u00e8le\/template pour envoyer rapidement vos prochaines communications. Vous pourrez faire ceci facilemen<strong>t en<\/strong> <strong>sauvegardant vos mod\u00e8les sur <a href=\"https:\/\/my.mail-next.net\/users\/join.php\">Mail Next<\/a>.<\/strong><\/p>\n\n\n\n<h2><br>3. Choisissez les bonnes couleurs<\/h2>\n\n\n\n<p>Les couleurs influencent de mani\u00e8re significative la mani\u00e8re dont vos contacts vous per\u00e7oivent. Pour rendre vos newsletters plus engageantes,<strong> le choix de<\/strong> <strong>la palette chromatique est donc fondamental<\/strong>.<\/p>\n\n\n\n<p>Chaque couleur apporte un sentiment, un univers. Utilisez les pour influencer vos prospects et leur comportement. Selon cette&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/blog.kissmetrics.com\/color-psychology\/\" target=\"_blank\">\u00e9tude Kissmetrics<\/a>, <strong>la couleur est le premier facteur qui permet d&rsquo;identifier votre marque<\/strong>. Limiter le nombre de couleurs et votre newsletter inspirera confiance et engagement.<\/p>\n\n\n\n<p>Vous pourrez trouver <strong>la correspondance des couleurs&nbsp;et les facteurs psychologiques associ\u00e9s<\/strong> sur <a href=\"https:\/\/www.creanico.fr\/prestations\/les-couleurs-et-les-emotions\/\">ce site<\/a>.<\/p>\n\n\n\n<p>Pour d\u00e9cliner les couleurs sur tous vos supports utilisez un nuancier comme&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/color.adobe.com\/fr\/explore\/?filter=newest\" target=\"_blank\">Adobe Colour CC<\/a>. Cela apportera un regard nouveau et neuf \u00e0 chacune de vos communications.<\/p>\n\n\n\n<h2><br>4. Personnalisation maximale<\/h2>\n\n\n\n<p>D\u00e9s l&rsquo;<strong>objet<\/strong>, ou le<strong> pre-header<\/strong> ins\u00e9rez le nom, pr\u00e9nom,  l&rsquo;activit\u00e9 ou la fonction de votre contact. Le<strong> taux d&rsquo;ouverture<\/strong> n&rsquo;en sera que largement am\u00e9lior\u00e9.<\/p>\n\n\n\n<p>Vous pouvez aussi <strong>ins\u00e9rer dans votre contenu<\/strong> la derni\u00e8re commande de votre prospect pass\u00e9 sur votre site e-commerce, son domaine d&rsquo;activit\u00e9, sa date de naissance etc&#8230; (N\u2019h\u00e9sitez pas \u00e0 r\u00e9clamer \u00e0 votre solution emailing un lien vers votre CRM ou site e-commerce)<\/p>\n\n\n\n<h2><br>5. Ins\u00e9rer le call-to-action au dessus de la ligne de flottaison<\/h2>\n\n\n\n<p>Privil\u00e9giez <strong>un seul bouton Call-to-action et positionn\u00e9 au centre<\/strong>. <br>Ins\u00e9rez un <strong>verbe d&rsquo;action <\/strong>\u00e0 l&rsquo;int\u00e9rieur et mettez en avant une promesse ou une promotion claire.  <br>Colorisez le de fa\u00e7on \u00e0 accentuer le<strong> contraste<\/strong> avec le reste de la newsletter.<br>Ins\u00e9rez un <strong>\u00e9l\u00e9ment d&rsquo;urgence<\/strong> (<em>offre limit\u00e9e<\/em>, <em>plus que x disponibles<\/em>\u2026) .<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/my.mail-next.net\/soldes-le-slip-fran\u00e7ais.jpg\" alt=\"\"\/><\/figure>\n\n\n\n<h2><br>6. Utilisez les templates responsives <\/h2>\n\n\n\n<p>Concevoir des newsletter compatibles sur mobile \u00e0 partir de rien n&rsquo;est pas chose ais\u00e9e. Vous pouvez alors vous aider de nos <strong>nombreux mod\u00e8les responsives en cr\u00e9ant un compte <\/strong><a href=\"https:\/\/my.mail-next.net\/users\/join.php\"><strong>ici<\/strong><\/a><strong>.<\/strong> Vous pouvez aussi importer un template r\u00e9cup\u00e9r\u00e9 sur internet en collant la source html dans l&rsquo;\u00e9diteur. Vous pourrez alors le modifier facilement et \u00e0 votre guise par l&rsquo;\u00e9diteur drag-and-drop (glisser-d\u00e9poser) responsive. <br>Vous trouverez ici un <a href=\"https:\/\/www.mail-next.net\/blog-emailing\/les-templates-graphiques-responsives\/\">aper\u00e7u de nos templates responsives<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/www.mail-next.net\/blog-emailing\/wp-content\/uploads\/2020\/02\/temp2-1024x582.jpg\" alt=\"\"\/><\/figure>\n\n\n\n<h2><br>7. Un bon \u00e9quilibre entre les textes et les images <\/h2>\n\n\n\n<p><strong>\u00ab&nbsp;Une image vaut mille mots&nbsp;\u00bb. <\/strong> Comme on vous le disait, vos emails n\u2019ont que tr\u00e8s peu de temps pour retenir l\u2019attention de vos contacts.<\/p>\n\n\n\n<p><strong>Sp\u00e9cifiez un attribut Alt <\/strong>\u00e0 vos images car la premi\u00e8re lecture de votre  newsletter d\u00e9sactive les images. Ins\u00e9rez du contenu avec une ratio de 50%\/50% environ entre vos images et vos texte.<\/p>\n\n\n\n<p>N\u2019h\u00e9sitez pas \u00e0 cr\u00e9er les<strong> tr\u00e8s tendances GIF anim\u00e9s<\/strong> avec <a href=\"http:\/\/www.giphy.com\/\">Giphy.com<\/a> ou Photoshop : <a href=\"https:\/\/www.olybop.fr\/realiser-cinemagraph-photoshop\/\">https:\/\/www.olybop.fr\/realiser-cinemagraph-photoshop<\/a>  pour mettre en avant votre offre:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" width=\"346\" height=\"750\" src=\"https:\/\/www.mail-next.net\/blog-emailing\/wp-content\/uploads\/2020\/02\/VideoToGif_GIF.gif\" alt=\"\" class=\"wp-image-250\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" width=\"477\" height=\"200\" src=\"https:\/\/www.mail-next.net\/blog-emailing\/wp-content\/uploads\/2020\/02\/giphy.gif\" alt=\"\" class=\"wp-image-251\"\/><\/figure>\n\n\n\n<h2><br>8. Int\u00e9grer des widgets<\/h2>\n\n\n\n<p>Pour faire passer l\u2019information en demandant le moins d\u2019efforts possibles \u00e0 vos lecteurs, tous les moyens sont bons : photos,&nbsp;GIFs anim\u00e9s, vid\u00e9os, plan, boutons\u2026 <\/p>\n\n\n\n<p class=\"has-text-align-left\">Pour coller aux futures tendances de l&#8217;emailing, vous pouvez cr\u00e9er : <br>&#8211; des <strong>comptes a rebours:<\/strong> <a href=\"https:\/\/niftyimages.com\">https:\/\/niftyimages.com<\/a><br>&#8211; des <strong>sliders<\/strong> ou des<strong> accord\u00e9ons<\/strong> : <a href=\"https:\/\/stripo.email\/fr\/\">https:\/\/stripo.email\/fr\/<\/a> <br>&#8211; des <strong>boutons d&rsquo;action<\/strong> dans l&rsquo;objet sur Google Gmail ou des <strong>plans Googlemap<\/strong>: <a href=\"https:\/\/developers.google.com\/gmail\/markup\/apps-script-tutorial#how_does_the_script_work\">https:\/\/developers.google.com\/gmail\/markup\/apps-script-tutorial#how_does_the_script_work<\/a><br>&#8211; une<strong> capture<\/strong> d&rsquo;une vid\u00e9o cliquable vers une vid\u00e9o streaming<br>&#8230;<br>Les vid\u00e9os sont tr\u00e8s appr\u00e9ci\u00e9es en content marketing comme par exemple une s\u00e9rie suivante: <br>-La vid\u00e9o de Juin sp\u00e9ciale Recettes#1;   <br>-La vid\u00e9o de Juillet sp\u00e9ciale Ingr\u00e9dients#2;  <br>&#8230;.<br><strong>La r\u00e9currence et la r\u00e9gularit\u00e9 <\/strong>de votre communication assureront un nombre de clics cons\u00e9quent. <\/p>\n\n\n\n<p>Vous pouvez utilisez le <strong>html5 <\/strong>pour int\u00e9grer des vid\u00e9os dans vos mails, la majorit\u00e9 des clients de messagerie l\u2019interpr\u00e9teront correctement.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/my.mail-next.net\/invis.jpg\" alt=\"\"\/><\/figure>\n\n\n\n<h2><br>9. Comparez avec l&rsquo;A\/B testing<\/h2>\n\n\n\n<p>N&rsquo;h\u00e9sitez pas \u00e0 tester chaque optimisation de vos newsletters avec l\u2019A\/B testing. En quelques clic testez vos r\u00e9alisations sur 5% de votre cible, et choisissez la r\u00e9alisation qui transforme le mieux pour le reste de vos destinataires.<\/p>\n\n\n\n<h2><br>10. Terminez avec un footer professionnel <\/h2>\n\n\n\n<p>Le footer doit comporter votre signature avec un lien explicite pour <strong>vous contacter<\/strong> et<strong> vos r\u00e9seaux sociaux<\/strong>. Il doit faire appara\u00eetre un<strong> lien de d\u00e9sabonnement clair.<\/strong><\/p>\n\n\n\n<p>Ins\u00e9rez aussi les <strong>mentions l\u00e9gales<\/strong> qui s&rsquo;appliquent (CNIL, RGPD\u2026) comme votre adresse postale pour <strong>modifier ses donn\u00e9es personnelles<\/strong> ou g\u00e9rer ses pr\u00e9f\u00e9rences. <br>Exemple: <em>Conform\u00e9ment \u00e0 la loi \u00abinformatique et libert\u00e9s\u00bb du 6 janvier 1978 modifi\u00e9e, vous disposez d&rsquo;un droit d&rsquo;acc\u00e8s, de rectification et de suppression aux donn\u00e9es vous concernant ainsi que du droit de d\u00e9finir des directives g\u00e9n\u00e9rales et particuli\u00e8res d\u00e9finissant la mani\u00e8re dont vous entendez que soient exerc\u00e9s, apr\u00e8s votre d\u00e9c\u00e8s, ces droits, en \u00e9crivant \u00e0 MaSoci\u00e9t\u00e9, Service Juridique, XX rue YYYYY Ville, France.<\/em> <em>Se supprimer de la mailinglist<\/em><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><br><strong>Toutes ces techniques sont applicables gratuitement sur <a href=\"https:\/\/www.mail-next.net\">www.mail-next.net<\/a>, planifiez vos premi\u00e8res campagnes, mesurez et optimisez vos contenus par rapport \u00e0 vos taux d&rsquo;ouverture, de clics ou de d\u00e9sabonnements&#8230;<\/strong><\/p>\n\n\n\n<p>Consultez notre article <a href=\"https:\/\/www.mail-next.net\/blog-emailing\/quand-envoyer-une-newsletter\">Quand envoyer une newsletter?<\/a><\/p>\n\n\n\n<p>Retrouvez ici plus d&rsquo;<a href=\"https:\/\/www.mail-next.net\/blog-emailing\/exemples-emailings-prospection-exemple-newsletters\/\">exemples emailings et d&rsquo;exemples newsletters<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Un design attrayant&nbsp;est le premier crit\u00e8re pour mettre en avant votre marque, produit ou service parmi tous vos concurrents.Gr\u00e2ce aux \u00e9diteurs par glisser-d\u00e9poser, concevoir un&nbsp;mod\u00e8le emailing&nbsp;attractif et moderne est aujourd&rsquo;hui \u00e0 la port\u00e9e de tous. Posez vous la question si votre cible est BtoB, graphismes plus sobres, ou du BtoC, graphismes plus \u00ab\u00a0tape \u00e0 l\u2019\u0153il\u00a0\u00bb [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1195,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[4,3],"tags":[],"_links":{"self":[{"href":"https:\/\/www.mail-next.net\/blog-emailing\/wp-json\/wp\/v2\/posts\/70"}],"collection":[{"href":"https:\/\/www.mail-next.net\/blog-emailing\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mail-next.net\/blog-emailing\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mail-next.net\/blog-emailing\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mail-next.net\/blog-emailing\/wp-json\/wp\/v2\/comments?post=70"}],"version-history":[{"count":104,"href":"https:\/\/www.mail-next.net\/blog-emailing\/wp-json\/wp\/v2\/posts\/70\/revisions"}],"predecessor-version":[{"id":1183,"href":"https:\/\/www.mail-next.net\/blog-emailing\/wp-json\/wp\/v2\/posts\/70\/revisions\/1183"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mail-next.net\/blog-emailing\/wp-json\/wp\/v2\/media\/1195"}],"wp:attachment":[{"href":"https:\/\/www.mail-next.net\/blog-emailing\/wp-json\/wp\/v2\/media?parent=70"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mail-next.net\/blog-emailing\/wp-json\/wp\/v2\/categories?post=70"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mail-next.net\/blog-emailing\/wp-json\/wp\/v2\/tags?post=70"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}