Accessibility as a new trend?
I must confess one thing, it shocks me 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 lang= " " attribute to the <html> HTML code. If the text is in FrenchIn French, fill in the lang attribute as follows: lang="fr ". 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
tag to the HTML code.</strong> 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.</li><li><strong>Ensure correct rendering of an email on 120 DPI</strong>and in particular 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, <span style="text-decoration: underline;">because it may depend on a visual impairment</span>. The steps : <ul> <li>Add an XML Namespace on the tag <html>. <pre class="lang:xhtml decode:true"><html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office"></pre> </li> <li>Correct DPI for images: This part of the code is added just before closing the tag. <pre class="lang:xhtml decode:true"><!--[if gte mso 9]>--> 96</pre> </li> <li>Use CSS instead of/in addition to HTML attributes. Please note that any value specified other than px will be converted to points. In other words, the values in the width and height attributes must be filled in via the corresponding CSS properties. <pre class="lang:xhtml decode:true"><!-- 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;"></pre> </li> </ul> </li><li><strong>Summarize the content of the message in the preheader.</strong> 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="noopener noreferrer external" data-wpel-link="external">1</a>|<a href="https://www.emailonacid.com/resource/accessibility-in-email/" target="_blank" rel="noopener noreferrer external" data-wpel-link="external">2</a>) consists in concentrating the content of the message in the preheader of the email 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, <span style="text-decoration: underline;">allowing quick access to the entire offer and message of the email</span>. 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.</li><li><strong>Every image, whatever it is, <a href="https://emails.hteumeuleu.com/email-accessibility-in-action-f7f9d945cf67" target="_blank" rel="noopener noreferrer external" data-wpel-link="external">must have an alt attribute</a>.</strong> If no alt attribute is specified, screen readers will read the file name. This can quickly become an unpleasant experience. Alternative texts have a major role and must be configured so that your mail is always readable before the images are loaded. <span style="text-decoration: underline;">Defining the right alt text will allow screen readers to accurately describe the images.</span> However, if you use an image only for the "aesthetics" of the email <em>(like a spacer or a shadow),</em> be sure to set an alt= " " <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="noopener noreferrer 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.<iframe width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen" data-src="https://www.youtube.com/embed/643FYepWwRU" class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="></iframe></li><li><strong>Beware of animated gifs that are 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="noopener noreferrer 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></li><li><strong>Make sure that the content of the message included in an animated gif is accessible/understandable from the first slide</strong> : It's not a surprise anymore, 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="noopener noreferrer external" data-wpel-link="external">blocks animated gifs</a> on the first image included in the gif. <span style="text-decoration: underline;">It is therefore essential to propose a content/offer that is understandable <a href="https://www.message-business.com/reussir-marketing/conseil-emailing/gif-anime-emailing/gif-anime-sur-outlook/" target="_blank" rel="noopener noreferrer external" data-wpel-link="external">from the first slide</a></span>. 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.</li><li><strong>Add the attribute <a href="https://www.gorebel.com/blog/accessibility-in-email-part-ii" target="_blank" rel="noopener noreferrer external" data-wpel-link="external">role= "presentation "</a> on the boards</strong> present in an email. HTML tables are not originally designed for presentation, except for emails, where tables allow you to obtain an identical result on most email clients, and especially to use certain style properties on Outlook <em>(width or padding)</em>. Adding this attribute tells screen readers that this is a presentation table, not a data table. <span style="text-decoration: underline;">This will make the reading of the content much more intuitive for screen readers, since they will not read the number of rows and cells in the table.</span> 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="noopener noreferrer 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.<iframe width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen" data-src="https://www.youtube.com/embed/off68QcnN-s" class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="></iframe></li><li><strong>Use of <a href="http://createsend.com/t/d-ABFFF5F25EC93A19" target="_blank" rel="noopener noreferrer external" data-wpel-link="external">semantic tags</a>.</strong> The tags <h1>, <h2>, <h3>, <p>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>(margin)</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.</li><li><strong>Insert text in HTML instead of images</strong>not only to optimize the text/image ratio of a campaign, but especially to <span style="text-decoration: underline;">guarantee a maximum of information when displaying an email without downloading the images</span>.</li><li><strong>A paragraph of text must have a font size <a href="http://createsend.com/t/d-ABFFF5F25EC93A19" target="_blank" rel="noopener noreferrer external" data-wpel-link="external">greater than or equal to 14px</a></strong>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 line-height of at least 150% for each text in an email.</li><li><strong>Take into account and improve the contrast of texts or data in the email.</strong> 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="noopener noreferrer external" data-wpel-link="external">Tanaguru</a>These are used to determine the ratio between two colors. It is necessary, as far as possible, <span style="text-decoration: underline;">apply a minimum ratio of 4.5:1 on all texts in an email.</span> For text larger than 23px or bold text larger 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="noopener noreferrer 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="noopener noreferrer external" data-wpel-link="external">to know quickly the ratio</a> between colors, font sizes, etc...</li><li><strong>Maintain a logical reading structure</strong> <em>(from left to right)</em>. It also helps recipients with dyslexia to maintain their reading rhythm.</li><li><strong>Align the texts on the left.</strong> The eye at a <a href="http://createsend.com/t/d-ABFFF5F25EC93A19" target="_blank" rel="noopener noreferrer external" data-wpel-link="external">reference point</a> to start reading each new line. While it is acceptable to center text for headings 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.</li><li><strong>The content of the links must be meaningful and descriptive</strong> Contact us" is preferable to "Click here". The text in the link should inform the reader of what will happen when they click on it.</li><li><strong>Do not specify a title attribute for links.</strong> They make it difficult for screen readers to read. Instead, fill in relevant content directly in the link text, or in the link itself.</li><li><strong>Links do not depend on color to be identified as such.</strong> They can be indicated by an underline or followed by a symbol <em>(>)</em> for example.</li><li><strong>Using the border-bottom CSS property</strong> rather than the CSS property text-decoration:underline on links for <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="noopener noreferrer 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.</li><li><strong>Buttons and links can be easily clicked</strong> 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="noopener noreferrer external" data-wpel-link="external">opinions differ</a>)</em>.</li><li><strong>Text can be enlarged without being cut </strong><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.</li><li><strong>Ensure that text sizes are consistent for mobile display.</strong> 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. <span style="text-decoration: underline;">The media queries are also there to avoid these problems.</span></li><li><strong>The HTML is correctly structured, without errors,</strong> and when the mail clients allow it, will 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 role="presentation" on <table>.</li><li><strong>Keep the code concise. As light as possible.</strong> Codes that are too heavy, or superfluous, can impact loading time. Tools like <a href="http://infohound.net/tidy/" target="_blank" rel="noopener noreferrer 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="noopener noreferrer external" data-wpel-link="external">W3C Tidy Project</a>)</em> or <a href="https://www.10bestdesign.com/dirtymarkup/" target="_blank" rel="noopener noreferrer 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.</li></ol> <div class="wp-block-image"><figure class="aligncenter"><a href="https://www.badsender.com/wp-content/uploads/2019/01/02.jpg" data-wpel-link="external" target="_blank" rel="external noopener noreferrer"><img width="800" height="330" alt="Handicap navigation email" data-srcset="https://897642.smushcdn.com/119080/wp-content/uploads/2019/01/02-64x26.jpg?lossy=0&strip=1&webp=1 64w, https://897642.smushcdn.com/119080/wp-content/uploads/2019/01/02-200x83.jpg?lossy=0&strip=1&webp=1 200w, https://897642.smushcdn.com/119080/wp-content/uploads/2019/01/02-300x124.jpg?lossy=0&strip=1&webp=1 300w, https://897642.smushcdn.com/119080/wp-content/uploads/2019/01/02.jpg?size=480x198&lossy=0&strip=1&webp=1 480w, https://897642.smushcdn.com/119080/wp-content/uploads/2019/01/02.jpg?size=640x264&lossy=0&strip=1&webp=1 640w, https://897642.smushcdn.com/119080/wp-content/uploads/2019/01/02-768x317.jpg?lossy=0&strip=1&webp=1 768w, https://897642.smushcdn.com/119080/wp-content/uploads/2019/01/02.jpg?lossy=0&strip=1&webp=1 800w" data-src="https://897642.smushcdn.com/119080/wp-content/uploads/2019/01/02.jpg?lossy=0&strip=1&webp=1" data-sizes="(max-width: 800px) 100vw, 800px" class="wp-image-8673 lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /><noscript><img width="800" height="330" src="https://897642.smushcdn.com/119080/wp-content/uploads/2019/01/02.jpg?lossy=0&strip=1&webp=1" alt="Handicap navigation email" class="wp-image-8673" srcset="https://897642.smushcdn.com/119080/wp-content/uploads/2019/01/02-64x26.jpg?lossy=0&strip=1&webp=1 64w, https://897642.smushcdn.com/119080/wp-content/uploads/2019/01/02-200x83.jpg?lossy=0&strip=1&webp=1 200w, https://897642.smushcdn.com/119080/wp-content/uploads/2019/01/02-300x124.jpg?lossy=0&strip=1&webp=1 300w, https://897642.smushcdn.com/119080/wp-content/uploads/2019/01/02.jpg?size=480x198&lossy=0&strip=1&webp=1 480w, https://897642.smushcdn.com/119080/wp-content/uploads/2019/01/02.jpg?size=640x264&lossy=0&strip=1&webp=1 640w, https://897642.smushcdn.com/119080/wp-content/uploads/2019/01/02-768x317.jpg?lossy=0&strip=1&webp=1 768w, https://897642.smushcdn.com/119080/wp-content/uploads/2019/01/02.jpg?lossy=0&strip=1&webp=1 800w" sizes="(max-width: 800px) 100vw, 800px" /></noscript></a></figure></div> <p>If the points raised above are particularly focused on the visual disability, 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." Paul Airy</p></blockquote> <div class="wp-block-image"><figure class="aligncenter"><a href="https://www.badsender.com/wp-content/uploads/2019/01/tt-1.jpg" data-wpel-link="external" target="_blank" rel="external noopener noreferrer"><img width="180" height="1024" alt="EmailOnAcid Accessibility Infographic" data-srcset="https://897642.smushcdn.com/119080/wp-content/uploads/2019/01/tt-1-11x64.jpg?lossy=0&strip=1&webp=1 11w, https://897642.smushcdn.com/119080/wp-content/uploads/2019/01/tt-1-180x1024.jpg?lossy=0&strip=1&webp=1 180w" data-src="https://897642.smushcdn.com/119080/wp-content/uploads/2019/01/tt-1-180x1024.jpg?lossy=0&strip=1&webp=1" data-sizes="(max-width: 180px) 100vw, 180px" class="wp-image-8667 lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /><noscript><img width="180" height="1024" src="https://897642.smushcdn.com/119080/wp-content/uploads/2019/01/tt-1-180x1024.jpg?lossy=0&strip=1&webp=1" alt="EmailOnAcid Accessibility Infographic" class="wp-image-8667" srcset="https://897642.smushcdn.com/119080/wp-content/uploads/2019/01/tt-1-11x64.jpg?lossy=0&strip=1&webp=1 11w, https://897642.smushcdn.com/119080/wp-content/uploads/2019/01/tt-1-180x1024.jpg?lossy=0&strip=1&webp=1 180w" sizes="(max-width: 180px) 100vw, 180px" /></noscript></a></figure></div> <p>And here's an infographic published by EmailOnAcid addressing some of the above points. </p> <h3 id="h-pour-l-accessibilite-mais-pas-seulement">For accessibility... But not only!</h3> <div class="wp-block-image"><figure class="aligncenter"><a href="https://www.badsender.com/wp-content/uploads/2019/01/01.jpg" data-wpel-link="external" target="_blank" rel="external noopener noreferrer"><img width="800" height="330" alt="Ecological footprint email" data-srcset="https://897642.smushcdn.com/119080/wp-content/uploads/2019/01/01-64x26.jpg?lossy=0&strip=1&webp=1 64w, https://897642.smushcdn.com/119080/wp-content/uploads/2019/01/01-200x83.jpg?lossy=0&strip=1&webp=1 200w, https://897642.smushcdn.com/119080/wp-content/uploads/2019/01/01-300x124.jpg?lossy=0&strip=1&webp=1 300w, https://897642.smushcdn.com/119080/wp-content/uploads/2019/01/01.jpg?size=480x198&lossy=0&strip=1&webp=1 480w, https://897642.smushcdn.com/119080/wp-content/uploads/2019/01/01.jpg?size=640x264&lossy=0&strip=1&webp=1 640w, https://897642.smushcdn.com/119080/wp-content/uploads/2019/01/01-768x317.jpg?lossy=0&strip=1&webp=1 768w, https://897642.smushcdn.com/119080/wp-content/uploads/2019/01/01.jpg?lossy=0&strip=1&webp=1 800w" data-src="https://897642.smushcdn.com/119080/wp-content/uploads/2019/01/01.jpg?lossy=0&strip=1&webp=1" data-sizes="(max-width: 800px) 100vw, 800px" class="wp-image-8672 lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /><noscript><img width="800" height="330" src="https://897642.smushcdn.com/119080/wp-content/uploads/2019/01/01.jpg?lossy=0&strip=1&webp=1" alt="Ecological footprint email" class="wp-image-8672" srcset="https://897642.smushcdn.com/119080/wp-content/uploads/2019/01/01-64x26.jpg?lossy=0&strip=1&webp=1 64w, https://897642.smushcdn.com/119080/wp-content/uploads/2019/01/01-200x83.jpg?lossy=0&strip=1&webp=1 200w, https://897642.smushcdn.com/119080/wp-content/uploads/2019/01/01-300x124.jpg?lossy=0&strip=1&webp=1 300w, https://897642.smushcdn.com/119080/wp-content/uploads/2019/01/01.jpg?size=480x198&lossy=0&strip=1&webp=1 480w, https://897642.smushcdn.com/119080/wp-content/uploads/2019/01/01.jpg?size=640x264&lossy=0&strip=1&webp=1 640w, https://897642.smushcdn.com/119080/wp-content/uploads/2019/01/01-768x317.jpg?lossy=0&strip=1&webp=1 768w, https://897642.smushcdn.com/119080/wp-content/uploads/2019/01/01.jpg?lossy=0&strip=1&webp=1 800w" sizes="(max-width: 800px) 100vw, 800px" /></noscript></a></figure></div> <p>If you want to go through with it, <span style="text-decoration: underline;">it would be very interesting to definitively abandon the integration of emails via nested tables</span>. There are several reasons for this: nested tables make the HTML code more cumbersome, and make it much more complex to understand and update. Also for accessibility issues as we discussed above, tables are not the ideal method for screen readers. And also for another reason that we haven't developed so far: the weight of the email would probably be lighter if we freed ourselves from the <table>, <tr>, <td>which would allow to <a href="https://www.badsender.com/en/2019/03/11/participate-a-lemail-marketing-eco-responsible/" target="_blank" rel="noopener noreferrer external" data-wpel-link="external">reduce our ecological impact</a>. <strong>Which, by the way, should be just as much of an imperative in 2019</strong>. But then what about a code developed entirely from <div> and semantic tags? Is this possible when we know that Outlook does not interpret the CSS width property applied to a <div> for example?</p> <h3 id="h-sortir-definitivement-des-table">Definitely get out of the <table></h3> <p><a href="https://www.youtube.com/watch?v=sr1iBfWCchs" target="_blank" rel="noopener noreferrer external" data-wpel-link="external">Mark Robbins</a> as <a href="http://emails.hteumeuleu.fr/2016/08/thinking-outside-the-table-tedc-2016/" target="_blank" rel="noopener noreferrer external" data-wpel-link="external">Rémi Parmentier</a> have already raised the idea and taken this initiative, through their respective movements " <a href="https://litmus.com/community/discussions/6816-get-off-the-table" target="_blank" rel="noopener noreferrer external" data-wpel-link="external">Get off the table</a> " and " <a href="https://speakerdeck.com/hteumeuleu/thinking-outside-the-table" target="_blank" rel="noopener noreferrer external" data-wpel-link="external">Thinking outside the <table></a>" . Here is a small overview of the test results we are currently getting. In advance, I specify that I am still in its infancy, and that I discover many specificities every day...</p> <ul><li>Most HTML elements <em>(<hn>, <p>, <ul>, <li>, <em>, <strong>, <b>, <cite>, <blockquote>...)</em> have a <a href="https://litmus.com/builder/092cc97" target="_blank" rel="noopener noreferrer external" data-wpel-link="external">automatic graphic formatting</a> <em>(or by default)</em> which differs according to the mail clients, media and browsers. Bold, italic, background color, indentation, bullets, text size... We can see that type tags are for example automatically bolded on almost all email clients. <strong>This means that a series of "resets" must be implemented in CSS.</strong> Can we then apply them directly in the tag present in the ?</li><li>The <a href="https://litmus.com/builder/79f63df" target="_blank" rel="noopener noreferrer external" data-wpel-link="external">present in the</a> is not interpreted by Android 5.1, Android 6.0, or on Gmail App IMAP <em>(Android 4.4)</em>nor on T-Online <em>(regardless of the browser)</em>. <strong>This major constraint forces us to write our styles online</strong> <em>(inline)</em>directly on our HTML elements.</li><li>The <a href="https://litmus.com/builder/75a6aab" target="_blank" rel="noopener noreferrer external" data-wpel-link="external">reset CSS online</a> <em>(inline)</em> through the CSS properties line-height, font-size, margin, padding, font-family, font-weight work correctly on tags of type <hn> or <p>. We note in passing that the writing of hexadecimal codes in 3 characters and not in 6 when possible works properly. We also note that Gmail App <em>(iOS 10.3.2)</em> and Inbox by Gmail <em>(iOS 10.3)</em> consider the elements as block elements, since they are one under the other, <strong>but their width is limited to their content</strong>. The opportunity to see that the <body> has internal margins <em>(top or right and left depending on the version)</em> on iPhone.</li><li>It can be noted that it is possible to apply a <a href="https://litmus.com/builder/d946e33" target="_blank" rel="noopener noreferrer external" data-wpel-link="external">CSS reset to elements <body> and <html></a> through the CSS properties padding, margin, width and height to avoid any internal margin. On the other hand, a background color set on the body is not displayed correctly on Yahoo! <em>(any browser)</em>This is probably due to the fact that <strong>Yahoo! Mail seems to remove the <body> HTML code</strong> <em>(conclusion drawn from the HTML overview processed by Yahoo! Mail)</em>.</li><li>We realize that we can <a href="https://litmus.com/builder/16d594f" target="_blank" rel="noopener noreferrer external" data-wpel-link="external">use the <div></a> within an HTML email integration, but it does not support the CSS background-color property on Outlook 2007, 2010, 2013, 2016, and 2019. Also, <a href="https://www.campaignmonitor.com/css/box-model/width/" target="_blank" rel="noopener noreferrer external" data-wpel-link="external">the CSS width property is not interpreted at all</a> on Outlook 2007, Outlook 2010, Outlook 2013, Outlook 2019 on Windows 10, and Windows 10 Mail <em>(Windows 10)</em>nor the CSS max-width property. <strong>Therefore, we are forced to use conditional comments specific to Outlook</strong> <em>(versions greater than or equal to Outlook 2007)</em> to simulate fixed widths on tables. Moreover, in these conditional comments, we are forced to fill in the background color via the CSS property background-color, since the bgcolor attribute does not work.</li><li>At the same time, we notice that the Litmus renderings of Gmail App IMAP <em>(Android 4)</em>Gmail App <em>(Android 8.0)</em>Gmail App <em>(Android 7.1)</em> and Gmail App <em>(Android 6.0)</em> are "cut" by + or - 20 pixels before the end. This explains the disappearance of the <p> on these renderings on the texts of the previous examples <em>(located in the last position, after the <h6>)</em>.</li><li>The CSS padding property does not work on HTML elements other than tables in Outlook 2007/2010/2013/2016/2019 <em>(Windows 10)</em>Thunderbird 60 <em>(Windows 7)</em>Windows 10 Mail.</li><li>Do not forget to specify an align="center" to the tables present in the Outlook conditional comments if you wish to center horizontally within the page these same tables.</li><li>Astonishment, <strong>it seems that the T-Online.de mail client also interprets the conditional code specific to Outlook</strong>.</li><li>When you want to <a href="https://litmus.com/builder/e7cfd2f" target="_blank" rel="noopener noreferrer external" data-wpel-link="external">put two divs side by side</a> for a columnar operation, several conditions must be kept in mind: Apply the CSS property font-size:0px; to the <div> including both <div> side by side, as well as the display:inline-block <em>(to modify its behavior)</em>. Add a "text-align:center" so that both columns are centered on the mobile version. At the same time, add a text-align:left <em>(if the texts are to be left-shod)</em> on the <p> included in the <div> side by side. The <div> including both <div> side by side must have a predefined maximum width <em>(max-width)</em>. And these same <div> must be included in a conditional comment because Outlook and others do not accept the max-width property on <div>. You may also need to specify a vertical-align on both <div> in the event that they are not of the same height.</li><li>We must not forget <strong><a href="https://www.emailonacid.com/blog/article/email-development/email-accessibilty-in-2017/" target="_blank" rel="noopener noreferrer external" data-wpel-link="external">add the attribute role="presentation</a> on all tables in the Outlook conditional comments</strong> to optimize the reading of screen readers.</li><li>Mark Robbins mentioned the possibility of using Outlook specific attributes to counter the problems of interpretation of certain CSS properties by this mail client.</li></ul> <h3 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>" . At <a href="https://www.badsender.com/en/2018/12/10/training-mailing-may-2019/" target="_blank" rel="noopener noreferrer external" data-wpel-link="external">training sessions that Badsender will present in May</a>, <strong>we will take the opportunity to address this topic</strong>. At least I will in my training <a href="https://agence.badsender.com/formations/formation-html-email/" target="_blank" rel="noopener noreferrer external" data-wpel-link="external">HTML for email</a> 😉 .</p> <h4 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 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" class="broken_link" 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> </div> </div> <div class="elementor-element elementor-element-2e18980 contenu_article elementor-widget elementor-widget-text-editor" data-id="2e18980" data-element_type="widget" data-settings="{"enabled_visibility":"yes"}" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <p>Need a <a href="https://www.badsender.com/en/agency/design/design-system-email/" data-wpel-link="external" target="_blank" rel="external noopener noreferrer">design system email</a> ? Or <a href="https://www.badsender.com/en/agency/design/design-email/" data-wpel-link="external" target="_blank" rel="external noopener noreferrer">an email design</a> at all? Or <a href="https://www.badsender.com/en/agency/design/integration-html-email/" data-wpel-link="external" target="_blank" rel="external noopener noreferrer">an HTML integration for email</a> ? Or <a href="https://www.badsender.com/en/agency/design/email-builder/" data-wpel-link="external" target="_blank" rel="external noopener noreferrer">an email builder</a> ? We can also offer you :</p><ul><li>A white paper on <a href="https://www.badsender.com/en/livre-blanc/design-system-email-2/" data-wpel-link="external" target="_blank" rel="external noopener noreferrer">design system email</a></li><li>A white paper on <a href="https://www.badsender.com/en/livre-blanc/dark-mode-2/" data-wpel-link="external" target="_blank" rel="external noopener noreferrer">the dark mode</a></li><li>A white paper on <a href="https://www.badsender.com/en/livre-blanc/code-an-email-in-html/" data-wpel-link="external" target="_blank" rel="external noopener noreferrer">HTML integration for email</a></li></ul><p>Badsender also animates <a href="https://www.badsender.com/en/trainings/html-email/" data-wpel-link="external" target="_blank" rel="external noopener noreferrer">a training on the subject of HTML development of an email</a> !</p> </div> </div> <div class="elementor-element elementor-element-687302d contenu_article elementor-widget elementor-widget-text-editor" data-id="687302d" data-element_type="widget" data-settings="{"enabled_visibility":"yes"}" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <p>Need a <a href="https://www.badsender.com/en/agency/strategy/coaching/" data-wpel-link="external" target="_blank" rel="external noopener noreferrer">strategic coaching for emailing</a> ? We can also offer you :</p><ul><li>A white paper on <a href="https://www.badsender.com/en/livre-blanc/analysis-of-statistics/" data-wpel-link="external" target="_blank" rel="external noopener noreferrer">analysis of statistics</a></li><li>A white paper on <a href="https://www.badsender.com/en/livre-blanc/content-marketing-dynamics/" data-wpel-link="external" target="_blank" rel="external noopener noreferrer">dynamic content and content personalization</a></li><li>A benchmark <a href="https://www.badsender.com/en/livre-blanc/choice-tool-campaign-management/" data-wpel-link="external" target="_blank" rel="external noopener noreferrer">email campaign management solutions</a></li></ul><p>Badsender also conducts training on the subject of <a href="https://www.badsender.com/en/trainings/email-marketing/" data-wpel-link="external" target="_blank" rel="external noopener noreferrer">the emailing strategy</a> and on <a href="https://www.badsender.com/en/trainings/choice-tools-of-routing/" data-wpel-link="external" target="_blank" rel="external noopener noreferrer">the choice of a routing tool</a> !</p> </div> </div> <div class="elementor-element elementor-element-a3f9302 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="a3f9302" 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" tabindex="0" aria-label="Share on facebook" data-no-translation-aria-label=""> <span class="elementor-share-btn__icon"> <svg class="e-font-icon-svg e-fab-facebook"><use xlink:href="#fab-facebook" /></svg> </span> </div> </div> <div class="elementor-grid-item"> <div class="elementor-share-btn elementor-share-btn_twitter" tabindex="0" aria-label="Share on twitter" data-no-translation-aria-label=""> <span class="elementor-share-btn__icon"> <svg class="e-font-icon-svg e-fab-twitter"><use xlink:href="#fab-twitter" /></svg> </span> </div> </div> <div class="elementor-grid-item"> <div class="elementor-share-btn elementor-share-btn_linkedin" tabindex="0" aria-label="Share on linkedin" data-no-translation-aria-label=""> <span class="elementor-share-btn__icon"> <svg class="e-font-icon-svg e-fab-linkedin"><use xlink:href="#fab-linkedin" /></svg> </span> </div> </div> <div class="elementor-grid-item"> <div class="elementor-share-btn elementor-share-btn_email" tabindex="0" aria-label="Share on email" data-no-translation-aria-label=""> <span class="elementor-share-btn__icon"> <svg class="e-font-icon-svg e-fas-envelope"><use xlink:href="#fas-envelope" /></svg> </span> </div> </div> </div> </div> </div> </div> </article> </div> </main> <section class="elementor-section elementor-top-section elementor-element elementor-element-63f6bcd elementor-section-full_width elementor-section-height-default elementor-section-height-default" data-id="63f6bcd" 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-e6b2a7d" data-id="e6b2a7d" data-element_type="column"> <div class="elementor-widget-wrap elementor-element-populated"> <div class="elementor-element elementor-element-1b278d9 elementor-widget elementor-widget-shortcode" data-id="1b278d9" 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="524188" class="elementor elementor-524188 elementor-location-single"> </div> </div> </div> </div> </div> </div> </div> </section> <div class="elementor-section elementor-top-section elementor-element elementor-element-f8e1469 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="f8e1469" data-element_type="section" data-settings="{"background_background":"classic"}"> <div class="elementor-container elementor-column-gap-default"> <div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-3516244" data-id="3516244" data-element_type="column"> <div class="elementor-widget-wrap elementor-element-populated"> <div class="elementor-element elementor-element-1431438 elementor-author-box--link-yes elementor-author-box--avatar-yes elementor-author-box--name-yes elementor-author-box--biography-yes elementor-widget elementor-widget-author-box" data-id="1431438" data-element_type="widget" data-widget_type="author-box.default"> <div class="elementor-widget-container"> <div class="elementor-author-box"> <a href="https://www.badsender.com/en/author/tde/" class="elementor-author-box__avatar" data-wpel-link="internal"> <img alt="Thomas Defossez" data-src="https://897642.smushcdn.com/119080/wp-content/wphb-cache/gravatar/eb2/eb280423f79142f83c14477fff1a8519x300.jpg?lossy=0&strip=1&webp=1" class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="><noscript><img src="https://897642.smushcdn.com/119080/wp-content/wphb-cache/gravatar/eb2/eb280423f79142f83c14477fff1a8519x300.jpg?lossy=0&strip=1&webp=1" alt="Thomas Defossez"></noscript> </a> <div class="elementor-author-box__text"> <a href="https://www.badsender.com/en/author/tde/" data-wpel-link="internal"> <div class="elementor-author-box__name"> Thomas Defossez </div> </a> <div class="elementor-author-box__bio"> Thomas started his career as an emailing integrator at Experian before creating his own web agency. Today, Thomas decided to focus on email in order to be a specialist in HTML integration of this medium. Since the end of 2014, Thomas has been collaborating on various projects for the Badsender.com Agency. </div> <a class="elementor-author-box__button elementor-button elementor-size-xs" href="https://www.badsender.com/en/author/tde/" data-wpel-link="internal"> All publications </a> </div> </div> </div> </div> <div class="elementor-element elementor-element-4c42489 elementor-widget elementor-widget-post-comments" data-id="4c42489" data-element_type="widget" data-widget_type="post-comments.theme_comments"> <div class="elementor-widget-container"> <section id="comments" class="comments-area"> <div id="respond" class="comment-respond"> <h2 id="reply-title" class="comment-reply-title" data-no-translation="" data-trp-gettext="">Leave a Reply</h2><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" data-no-translation="" data-trp-gettext="">Your email address will not be published.</span> <span class="required-field-message" aria-hidden="true" data-no-translation="" data-trp-gettext="">Required fields are marked <span class="required" aria-hidden="true">*</span></span></p><p class="comment-form-comment"><label for="comment">Comment <span class="required" aria-hidden="true">*</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" aria-hidden="true">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" required /></p> <p class="comment-form-email"><label for="email">Email <span class="required" aria-hidden="true">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" required /></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" data-no-translation="" data-trp-gettext="">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" data-no-translation-value="" /> <input type='hidden' name='comment_post_ID' value='8656' 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="d1dca04c47" /></p><p style="display: none !important;"><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="19"/><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 --> </section><!-- .comments-area --> </div> </div> </div> </div> </div> </div> </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" alt="badsender logo" data-src="https://www.badsender.com/wp-content/uploads/2021/09/badsender-logo.svg" class="attachment-full size-full lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /><noscript><img width="200" height="50" alt="badsender logo" data-src="https://www.badsender.com/wp-content/uploads/2021/09/badsender-logo.svg" class="attachment-full size-full lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /><noscript><img width="200" height="50" src="https://www.badsender.com/wp-content/uploads/2021/09/badsender-logo.svg" class="attachment-full size-full" alt="badsender logo" /></noscript></noscript> </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"><use xlink:href="#fab-spotify" /></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"><use xlink:href="#fab-youtube" /></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 migration_allowed="1" migrated="0" role="navigation" 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/a-propos-2/" 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 href="https://www.badsender.com/en/vie-privee/" 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> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-508440"><a href="https://www.badsender.com/en/reseau-expert/" class="elementor-item" data-wpel-link="internal">The Badsender network</a></li> </ul> </nav> <div class="elementor-menu-toggle" role="button" tabindex="0" aria-label="Menu Toggle" aria-expanded="false" data-no-translation-aria-label=""> <svg aria-hidden="true" role="presentation" class="elementor-menu-toggle__icon--open e-font-icon-svg e-eicon-menu-bar"><use xlink:href="#eicon-menu-bar" /></svg><svg aria-hidden="true" role="presentation" class="elementor-menu-toggle__icon--close e-font-icon-svg e-eicon-close"><use xlink:href="#eicon-close" /></svg> <span class="elementor-screen-only" data-no-translation="" data-trp-gettext="">Menu</span> </div> <nav class="elementor-nav-menu--dropdown elementor-nav-menu__container" role="navigation" 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/a-propos-2/" 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 href="https://www.badsender.com/en/vie-privee/" 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> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-508440"><a href="https://www.badsender.com/en/reseau-expert/" class="elementor-item" tabindex="-1" data-wpel-link="internal">The Badsender network</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>Functional</span></label> </span> Always active </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>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>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>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="">Manage 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="">Manage 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 vendors</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="">Read more about these purposes</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><svg xmlns="http://www.w3.org/2000/svg" id="e-font-icon-svg-symbols" style="display: none;"><symbol id="eicon-menu-bar" viewbox="0 0 1000 1000"><path d="M104 333H896C929 333 958 304 958 271S929 208 896 208H104C71 208 42 237 42 271S71 333 104 333ZM104 583H896C929 583 958 554 958 521S929 458 896 458H104C71 458 42 487 42 521S71 583 104 583ZM104 833H896C929 833 958 804 958 771S929 708 896 708H104C71 708 42 737 42 771S71 833 104 833Z"></path></symbol><symbol id="eicon-close" viewbox="0 0 1000 1000"><path d="M742 167L500 408 258 167C246 154 233 150 217 150 196 150 179 158 167 167 154 179 150 196 150 212 150 229 154 242 171 254L408 500 167 742C138 771 138 800 167 829 196 858 225 858 254 829L496 587 738 829C750 842 767 846 783 846 800 846 817 842 829 829 842 817 846 804 846 783 846 767 842 750 829 737L588 500 833 258C863 229 863 200 833 171 804 137 775 137 742 167Z"></path></symbol><symbol id="fas-search" viewbox="0 0 512 512"><path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path></symbol><symbol id="fab-facebook" viewbox="0 0 512 512"><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></symbol><symbol id="fab-twitter" viewbox="0 0 512 512"><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></symbol><symbol id="fab-linkedin" viewbox="0 0 448 512"><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></symbol><symbol id="fas-envelope" viewbox="0 0 512 512"><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></symbol><symbol id="fab-spotify" viewbox="0 0 496 512"><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></symbol><symbol id="fab-youtube" viewbox="0 0 576 512"><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></symbol></svg><link rel='stylesheet' id='elementor-post-524188-css' href='https://hb.wpmucdn.com/www.badsender.com/a3c2ea13-e68f-4ee8-8602-096edd02d025.css' type='text/css' media='all' /> <script type='text/javascript' id='wphb-4-js-extra'> /* <![CDATA[ */ var wphbGlobal = {"ajaxurl":"https:\/\/www.badsender.com\/wp-admin\/admin-ajax.php","commentForm":"","preloadComment":""};;;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":"4b2942e472","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://hb.wpmucdn.com/www.badsender.com/b2b83d2d-c457-493c-81e6-d9e92ddeea3d.js' id='wphb-4-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":"27","version":"6.3.0","store_consent":"","do_not_track":"","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":"19","cookie_path":"\/","categories":{"statistics":"statistics","marketing":"marketing"},"tcf_active":"","placeholdertext":"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=27","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\/vie-privee\/"}}},"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' id='cmplz-cookiebanner-js'></script> <script type='text/javascript' src='https://hb.wpmucdn.com/www.badsender.com/7da8f757-3d69-4153-9626-334e7b229e90.js' id='smartmenus-js'></script> <script defer type='text/javascript' src='https://hb.wpmucdn.com/www.badsender.com/ca8f4415-300c-4780-a422-f8dc87c75ffd.js' id='akismet-frontend-js'></script> <script type='text/javascript' 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 type='text/javascript' src='https://www.badsender.com/wp-content/plugins/elementor/assets/js/webpack.runtime.min.js' id='elementor-webpack-runtime-js'></script> <script type='text/javascript' src='https://hb.wpmucdn.com/www.badsender.com/a24ae9fc-4104-4502-a2e6-2b019397cd7d.js' id='elementor-frontend-modules-js'></script> <script type='text/javascript' src='https://hb.wpmucdn.com/www.badsender.com/c4652725-617b-4b09-8c9a-eaff8c05bad7.js' id='regenerator-runtime-js'></script> <script type='text/javascript' src='https://www.badsender.com/wp-includes/js/dist/vendor/wp-polyfill.min.js' id='wp-polyfill-js'></script> <script type='text/javascript' src='https://hb.wpmucdn.com/www.badsender.com/e37dfbb0-f634-46c2-bd44-c2a5f4d911f2.js' id='wphb-5-js'></script> <script type='text/javascript' id='wphb-5-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":"821c20ebf5","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://hb.wpmucdn.com/www.badsender.com/4a357ed8-a235-4d1d-800a-165bca9b3651.js' id='elementor-pro-frontend-js'></script> <script type='text/javascript' src='https://hb.wpmucdn.com/www.badsender.com/2a0304e9-d49c-4615-964f-efe5efdca101.js' id='elementor-waypoints-js'></script> <script type='text/javascript' src='https://www.badsender.com/wp-includes/js/jquery/ui/core.min.js' id='jquery-ui-core-js'></script> <script type='text/javascript' id='wphb-6-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","value":767,"default_value":767,"direction":"max","is_enabled":true},"mobile_extra":{"label":"Mobile Extra","value":880,"default_value":880,"direction":"max","is_enabled":false},"tablet":{"label":"Tablet","value":1024,"default_value":1024,"direction":"max","is_enabled":true},"tablet_extra":{"label":"Tablet Extra","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.7.0","is_static":false,"experimentalFeatures":{"e_dom_optimization":true,"e_optimized_assets_loading":true,"e_optimized_css_loading":true,"e_font_icon_svg":true,"e_import_export":true,"e_hidden_wordpress_widgets":true,"theme_builder_v2":true,"landing-pages":true,"elements-color-picker":true,"admin-top-bar":true,"notes":true,"form-submissions":true},"urls":{"assets":"https:\/\/www.badsender.com\/wp-content\/plugins\/elementor\/assets\/"},"settings":{"page":[],"editorPreferences":[]},"kit":{"active_breakpoints":["viewport_mobile","viewport_tablet"],"global_image_lightbox":"yes"},"post":{"id":8656,"title":"Accessibilit%C3%A9%20et%20emails%20%3A%20rendre%20ses%20campagnes%20plus%20accessibles","excerpt":"","featuredImage":"https:\/\/www.badsender.com\/wp-content\/uploads\/2019\/01\/photo-1574887467771-684837ef363a.jpg"}}; </script> <script type='text/javascript' src='https://hb.wpmucdn.com/www.badsender.com/4bcba433-14f1-422d-833c-2cf510e5c2ff.js' id='wphb-6-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.defer=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> <!-- Dynamic page generated in 6.851 seconds. --> <!-- Cached page generated by WP-Super-Cache on 2022-08-10 06:42:18 --> <!-- super cache -->