A serious title, isn't it? And yet, dear friends, it is sometimes necessary for me to take on a solemn character in order to tackle serious subjects. For I will try here to answer an existential question: What working method is applied in our HTML email integration production team?
Warning: we want to share here the state of mind, the daily life, the habits, the working methods, and the integration process that we follow at Badsender. This point of view only commits us, as each developer has his own way of working.
1. It's always the same gestures. Always. First, the reception of the elements. Always. (Zinedine Zidane)
This is the essential step for any development to begin. No elements, no integration. No integration... No integration.
We need a model. This is the basis.
And by model, I mean a finalized desktop model, finalThe design should be made in Photoshop, with the layers correctly arranged and separated. Avoid mock-ups made on inDesign or Illustrator, which are not always adapted to the web. And in addition, a responsive mockup (because when you think about it, not doing responsive in emailing, it's not possible anymore, tut tut tut). As a bonus, we will claim confirmation JPEGsto make sure it's the same thing (You can see quite a difference sometimes, believe me!).
Do not hesitate to ask for mock-ups adapted to the Retina if it is part of your customer's requirements: the design will then be made on doubled dimensions (for a 600 pixels wide email, the layout will be 1200 pixels wide. I wasn't in S in high school though...).
Now?
You will also need to receive a link briefing to set up. To make it simple: an Excel file, in which each visual or text that must be clickable in the email will have a valid url indicated.
Tips : Suggest to your client to design a "url builder", an Excel file with some concatenation methods so that each url adopts the relevant tracking code. For that, nothing could be simpler, a good little function like =CONCATENER(cell; cell;), and basta!
And what else?
Finally, in the elements to be received, it will also be required the animated gifs (if there are animated gifs)the videos (if there are videos)the typography, the specific integration constraints to be respected (depending on the routing platform sometimes)... In short, everything that can be useful to the integrator but which he does not have by default on his machine.
2. Comes the cutting/slicing phase (and it's not about whistling)
Most of the time, we first establish a "mental" layout of the model. We transform ourselves into Professor Xavier, from the X-Men: we try to decide which element will be in raw text and formatted via CSS, which element will be in image... This is a crucial step and full of questions : Do we need to design one image for Desktop and another for Responsive for this element? How will the layout behave on Mobile? Is it better to design two cells side by side or just one? Will I pass these texts in HTML with a special typography, or export them as PNG instead? What will be the degradation then? Can I eat a BN between 2 and 3 pm?
All of these questions are often answered by analysis of consultation statistics from previous campaigns. Don't hesitate to ask your client for this data if it exists: it will be a great help to know, for example, that rounded corners on a Call-to-Action might be "risky" to design in HTML and CSS if the main viewing medium is the Outlook desktop software... Take care of it! (it means nothing...)
What goes one way must also go the other way! It's a give-and-take, folks: don't decide all this on your own. Discuss it with your clientwarn him and educate him in good practices but do not necessarily impose everything at once, at the risk of offending him... And a crumpled customer is a badly ironed customer! That's done...
3. And then zou, we code!
Need help?
Reading content isn't everything. The best way is to talk to us.
On this step, I unfortunately don't have much to add... Except this:
- Be sure to use only verified and tested hacks & tips in the
<style>(aborder-collapse:collapseapplied on alltablefor example, could lead to strange renderings on rounded corners or ondashed) - Don't forget to add patches at 120dpi.
- Try to improve the accessibility of your email as much as possible by respecting best practices on accessibility in email marketing This is achieved, among other things, by using semantic tags (
<h1>,<h2>,<h3>,<p>,,<strong>,…). - Add the attribute
role="presentation"to each<table>of your code that would not be an array of data. - Fill in the attribute
langto the tag<html>. - Indicate a relevant title in the
</code>.</li> <li>Make the names of your <code>class</code> and <code>id</code> in the explicit media queries, to make the best use of them and make the code readable and understandable by any other integrator. Thus, the following code : <code>.textaligncenter {text-align:center !important;}</code> will probably be more explicit than <code>.txt_01 {text-align:center !important;}</code>. Well, I think so... Right?</li> <li>Don't forget to design a <a rel="noreferrer noopener" aria-label="preheader (opens in a new tab)" href="https://litmus.com/community/snippets/1-hidden-preheader-text" target="_blank">preheader</a> in the email.</li> </ul> <p>Regarding the code editing software with which you will develop, no preference! At Badsender, we code as well on Dreamweaver as on SublimeText, that's to say! So, to each his own! If you are looking for help to choose one, <a href="https://kinsta.com/fr/blog/meilleurs-editeurs-de-texte/" target="_blank" rel="noreferrer noopener" aria-label="go see up there if I am (opens in a new tab)">go see up there if I am there</a> !</p> <h2 class="wp-block-heading" id="h-4-s-assurer-de-la-proprete-du-code-html">4. Make sure the HTML code is clean</h2> <p>Once the model is coded in HTML and CSS, we have a few steps to follow. You'll see, it's going to go fast. Another 5 kilometers and we go back.</p> <h3 class="wp-block-heading" id="h-commentez-si-vous-le-pouvez">Comment, if you can!</h3> <p>Comments in the HTML code are a precious information for updating or debugging an HTML emailing integration. Think about the future integrator who may one day get the code you have developed: The poor guy! Providing him with simple instructions on how the code works is a sign of respect. And he will be very grateful to you! <em>Give me a high five, colleague!</em></p> <h3 class="wp-block-heading" id="h-l-encodage-des-caracteres-speciaux-e-devient-e-et-caetera-et-caetera">The encoding of special characters: é becomes é, et cetera, et cetera...</h3> <p>I recommend you to encode all the special characters present in the code: à, é, è, ô, ç, etc... <strong>There are platforms for this</strong> <em>(because to do this in public is borderline! A bit of modesty for God's sake!)</em>. At Badsender, we've developed the KrktR tool. We can't guarantee the quality of the code delivered, but hey, it's for us, it's a gift!</p> <h3 class="wp-block-heading" id="h-la-suppression-des-media-queries-inutiles-on-passe-un-coup-de-balai">The removal of useless media queries: a clean sweep!</h3> <p>When using HTML code Master Template, it is recurrent to find big blocks of media queries, present to cope with all the cases of modules behaviors on mobile. However, in order to provide a clean code and as light as possible, we suggest you to use tools like <a rel="noreferrer noopener" aria-label="emailcomb (opens in a new tab)" href="https://emailcomb.com/" target="_blank">emailcomb</a> or <a href="https://alter.email/">alter.email</a> to "clean up" the final HTML code. You'll see, you won't be able to do without it soon... A real drug.</p> <h3 class="wp-block-heading" id="h-et-la-minification">What about minification?</h3> <p>Personally, I'm not a fan. Or only if your code is close to <a aria-label="102 kilobytes, and thus the fateful threshold set by Gmail (opens in a new tab)" href="https://mailchimp.com/fr/help/gmail-is-clipping-my-email/" target="_blank" rel="noreferrer noopener">102 kilobytes, and thus the fateful threshold set by Gmail</a>. But if not, we don't need it. First of all, because the minification of your HTML code could break some of your media queries <em>(yes, it's true)</em> but also and above all because it can delete your comments, or simply make the whole integration unreadable and incomprehensible. </p> <h2 class="wp-block-heading" id="h-5-les-tests-d-email-preview-les-bats-les-tests-d-email-rendering-appelez-les-comme-vous-voudrez">5. Email preview tests, BATs, email rendering tests... Call them what you will!</h2> <p>Naaaaaaaaaan but don't even try to neglect this step. You can't, what am I saying... <strong>YOU SHOULD NOT</strong> provide an integration without having tested it first! For this, not 1, not 3, but 2 methods <em>(which, like wine, should be obligatory! Be careful Gérard !)</em> :</p> <ul class="wp-block-list"> <li><strong>The test on physical media: </strong>Take all the media you have at your disposal immediately. The desktop PC, the laptop at work, the kid's tablet, your wife's cell phone, all the media I tell you! Install all the email software and email applications you can. Also open a set of tabs on several browsers, to webmails where you would have test accounts <em>(create as many as you can, it costs nothing! You will use it for your Carrouf' account !)</em>. <br /><br />And shoot! Bim! you just have to wait for the reception of the proof, and to make sure that everything is ok: the email preview platforms are an essential ally, but they will probably never be able to present all the existing resolutions on the market, nor all the software versions, the browsers, or even the connection speeds... <strong>Nothing beats a good old family test on physical media</strong> to estimate the best time to display an email according to the connection method <em>(wifi, 3G, 4G)</em>or to have the rendering according to the support of consultation, according to the navigator...</li> </ul> <figure class="wp-block-image"><img loading="lazy" decoding="async" width="1024" height="683" src="https://www.badsender.com/wp-content/uploads/2019/11/photo-1543510644-82353c4be12a-1024x683.jpg" alt="" class="wp-image-14074" srcset="https://www.badsender.com/wp-content/uploads/2019/11/photo-1543510644-82353c4be12a-1024x683.jpg 1024w, https://www.badsender.com/wp-content/uploads/2019/11/photo-1543510644-82353c4be12a-300x200.jpg 300w, https://www.badsender.com/wp-content/uploads/2019/11/photo-1543510644-82353c4be12a-768x512.jpg 768w, https://www.badsender.com/wp-content/uploads/2019/11/photo-1543510644-82353c4be12a-624x416.jpg 624w, https://www.badsender.com/wp-content/uploads/2019/11/photo-1543510644-82353c4be12a.jpg 1350w" sizes="(max-width: 1024px) 100vw, 1024px" /><figcaption class="wp-element-caption">For those who have the means...</figcaption></figure> <ul class="wp-block-list"> <li><strong>Email preview platforms</strong>. The grave of my dead, you know them! <a rel="noreferrer noopener" aria-label="Litmus (opens in a new tab)" href="https://litmus.com/" target="_blank">Litmus</a> and <a rel="noreferrer noopener" aria-label="EmailonAcid (opens in a new tab)" href="https://www.emailonacid.com/" target="_blank">EmailonAcid</a> to name only the most famous of course. Take the time to detail the rendering of each screenshot. First of all, because you are paying for it and a penny is a penny, and because in addition, there are sometimes small subtleties. The work of the emailing integrator is also the sense of detail...</li> </ul> <p>To facilitate and streamline the work flow of the emailing integrator, EmailonAcid offers a new feature: The " <a href="https://www.emailonacid.com/help-article/what-is-campaign-precheck/" target="_blank" rel="noreferrer noopener" aria-label="Campaign Precheck (opens in a new tab)">Campaign Precheck</a>" . Practical, even if it won't do the job for you either, don't push it!</p> <p><strong>Do you have anything to add?</strong> What do you do at home? Do you mop the floor before closing the store? Tell us, we're curious! Plaaaaaace to the comments! Unleash the fury Mitch!</p> </div> <div class="wp-block-template-part"> <div class="wp-block-group has-yellow-background-color has-background has-global-padding is-layout-constrained wp-container-core-group-is-layout-4 wp-block-group-is-layout-constrained" style="padding-top:var(--wp--preset--spacing--24);padding-right:var(--wp--preset--spacing--24);padding-bottom:var(--wp--preset--spacing--24);padding-left:var(--wp--preset--spacing--24)"> <div class="wp-block-columns alignwide is-layout-flex wp-container-core-columns-is-layout-2 wp-block-columns-is-layout-flex"> <div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow"> <h2 class="wp-block-heading has-title-4-font-size">Support the "<span lang="en">Email Expiration Date</span>"</h2> </div> <div class="wp-block-column is-layout-flow wp-container-core-column-is-layout-4 wp-block-column-is-layout-flow"> <p> <strong><a href="https://www.brevo.com/fr/">Brevo</a> and <a href="https://www.cofidis.fr/fr/index.html">Cofidis</a> financially support the project.</strong> Join the movement and together, let's make the email industry take responsibility for the climate emergency. </p> <div class="wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex"> <div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="https://www.badsender.com/en/support-expiration-date-email/">I want to know more</a></div> </div> </div> </div> </div> </div> </div> <div class="wp-block-template-part"> <div class="wp-block-group badsender-parts-share has-global-padding is-layout-constrained wp-container-core-group-is-layout-6 wp-block-group-is-layout-constrained" style="padding-top:var(--wp--preset--spacing--24);padding-bottom:var(--wp--preset--spacing--24);"> <p class="has-text-align-center has-large-font-size"> <strong>Share</strong> </p> <ul class="wp-block-social-links has-icon-color has-icon-background-color is-horizontal is-content-justification-center is-layout-flex wp-container-core-social-links-is-layout-1 wp-block-social-links-is-layout-flex"> <li style="color: #FFFFFF; background-color: #000000; " class="wp-social-link wp-social-link-facebook has-base-color has-contrast-background-color wp-block-social-link"><a href="https://www.facebook.com/sharer.php?u=https://www.badsender.com/en/2019/11/05/workflow-integration-html-email/" class="wp-block-social-link-anchor"><svg width="24" height="24" viewbox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M12 2C6.5 2 2 6.5 2 12c0 5 3.7 9.1 8.4 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.5h-1.3c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.4 2.9h-2.3v7C18.3 21.1 22 17 22 12c0-5.5-4.5-10-10-10z"></path></svg><span class="wp-block-social-link-label screen-reader-text">Facebook</span></a></li> <li style="color: #FFFFFF; background-color: #000000; " class="wp-social-link wp-social-link-twitter has-base-color has-contrast-background-color wp-block-social-link"><a href="https://twitter.com/intent/tweet?text=https://www.badsender.com/en/2019/11/05/workflow-integration-html-email/" class="wp-block-social-link-anchor"><svg width="24" height="24" viewbox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M22.23,5.924c-0.736,0.326-1.527,0.547-2.357,0.646c0.847-0.508,1.498-1.312,1.804-2.27 c-0.793,0.47-1.671,0.812-2.606,0.996C18.324,4.498,17.257,4,16.077,4c-2.266,0-4.103,1.837-4.103,4.103 c0,0.322,0.036,0.635,0.106,0.935C8.67,8.867,5.647,7.234,3.623,4.751C3.27,5.357,3.067,6.062,3.067,6.814 c0,1.424,0.724,2.679,1.825,3.415c-0.673-0.021-1.305-0.206-1.859-0.513c0,0.017,0,0.034,0,0.052c0,1.988,1.414,3.647,3.292,4.023 c-0.344,0.094-0.707,0.144-1.081,0.144c-0.264,0-0.521-0.026-0.772-0.074c0.522,1.63,2.038,2.816,3.833,2.85 c-1.404,1.1-3.174,1.756-5.096,1.756c-0.331,0-0.658-0.019-0.979-0.057c1.816,1.164,3.973,1.843,6.29,1.843 c7.547,0,11.675-6.252,11.675-11.675c0-0.178-0.004-0.355-0.012-0.531C20.985,7.47,21.68,6.747,22.23,5.924z"></path></svg><span class="wp-block-social-link-label screen-reader-text">Twitter</span></a></li> <li style="color: #FFFFFF; background-color: #000000; " class="wp-social-link wp-social-link-linkedin has-base-color has-contrast-background-color wp-block-social-link"><a href="https://www.linkedin.com/sharing/share-offsite/?url=https://www.badsender.com/en/2019/11/05/workflow-integration-html-email/" class="wp-block-social-link-anchor"><svg width="24" height="24" viewbox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M19.7,3H4.3C3.582,3,3,3.582,3,4.3v15.4C3,20.418,3.582,21,4.3,21h15.4c0.718,0,1.3-0.582,1.3-1.3V4.3 C21,3.582,20.418,3,19.7,3z M8.339,18.338H5.667v-8.59h2.672V18.338z M7.004,8.574c-0.857,0-1.549-0.694-1.549-1.548 c0-0.855,0.691-1.548,1.549-1.548c0.854,0,1.547,0.694,1.547,1.548C8.551,7.881,7.858,8.574,7.004,8.574z M18.339,18.338h-2.669 v-4.177c0-0.996-0.017-2.278-1.387-2.278c-1.389,0-1.601,1.086-1.601,2.206v4.249h-2.667v-8.59h2.559v1.174h0.037 c0.356-0.675,1.227-1.387,2.526-1.387c2.703,0,3.203,1.779,3.203,4.092V18.338z"></path></svg><span class="wp-block-social-link-label screen-reader-text">LinkedIn</span></a></li> <li style="color: #FFFFFF; background-color: #000000; " class="wp-social-link wp-social-link-mail has-base-color has-contrast-background-color wp-block-social-link"><a href="mailto:?body=https://www.badsender.com/en/2019/11/05/workflow-integration-html-email/" class="wp-block-social-link-anchor"><svg width="24" height="24" viewbox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M19,5H5c-1.1,0-2,.9-2,2v10c0,1.1.9,2,2,2h14c1.1,0,2-.9,2-2V7c0-1.1-.9-2-2-2zm.5,12c0,.3-.2.5-.5.5H5c-.3,0-.5-.2-.5-.5V9.8l7.5,5.6,7.5-5.6V17zm0-9.1L12,13.6,4.5,7.9V7c0-.3.2-.5.5-.5h14c.3,0,.5.2.5.5v.9z"></path></svg><span class="wp-block-social-link-label screen-reader-text">Mail</span></a></li> </ul> </div> </div> <div class="wp-block-template-part"> <div class="wp-block-group has-border-color has-small-font-size badsender-parts-newsletter has-global-padding is-layout-constrained wp-container-core-group-is-layout-7 wp-block-group-is-layout-constrained" style="border-color:#E9E9E9;border-width:0.0625rem;border-radius:0.1875rem;padding-top:var(--wp--preset--spacing--24);padding-right:var(--wp--preset--spacing--24);padding-bottom:var(--wp--preset--spacing--24);padding-left:var(--wp--preset--spacing--24)"> <p class="has-medium-font-size"> <strong>Stay informed with Badsender newsletters</strong> </p> <p class="has-small-font-size"> Every month, we publish a newsletter on email marketing and an infoletter on sobriety and marketing. <a href="https://www.badsender.com/en/newsletter/registration/">Read more</a>. </p> <form id="forminator-module-560354" class="forminator-custom-form forminator-custom-form-560354" method="post" data-forminator-render="0" data-uid="67f9430f27e3c" action=""> <div role="alert" aria-live="polite" class="forminator-response-message forminator-error" aria-hidden="true"></div> <input type="hidden" name="trp-form-language" value="en"/></form> <p class="has-x-small-font-size"> <em>Your email address will never be communicated to a third party. You can unsubscribe at any time with a single click.</em> </p> </div> </div> </div> <div class="wp-block-group alignfull has-grey-background-background-color has-background has-global-padding is-layout-constrained wp-container-core-group-is-layout-10 wp-block-group-is-layout-constrained" style="padding-top:3.75rem;padding-bottom:3.75rem;margin-top:0;margin-bottom:0;"> <div class="wp-block-group has-global-padding is-layout-constrained wp-container-core-group-is-layout-9 wp-block-group-is-layout-constrained"> <h2 class="wp-block-heading has-title-4-font-size" style="margin-bottom:var(--wp--preset--spacing--24)">The author</h2> <div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-3 wp-block-columns-is-layout-flex"> <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:7.5rem;"> <div class="wp-block-avatar"><a href="https://www.badsender.com/en/author/tde/" target="_self" class="wp-block-avatar__link"><img alt='Thomas Defossez Avatar' src='https://secure.gravatar.com/avatar/eb280423f79142f83c14477fff1a8519?s=120&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/eb280423f79142f83c14477fff1a8519?s=240&d=mm&r=g 2x' class='avatar avatar-120 photo wp-block-avatar__image' height='120' width='120' decoding='async'/></a></div> </div> <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"> <div class="wp-block-post-author-name"><a href="https://www.badsender.com/en/author/tde/" target="_self" class="wp-block-post-author-name__link">Thomas Defossez</a></div> <div style="margin-top:0;margin-bottom:var(--wp--preset--spacing--16);" class="wp-block-post-author-biography">Thomas began his career as an email integrator at Experian before setting up his own web agency. Today, Thomas has decided to focus on email in order to become a specialist in HTML integration for this medium. Since the end of 2014, Thomas has been working on various projects for Agence Badsender.com.</div> <div class="wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex"> <div class="wp-block-button is-style-fill"><a href="https://www.badsender.com/en/author/tde/" class="wp-block-button__link has-base-color has-contrast-background-color has-text-color has-background has-link-color wp-element-button">All publications<span class="screen-reader-text"> by Thomas Defossez</span></a></div> </div> </div> </div> </div> <div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-4 wp-block-columns-is-layout-flex" style="border-top-color:var(--wp--preset--color--grey-border);border-top-style:solid;border-top-width:1px;margin-top:var(--wp--preset--spacing--48);padding-top:var(--wp--preset--spacing--24)"> <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"> <div class="post-navigation-link-previous wp-block-post-navigation-link"><span class="post-navigation-link__label">Previous</span> <a href="https://www.badsender.com/en/2019/11/05/bonjour-jai-teste-votre-builder-le-patron-a-linstant/" rel="prev">Hello ! I tested your builder (The Boss) just now 🙂</a></div> </div> <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"> <div class="post-navigation-link-next wp-block-post-navigation-link"><span class="post-navigation-link__label">Next</span> <a href="https://www.badsender.com/en/2019/11/06/beware-of-overly-generic-css-styles/" rel="next">Beware of too generic CSS styles</a></div> </div> </div> </div> <div class="wp-block-group alignfull has-base-background-color has-background has-global-padding is-layout-constrained wp-container-core-group-is-layout-21 wp-block-group-is-layout-constrained" style="padding-top:3.75rem;padding-bottom:3.75rem;margin-top:0;margin-bottom:0;"> <div class="wp-block-group has-global-padding is-layout-constrained wp-container-core-group-is-layout-20 wp-block-group-is-layout-constrained"> <h2 id="comments" class="wp-block-comments-title has-title-4-font-size">3 responses</h2> <ol class="wp-block-comment-template"><li id="comment-321376" class="comment even thread-even depth-1"> <div class="wp-block-group is-layout-flow wp-block-group-is-layout-flow" style="padding-top:var(--wp--preset--spacing--32);padding-bottom:var(--wp--preset--spacing--32)"> <div class="wp-block-columns is-not-stacked-on-mobile is-layout-flex wp-container-core-columns-is-layout-5 wp-block-columns-is-layout-flex"> <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:2.625rem;"> <div class="wp-block-avatar"><img alt='Romain DIDIER Avatar' src='https://secure.gravatar.com/avatar/9f8423a7146320aba56125442e003947?s=42&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/9f8423a7146320aba56125442e003947?s=84&d=mm&r=g 2x' class='avatar avatar-42 photo wp-block-avatar__image' height='42' width='42' decoding='async'/></div> </div> <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"> <div class="wp-block-group is-content-justification-space-between is-layout-flex wp-container-core-group-is-layout-11 wp-block-group-is-layout-flex"> <div class="wp-block-comment-author-name has-sm-font-size">Romain DIDIER</div> <div class="wp-block-comment-date has-sm-font-size"><time datetime="2019-11-06T21:32:11+01:00"><a href="https://www.badsender.com/en/2019/11/05/workflow-integration-html-email/#comment-321376">5 years ago</a></time></div> </div> </div> </div> <div class="wp-block-comment-content has-sm-font-size"><p>Great article (be careful though, it's starting to become a habit).<br /> While reading it I felt like I was reliving my days of the last 10 years.<br /> Two little things I usually do: reduce the weight of my images with Compressor.io and test the correct placement of my links ( even if it seems logical ).<br /> At the pure code level, do not put a URL in the anchor of a link.<br /> Finally, I think that the most important thing is missing in your article, the integrator's motto: Test, test and test!</p> </div> <div class="wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-12 wp-block-group-is-layout-flex"> </div> </div> </li><li id="comment-321390" class="comment byuser comment-author-tde bypostauthor odd alt thread-odd thread-alt depth-1"> <div class="wp-block-group is-layout-flow wp-block-group-is-layout-flow" style="padding-top:var(--wp--preset--spacing--32);padding-bottom:var(--wp--preset--spacing--32)"> <div class="wp-block-columns is-not-stacked-on-mobile is-layout-flex wp-container-core-columns-is-layout-6 wp-block-columns-is-layout-flex"> <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:2.625rem;"> <div class="wp-block-avatar"><img alt='Thomas Defossez Avatar' src='https://secure.gravatar.com/avatar/eb280423f79142f83c14477fff1a8519?s=42&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/eb280423f79142f83c14477fff1a8519?s=84&d=mm&r=g 2x' class='avatar avatar-42 photo wp-block-avatar__image' height='42' width='42' decoding='async'/></div> </div> <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"> <div class="wp-block-group is-content-justification-space-between is-layout-flex wp-container-core-group-is-layout-14 wp-block-group-is-layout-flex"> <div class="wp-block-comment-author-name has-sm-font-size">Thomas Defossez</div> <div class="wp-block-comment-date has-sm-font-size"><time datetime="2019-11-06T23:34:25+01:00"><a href="https://www.badsender.com/en/2019/11/05/workflow-integration-html-email/#comment-321390">5 years ago</a></time></div> </div> </div> </div> <div class="wp-block-comment-content has-sm-font-size"><p>@Romain DIDIER: thanks Romain, I'll be careful next article, I'll try to make something more confusing 😁 Otherwise, you're totally right: I'll fix the article as soon as possible to add your tips (especially since that's what I'm going through too, but it's hard to list everything). But really, if you have any comments, you can see that it's not such a good article... I still have a lot of progress to make...</p> </div> <div class="wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-15 wp-block-group-is-layout-flex"> </div> </div> </li><li id="comment-321432" class="comment even thread-even depth-1"> <div class="wp-block-group is-layout-flow wp-block-group-is-layout-flow" style="padding-top:var(--wp--preset--spacing--32);padding-bottom:var(--wp--preset--spacing--32)"> <div class="wp-block-columns is-not-stacked-on-mobile is-layout-flex wp-container-core-columns-is-layout-7 wp-block-columns-is-layout-flex"> <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:2.625rem;"> <div class="wp-block-avatar"><img alt='Romain DIDIER Avatar' src='https://secure.gravatar.com/avatar/9f8423a7146320aba56125442e003947?s=42&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/9f8423a7146320aba56125442e003947?s=84&d=mm&r=g 2x' class='avatar avatar-42 photo wp-block-avatar__image' height='42' width='42' decoding='async'/></div> </div> <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"> <div class="wp-block-group is-content-justification-space-between is-layout-flex wp-container-core-group-is-layout-17 wp-block-group-is-layout-flex"> <div class="wp-block-comment-author-name has-sm-font-size">Romain DIDIER</div> <div class="wp-block-comment-date has-sm-font-size"><time datetime="2019-11-07T09:55:14+01:00"><a href="https://www.badsender.com/en/2019/11/05/workflow-integration-html-email/#comment-321432">5 years ago</a></time></div> </div> </div> </div> <div class="wp-block-comment-content has-sm-font-size"><p>@Thomas Defossez Nothing is ever perfect the first time^^ but initiatives should be encouraged 🙂 Honestly the article is already quite complete and I searched to find things to add...</p> </div> <div class="wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-18 wp-block-group-is-layout-flex"> </div> </div> </li></ol> <div id="respond" class="comment-respond wp-block-post-comments-form"> <h3 id="reply-title" class="comment-reply-title">Leave a Reply</h3><form action="https://www.badsender.com/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate data-trp-original-action="https://www.badsender.com/wp-comments-post.php"><p class="comment-notes"><span id="email-notes">Your email address will not be published.</span> <span class="required-field-message">Required fields are marked <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">How <span class="required">*</span></label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required></textarea></p><p class="comment-form-author"><label for="author">Name <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required /></p> <p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required /></p> <p class="comment-form-url"><label for="url">Website</label> <input id="url" name="url" type="url" value="" size="30" maxlength="200" autocomplete="url" /></p> <p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes" /> <label for="wp-comment-cookies-consent">Save my name, email, and website in this browser for the next time I comment.</label></p> <p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Post Comment" /> <input type='hidden' name='comment_post_ID' value='14022' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> </p><p style="display: none;"><input type="hidden" id="akismet_comment_nonce" name="akismet_comment_nonce" value="c4f16aba0c" /></p><p style="display: none !important;" class="akismet-fields-container" data-prefix="ak_"><label>Δ<textarea name="ak_hp_textarea" cols="45" rows="8" maxlength="100"></textarea></label><input type="hidden" id="ak_js_1" name="ak_js" value="122"/><script>document.getElementById( "ak_js_1" ).setAttribute( "value", ( new Date() ).getTime() );</script></p><input type="hidden" name="trp-form-language" value="en"/></form> </div><!-- #respond --> </div> </div> </main> <div class="wp-block-template-part"> <footer data-elementor-type="footer" data-elementor-id="14487" class="elementor elementor-14487 elementor-location-footer" data-elementor-post-type="elementor_library"> <div class="elementor-element elementor-element-24ba4e8 e-flex e-con-boxed e-con e-parent" data-id="24ba4e8" data-element_type="container" data-settings="{"background_background":"classic"}"> <div class="e-con-inner"> <div class="elementor-element elementor-element-1144a85 e-con-full e-flex e-con e-child" data-id="1144a85" data-element_type="container"> <div class="elementor-element elementor-element-c3f1376 elementor-widget elementor-widget-image" data-id="c3f1376" data-element_type="widget" data-widget_type="image.default"> <div class="elementor-widget-container"> <a href="https://www.badsender.com/en/"> <img loading="lazy" decoding="async" width="192" height="48" src="https://www.badsender.com/wp-content/uploads/2023/06/Logo.svg" class="attachment-full size-full wp-image-559948" alt="Badsender" /> </a> </div> </div> <div class="elementor-element elementor-element-3ed2e47 elementor-widget elementor-widget-text-editor" data-id="3ed2e47" data-element_type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <p>Disruptor of More Responsible Marketing.</p> </div> </div> <!-- dce invisible element b91c24c --> </div> <div class="elementor-element elementor-element-788e8cc e-con-full e-flex e-con e-child" data-id="788e8cc" data-element_type="container"> <div class="elementor-element elementor-element-8da28b5 elementor-widget elementor-widget-text-editor" data-id="8da28b5" data-element_type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> Follow us <a href="https://www.badsender.com/en/newsletter/registration/">via our newsletter</a>on <a href="https://www.linkedin.com/company/badsender/" target="_blank" rel="noopener">Linkedin</a>, <a href="https://www.youtube.com/channel/UCgRBfIEah50OIsdXlYclZxw" target="_blank" rel="noopener">Youtube</a>, <a href="https://www.badsender.com/en/articles/feed/">in RSS feed</a><br /> Podcast Badsender (<a href="https://open.spotify.com/show/3YZTeq2TpICcNByyXZdd3n">Spotify</a>, <a href="https://podcasts.apple.com/us/podcast/badsender-agitateurs-demails/id1504855049">Apple Podcast</a>, <a href="https://www.deezer.com/fr/show/991392">Deezer</a>)<br />Non mais concrètement podcast (<a href="https://open.spotify.com/show/4zQjgAEaOBLvDHtKU3YHUz">Spotify</a>, <a href="https://podcasts.apple.com/fr/podcast/non-mais-concr%C3%A8tement-comment-on-fait-la-transition/id1647802411">Apple Podcast</a>, <a href="https://www.deezer.com/fr/show/4703327">Deezer</a>)<br />2025 - Badsender </div> </div> <div class="elementor-element elementor-element-a92a3c9 elementor-widget elementor-widget-text-editor" data-id="a92a3c9" data-element_type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <p>Website illustrations sourced from <a href="https://icones8.fr/illustrations/style--3d-flame" target="_blank" rel="noopener">Icons8 (Flame 3D library)</a> and thanks to <a href="https://dribbble.com/thierryfousse" target="_blank" rel="noopener">the wonderful work by Thierry Fousse</a> ! Images highlighting the articles, most of them from the website <a href="https://unsplash.com/">Unsplash.com</a>. </p> </div> </div> </div> <div class="elementor-element elementor-element-f43e598 e-con-full e-flex e-con e-child" data-id="f43e598" data-element_type="container"> <div class="elementor-element elementor-element-7c5338b elementor-nav-menu--dropdown-none elementor-nav-menu__align-end elementor-widget elementor-widget-nav-menu" data-id="7c5338b" data-element_type="widget" data-settings="{"layout":"vertical","submenu_icon":{"value":"<i class=\"\"><\/i>","library":""}}" data-widget_type="nav-menu.default"> <div class="elementor-widget-container"> <nav aria-label="Menu" class="elementor-nav-menu--main elementor-nav-menu__container elementor-nav-menu--layout-vertical e--pointer-none"> <ul id="menu-1-7c5338b" class="elementor-nav-menu sm-vertical"><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-privacy-policy menu-item-508446"><a rel="privacy-policy" href="https://www.badsender.com/en/private-life/" class="elementor-item">Privacy Policy</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-508444"><a href="https://www.badsender.com/en/endorsements/" class="elementor-item">Legal information</a></li> </ul> </nav> <nav class="elementor-nav-menu--dropdown elementor-nav-menu__container" aria-hidden="true"> <ul id="menu-2-7c5338b" class="elementor-nav-menu sm-vertical"><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-privacy-policy menu-item-508446"><a rel="privacy-policy" href="https://www.badsender.com/en/private-life/" class="elementor-item" tabindex="-1">Privacy Policy</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-508444"><a href="https://www.badsender.com/en/endorsements/" class="elementor-item" tabindex="-1">Legal information</a></li> </ul> </nav> </div> </div> </div> </div> </div> </footer> </div> </div> <template id="tp-language" data-tp-language="en_US"></template> <!-- Consent Management powered by Complianz | GDPR/CCPA Cookie Consent https://wordpress.org/plugins/complianz-gdpr --> <div id="cmplz-cookiebanner-container"><div class="cmplz-cookiebanner cmplz-hidden banner-1 bottom-right-view-preferences optin cmplz-bottom-right cmplz-categories-type-view-preferences" aria-modal="true" data-nosnippet="true" role="dialog" aria-live="polite" aria-labelledby="cmplz-header-1-optin" aria-describedby="cmplz-message-1-optin"> <div class="cmplz-header"> <div class="cmplz-logo"></div> <div class="cmplz-title" id="cmplz-header-1-optin">Yes, we use cookies too</div> <div class="cmplz-close" tabindex="0" role="button" aria-label="Close dialog" data-no-translation-aria-label=""> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="times" class="svg-inline--fa fa-times fa-w-11" role="img" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 352 512"><path fill="currentColor" d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"></path></svg> </div> </div> <div class="cmplz-divider cmplz-divider-header"></div> <div class="cmplz-body"> <div class="cmplz-message" id="cmplz-message-1-optin">We don't use them for advertising or retargeting, but to make your browsing easier (for example, to watch our live shows, we need you to accept Youtube cookies). That's all we do.<br /> <br /> We use Matomo with anonymized audience tracking and that's cool.</div> <!-- categories start --> <div class="cmplz-categories"> <details class="cmplz-category cmplz-functional" > <summary> <span class="cmplz-category-header"> <span class="cmplz-category-title">Functional</span> <span class='cmplz-always-active'> <span class="cmplz-banner-checkbox"> <input type="checkbox" id="cmplz-functional-optin" data-category="cmplz_functional" class="cmplz-consent-checkbox cmplz-functional" size="40" value="1"/> <label class="cmplz-label" for="cmplz-functional-optin" tabindex="0"><span class="screen-reader-text">Functional</span></label> </span> Toujours activé </span> <span class="cmplz-icon cmplz-open"> <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 448 512" height="18" ><path d="M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z"/></svg> </span> </span> </summary> <div class="cmplz-description"> <span class="cmplz-description-functional">The storage or technical access is strictly necessary for the purpose of legitimate interest to enable the use of a specific service explicitly requested by the subscriber or user, or for the sole purpose of carrying out the transmission of a communication over an electronic communications network.</span> </div> </details> <details class="cmplz-category cmplz-preferences" > <summary> <span class="cmplz-category-header"> <span class="cmplz-category-title">Preferences</span> <span class="cmplz-banner-checkbox"> <input type="checkbox" id="cmplz-preferences-optin" data-category="cmplz_preferences" class="cmplz-consent-checkbox cmplz-preferences" size="40" value="1"/> <label class="cmplz-label" for="cmplz-preferences-optin" tabindex="0"><span class="screen-reader-text">Preferences</span></label> </span> <span class="cmplz-icon cmplz-open"> <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 448 512" height="18" ><path d="M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z"/></svg> </span> </span> </summary> <div class="cmplz-description"> <span class="cmplz-description-preferences">Technical access or storage is necessary for the legitimate purpose of storing preferences not requested by the subscriber or Internet user.</span> </div> </details> <details class="cmplz-category cmplz-statistics" > <summary> <span class="cmplz-category-header"> <span class="cmplz-category-title">Statistics</span> <span class="cmplz-banner-checkbox"> <input type="checkbox" id="cmplz-statistics-optin" data-category="cmplz_statistics" class="cmplz-consent-checkbox cmplz-statistics" size="40" value="1"/> <label class="cmplz-label" for="cmplz-statistics-optin" tabindex="0"><span class="screen-reader-text">Statistics</span></label> </span> <span class="cmplz-icon cmplz-open"> <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 448 512" height="18" ><path d="M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z"/></svg> </span> </span> </summary> <div class="cmplz-description"> <span class="cmplz-description-statistics">Storage or technical access that is used exclusively for statistical purposes.</span> <span class="cmplz-description-statistics-anonymous">Technical storage or access that is used exclusively for anonymous statistical purposes. In the absence of a subpoena, voluntary compliance by your Internet service provider, or additional records from a third party, the information stored or retrieved for this sole purpose generally cannot be used to identify you.</span> </div> </details> <details class="cmplz-category cmplz-marketing" > <summary> <span class="cmplz-category-header"> <span class="cmplz-category-title">Marketing</span> <span class="cmplz-banner-checkbox"> <input type="checkbox" id="cmplz-marketing-optin" data-category="cmplz_marketing" class="cmplz-consent-checkbox cmplz-marketing" size="40" value="1"/> <label class="cmplz-label" for="cmplz-marketing-optin" tabindex="0"><span class="screen-reader-text">Marketing</span></label> </span> <span class="cmplz-icon cmplz-open"> <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 448 512" height="18" ><path d="M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z"/></svg> </span> </span> </summary> <div class="cmplz-description"> <span class="cmplz-description-marketing">The storage or technical access is necessary to create user profiles to send advertisements, or to track the user across a website or multiple websites for similar marketing purposes.</span> </div> </details> </div><!-- categories end --> </div> <div class="cmplz-links cmplz-information"> <a class="cmplz-link cmplz-manage-options cookie-statement" href="#" data-relative_url="#cmplz-manage-consent-container" data-no-translation="" data-trp-gettext="">Gérer les options</a> <a class="cmplz-link cmplz-manage-third-parties cookie-statement" href="#" data-relative_url="#cmplz-cookies-overview" data-no-translation="" data-trp-gettext="">Gérer les services</a> <a class="cmplz-link cmplz-manage-vendors tcf cookie-statement" href="#" data-relative_url="#cmplz-tcf-wrapper" data-no-translation="" data-trp-gettext="">Manage {vendor_count} vendors</a> <a class="cmplz-link cmplz-external cmplz-read-more-purposes tcf" target="_blank" rel="noopener noreferrer nofollow" href="https://cookiedatabase.org/tcf/purposes/" data-no-translation="" data-trp-gettext="">En savoir plus sur ces finalités</a> </div> <div class="cmplz-divider cmplz-footer"></div> <div class="cmplz-buttons"> <button class="cmplz-btn cmplz-accept">Accept</button> <button class="cmplz-btn cmplz-deny">Refuse</button> <button class="cmplz-btn cmplz-view-preferences">View preferences</button> <button class="cmplz-btn cmplz-save-preferences">Save preferences</button> <a class="cmplz-btn cmplz-manage-options tcf cookie-statement" href="#" data-relative_url="#cmplz-manage-consent-container">View preferences</a> </div> <div class="cmplz-links cmplz-documents"> <a class="cmplz-link cookie-statement" href="#" data-relative_url="">{title}</a> <a class="cmplz-link privacy-statement" href="#" data-relative_url="">{title}</a> <a class="cmplz-link impressum" href="#" data-relative_url="">{title}</a> </div> </div> </div> <div id="cmplz-manage-consent" data-nosnippet="true"><button class="cmplz-btn cmplz-hidden cmplz-manage-consent manage-consent-1">Yes, we use cookies too</button> </div> <script> const lazyloadRunObserver = () => { const lazyloadBackgrounds = document.querySelectorAll( `.e-con.e-parent:not(.e-lazyloaded)` ); const lazyloadBackgroundObserver = new IntersectionObserver( ( entries ) => { entries.forEach( ( entry ) => { if ( entry.isIntersecting ) { let lazyloadBackground = entry.target; if( lazyloadBackground ) { lazyloadBackground.classList.add( 'e-lazyloaded' ); } lazyloadBackgroundObserver.unobserve( entry.target ); } }); }, { rootMargin: '200px 0px 200px 0px' } ); lazyloadBackgrounds.forEach( ( lazyloadBackground ) => { lazyloadBackgroundObserver.observe( lazyloadBackground ); } ); }; const events = [ 'DOMContentLoaded', 'elementor/lazyload/observe', ]; events.forEach( ( event ) => { document.addEventListener( event, lazyloadRunObserver ); } ); </script> <style id='core-block-supports-inline-css'> .wp-elements-cc86b9e16453901c05eb568d074f1664 a:where(:not(.wp-element-button)){color:var(--wp--preset--color--base);}.wp-elements-d6cd143b475b1f5c7fdff6b90ecc882d a:where(:not(.wp-element-button)){color:var(--wp--preset--color--base);}.wp-elements-40e4fbaddbf3e30ec9ad2a7ff7fede3e a:where(:not(.wp-element-button)){color:var(--wp--preset--color--base);}.wp-container-core-group-is-layout-1{gap:0.2em;justify-content:center;}.wp-container-core-group-is-layout-2 > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width:60rem;margin-left:auto !important;margin-right:auto !important;}.wp-container-core-group-is-layout-2 > .alignwide{max-width:60rem;}.wp-container-core-group-is-layout-2 .alignfull{max-width:none;}.wp-container-core-group-is-layout-2 > .alignfull{margin-right:calc(var(--wp--preset--spacing--32) * -1);margin-left:calc(var(--wp--preset--spacing--32) * -1);}.wp-container-core-group-is-layout-2 > *{margin-block-start:0;margin-block-end:0;}.wp-container-core-group-is-layout-2 > * + *{margin-block-start:12px;margin-block-end:0;}.wp-elements-a8fd122f2d958b1675e336e959da8fb8 a:where(:not(.wp-element-button)){color:var(--wp--preset--color--contrast);}.wp-container-core-columns-is-layout-1{flex-wrap:nowrap;}.wp-container-core-group-is-layout-3 > .alignfull{margin-right:calc(var(--wp--preset--spacing--24) * -1);margin-left:calc(var(--wp--preset--spacing--24) * -1);}.wp-container-core-column-is-layout-4 > *{margin-block-start:0;margin-block-end:0;}.wp-container-core-column-is-layout-4 > * + *{margin-block-start:var(--wp--preset--spacing--16);margin-block-end:0;}.wp-container-core-columns-is-layout-2{flex-wrap:nowrap;}.wp-container-core-group-is-layout-4 > .alignfull{margin-right:calc(var(--wp--preset--spacing--24) * -1);margin-left:calc(var(--wp--preset--spacing--24) * -1);}.wp-container-core-group-is-layout-5 > *{margin-block-start:0;margin-block-end:0;}.wp-container-core-group-is-layout-5 > * + *{margin-block-start:var(--wp--preset--spacing--32);margin-block-end:0;}.wp-container-core-social-links-is-layout-1{gap:var(--wp--preset--spacing--10) 0.5em;justify-content:center;}.wp-container-core-group-is-layout-6 > *{margin-block-start:0;margin-block-end:0;}.wp-container-core-group-is-layout-6 > * + *{margin-block-start:var(--wp--preset--spacing--10);margin-block-end:0;}.wp-container-core-group-is-layout-7 > .alignfull{margin-right:calc(var(--wp--preset--spacing--24) * -1);margin-left:calc(var(--wp--preset--spacing--24) * -1);}.wp-container-core-group-is-layout-7 > *{margin-block-start:0;margin-block-end:0;}.wp-container-core-group-is-layout-7 > * + *{margin-block-start:var(--wp--preset--spacing--6);margin-block-end:0;}.wp-container-core-columns-is-layout-3{flex-wrap:nowrap;gap:2em var(--wp--preset--spacing--32);}.wp-container-core-group-is-layout-9 > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width:45rem;margin-left:auto !important;margin-right:auto !important;}.wp-container-core-group-is-layout-9 > .alignwide{max-width:45rem;}.wp-container-core-group-is-layout-9 .alignfull{max-width:none;}.wp-container-core-columns-is-layout-4{flex-wrap:nowrap;}.wp-container-core-group-is-layout-10 > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width:960px;margin-left:auto !important;margin-right:auto !important;}.wp-container-core-group-is-layout-10 > .alignwide{max-width:960px;}.wp-container-core-group-is-layout-10 .alignfull{max-width:none;}.wp-container-core-group-is-layout-11{justify-content:space-between;}.wp-container-core-columns-is-layout-5{flex-wrap:nowrap;gap:2em var(--wp--preset--spacing--10);}.wp-container-core-group-is-layout-12{flex-wrap:nowrap;}.wp-container-core-group-is-layout-14{justify-content:space-between;}.wp-container-core-columns-is-layout-6{flex-wrap:nowrap;gap:2em var(--wp--preset--spacing--10);}.wp-container-core-group-is-layout-15{flex-wrap:nowrap;}.wp-container-core-group-is-layout-17{justify-content:space-between;}.wp-container-core-columns-is-layout-7{flex-wrap:nowrap;gap:2em var(--wp--preset--spacing--10);}.wp-container-core-group-is-layout-18{flex-wrap:nowrap;}.wp-container-core-group-is-layout-20 > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width:45rem;margin-left:auto !important;margin-right:auto !important;}.wp-container-core-group-is-layout-20 > .alignwide{max-width:45rem;}.wp-container-core-group-is-layout-20 .alignfull{max-width:none;}.wp-container-core-group-is-layout-21 > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width:960px;margin-left:auto !important;margin-right:auto !important;}.wp-container-core-group-is-layout-21 > .alignwide{max-width:960px;}.wp-container-core-group-is-layout-21 .alignfull{max-width:none;} </style> <script defer src="https://www.badsender.com/wp-content/plugins/akismet/_inc/akismet-frontend.js" id="akismet-frontend-js"></script> <script src="https://www.badsender.com/wp-includes/js/comment-reply.min.js" id="comment-reply-js" async data-wp-strategy="async"></script> <script id="trp-dynamic-translator-js-extra"> var trp_data = {"trp_custom_ajax_url":"https:\/\/www.badsender.com\/wp-content\/plugins\/translatepress-multilingual\/includes\/trp-ajax.php","trp_wp_ajax_url":"https:\/\/www.badsender.com\/wp-admin\/admin-ajax.php","trp_language_to_query":"en_US","trp_original_language":"fr_FR","trp_current_language":"en_US","trp_skip_selectors":["[data-no-translation]","[data-no-dynamic-translation]","[data-trp-translate-id-innertext]","script","style","head","trp-span","translate-press","[data-trp-translate-id]","[data-trpgettextoriginal]","[data-trp-post-slug]"],"trp_base_selectors":["data-trp-translate-id","data-trpgettextoriginal","data-trp-post-slug"],"trp_attributes_selectors":{"text":{"accessor":"outertext","attribute":false},"block":{"accessor":"innertext","attribute":false},"image_src":{"selector":"img[src]","accessor":"src","attribute":true},"submit":{"selector":"input[type='submit'],input[type='button'], input[type='reset']","accessor":"value","attribute":true},"placeholder":{"selector":"input[placeholder],textarea[placeholder]","accessor":"placeholder","attribute":true},"title":{"selector":"[title]","accessor":"title","attribute":true},"a_href":{"selector":"a[href]","accessor":"href","attribute":true},"button":{"accessor":"outertext","attribute":false},"option":{"accessor":"innertext","attribute":false},"aria_label":{"selector":"[aria-label]","accessor":"aria-label","attribute":true},"video_src":{"selector":"video[src]","accessor":"src","attribute":true},"video_poster":{"selector":"video[poster]","accessor":"poster","attribute":true},"video_source_src":{"selector":"video source[src]","accessor":"src","attribute":true},"audio_src":{"selector":"audio[src]","accessor":"src","attribute":true},"audio_source_src":{"selector":"audio source[src]","accessor":"src","attribute":true},"picture_image_src":{"selector":"picture image[src]","accessor":"src","attribute":true},"picture_source_srcset":{"selector":"picture source[srcset]","accessor":"srcset","attribute":true},"image_alt":{"selector":"img[alt]","accessor":"alt","attribute":true},"meta_desc":{"selector":"meta[name=\"description\"],meta[property=\"og:title\"],meta[property=\"og:description\"],meta[property=\"og:site_name\"],meta[property=\"og:image:alt\"],meta[name=\"twitter:title\"],meta[name=\"twitter:description\"],meta[name=\"twitter:image:alt\"],meta[name=\"DC.Title\"],meta[name=\"DC.Description\"],meta[property=\"article:section\"],meta[property=\"article:tag\"]","accessor":"content","attribute":true},"page_title":{"selector":"title","accessor":"innertext","attribute":false},"meta_desc_img":{"selector":"meta[property=\"og:image\"],meta[property=\"og:image:secure_url\"],meta[name=\"twitter:image\"]","accessor":"content","attribute":true}},"trp_attributes_accessors":["outertext","innertext","src","value","placeholder","title","href","aria-label","poster","srcset","alt","content"],"gettranslationsnonceregular":"3a4b599971","showdynamiccontentbeforetranslation":"","skip_strings_from_dynamic_translation":[],"skip_strings_from_dynamic_translation_for_substrings":{"href":["amazon-adsystem","googleads","g.doubleclick"]},"duplicate_detections_allowed":"100","trp_translate_numerals_opt":"no","trp_no_auto_translation_selectors":["[data-no-auto-translation]"]}; </script> <script src="https://www.badsender.com/wp-content/plugins/translatepress-multilingual/assets/js/trp-translate-dom-changes.js" id="trp-dynamic-translator-js"></script> <script src="https://www.badsender.com/wp-content/plugins/elementor-pro/assets/lib/smartmenus/jquery.smartmenus.min.js" id="smartmenus-js"></script> <script src="https://www.badsender.com/wp-content/plugins/elementor-pro/assets/lib/sticky/jquery.sticky.min.js" id="e-sticky-js"></script> <script id="cmplz-cookiebanner-js-extra"> var complianz = {"prefix":"cmplz_","user_banner_id":"1","set_cookies":[],"block_ajax_content":"0","banner_version":"69","version":"7.4.0","store_consent":"","do_not_track_enabled":"1","consenttype":"optin","region":"eu","geoip":"","dismiss_timeout":"","disable_cookiebanner":"","soft_cookiewall":"","dismiss_on_scroll":"","cookie_expiry":"365","url":"https:\/\/www.badsender.com\/en\/wp-json\/complianz\/v1\/","locale":"lang=en&locale=en_US","set_cookies_on_root":"0","cookie_domain":"","current_policy_id":"32","cookie_path":"\/","categories":{"statistics":"statistics","marketing":"marketing"},"tcf_active":"","placeholdertext":"Cliquez pour accepter les cookies {category} et activer ce contenu","css_file":"https:\/\/www.badsender.com\/wp-content\/uploads\/complianz\/css\/banner-{banner_id}-{type}.css?v=69","page_links":{"eu":{"cookie-statement":{"title":"Politique de cookies ","url":"https:\/\/www.badsender.com\/en\/policy-of-cookies-eu\/"},"privacy-statement":{"title":"Vie priv\u00e9e","url":"https:\/\/www.badsender.com\/en\/private-life\/"}}},"tm_categories":"","forceEnableStats":"","preview":"","clean_cookies":"","aria_label":"Cliquez pour accepter les cookies {category} et activer ce contenu"}; </script> <script defer src="https://www.badsender.com/wp-content/plugins/complianz-gdpr/cookiebanner/js/complianz.min.js" id="cmplz-cookiebanner-js"></script> <script id="cmplz-cookiebanner-js-after"> if ('undefined' != typeof window.jQuery) { jQuery(document).ready(function ($) { $(document).on('elementor/popup/show', () => { let rev_cats = cmplz_categories.reverse(); for (let key in rev_cats) { if (rev_cats.hasOwnProperty(key)) { let category = cmplz_categories[key]; if (cmplz_has_consent(category)) { document.querySelectorAll('[data-category="' + category + '"]').forEach(obj => { cmplz_remove_placeholder(obj); }); } } } let services = cmplz_get_services_on_page(); for (let key in services) { if (services.hasOwnProperty(key)) { let service = services[key].service; let category = services[key].category; if (cmplz_has_service_consent(service, category)) { document.querySelectorAll('[data-service="' + service + '"]').forEach(obj => { cmplz_remove_placeholder(obj); }); } } } }); }); } document.addEventListener("cmplz_enable_category", function(consentData) { var category = consentData.detail.category; var services = consentData.detail.services; var blockedContentContainers = []; let selectorVideo = '.cmplz-elementor-widget-video-playlist[data-category="'+category+'"],.elementor-widget-video[data-category="'+category+'"]'; let selectorGeneric = '[data-cmplz-elementor-href][data-category="'+category+'"]'; for (var skey in services) { if (services.hasOwnProperty(skey)) { let service = skey; selectorVideo +=',.cmplz-elementor-widget-video-playlist[data-service="'+service+'"],.elementor-widget-video[data-service="'+service+'"]'; selectorGeneric +=',[data-cmplz-elementor-href][data-service="'+service+'"]'; } } document.querySelectorAll(selectorVideo).forEach(obj => { let elementService = obj.getAttribute('data-service'); if ( cmplz_is_service_denied(elementService) ) { return; } if (obj.classList.contains('cmplz-elementor-activated')) return; obj.classList.add('cmplz-elementor-activated'); if ( obj.hasAttribute('data-cmplz_elementor_widget_type') ){ let attr = obj.getAttribute('data-cmplz_elementor_widget_type'); obj.classList.removeAttribute('data-cmplz_elementor_widget_type'); obj.classList.setAttribute('data-widget_type', attr); } if (obj.classList.contains('cmplz-elementor-widget-video-playlist')) { obj.classList.remove('cmplz-elementor-widget-video-playlist'); obj.classList.add('elementor-widget-video-playlist'); } obj.setAttribute('data-settings', obj.getAttribute('data-cmplz-elementor-settings')); blockedContentContainers.push(obj); }); document.querySelectorAll(selectorGeneric).forEach(obj => { let elementService = obj.getAttribute('data-service'); if ( cmplz_is_service_denied(elementService) ) { return; } if (obj.classList.contains('cmplz-elementor-activated')) return; if (obj.classList.contains('cmplz-fb-video')) { obj.classList.remove('cmplz-fb-video'); obj.classList.add('fb-video'); } obj.classList.add('cmplz-elementor-activated'); obj.setAttribute('data-href', obj.getAttribute('data-cmplz-elementor-href')); blockedContentContainers.push(obj.closest('.elementor-widget')); }); /** * Trigger the widgets in Elementor */ for (var key in blockedContentContainers) { if (blockedContentContainers.hasOwnProperty(key) && blockedContentContainers[key] !== undefined) { let blockedContentContainer = blockedContentContainers[key]; if (elementorFrontend.elementsHandler) { elementorFrontend.elementsHandler.runReadyTrigger(blockedContentContainer) } var cssIndex = blockedContentContainer.getAttribute('data-placeholder_class_index'); blockedContentContainer.classList.remove('cmplz-blocked-content-container'); blockedContentContainer.classList.remove('cmplz-placeholder-' + cssIndex); } } }); </script> <script src="https://www.badsender.com/wp-content/plugins/elementor-pro/assets/js/webpack-pro.runtime.min.js" id="elementor-pro-webpack-runtime-js"></script> <script src="https://www.badsender.com/wp-content/plugins/elementor/assets/js/webpack.runtime.min.js" id="elementor-webpack-runtime-js"></script> <script src="https://www.badsender.com/wp-content/plugins/elementor/assets/js/frontend-modules.min.js" id="elementor-frontend-modules-js"></script> <script src="https://www.badsender.com/wp-includes/js/dist/hooks.min.js" id="wp-hooks-js"></script> <script src="https://www.badsender.com/wp-includes/js/dist/i18n.min.js" id="wp-i18n-js"></script> <script id="wp-i18n-js-after"> wp.i18n.setLocaleData( { 'text direction\u0004ltr': [ 'ltr' ] } ); </script> <script id="elementor-pro-frontend-js-before"> var ElementorProFrontendConfig = {"ajaxurl":"https:\/\/www.badsender.com\/wp-admin\/admin-ajax.php","nonce":"f1b42cbbf6","urls":{"assets":"https:\/\/www.badsender.com\/wp-content\/plugins\/elementor-pro\/assets\/","rest":"https:\/\/www.badsender.com\/en\/wp-json\/"},"settings":{"lazy_load_background_images":true},"popup":{"hasPopUps":false},"shareButtonsNetworks":{"facebook":{"title":"Facebook","has_counter":true},"twitter":{"title":"Twitter"},"linkedin":{"title":"LinkedIn","has_counter":true},"pinterest":{"title":"Pinterest","has_counter":true},"reddit":{"title":"Reddit","has_counter":true},"vk":{"title":"VK","has_counter":true},"odnoklassniki":{"title":"OK","has_counter":true},"tumblr":{"title":"Tumblr"},"digg":{"title":"Digg"},"skype":{"title":"Skype"},"stumbleupon":{"title":"StumbleUpon","has_counter":true},"mix":{"title":"Mix"},"telegram":{"title":"Telegram"},"pocket":{"title":"Pocket","has_counter":true},"xing":{"title":"XING","has_counter":true},"whatsapp":{"title":"WhatsApp"},"email":{"title":"Email"},"print":{"title":"Print"},"x-twitter":{"title":"X"},"threads":{"title":"Threads"}},"facebook_sdk":{"lang":"en_US","app_id":""},"lottie":{"defaultAnimationUrl":"https:\/\/www.badsender.com\/wp-content\/plugins\/elementor-pro\/modules\/lottie\/assets\/animations\/default.json"}}; </script> <script src="https://www.badsender.com/wp-content/plugins/elementor-pro/assets/js/frontend.min.js" id="elementor-pro-frontend-js"></script> <script src="https://www.badsender.com/wp-includes/js/jquery/ui/core.min.js" id="jquery-ui-core-js"></script> <script id="elementor-frontend-js-before"> var elementorFrontendConfig = {"environmentMode":{"edit":false,"wpPreview":false,"isScriptDebug":false},"i18n":{"shareOnFacebook":"Share on Facebook","shareOnTwitter":"Share on Twitter","pinIt":"Pin it","download":"Download","downloadImage":"Download image","fullscreen":"Fullscreen","zoom":"Zoom","share":"Share","playVideo":"Play Video","previous":"Previous","next":"Next","close":"Close","a11yCarouselPrevSlideMessage":"Previous slide","a11yCarouselNextSlideMessage":"Next slide","a11yCarouselFirstSlideMessage":"This is the first slide","a11yCarouselLastSlideMessage":"This is the last slide","a11yCarouselPaginationBulletMessage":"Go to slide"},"is_rtl":false,"breakpoints":{"xs":0,"sm":480,"md":769,"lg":1057,"xl":1440,"xxl":1600},"responsive":{"breakpoints":{"mobile":{"label":"Mobile Portrait","value":768,"default_value":767,"direction":"max","is_enabled":true},"mobile_extra":{"label":"Mobile Landscape","value":880,"default_value":880,"direction":"max","is_enabled":false},"tablet":{"label":"Tablet Portrait","value":1056,"default_value":1024,"direction":"max","is_enabled":true},"tablet_extra":{"label":"Tablet Landscape","value":1200,"default_value":1200,"direction":"max","is_enabled":false},"laptop":{"label":"Laptop","value":1366,"default_value":1366,"direction":"max","is_enabled":false},"widescreen":{"label":"Widescreen","value":2400,"default_value":2400,"direction":"min","is_enabled":false}},"hasCustomBreakpoints":true},"version":"3.28.3","is_static":false,"experimentalFeatures":{"e_font_icon_svg":true,"container":true,"e_local_google_fonts":true,"theme_builder_v2":true,"nested-elements":true,"editor_v2":true,"home_screen":true,"mega-menu":true},"urls":{"assets":"https:\/\/www.badsender.com\/wp-content\/plugins\/elementor\/assets\/","ajaxurl":"https:\/\/www.badsender.com\/wp-admin\/admin-ajax.php","uploadUrl":"https:\/\/www.badsender.com\/wp-content\/uploads"},"nonces":{"floatingButtonsClickTracking":"cec94a1d61"},"swiperClass":"swiper","settings":{"page":[],"editorPreferences":[]},"kit":{"viewport_mobile":768,"viewport_tablet":1056,"active_breakpoints":["viewport_mobile","viewport_tablet"]},"post":{"id":14022,"title":"Workflow%20d%27une%20int%C3%A9gration%20HTML%20d%27email%20-%20Badsender","excerpt":"","featuredImage":"https:\/\/www.badsender.com\/wp-content\/uploads\/2019\/11\/photo-1501159599894-155982264a55-1024x683.jpg"}}; </script> <script src="https://www.badsender.com/wp-content/plugins/elementor/assets/js/frontend.min.js" id="elementor-frontend-js"></script> <script src="https://www.badsender.com/wp-content/plugins/elementor-pro/assets/js/elements-handlers.min.js" id="pro-elements-handlers-js"></script> <!-- Statistics script Complianz GDPR/CCPA --> <script data-category="functional">var _paq = window._paq || []; _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); _paq.push(['requireCookieConsent']); (function() { var u="https://analytics.badsender.com/"; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '2']); _paq.push(['setSecureCookie', window.location.protocol === "https:" ]); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.type='text/javascript'; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); document.addEventListener("cmplz_fire_categories", function (e) { var consentedCategories = e.detail.categories; if (!cmplz_in_array( 'statistics', consentedCategories )) { _paq.push(['forgetCookieConsentGiven']); } else { _paq.push(['rememberCookieConsentGiven']); } }); </script><script type="text/javascript">jQuery(function() {jQuery.ajax({url: 'https://www.badsender.com/wp-admin/admin-ajax.php',type: "POST",data: {action: "forminator_get_nonce",form_id: "564970",},success: function (response) {jQuery('#forminator-module-564970 #forminator_nonce').val( response.data );}});})</script> <script type="text/javascript"> jQuery(function () { window.Forminator_Cform_Paginations = window.Forminator_Cform_Paginations || []; window.Forminator_Cform_Paginations[564970] = {"has-pagination":false,"pagination-header-design":"show","pagination-header":"nav","last-steps":"Finish","last-previous":"Previous","pagination-labels":"default","has-paypal":false}; var runForminatorFront = function () { jQuery('#forminator-module-564970[data-forminator-render="0"]') .forminatorFront({"form_type":"custom-form","inline_validation":true,"print_value":false,"rules":"\"email-1\": {\n\"required\": true,\"emailWP\": true,},\n","messages":"\"email-1\": {\n\"required\": \"This field is required. Please input a valid email.\",\n\"emailWP\": \"Veuillez vérifier votre adresse email.\",\n\"email\": \"Veuillez vérifier votre adresse email.\",\n},\n","conditions":{"fields":[],"relations":{"email-1":[],"hidden-1":[],"submit":[]}},"calendar":"{\"days\":[\"Dim\",\"Lun\",\"Tu\",\"Mer\",\"Jeu\",\"Fr\",\"Sam.\"],\"months\":[\"Janv.\",\"F\\u00e9v.\",\"Mars\",\"Avr.\",\"Mai\",\"Juin\",\"Juil.\",\"Ao\\u00fbt\",\"Sept.\",\"Oct.\",\"Nov.\",\"D\\u00e9c.\"]}","paypal_config":{"live_id":"","sandbox_id":"","redirect_url":"https:\/\/www.badsender.com\/en\/2019\/11\/05\/workflow-integration-html-email","form_id":564970},"forminator_fields":["address","calculation","captcha","consent","currency","custom","date","email","gdprcheckbox","group","hidden","html","checkbox","name","number","page-break","password","paypal","phone","postdata","radio","rating","section","select","slider","stripe-ocs","stripe","text","textarea","time","upload","url"],"general_messages":{"calculation_error":"\u00c9chec du calcul du champ.","payment_require_ssl_error":"SSL obligatoire pour envoyer ce formulaire, veuillez v\u00e9rifier votre URL.","payment_require_amount_error":"Le montant PayPal doit \u00eatre sup\u00e9rieur \u00e0 0.","form_has_error":"Veuillez corriger les erreurs avant d\u2019envoyer le formulaire."},"payment_require_ssl":false,"has_loader":true,"loader_label":"Soumission en cours\u2026","calcs_memoize_time":300,"is_reset_enabled":true,"has_stripe":false,"has_paypal":false,"submit_button_class":""}); } if (window.elementorFrontend) { if (typeof elementorFrontend.hooks !== "undefined") { elementorFrontend.hooks.addAction('frontend/element_ready/global', function () { runForminatorFront(); }); } } else { runForminatorFront(); } if (typeof ForminatorValidationErrors !== 'undefined') { var forminatorFrontSubmit = jQuery(ForminatorValidationErrors.selector).data('forminatorFrontSubmit'); if (typeof forminatorFrontSubmit !== 'undefined') { forminatorFrontSubmit.show_messages(ForminatorValidationErrors.errors); } } if (typeof ForminatorFormHider !== 'undefined') { var forminatorFront = jQuery(ForminatorFormHider.selector).data('forminatorFront'); if (typeof forminatorFront !== 'undefined') { jQuery(forminatorFront.forminator_selector).find('.forminator-row').hide(); jQuery(forminatorFront.forminator_selector).find('.forminator-pagination-steps').hide(); jQuery(forminatorFront.forminator_selector).find('.forminator-pagination-footer').hide(); } } }); </script> </body> </html> <!-- Cached by WP-Optimize (gzip) - https://getwpo.com - Last modified: 11/04/2025 18h28 (Europe/Paris UTC:2) -->