Guide: Accessibility and email

Accessibility as a new trend?

It shocks us to talk about trends when we talk about accessibility. Accessibility is a must. Paul Airy as well as Litmus had reminded us well in 2017.

"Doing nothing is not an option. Email accessibility is our job."

Paul Airy

And pioneers like EmailOnAcid were already talking about this topic two years ago. However, it seems that the email marketing world is finally making good resolutions for 2019. So much the better, when we know that 1.3 billion people worldwide live with some form of visual impairment according to the WHO. The articles bloom from all sides on this subject. The hashtag #a11y has never been better (although it is difficult to talk about accessibility when the same hashtag read by a screen reader evokes "a eleven y"...). First of all, let us note the Github documentation on accessibility in email. We, at Badsender, had the opportunity to glimpse a part of the work to be done during our participation to the Litmus Live from London August 2018. This was just the tip of the iceberg. But we can all, at our level, participate in improving the accessibility of our email marketing campaigns.

"People spend a lot of time worrying about email clients with 1% usage; accessibility is a much bigger issue."

Mark Robbins

Does accessibility require changes in our graphic and technical design methods?

Accessibility calls for new technological tools: Screen readers (VoiceOver for iOS, TalkBack for Android)screen magnifiers, eye-tracking technology, or more simply, personal assistants (Google Home, Apple HomePod, Amazon Echo). These use voice instructions to act. We could therefore, potentially, ask a personal assistant to read our e-mail. What we would call an "auditory call to action". (in English, The Auditory Call-to-Actionaka ACTA). While the tech doesn't yet allow it on Google Home, others do, such as a support on iOS with Siri enabled. And you may think that a personal assistant will choose the plain text version to read the contents of an email? You'd be wrong. A personal assistant will read the HTML version.

Who should act?

It is then up to us, designers and emailing integrators, to adapt our HTML and our design. Currently, making emails more "accessible" is not so complicated in itself. Small changes in design or development techniques can make a big difference to the audience. Here is a non-exhaustive list that will undoubtedly grow and evolve over time.

Tips'n Tricks Accessibility" to know and implement as soon as possible in our emails.

Specify language in which the content of the email is written.

Add the attribute lang="" to the tag <html> HTML code. If the text is in Frenchfill in the lang attribute as follows: lang="en". In English, lang="en". In Spanish, lang="es"and and so on...

<html lang="fr">

Without this indication, a screen reader will use the language in which it is configured by default.

Encode HTML characters correctly

To do this, add the following HTML code:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

This code tells the browser or email client what type of characters are expected in the following code.

Provide a title via the </code> to the HTML code.</strong> </h4> <p>This allows a title to be set on the web page tab when viewing the email in a browser, but also provides context for users of assistive technologies such as screen readers.</p> <h4 class="wp-block-heading"><strong>Ensure correct rendering of an email on 120 DPI</strong></h4> <p>And especially when using background images. Why? Because DPI scaling is actually an accessibility setting in Windows. As a general rule, the DPI is set to 96 <em>(or a zoom of 100%)</em>. However, this has changed as high resolution displays are now set to a default value of 120 <em>(125% zoom)</em> or sometimes 144 <em>(150% zoom)</em>. But users themselves can also set the DPI value to a value of their choice. It is therefore important to respect their choice, as it may depend on a visual impairment. The steps :</p> <h5 class="wp-block-heading" id="h-ajouter-un-xml-namespace-sur-la-balise-html">Add an XML Namespace on the tag <code><html></code>.</h5> <pre class="wp-block-code prettyprint"><code><html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office"></code></pre> <h5 class="wp-block-heading" id="h-corriger-le-dpi-pour-les-images">Correct DPI for images</h5> <p>This part of the code is added just before the closing of the <code></head></code>.</p> <pre class="wp-block-code prettyprint"><code><!--[if gte mso 9]> 96 <![endif]--></code></pre> <h5 class="wp-block-heading" id="h-utiliser-du-css-a-la-place-en-plus-des-attributs-html">Use CSS instead of/in addition to HTML attributes</h5> <p>It should be noted that any value specified other than with the unit px will be converted into points. In other words, the values included in the width and height attributes must be filled in via the corresponding CSS properties.</p> <pre class="wp-block-code prettyprint"><code><!-- Option 1: --> <table border="0" cellspacing="0" cellpadding="0" role="presentation" width="600" style="width:600px;"> <!-- Option 2: --> <table border="0" cellspacing="0" cellpadding="0" role="presentation" style="width:600px;"> <!-- Option 1: --> <td width="300" style="width: 300px;"> <!-- Option 2: --> <td style="width: 300px;"></code></pre> <h4 class="wp-block-heading" id="h-resumer-le-contenu-du-message-dans-le-preheader"><strong>Summarize the content of the message in the preheader.</strong></h4> <p>A possible alternative practice was raised by John Ties in two articles (<a href="https://www.emailonacid.com/blog/article/industry-news/the-evolution-of-email-predictions-for-the-future/" target="_blank" rel="noreferrer noopener external" data-wpel-link="external">1</a>|<a href="https://www.emailonacid.com/resource/accessibility-in-email/" target="_blank" rel="noreferrer noopener external" data-wpel-link="external">2</a>) consists in concentrating the message content in the email preheader and making the preheader invisible on the screen. With this technique, the preheader does not appear, but will be read by a screen reader or a personal assistant, allowing quick access to the entire offer and message of the email. The little extra: Siri will conclude the reading of the preheader with <em>"Would you like to reply to this email?"</em>. So it's up to us to write something relevant. John says that the results on their tests were interesting.</p> <h4 class="wp-block-heading" id="h-chaque-image-quelle-qu-elle-soit-doit-avoir-un-attribut-alt"><strong>Every image, whatever it is, <a href="https://emails.hteumeuleu.com/email-accessibility-in-action-f7f9d945cf67" target="_blank" rel="noreferrer noopener external" data-wpel-link="external">must have an attribute <code>alt</code></a>.</strong></h4> <p>If no attribute <code>alt</code> is not indicated, screen readers will read the file name. This can quickly become an unpleasant experience. Alt text plays a major role and must be configured so that your mail is always readable before the images are loaded. Setting the right alt text will allow screen readers to accurately describe the images. However, if an image is used solely for the "aesthetics" of the email <em>(like a spacer or a shadow),</em> ensure that a <code>alt=""</code> <em>(empty)</em> on the image. This tells screen readers to "skip" these images. On the other hand, in the case where an image has an empty alt attribute but a link encompasses that image, a screen reader <a href="https://emails.hteumeuleu.com/email-accessibility-in-action-f7f9d945cf67" target="_blank" rel="noreferrer noopener external" data-wpel-link="external">will read the url included in the link</a>. It is then preferable 1/ to delete the link or 2/ to fill in an alternative text.</p> <figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper"> <iframe data-placeholder-image="https://www.badsender.com/wp-content/uploads/complianz/placeholders/youtube643FYepWwRU-maxresdefault.jpg" data-category="marketing" data-service="youtube" class="cmplz-placeholder-element cmplz-iframe cmplz-iframe-styles cmplz-video" data-cmplz-target="src" data-src-cmplz="https://www.youtube.com/embed/643FYepWwRU?feature=oembed" data-deferlazy="1" title="Email Accessiblity - Good example #3" width="800" height="450" src="about:blank" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div></figure> <h4 class="wp-block-heading" id="h-prendre-garde-aux-gifs-animes"><strong>Beware of animated gifs</strong></h4> <p>Animated gifs <strong>too "violent", unstable</strong>too fast, for <a href="https://twitter.com/iamelliot/status/902519090220281860?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E902519090220281860&ref_url=https%3A%2F%2Flitmus.com%2Fblog%2F3-things-we-learned-at-litmus-live-london-that-you-should-put-into-action-today" target="_blank" rel="noreferrer noopener external" data-wpel-link="external">avoid epilepsy</a> <em>(It's funny because I'm the first one in my articles to make a probably too intensive use of stupid animated gifs, but I draw the conclusions).</em></p> <div data-elementor-type="section" data-elementor-id="549982" class="elementor elementor-549982 elementor-location-single"> <section class="elementor-section elementor-top-section elementor-element elementor-element-ed078a0 elementor-section-content-middle elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="ed078a0" data-element_type="section" data-settings="{"background_background":"classic"}"> <div class="elementor-container elementor-column-gap-default"> <div class="elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-a06bc63" data-id="a06bc63" data-element_type="column"> <div class="elementor-widget-wrap elementor-element-populated"> <div class="elementor-element elementor-element-66acdc1 elementor-widget elementor-widget-heading" data-id="66acdc1" data-element_type="widget" data-widget_type="heading.default"> <div class="elementor-widget-container"> <h2 class="elementor-heading-title elementor-size-default">Need help?</h2> </div> </div> <div class="elementor-element elementor-element-b91c18f elementor-widget elementor-widget-text-editor" data-id="b91c18f" data-element_type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <style>/*! elementor - v3.13.3 - 28-05-2023 */ .elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:#69727d;color:#fff}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap{color:#69727d;border:3px solid;background-color:transparent}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap{margin-top:8px}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap-letter{width:1em;height:1em}.elementor-widget-text-editor .elementor-drop-cap{float:left;text-align:center;line-height:1;font-size:50px}.elementor-widget-text-editor .elementor-drop-cap-letter{display:inline-block}</style> <p>Reading a guide can not make everything perfect. Maybe the best thing to do is to ask us. No ?</p> </div> </div> </div> </div> <div class="elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-b22a5ed" data-id="b22a5ed" data-element_type="column"> <div class="elementor-widget-wrap elementor-element-populated"> <div class="elementor-element elementor-element-1e59d75 elementor-widget elementor-widget-shortcode" data-id="1e59d75" data-element_type="widget" data-widget_type="shortcode.default"> <div class="elementor-widget-container"> <div class="elementor-shortcode"> <div data-elementor-type="section" data-elementor-id="558412" class="elementor elementor-558412 elementor-location-single"> <section class="elementor-section elementor-top-section elementor-element elementor-element-738e217 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="738e217" data-element_type="section"> <div class="elementor-container elementor-column-gap-default"> <div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-e11648b" data-id="e11648b" data-element_type="column"> <div class="elementor-widget-wrap elementor-element-populated"> <div class="elementor-element elementor-element-338ea20 elementor-button-align-stretch elementor-widget elementor-widget-form" data-id="338ea20" data-element_type="widget" data-settings="{"step_next_label":"Suivant","step_previous_label":"Pr\u00e9c\u00e9dent","button_width":"100","step_type":"number_text","step_icon_shape":"circle"}" data-widget_type="form.default"> <div class="elementor-widget-container"> <style>/*! elementor-pro - v3.13.2 - 22-05-2023 */ .elementor-button.elementor-hidden,.elementor-hidden{display:none}.e-form__step{width:100%}.e-form__step:not(.elementor-hidden){display:flex;flex-wrap:wrap}.e-form__buttons{flex-wrap:wrap}.e-form__buttons,.e-form__buttons__wrapper{display:flex}.e-form__indicators{display:flex;justify-content:space-between;align-items:center;flex-wrap:nowrap;font-size:13px;margin-bottom:var(--e-form-steps-indicators-spacing)}.e-form__indicators__indicator{display:flex;flex-direction:column;align-items:center;justify-content:center;flex-basis:0;padding:0 var(--e-form-steps-divider-gap)}.e-form__indicators__indicator__progress{width:100%;position:relative;background-color:var(--e-form-steps-indicator-progress-background-color);border-radius:var(--e-form-steps-indicator-progress-border-radius);overflow:hidden}.e-form__indicators__indicator__progress__meter{width:var(--e-form-steps-indicator-progress-meter-width,0);height:var(--e-form-steps-indicator-progress-height);line-height:var(--e-form-steps-indicator-progress-height);padding-right:15px;border-radius:var(--e-form-steps-indicator-progress-border-radius);background-color:var(--e-form-steps-indicator-progress-color);color:var(--e-form-steps-indicator-progress-meter-color);text-align:right;transition:width .1s linear}.e-form__indicators__indicator:first-child{padding-left:0}.e-form__indicators__indicator:last-child{padding-right:0}.e-form__indicators__indicator--state-inactive{color:var(--e-form-steps-indicator-inactive-primary-color,#c2cbd2)}.e-form__indicators__indicator--state-inactive [class*=indicator--shape-]:not(.e-form__indicators__indicator--shape-none){background-color:var(--e-form-steps-indicator-inactive-secondary-color,#fff)}.e-form__indicators__indicator--state-inactive object,.e-form__indicators__indicator--state-inactive svg{fill:var(--e-form-steps-indicator-inactive-primary-color,#c2cbd2)}.e-form__indicators__indicator--state-active{color:var(--e-form-steps-indicator-active-primary-color,#39b54a);border-color:var(--e-form-steps-indicator-active-secondary-color,#fff)}.e-form__indicators__indicator--state-active [class*=indicator--shape-]:not(.e-form__indicators__indicator--shape-none){background-color:var(--e-form-steps-indicator-active-secondary-color,#fff)}.e-form__indicators__indicator--state-active object,.e-form__indicators__indicator--state-active svg{fill:var(--e-form-steps-indicator-active-primary-color,#39b54a)}.e-form__indicators__indicator--state-completed{color:var(--e-form-steps-indicator-completed-secondary-color,#fff)}.e-form__indicators__indicator--state-completed [class*=indicator--shape-]:not(.e-form__indicators__indicator--shape-none){background-color:var(--e-form-steps-indicator-completed-primary-color,#39b54a)}.e-form__indicators__indicator--state-completed .e-form__indicators__indicator__label{color:var(--e-form-steps-indicator-completed-primary-color,#39b54a)}.e-form__indicators__indicator--state-completed .e-form__indicators__indicator--shape-none{color:var(--e-form-steps-indicator-completed-primary-color,#39b54a);background-color:initial}.e-form__indicators__indicator--state-completed object,.e-form__indicators__indicator--state-completed svg{fill:var(--e-form-steps-indicator-completed-secondary-color,#fff)}.e-form__indicators__indicator__icon{width:var(--e-form-steps-indicator-padding,30px);height:var(--e-form-steps-indicator-padding,30px);font-size:var(--e-form-steps-indicator-icon-size);border-width:1px;border-style:solid;display:flex;justify-content:center;align-items:center;overflow:hidden;margin-bottom:10px}.e-form__indicators__indicator__icon img,.e-form__indicators__indicator__icon object,.e-form__indicators__indicator__icon svg{width:var(--e-form-steps-indicator-icon-size);height:auto}.e-form__indicators__indicator__icon .e-font-icon-svg{height:1em}.e-form__indicators__indicator__number{width:var(--e-form-steps-indicator-padding,30px);height:var(--e-form-steps-indicator-padding,30px);border-width:1px;border-style:solid;display:flex;justify-content:center;align-items:center;margin-bottom:10px}.e-form__indicators__indicator--shape-circle{border-radius:50%}.e-form__indicators__indicator--shape-square{border-radius:0}.e-form__indicators__indicator--shape-rounded{border-radius:5px}.e-form__indicators__indicator--shape-none{border:0}.e-form__indicators__indicator__label{text-align:center}.e-form__indicators__indicator__separator{width:100%;height:var(--e-form-steps-divider-width);background-color:#babfc5}.e-form__indicators--type-icon,.e-form__indicators--type-icon_text,.e-form__indicators--type-number,.e-form__indicators--type-number_text{align-items:flex-start}.e-form__indicators--type-icon .e-form__indicators__indicator__separator,.e-form__indicators--type-icon_text .e-form__indicators__indicator__separator,.e-form__indicators--type-number .e-form__indicators__indicator__separator,.e-form__indicators--type-number_text .e-form__indicators__indicator__separator{margin-top:calc(var(--e-form-steps-indicator-padding, 30px) / 2 - var(--e-form-steps-divider-width, 1px) / 2)}.elementor-field-type-hidden{display:none}.elementor-field-type-html{display:inline-block}.elementor-login .elementor-lost-password,.elementor-login .elementor-remember-me{font-size:.85em}.elementor-field-type-recaptcha_v3 .elementor-field-label{display:none}.elementor-field-type-recaptcha_v3 .grecaptcha-badge{z-index:1}.elementor-button .elementor-form-spinner{order:3}.elementor-form .elementor-button>span{display:flex;justify-content:center;align-items:center}.elementor-form .elementor-button .elementor-button-text{white-space:normal;flex-grow:0}.elementor-form .elementor-button svg{height:auto}.elementor-form .elementor-button .e-font-icon-svg{height:1em}.elementor-select-wrapper .select-caret-down-wrapper{position:absolute;top:50%;transform:translateY(-50%);inset-inline-end:10px;pointer-events:none;font-size:11px}.elementor-select-wrapper .select-caret-down-wrapper svg{display:unset;width:1em;aspect-ratio:unset;fill:currentColor}.elementor-select-wrapper .select-caret-down-wrapper i{font-size:19px;line-height:2}.elementor-select-wrapper.remove-before:before{content:""!important}</style> <form class="elementor-form" method="post" id="guide" name="guide" action=""> <input type="hidden" name="post_id" value="558412"/> <input type="hidden" name="form_id" value="338ea20"/> <input type="hidden" name="referer_title" value="Guide : Accessibilité et email" /> <input type="hidden" name="queried_id" value="549619"/> <div class="elementor-form-fields-wrapper elementor-labels-"> <div class="elementor-field-type-email elementor-field-group elementor-column elementor-field-group-email elementor-col-100 elementor-field-required"> <label for="form-field-email" class="elementor-field-label elementor-screen-only"> E-mail </label> <input size="1" type="email" name="form_fields[email]" id="form-field-email" class="elementor-field elementor-size-sm elementor-field-textual" placeholder="E-mail" required="required" aria-required="true"> </div> <div class="elementor-field-type-tel elementor-field-group elementor-column elementor-field-group-phone elementor-col-100"> <label for="form-field-phone" class="elementor-field-label elementor-screen-only"> Phone Number </label> <input size="1" type="tel" name="form_fields[phone]" id="form-field-phone" class="elementor-field elementor-size-sm elementor-field-textual" placeholder="Phone number" pattern="[0-9()#&+*-=.]+" title="Seuls les caractères de numéros de téléphone (#, -, *, etc.) sont acceptés." data-no-translation-title=""> </div> <div class="elementor-field-type-hidden elementor-field-group elementor-column elementor-field-group-source elementor-col-100"> <input size="1" type="hidden" name="form_fields[source]" id="form-field-source" class="elementor-field elementor-size-sm elementor-field-textual" value="guide"> </div> <div class="elementor-field-type-recaptcha_v3 elementor-field-group elementor-column elementor-field-group-field_6804d42 elementor-col-100 recaptcha_v3-bottomleft"> <div class="elementor-field" id="form-field-field_6804d42"><div class="elementor-g-recaptcha" data-sitekey="6Lcp92whAAAAADdlm1cQFJgCgqC_zTgmbLO4Hizb" data-type="v3" data-action="Form" data-badge="bottomleft" data-size="invisible"></div></div> </div> <div class="elementor-field-group elementor-column elementor-field-type-submit elementor-col-100 e-form__buttons"> <button type="submit" class="elementor-button elementor-size-sm"> <span > <span class="elementor-button-icon"> </span> <span class="elementor-button-text">I need help!</span> </span> </button> </div> </div> <input type="hidden" name="trp-form-language" value="en"/></form> </div> </div> <div class="elementor-element elementor-element-8348c39 elementor-widget elementor-widget-html" data-id="8348c39" data-element_type="widget" data-widget_type="html.default"> <div class="elementor-widget-container"> <script type="text/javascript"> var __ss_noform = __ss_noform || []; __ss_noform.push(['baseURI', 'https://app-3Q56OXU3WO.marketingautomation.services/webforms/receivePostback/MzYwNzawMDUxAwA/']); __ss_noform.push(['endpoint', '157c034b-15b4-4929-9c15-da67c894e578']); </script> <script type="text/javascript" src="https://koi-3Q56OXU3WO.marketingautomation.services/client/noform.js?ver=1.24" ></script> </div> </div> </div> </div> </div> </section> </div> </div> </div> </div> </div> </div> </div> </section> </div> <h4 class="wp-block-heading" id="h-prevoir-que-le-contenu-du-message-compris-dans-un-gif-anime-soit-accessible-comprehensible-des-la-premiere-slide"><strong>Make sure that the content of the message included in an animated gif is accessible/understandable from the first slide</strong></h4> <p>It's no longer a surprise, Outlook <a href="https://support.office.com/fr-fr/article/le-graphique-anim%C3%A9-dans-mon-message-%C3%A9lectronique-ne-fonctionne-pas-a5e8a2a3-9d86-4203-8920-c88cb8739e34" target="_blank" rel="noreferrer noopener external" data-wpel-link="external">blocks animated gifs</a> on the first image included in the gif. It is therefore essential to propose an understandable content/offer <a href="https://www.message-business.com/reussir-marketing/conseil-emailing/gif-anime-emailing/gif-anime-sur-outlook/" target="_blank" rel="noreferrer noopener external" data-wpel-link="external">from the first slide</a>. This first slide or status can very well be displayed 0 milliseconds, so that it does not appear on mail clients that correctly display the animated gif.</p> <h4 class="wp-block-heading" id="h-ajouter-l-attribut-role-presentation-sur-les-tableaux-presents-dans-un-mail"><strong>Add the attribute <a href="https://www.gorebel.com/blog/accessibility-in-email-part-ii" target="_blank" rel="noreferrer noopener external" data-wpel-link="external">role= "presentation "</a> on the boards</strong> present in an email</h4> <p>HTML tables are not originally made for presentation, except for emails, where tables allow to get an identical result on most email clients, and especially to use some style properties on Outlook <em>(<code>width</code> or <code>padding</code>)</em>. Adding this attribute will indicate to screen readers that this is a presentation table, not a data table. This will make reading the content much more intuitive for screen readers, since they will not read the number of rows and cells in the table. On the other hand, if a table present in your HTML code is really present to display data, it will not be necessary to add this attribute. It seems, according to a <a href="https://www.emailonacid.com/resource/email-accessibility-net-atlantic/" target="_blank" rel="noreferrer noopener external" data-wpel-link="external">webinar</a> proposed by EmailOnAcid in collaboration with Net Atlantic, that the role="presentation" attribute has no effect on tables with a border.</p> <figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper"> <iframe data-placeholder-image="https://www.badsender.com/wp-content/uploads/complianz/placeholders/youtubeoff68QcnN-s-maxresdefault.jpg" data-category="marketing" data-service="youtube" class="cmplz-placeholder-element cmplz-iframe cmplz-iframe-styles cmplz-video" data-cmplz-target="src" data-src-cmplz="https://www.youtube.com/embed/off68QcnN-s?feature=oembed" data-deferlazy="1" title="Email Accessiblity - Good example #4" width="800" height="450" src="about:blank" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div></figure> <h4 class="wp-block-heading" id="h-utiliser-des-balises-semantiques"><strong>Use of <a href="http://createsend.com/t/d-ABFFF5F25EC93A19" target="_blank" rel="noreferrer noopener external" data-wpel-link="external">semantic tags</a>.</strong></h4> <p>The tags <code><h1></code>, <code><h2></code>, <code><h3></code>, <code><p></code>Although semantic tags provide a better understanding of the hierarchy of email content, they are often discouraged or avoided because some email clients or webmails apply their own styles to these elements, which can cause poor rendering. External margins <em>(<code>margin</code>)</em> are for example one of the graphic formatting applied by default on these tags. To solve this problem, it will sometimes be necessary to apply CSS resets to these tags.</p> <h4 class="wp-block-heading" id="h-inserer-des-textes-en-html-plutot-qu-en-image"><strong>Insert text in HTML instead of images</strong></h4> <p>Not only to optimize the text/image ratio of a campaign, but especially to guarantee a maximum of information when displaying an email without downloading the images.</p> <h4 class="wp-block-heading" id="h-un-paragraphe-de-texte-doit-avoir-une-taille-de-police-superieure-ou-egale-a-14px"><strong>A paragraph of text must have a font size <a href="http://createsend.com/t/d-ABFFF5F25EC93A19" target="_blank" rel="noreferrer noopener external" data-wpel-link="external">greater than or equal to 14px</a></strong></h4> <p>A minimum of 16px for "light" fonts and a line height of at least one and a half times the font size. For optimal readability, it is possible to specify a <code>line-height</code> of at least 150% to each text in an email.</p> <h4 class="wp-block-heading" id="h-prendre-en-compte-et-ameliorer-le-contraste-des-textes-ou-des-donnees-dans-l-email"><strong>Take into account and improve the contrast of texts or data in the email.</strong></h4> <p>White text on a yellow background can be difficult to read. The Litmus Builder tool allows, among other things, to consult a rendering for "colorblind". Other tools, such as <a href="http://contrast-finder.tanaguru.com/" target="_blank" rel="noreferrer noopener external" data-wpel-link="external">Tanaguru</a>The following table shows the ratio between two colors. It is necessary, as far as possible, to apply a minimum ratio of 4.5:1 on all texts in an email. For texts bigger than 23px or bold texts bigger than 18px, the minimum ratio is even stricter, going down to 3:1. A list of tips for <a href="https://stephaniewalter.design/blog/tips-create-accessible-color-palette/" target="_blank" rel="noreferrer noopener external" data-wpel-link="external">create an accessible color palette</a> can be useful, as well as a tool for <a href="https://abc.useallfive.com/" target="_blank" rel="noreferrer noopener external" data-wpel-link="external">to know quickly the ratio</a> between colors, font sizes, etc...</p> <h4 class="wp-block-heading" id="h-maintenir-une-structure-de-lecture-logique-de-gauche-a-droite"><strong>Maintain a logical reading structure</strong> <em>(from left to right)</em>.</h4> <p>It also helps recipients with dyslexia to maintain their reading pace.</p> <h4 class="wp-block-heading" id="h-aligner-les-textes-a-gauche"><strong>Align the texts on the left.</strong></h4> <p>The eye at a <a href="http://createsend.com/t/d-ABFFF5F25EC93A19" target="_blank" rel="noreferrer noopener external" data-wpel-link="external">reference point</a> to start reading each new line. While it is acceptable to center text for titles or buttons, it becomes more complex to read when it comes to paragraphs of text. It is therefore not recommended to center or justify paragraphs of text.</p> <h4 class="wp-block-heading" id="h-le-contenu-des-liens-doit-avoir-un-sens-et-etre-descriptif"><strong>The content of the links must be meaningful and descriptive</strong></h4> <p>For example, "Contact Us" is preferable to "Click Here". The text in the link should inform the reader what will happen when he clicks on the link.</p> <h4 class="wp-block-heading" id="h-ne-pas-specifier-d-attribut-title-aux-liens"><strong>Do not specify an attribute <code>title</code> to the links.</strong></h4> <p>They make it difficult for screen readers to read. Instead, fill in relevant content directly in the link text, or in the link itself.</p> <h4 class="wp-block-heading" id="h-les-liens-ne-dependent-pas-de-la-couleur-pour-etre-identifies-comme-tels"><strong>Links do not depend on color to be identified as such.</strong></h4> <p>They can be indicated by an underline or followed by a symbol <em>(>)</em> .</p> <h4 class="wp-block-heading" id="h-utiliser-la-propriete-css-border-bottom"><strong>Using the border-bottom CSS property</strong></h4> <p>Rather than the CSS property <code>text-decoration:underline</code> on the links to <a href="https://twitter.com/jainamistry/status/902519770792300544?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E902519770792300544&ref_url=https%3A%2F%2Flitmus.com%2Fblog%2F3-things-we-learned-at-litmus-live-london-that-you-should-put-into-action-today" target="_blank" rel="noreferrer noopener external" data-wpel-link="external">improve the readability of the information</a>for people with dyslexia. However, it is advisable to continue to keep the links underlined.</p> <h4 class="wp-block-heading" id="h-les-boutons-et-les-liens-peuvent-facilement-etre-cliques"><strong>Buttons and links can be easily clicked</strong></h4> <p>By offering a wide and high click zone <em>(area of at least 44px wide by 44px high according to Apple, but <a href="https://medium.com/@shoobe01/44-px-why-apple-is-wrong-6bd6f6846871" target="_blank" rel="noreferrer noopener external" data-wpel-link="external">opinions differ</a>)</em>.</p> <h4 class="wp-block-heading" id="h-le-texte-peut-etre-agrandi-sans-etre-coupe"><strong>Text can be enlarged without being cut</strong></h4> <p><em>(and by cut, I mean invisible because it goes under another element for example)</em><strong>.</strong> To do the test, display an email in the Firefox browser. Press the Alt key to display the taskbar. Click on View > Zoom > Zoom Text Only. The text should zoom in to 200% without being cut off.</p> <h4 class="wp-block-heading" id="h-s-assurer-que-les-tailles-des-textes-soient-coherentes-pour-un-affichage-sur-mobile"><strong>Ensure that text sizes are consistent for mobile display.</strong></h4> <p>A title on two lines for the Desktop version with a 64px typeface may be moved to five or six lines on some resolutions <em>(this is just an example)</em> not to mention the breaks that a word that is too long could cause if nothing is done via media queries to change the size. On the other hand, a 12px text will be <em>(perhaps)</em> still relatively readable on desktop, but will it be as much on mobile? Will a 160px wide by 40px high Call to Action be as easily "clickable" with a finger? Also propose the right texts, on the right media: "clicking" for a mobile that only understands "tapping" may seem incongruous. Media queries are also there to avoid these problems.</p> <h4 class="wp-block-heading" id="h-l-html-est-correctement-structure-sans-erreurs"><strong>HTML is correctly structured, without errors</strong></h4> <p>And when mail clients allow it, use ARIA roles. These roles allow to describe the structure of a document, such as titles, regions <em>(banners, menu...)</em>Today, unfortunately, some mail clients add incorrect roles to some HTML tags. It is therefore not recommended to use them for the moment, except for the <code>role="presentation"</code> on the <code><table></code>.</p> <h4 class="wp-block-heading" id="h-garder-un-code-concis-le-plus-leger-possible"><strong>Keep the code concise. As light as possible.</strong></h4> <p>Codes that are too heavy, or superfluous, can impact loading time. Tools like <a href="http://infohound.net/tidy/" target="_blank" rel="noreferrer noopener external" data-wpel-link="external">HTML Tidy Online</a> <em>(based on the <a href="https://www.w3.org/People/Raggett/tidy/" target="_blank" rel="noreferrer noopener external" data-wpel-link="external">W3C Tidy Project</a>)</em> or <a href="https://www.10bestdesign.com/dirtymarkup/" target="_blank" rel="noreferrer noopener external" data-wpel-link="external">Dirty Markup</a> can be useful to remove empty, useless, or badly closed tags. This also contributes to an error-free code. To note <em>(thanks Laurent Depoorter)</em> that Tidy seems to have a tendency to remove some tips'n tricks for Outlook or other mail clients.</p> <hr class="wp-block-separator has-text-color has-cyan-bluish-gray-color has-alpha-channel-opacity has-cyan-bluish-gray-background-color has-background"/> <p>If the points raised above are particularly focused on visual impairment, it should be noted that there are other forms of disability that require work on web accessibility in general. How will an Internet user who has broken both arms navigate? Or an amputee? <strong>Whether the disability is permanent or temporary, our development method can greatly assist in navigation.</strong></p> <blockquote class="wp-block-quote is-style-default"> <p>"Any implementation of accessibility, however small, is a success."</p> <cite><em>Paul Airy</em></cite></blockquote> <h3 class="wp-block-heading" id="h-l-accessibilite-un-sujet-qui-ne-date-pas-d-hier-pour-badsender">Accessibility, a subject that does not date from yesterday for Badsender.</h3> <p>Badsender has already discussed the topic of accessibility in email marketing, through recent articles such as " <a href="https://www.badsender.com/en/2018/11/05/email-assistant-personnel/" target="_blank" rel="noopener noreferrer external" data-wpel-link="external">Could the near future of email be to adapt to personal assistants such as Amazon Echo or Google Home?</a> "or older ones like " <a href="https://www.badsender.com/en/2017/03/30/template-emailing-text-full-responsive/" target="_blank" rel="noopener noreferrer external" data-wpel-link="external">Template emailing 1,2,3... Maximum text and full responsive !</a>" .</p> <h4 class="wp-block-heading" id="h-quelques-acronymes-a-connaitre-sur-l-accessibilite">Some acronyms to know about accessibility</h4> <ol> <li>a11y: Hashtag and acronym for Accessibility/accessibilité.</li> <li>ACTA: Auditory Calls-to-Action</li> <li>ARIA: Assistive/Accessible Rich Internet Applications</li> <li>WCAG: Web Content Accessibility Guidelines</li> <li>W3C: World Wide Web Consortium</li> <li>ADA: Americans with Disabilities Act</li> <li>ADHD: Attention Deficit Hyperactivity Disorder</li> </ol> <h4 class="wp-block-heading" id="h-des-ressources-pour-aller-encore-plus-loin">Resources to go even further</h4> <ul> <li><a href="https://a11yproject.com/" target="_blank" rel="noopener noreferrer external" data-wpel-link="external">https://a11yproject.com/</a></li> <li><a href="https://www.who.int/news-room/fact-sheets/detail/blindness-and-visual-impairment" target="_blank" rel="noopener noreferrer external" data-wpel-link="external">https://www.who.int/news-room/fact-sheets/detail/blindness-and-visual-impairment</a></li> <li><a href="http://createsend.com/t/d-ABFFF5F25EC93A19" target="_blank" rel="noopener noreferrer external" data-wpel-link="external">http://createsend.com/t/d-ABFFF5F25EC93A19</a></li> <li><a href="https://mailchimp.com/resources/accessibility-in-email-marketing/" target="_blank" rel="noopener noreferrer external" data-wpel-link="external">https://mailchimp.com/resources/accessibility-in-email-marketing/</a></li> <li><a href="https://emails.hteumeuleu.com/thinking-outside-the-table-at-tedc16-a58a76c7c625" target="_blank" rel="noopener noreferrer external" data-wpel-link="external">https://emails.hteumeuleu.com/thinking-outside-the-table-at-tedc16-a58a76c7c625</a></li> <li><a href="https://litmus.com/community/discussions/6816-get-off-the-table" target="_blank" rel="noopener noreferrer external" data-wpel-link="external">https://litmus.com/community/discussions/6816-get-off-the-table</a></li> <li><a href="https://a11yproject.com/posts/getting-started-aria/" target="_blank" rel="noopener noreferrer external" data-wpel-link="external">https://a11yproject.com/posts/getting-started-aria/</a></li> <li><a href="https://www.campaignmonitor.com/resources/guides/accessibility/" target="_blank" rel="noopener noreferrer external" data-wpel-link="external">https://www.campaignmonitor.com/resources/guides/accessibility/</a></li> <li><a href="https://www.emailonacid.com/blog/article/email-development/email-accessibilty-in-2017/" target="_blank" rel="noopener noreferrer external" data-wpel-link="external">https://www.emailonacid.com/blog/article/email-development/email-accessibilty-in-2017/</a></li> <li><a href="https://web.archive.org/web/20210122122046/https://www.emailonacid.com/blog/article/email-marketing/accessibility-in-email-webinar-recap/" target="_blank" rel="noopener noreferrer external" data-wpel-link="external">https://www.emailonacid.com/blog/article/email-marketing/accessibility-in-email-webinar-recap/</a></li> <li><a href="https://www.emailonacid.com/resource/accessibility-in-email/" target="_blank" rel="noopener noreferrer external" data-wpel-link="external">https://www.emailonacid.com/resource/accessibility-in-email/</a></li> <li><a href="https://www.emailonacid.com/resource/email-accessibility-net-atlantic/" target="_blank" rel="noopener noreferrer external" data-wpel-link="external">https://www.emailonacid.com/resource/email-accessibility-net-atlantic/</a></li> <li><a href="https://www.emailonacid.com/wp-content/uploads/2018/03/EOA_Accessibility_Infographic.pdf" target="_blank" rel="noopener noreferrer external" data-wpel-link="external">https://www.emailonacid.com/wp-content/uploads/2018/03/EOA_Accessibility_Infographic.pdf</a></li> <li><a href="https://emails.hteumeuleu.fr/2018/01/laccessibilite-des-e%E2%80%91mails-par-lexemple/" target="_blank" rel="noopener noreferrer external" data-wpel-link="external">https://emails.hteumeuleu.fr/2018/01/laccessibilite-des-e%E2%80%91mails-par-lexemple/</a></li> <li><a href="https://webaim.org/standards/wcag/checklist" target="_blank" rel="noopener noreferrer external" data-wpel-link="external">https://webaim.org/standards/wcag/checklist</a></li> <li><a href="https://wuhcag.com/wcag-checklist/" target="_blank" rel="noopener noreferrer external" data-wpel-link="external">https://wuhcag.com/wcag-checklist/</a></li> <li><a href="https://www.w3.org/WAI/WCAG20/quickref/" target="_blank" rel="noopener noreferrer external" data-wpel-link="external">https://www.w3.org/WAI/WCAG20/quickref/</a></li> <li><a href="https://www.emailonacid.com/blog/article/email-development/which-code-should-i-include-in-every-email/" target="_blank" rel="noopener noreferrer external" data-wpel-link="external">https://www.emailonacid.com/blog/article/email-development/which-code-should-i-include-in-every-email/</a></li> <li><a href="https://accessibility.blog.gov.uk/2016/09/02/dos-and-donts-on-designing-for-accessibility/" target="_blank" rel="noopener noreferrer external" data-wpel-link="external">https://accessibility.blog.gov.uk/2016/09/02/dos-and-donts-on-designing-for-accessibility/</a></li> <li><a href="https://www.slideshare.net/DigitalGov/accessibility-for-animated-gifs-victoria-wales-us-agov-gobiernousagov" target="_blank" rel="noopener noreferrer external" data-wpel-link="external">https://www.slideshare.net/DigitalGov/accessibility-for-animated-gifs-victoria-wales-us-agov-gobiernousagov</a></li> <li>https://a11yproject.com/posts/title-attributes/</li> <li><a href="http://colororacle.org/" target="_blank" rel="noopener noreferrer external" data-wpel-link="external">http://colororacle.org/</a></li> <li><a href="https://www.campaignmonitor.com/blog/email-marketing/2014/09/color-blindness-accessibility-and-the-vision-impaired-in-email-design/" target="_blank" rel="noopener noreferrer external" data-wpel-link="external">https://www.campaignmonitor.com/blog/email-marketing/2014/09/color-blindness-accessibility-and-the-vision-impaired-in-email-design/</a></li> <li><a href="https://speakerdeck.com/hteumeuleu/thinking-outside-the-table" target="_blank" rel="noopener noreferrer external" data-wpel-link="external">https://speakerdeck.com/hteumeuleu/thinking-outside-the-table</a></li> <li><a href="https://litmus.com/community/discussions/6816-get-off-the-table" target="_blank" rel="noopener noreferrer external" data-wpel-link="external">https://litmus.com/community/discussions/6816-get-off-the-table</a></li> <li><a href="http://emails.hteumeuleu.fr/2016/08/thinking-outside-the-table-tedc-2016/" target="_blank" rel="noopener noreferrer external" data-wpel-link="external">http://emails.hteumeuleu.fr/2016/08/thinking-outside-the-table-tedc-2016/</a></li> <li><a href="https://github.com/M-J-Robbins/get-off-the-table/blob/master/template.html" target="_blank" rel="noopener noreferrer external" data-wpel-link="external">https://github.com/M-J-Robbins/get-off-the-table/blob/master/template.html</a></li> <li><a href="https://en.wikipedia.org/wiki/Computer_accessibility" target="_blank" rel="noopener noreferrer external" data-wpel-link="external">https://en.wikipedia.org/wiki/Computer_accessibility</a></li> <li><a href="http://mds.is/a11y/" target="_blank" rel="noopener noreferrer external" data-wpel-link="external">http://mds.is/a11y/</a></li> <li><a href="https://css-tricks.com/html-email-accessibility/" target="_blank" rel="noopener noreferrer external" data-wpel-link="external">https://css-tricks.com/html-email-accessibility/</a></li> <li>https://www.rodriguezcommaj.com/blog/nearly-table-free-emails</li> <li><a href="https://css-tricks.com/accessibility-testing-tools/" target="_blank" rel="noopener noreferrer external" data-wpel-link="external">https://css-tricks.com/accessibility-testing-tools/</a></li> <li><a href="https://fr.slideshare.net/M_J_Robbins/accessibility-in-email-eoainsights" target="_blank" rel="noopener noreferrer external" data-wpel-link="external">https://fr.slideshare.net/M_J_Robbins/accessibility-in-email-eoainsights</a></li> <li><a href="https://litmus.com/blog/email-design-podcast-30-interview-with-email-developer-mark-robbins" target="_blank" rel="noopener noreferrer external" data-wpel-link="external">https://litmus.com/blog/email-design-podcast-30-interview-with-email-developer-mark-robbins</a></li> <li><a href="https://www.youtube.com/watch?v=NUaEhil4vrc" target="_blank" rel="noopener noreferrer external" data-wpel-link="external">https://www.youtube.com/watch?v=NUaEhil4vrc</a></li> <li><a href="https://www.courtneyfantinato.com/correcting-outlook-dpi-scaling-issues/" target="_blank" rel="noopener noreferrer external" data-wpel-link="external">https://www.courtneyfantinato.com/correcting-outlook-dpi-scaling-issues/</a></li> </ul> <p>And a <a href="https://github.com/wilbertheinen/accessible-email-documentation/tree/master" target="_blank" rel="noopener noreferrer external" data-wpel-link="external">amazing list</a> of articles, presentations, tools, resources, books, webinars and podcasts on this truly fascinating subject.</p> <script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?autoload=true&skin=sunburst&lang=css" defer=""></script> </div> </div> <div class="elementor-element elementor-element-8219577 elementor-share-buttons--view-icon elementor-share-buttons--skin-minimal elementor-share-buttons-mobile--align-left elementor-share-buttons--align-left elementor-share-buttons--color-custom elementor-share-buttons--shape-square elementor-grid-0 elementor-widget elementor-widget-share-buttons" data-id="8219577" data-element_type="widget" data-widget_type="share-buttons.default"> <div class="elementor-widget-container"> <link rel="stylesheet" href="https://www.badsender.com/wp-content/plugins/elementor-pro/assets/css/widget-share-buttons.min.css"> <div class="elementor-grid"> <div class="elementor-grid-item"> <div class="elementor-share-btn elementor-share-btn_facebook" role="button" tabindex="0" aria-label="Partager sur facebook" data-no-translation-aria-label="" > <span class="elementor-share-btn__icon"> <svg class="e-font-icon-svg e-fab-facebook" viewbox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"></path></svg> </span> </div> </div> <div class="elementor-grid-item"> <div class="elementor-share-btn elementor-share-btn_twitter" role="button" tabindex="0" aria-label="Partager sur twitter" data-no-translation-aria-label="" > <span class="elementor-share-btn__icon"> <svg class="e-font-icon-svg e-fab-twitter" viewbox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path></svg> </span> </div> </div> <div class="elementor-grid-item"> <div class="elementor-share-btn elementor-share-btn_linkedin" role="button" tabindex="0" aria-label="Partager sur linkedin" data-no-translation-aria-label="" > <span class="elementor-share-btn__icon"> <svg class="e-font-icon-svg e-fab-linkedin" viewbox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"></path></svg> </span> </div> </div> <div class="elementor-grid-item"> <div class="elementor-share-btn elementor-share-btn_email" role="button" tabindex="0" aria-label="Partager sur email" data-no-translation-aria-label="" > <span class="elementor-share-btn__icon"> <svg class="e-font-icon-svg e-fas-envelope" viewbox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z"></path></svg> </span> </div> </div> </div> </div> </div> </div> </article> </div> </main> </div> <div data-elementor-type="footer" data-elementor-id="14487" class="elementor elementor-14487 elementor-location-footer"> <footer class="elementor-section elementor-top-section elementor-element elementor-element-4fd1187 elementor-section-content-top elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="4fd1187" data-element_type="section" data-settings="{"background_background":"classic"}"> <div class="elementor-container elementor-column-gap-default"> <div class="elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-dba06e6" data-id="dba06e6" data-element_type="column"> <div class="elementor-widget-wrap elementor-element-populated"> <div class="elementor-element elementor-element-176a2f0 elementor-widget elementor-widget-image" data-id="176a2f0" data-element_type="widget" data-widget_type="image.default"> <div class="elementor-widget-container"> <a href="https://www.badsender.com/en/" data-wpel-link="internal"> <img width="200" height="50" src="https://www.badsender.com/wp-content/uploads/2021/09/badsender-logo.svg" class="attachment-full size-full wp-image-509138" alt="badsender logo" loading="lazy" /> </a> </div> </div> <div class="elementor-element elementor-element-ba9cbee elementor-widget elementor-widget-text-editor" data-id="ba9cbee" data-element_type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> Agitator of emailing and eCRM expertise </div> </div> <div class="elementor-element elementor-element-085ce6d elementor-view-stacked elementor-widget__width-auto elementor-shape-circle elementor-widget elementor-widget-icon" data-id="085ce6d" data-element_type="widget" data-widget_type="icon.default"> <div class="elementor-widget-container"> <div class="elementor-icon-wrapper"> <a class="elementor-icon" href="https://open.spotify.com/show/3YZTeq2TpICcNByyXZdd3n" target="_blank" data-wpel-link="external" rel="external noopener noreferrer"> <svg aria-hidden="true" class="e-font-icon-svg e-fab-spotify" viewbox="0 0 496 512" xmlns="http://www.w3.org/2000/svg"><path d="M248 8C111.1 8 0 119.1 0 256s111.1 248 248 248 248-111.1 248-248S384.9 8 248 8zm100.7 364.9c-4.2 0-6.8-1.3-10.7-3.6-62.4-37.6-135-39.2-206.7-24.5-3.9 1-9 2.6-11.9 2.6-9.7 0-15.8-7.7-15.8-15.8 0-10.3 6.1-15.2 13.6-16.8 81.9-18.1 165.6-16.5 237 26.2 6.1 3.9 9.7 7.4 9.7 16.5s-7.1 15.4-15.2 15.4zm26.9-65.6c-5.2 0-8.7-2.3-12.3-4.2-62.5-37-155.7-51.9-238.6-29.4-4.8 1.3-7.4 2.6-11.9 2.6-10.7 0-19.4-8.7-19.4-19.4s5.2-17.8 15.5-20.7c27.8-7.8 56.2-13.6 97.8-13.6 64.9 0 127.6 16.1 177 45.5 8.1 4.8 11.3 11 11.3 19.7-.1 10.8-8.5 19.5-19.4 19.5zm31-76.2c-5.2 0-8.4-1.3-12.9-3.9-71.2-42.5-198.5-52.7-280.9-29.7-3.6 1-8.1 2.6-12.9 2.6-13.2 0-23.3-10.3-23.3-23.6 0-13.6 8.4-21.3 17.4-23.9 35.2-10.3 74.6-15.2 117.5-15.2 73 0 149.5 15.2 205.4 47.8 7.8 4.5 12.9 10.7 12.9 22.6 0 13.6-11 23.3-23.2 23.3z"></path></svg> </a> </div> </div> </div> <div class="elementor-element elementor-element-003283e elementor-view-stacked elementor-widget__width-auto elementor-shape-circle elementor-widget elementor-widget-icon" data-id="003283e" data-element_type="widget" data-widget_type="icon.default"> <div class="elementor-widget-container"> <div class="elementor-icon-wrapper"> <a class="elementor-icon" href="https://www.youtube.com/channel/UCgRBfIEah50OIsdXlYclZxw" target="_blank" data-wpel-link="external" rel="external noopener noreferrer"> <svg aria-hidden="true" class="e-font-icon-svg e-fab-youtube" viewbox="0 0 576 512" xmlns="http://www.w3.org/2000/svg"><path d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"></path></svg> </a> </div> </div> </div> </div> </div> <div class="elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-603acc1" data-id="603acc1" data-element_type="column"> <div class="elementor-widget-wrap elementor-element-populated"> <div class="elementor-element elementor-element-4f8d38b elementor-widget elementor-widget-text-editor" data-id="4f8d38b" data-element_type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <p>Follow us on <strong><a href="https://twitter.com/badsender" target="_blank" rel="noopener external noreferrer" data-wpel-link="external">Twitter</a></strong>, <strong><a href="https://www.linkedin.com/company/badsender/" target="_blank" rel="noopener external noreferrer" data-wpel-link="external">Linkedin</a></strong>, <strong><a href="https://www.pinterest.fr/badsender/" target="_blank" rel="noopener external noreferrer" data-wpel-link="external">Pinterest</a></strong> | 2022 - Badsender</p> </div> </div> <div class="elementor-element elementor-element-809024d elementor-widget elementor-widget-text-editor" data-id="809024d" data-element_type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <p>Illustrations of the site from<a href="https://icones8.fr/illustrations/style--3d-flame" target="_blank" rel="noopener external noreferrer" data-wpel-link="external">Icons8 (3D flame library)</a> and thanks to <a href="https://dribbble.com/thierryfousse" target="_blank" rel="noopener external noreferrer" data-wpel-link="external">wonderful work of Thierry Fousse</a> !</p> </div> </div> </div> </div> <div class="elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-b48a7f0" data-id="b48a7f0" data-element_type="column"> <div class="elementor-widget-wrap elementor-element-populated"> <div class="elementor-element elementor-element-c9f6b96 elementor-nav-menu--dropdown-none elementor-widget elementor-widget-nav-menu" data-id="c9f6b96" 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 class="elementor-nav-menu--main elementor-nav-menu__container elementor-nav-menu--layout-vertical e--pointer-none"> <ul id="menu-1-c9f6b96" class="elementor-nav-menu sm-vertical"><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-523208"><a href="https://www.badsender.com/en/about-us/" class="elementor-item" data-wpel-link="internal">About us</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-508442"><a href="https://www.badsender.com/en/our-partners/" class="elementor-item" data-wpel-link="internal">Partners</a></li> <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/privacy/" class="elementor-item" data-wpel-link="internal">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" data-wpel-link="internal">Legal information</a></li> </ul> </nav> <nav class="elementor-nav-menu--dropdown elementor-nav-menu__container" aria-hidden="true"> <ul id="menu-2-c9f6b96" class="elementor-nav-menu sm-vertical"><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-523208"><a href="https://www.badsender.com/en/about-us/" class="elementor-item" tabindex="-1" data-wpel-link="internal">About us</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-508442"><a href="https://www.badsender.com/en/our-partners/" class="elementor-item" tabindex="-1" data-wpel-link="internal">Partners</a></li> <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/privacy/" class="elementor-item" tabindex="-1" data-wpel-link="internal">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" data-wpel-link="internal">Legal information</a></li> </ul> </nav> </div> </div> </div> </div> </div> </footer> </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 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">Hmm... Cookies... I want some!</div> <div class="cmplz-close" tabindex="0" role="button" aria-label="close-dialog"> <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">Okay, we use cookies. But it's to serve you better my child! These cookies allow us to know your navigation on this site. And thus, to adapt our services even better. Do you agree with that?</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">The storage or technical access is necessary for the purpose of legitimate interest to store preferences that are not requested by the subscriber or 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="">Gérer les fournisseurs</a> <a class="cmplz-link cmplz-external cmplz-read-more-purposes tcf" target="_blank" rel="noopener noreferrer nofollow external" href="https://cookiedatabase.org/tcf/purposes/" data-wpel-link="external" 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">Hmmm, cookkiiieesss...</button> </div> <script type='text/javascript'> const lazyloadRunObserver = () => { const dataAttribute = 'data-e-bg-lazyload'; const lazyloadBackgrounds = document.querySelectorAll( `[${ dataAttribute }]:not(.lazyloaded)` ); const lazyloadBackgroundObserver = new IntersectionObserver( ( entries ) => { entries.forEach( ( entry ) => { if ( entry.isIntersecting ) { let lazyloadBackground = entry.target; const lazyloadSelector = lazyloadBackground.getAttribute( dataAttribute ); if ( lazyloadSelector ) { lazyloadBackground = entry.target.querySelector( lazyloadSelector ); } if( lazyloadBackground ) { lazyloadBackground.classList.add( 'lazyloaded' ); } lazyloadBackgroundObserver.unobserve( entry.target ); } }); }, { rootMargin: '100px 0px 100px 0px' } ); lazyloadBackgrounds.forEach( ( lazyloadBackground ) => { lazyloadBackgroundObserver.observe( lazyloadBackground ); } ); }; const events = [ 'DOMContentLoaded', 'elementor/lazyload/observe', ]; events.forEach( ( event ) => { document.addEventListener( event, lazyloadRunObserver ); } ); </script> <link rel='stylesheet' id='elementor-post-549982-css' href='https://www.badsender.com/wp-content/uploads/elementor/css/post-549982.css?ver=1685349253' type='text/css' media='all' /> <link rel='stylesheet' id='elementor-post-558412-css' href='https://www.badsender.com/wp-content/uploads/elementor/css/post-558412.css?ver=1685349253' type='text/css' media='all' /> <script type='text/javascript' id='trp-dynamic-translator-js-extra'> /* <![CDATA[ */ 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},"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\"]","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","alt","content"],"gettranslationsnonceregular":"2ae5ec8d9b","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 type='text/javascript' src='https://www.badsender.com/wp-content/plugins/translatepress-multilingual/assets/js/trp-translate-dom-changes.js?ver=2.5.3' id='trp-dynamic-translator-js'></script> <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js?ver=1.2.58.2' id='mo-google-webfont-js'></script> <script type='text/javascript' id='mailoptin-js-extra'> /* <![CDATA[ */ var mailoptin_globals = {"public_js":"https:\/\/www.badsender.com\/wp-content\/plugins\/mailoptin\/src\/core\/src\/assets\/js\/src","public_sound":"https:\/\/www.badsender.com\/wp-content\/plugins\/mailoptin\/src\/core\/src\/assets\/sound\/","mailoptin_ajaxurl":"\/en\/guides\/accessibility-and-email\/?mailoptin-ajax=%%endpoint%%","is_customize_preview":"false","disable_impression_tracking":"false","sidebar":"0","js_required_title":"Title is required.","is_new_returning_visitors_cookies":"false"}; /* ]]> */ </script> <script type='text/javascript' src='https://www.badsender.com/wp-content/plugins/mailoptin/src/core/src/assets/js/mailoptin.min.js?ver=1.2.58.2' id='mailoptin-js'></script> <script type='text/javascript' id='cmplz-cookiebanner-js-extra'> /* <![CDATA[ */ var complianz = {"prefix":"cmplz_","user_banner_id":"1","set_cookies":[],"block_ajax_content":"","banner_version":"33","version":"6.4.5","store_consent":"","do_not_track_enabled":"","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":"","cookie_domain":"","current_policy_id":"21","cookie_path":"\/","categories":{"statistics":"statistics","marketing":"marketing"},"tcf_active":"","placeholdertext":"Click to accept {category} cookies and enable this content","aria_label":"Click to accept {category} cookies and enable this content","css_file":"https:\/\/www.badsender.com\/wp-content\/uploads\/complianz\/css\/banner-{banner_id}-{type}.css?v=33","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\/privacy\/"}}},"tm_categories":"","forceEnableStats":"","preview":"","clean_cookies":""}; /* ]]> */ </script> <script defer type='text/javascript' src='https://www.badsender.com/wp-content/plugins/complianz-gdpr/cookiebanner/js/complianz.min.js?ver=6.4.5' id='cmplz-cookiebanner-js'></script> <script type='text/javascript' id='cmplz-cookiebanner-js-after'> 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 type='text/javascript' src='https://www.badsender.com/wp-content/plugins/elementor-pro/assets/lib/smartmenus/jquery.smartmenus.min.js?ver=1.0.1' id='smartmenus-js'></script> <script type='text/javascript' src='https://www.google.com/recaptcha/api.js?render=explicit&ver=3.13.2' id='elementor-recaptcha_v3-api-js'></script> <script type='text/javascript' src='https://www.badsender.com/wp-content/plugins/elementor-pro/assets/js/webpack-pro.runtime.min.js?ver=3.13.2' id='elementor-pro-webpack-runtime-js'></script> <script type='text/javascript' src='https://www.badsender.com/wp-content/plugins/elementor/assets/js/webpack.runtime.min.js?ver=3.13.4' id='elementor-webpack-runtime-js'></script> <script type='text/javascript' src='https://www.badsender.com/wp-content/plugins/elementor/assets/js/frontend-modules.min.js?ver=3.13.4' id='elementor-frontend-modules-js'></script> <script type='text/javascript' src='https://www.badsender.com/wp-includes/js/dist/vendor/wp-polyfill-inert.min.js?ver=3.1.2' id='wp-polyfill-inert-js'></script> <script type='text/javascript' src='https://www.badsender.com/wp-includes/js/dist/vendor/regenerator-runtime.min.js?ver=0.13.11' id='regenerator-runtime-js'></script> <script type='text/javascript' src='https://www.badsender.com/wp-includes/js/dist/vendor/wp-polyfill.min.js?ver=3.15.0' id='wp-polyfill-js'></script> <script type='text/javascript' src='https://www.badsender.com/wp-includes/js/dist/hooks.min.js?ver=4169d3cf8e8d95a3d6d5' id='wp-hooks-js'></script> <script type='text/javascript' src='https://www.badsender.com/wp-includes/js/dist/i18n.min.js?ver=9e794f35a71bb98672ae' id='wp-i18n-js'></script> <script type='text/javascript' id='wp-i18n-js-after'> wp.i18n.setLocaleData( { 'text direction\u0004ltr': [ 'ltr' ] } ); </script> <script type='text/javascript' id='elementor-pro-frontend-js-before'> var ElementorProFrontendConfig = {"ajaxurl":"https:\/\/www.badsender.com\/wp-admin\/admin-ajax.php","nonce":"6d456a1084","urls":{"assets":"https:\/\/www.badsender.com\/wp-content\/plugins\/elementor-pro\/assets\/","rest":"https:\/\/www.badsender.com\/en\/wp-json\/"},"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"}},"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 type='text/javascript' src='https://www.badsender.com/wp-content/plugins/elementor-pro/assets/js/frontend.min.js?ver=3.13.2' id='elementor-pro-frontend-js'></script> <script type='text/javascript' src='https://www.badsender.com/wp-content/plugins/elementor/assets/lib/waypoints/waypoints.min.js?ver=4.0.2' id='elementor-waypoints-js'></script> <script type='text/javascript' src='https://www.badsender.com/wp-includes/js/jquery/ui/core.min.js?ver=1.13.2' id='jquery-ui-core-js'></script> <script type='text/javascript' 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"},"is_rtl":false,"breakpoints":{"xs":0,"sm":480,"md":768,"lg":1025,"xl":1440,"xxl":1600},"responsive":{"breakpoints":{"mobile":{"label":"Mobile Portrait","value":767,"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":1024,"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}}},"version":"3.13.4","is_static":false,"experimentalFeatures":{"e_dom_optimization":true,"e_optimized_assets_loading":true,"e_optimized_css_loading":true,"e_font_icon_svg":true,"a11y_improvements":true,"additional_custom_breakpoints":true,"theme_builder_v2":true,"e_lazyload":true,"loop":true,"form-submissions":true},"urls":{"assets":"https:\/\/www.badsender.com\/wp-content\/plugins\/elementor\/assets\/"},"swiperClass":"swiper-container","settings":{"page":[],"editorPreferences":[]},"kit":{"active_breakpoints":["viewport_mobile","viewport_tablet"],"global_image_lightbox":"yes"},"post":{"id":549619,"title":"Guide%20%3A%20Accessibilit%C3%A9%20et%20email","excerpt":"","featuredImage":false}}; </script> <script type='text/javascript' src='https://www.badsender.com/wp-content/plugins/elementor/assets/js/frontend.min.js?ver=3.13.4' id='elementor-frontend-js'></script> <script type='text/javascript' src='https://www.badsender.com/wp-content/plugins/elementor-pro/assets/js/elements-handlers.min.js?ver=3.13.2' id='pro-elements-handlers-js'></script> <script type='text/javascript' src='https://www.badsender.com/wp-content/plugins/elementor-pro/assets/lib/sticky/jquery.sticky.min.js?ver=3.13.2' id='e-sticky-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"> var _ss = _ss || []; _ss.push(['_setDomain', 'https://koi-3Q56OXU3WO.marketingautomation.services/net']); _ss.push(['_setAccount', 'KOI-3Q6ANWY1JC']); _ss.push(['_trackPageView']); window._pa = window._pa || {}; // _pa.orderId = "myOrderId"; // OPTIONAL: attach unique conversion identifier to conversions // _pa.revenue = "19.99"; // OPTIONAL: attach dynamic purchase values to conversions // _pa.productId = "myProductId"; // OPTIONAL: Include product ID for use with dynamic ads (function() { var ss = document.createElement('script'); ss.type = 'text/javascript'; ss.async = true; ss.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'koi-3Q56OXU3WO.marketingautomation.services/client/ss.js?ver=2.4.0'; var scr = document.getElementsByTagName('script')[0]; scr.parentNode.insertBefore(ss, scr); })(); </script> </body> </html>