At Badsender, we are concerned about the climate crisis that our world is facing. Aware that in our business, the purpose of marketing actions is not always the most virtuous one, we wish to explain the basics of emailing eco-design with this guide.
See also: What is the role of a CRM team in the ecological transition?
What is eco-design?
Eco-design is the set of methods that allow to reduce the environmental impact of a product or a service. In the case of eco-design in email, it is about reducing the amount of energy and resources needed for the production, transport, display and storage of an email.
If there are many ways for the CRM professions to support the transition to a greener process, in this guide, we focus on good practices in terms ofemail design and html integration for email.
What is the email impact on the carbon footprint?
There are various studies that calculate the carbon footprint of an email but it is extremely difficult to measure it accurately. Many factors are to be taken into the calculation.
But there is one element that has a direct impact on the carbon footprint of an email: its weight. The heavier an email is, the more space it requires on a server and the more energy it needs to travel from the sender to the recipient.
Example: if we can put 1GB on a server, and if we store 100kb emails, we can put 10.000 emails on a server. But if they are 200kb emails, we now need 2 servers, so twice as much energy for the storage.
The average carbon footprint of an email is very difficult to estimate, because of the different servers and their energy consumption, the transit of emails, their weight, etc. It is therefore very complicated, if not impossible, to have precise figures. A 2010 study speaks of 4 grams of carbon per email. This figure can be found a lot on the internet but it is an estimation of an average and can differ greatly. And if 4 grams seems low, don't forget that you have to multiply that by the volume of emails sent to a database per year. For example: With a database of 500,000 recipients, to whom I send an average of 4 emails per month, I have 96 tons of CO2 per year. So yes, reducing the weight of an email will reduce its carbon footprint.
See also: Email, a micro-pile of digital carbon emissions?
How to reduce the weight of an email?
An email consists of two parts: the HTML code and the associated images; and in some cases a third part, the attachments. Of course, it is strongly advised not to put attachments in mass emails. It is much more effective to put a link to the file you want to show to your recipients. The design of the emailing also has a direct impact on the HTML code.
The problem must therefore be tackled from several angles.
Email eco-design and design
Design is an often misused tool in emails. The purpose of a design is to support a message and, in most cases, to make the recipients react by means of clicks in the email. Another point of design is also to carry the corporate image of a company. Whether the email is "pretty" or not is a totally subjective notion.
In this context, if we start eco-designing, we must conceive a design that limits the number of images and that also takes into account their size, their format and their compression. Less weight means less energy consumed. A design that also takes into account the limitations between the different email clients and anticipates the HTML code of the email will allow a more robust and lighter code.
Prefer eco-color web
Have you already immersed yourself in the subject of Dark Mode in emailing ? One of its advantages would be that dark backgrounds with light text would use less energy (because less brightness) than light backgrounds with dark text. In other words, the white background of your email will consume more energy than a black background, since the pixels of the screens displaying white (and therefore brightness) consume more energy than pixels displaying black. It also shows that white is the most energy consuming color, followed by blue, purple, pink, red, yellow, green, and finally black).
So why not design all our emails with dark backgrounds? This would also help to solve some of the issues specific to Dark Mode Email. This hypothesis requires many verifications and tests to be able to affirm it definitively. In particular because the influence of colors on energy depends on the screen technology (LCD, IPS, Retina, AMOLED, Super AMOLED, TFT).
Use text instead of images
Why do you absolutely want to represent the social networks on which you are present via icons? Icons that, by the way, evolve more or less regularly, and we are never sure to have the latest version. And by the way, how to reconcile the colors of these icons with your own graphic charter? So many questions you don't have to worry about when you use a simple text with a hyperlink.
In the same way, why not take advantage of the phenomenal choice of HTML special characters before considering an image? For example, does a text bubble or a bulleted list really need to be in a particular design? Why not just use the typeface &bull which not only allows your recipient to display this element as soon as the email is opened, without downloading the images, but also reduces the need to call on external resources?
Try emojis
Emojis, these small images used in an email message to express an emotion, represent a character, an action, an object... they allow to quickly bring a graphic dimension to the email. And yet, they are not strictly speaking an image (at least for the emoji characters imported in the Unicode space)!
It is true that the emoji is not displayed in the same way in different browsers and messaging solutions. But this is a very good example of acceptable degradation in emailing : in the end, as long as the message gets through, and the graphic aspect is relatively respected, that's what matters, right?
Avoid exotic or non-web-safe fonts
The graphic creation includes of course the formatting of textual elements. You should know that it is obviously possible to create very graphic and aesthetic emails only with text, formatting of this text, and a little color. It is not mandatory to use images. Less is more. But it sometimes requires the choice of particular typographies, taken from sites like dafont.com, or Google Fonts. These are so-called "non-web-safe" fonts, or exotic typographies. Why this name? Because they are probably not installed by default on your recipients' machines.
In addition to the difficulty of correctly displaying typography on all messaging solutions, it should be noted that their proper display not only requires additional HTML code, but also requires an additional call to these hosted typographies (which are therefore external resources). This requires, logically, energy. And if you were thinking of converting these texts into images, you should know that this is not the best solution either, because of email accessibility, adaptability or simply translation.
Ideally, use web-safe fonts that are already present on your recipients' machines: CSS Font Stack: Web Safe and Web Font Family with HTML and CSS code.
Working in "One Column
To avoid emails that are too "long" and because technology allows it, email designers have taken the habit of building some content in their design on several columns side by side. So on desktop, the columns are next to each other, and stacked on mobile.
However, this method requires much more HTML code:
- First because you have to nest HTML tables inside each other
<table>which, remember, are not data tables, and therefore require, for accessibility reasons, arole="presentation"and therefore additional code.- Moreover, we will need media queries to achieve cell stacking on the mobile version.
- Finally, for the stacking to take place, the cells will not be
<td>but some<th>. And the<th>request a CSS reset to overcome rendering problems specific to some email solutions.
In short, you have understood: the multiple columns method requires more development time. But also more code, and therefore more storage capacity. Favoring a single-column design would therefore simplify the coding time and reduce the final weight of the HTML file.
Prepare the images correctly
You have understood that when you can do without an image, you should not hesitate to do so. Great. But in some cases, you have no choice but to insert visuals (regular images or background images) in your email design. Let us see what are the good practices to generate them.
Prepare the images at the right size
It is highly recommended to design your visuals at the dimensions at which they are displayed and called in the HTML code (except in the case of Retina). It is not necessary to design images larger than the dimensions at which they will be displayed, because then your images are heavier for no good reason.
Delete metadata
When a picture is taken from a camera, the file of the visual includes information: date of shooting, type and model of camera, geolocation... All those data are an extra weight for the file! It's obvious, but remember to make sure that the visuals you use have no metadata attached.
Optimize weight
You put visuals in your email, so be it. That's understandable. And what software do you use to prototype your emails: Figma? Photoshop? Invision? Adobe XD? In any case, it is important to export your visuals:
- in a relevant format, it is a first step, but we will address this topic in the following chapters.
- by reducing their weight. Because images require server hosting; and the heavier your images are, the more space you require, and therefore energy.
With Photoshop, nothing could be easier, since you can reduce the "quality" of your file with a slider at the time of export. You also have the possibility, at the same time, to evaluate the weight gain and the final quality of your visual.
On Figma, there are plugins like Downsize to compress and resize your images without leaving Figma! However, if none of these solutions speak to you, you can choose online solutions like squoosh.app, tinypng.com, or tinyjpg.com, depending on whether you want to do batch or non-batch processing.
Taking advantage of Retina
Retina is a brand of screen resolution used by Apple on its devices, such as iPhones, iPads and MacBooks. A Retina display has a very high resolution, which means it can display images and text with great sharpness and precision.
However, in an email, to display high quality images on a Retina screen, it is necessary to call visuals with dimensions twice as large as the dimensions given in the HTML code. This implies heavier visuals (instead of 2 pixels by 2 pixels for a given surface, we will have 4 pixels by 4 pixels, since the resolution is twice as high. So we won't have 4 pixels in total, but 16 pixels).
Should the Retina then be imposed on all visuals? Well, no, EXCEPT if your Retina visuals are highly compressed, and this is a tip we give you: Let's take a visual of 250 pixels wide by 166 pixels high.
Without image compression and without planning for Retina, this same visual will weigh 55kb. After compressing this visual to 90% on a solution like Squoosh.app, this visual goes from 55kb to 16kb. And the quality remains the same to the naked eye.
We could think that by preparing this visual for the Retina by doubling the width and respecting the homothety, the visual would be heavier. Without a doubt... UNLESS YOU COMPRESS THE QUALITY OF THE VISUAL IN PHOTOSHOP! Because, as the visual is larger and more detailed, it is also possible to compress it much more. And, surprisingly, the weight of the Retina display can then compete with the weight of the non-Retina display, or even beat it, while keeping a better level of details!
Limit (drastically) the animated gifs
Animated gifs are very useful to simulate a video or to present an animated visual, that's a fact. However, they are usually very heavy and difficult to optimize while keeping a respectable image quality. Ask yourself the right questions: is this animation really worth being animated? Can I insert all this information in a static visual, in jpg?
If the GIF animation must be present at all costs, do not forget to optimize it (by compressing it, reducing the quality, removing some unnecessary states) as much as possible with platforms like ezgif.com.
Choose the format
Only three image formats are properly supported in an email: JPEG, GIF and PNG. Know which format to choose when exporting your visual with the table below. But above all, between these three formats, it is important to understand that the weight will not be the same for the same visual.
| Benefits | Disadvantages | |
|---|---|---|
| JPEG | JPEG retains optimum image quality with 16 million colors | Does not support transparency or animation. |
| GIF | GIF is an 8-bit limited image format, which makes it generally lighter than JPEG or PNG. In addition, it supports animation. | It is limited in terms of colors and image quality. Animated gifs are "blocked" in their first state on Outlook email software on Windows. |
| PNG | PNG is a lossless image format, which offers a higher quality than GIF while maintaining transparency | Using a PNG format for an image with many colors can make your PNG heavier than your JPEG. |
It is important to note that the choice of format will depend on the intended use of the image. For example, if you need an image with lots of detail and little concern for file size, PNG would be a better choice. If you need an animated image, GIF would be the ideal format. And if you need an image with a good compromise between image quality and file size, JPEG might be the best choice.
Take advantage of the images already hosted...
There are visuals that can be found on several campaigns: the logo, the pictograms of social media, the visuals of the reassurance banner... So why not take advantage of it? It is not necessary to export these images again for each new campaign, and have to optimize them. Simply take advantage of the work already done!
... and clean your images
If your campaign has been a while ago... Is it necessary to keep the images on the server? It is unlikely that your recipients will open this campaign again after a long time, right? This can be the opportunity to delete the images of campaigns that are too old on your server, in order to reduce the necessary storage space. Because eco-design is not only before hand, or in the moment... It's also afterwards!
Dissociate textual content and graphic formatting
To simplify the HTML integration of the email, to guarantee optimal accessibility, but also to use a minimum of visuals, we recommend, as much as possible, to design in raw HTML (with CSS formatting if necessary) as much as possible textual content.
Coding the buttons
A Call to action can take several forms, but the most common one is a button, with rounded corners or not, with a border or not. Limiting yourself to these few graphic layouts (without forgetting the formatting of the text that the button contains of course) can easily be managed entirely with HTML attributes and CSS properties.
A button like the one above can therefore be coded as follows:
<table role="presentation" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td bgcolor="#141414" style="border-radius:50px; padding:20px 40px;"><p style="margin:0; font:bold 18px/22px Arial, Helvetica, sans-serif; text-transform:uppercase;"><a href="/en/<https://www.monsite.fr>/" style="color:#FFD845; text-decoration:none;">I go for it!</a></p></td>
</tr>
</table>
Not only do you gain in user experience, since the button will be displayed right away, with no image download required, but you also greatly limit the call to external resources. We could also add a drop shadow on the button directly in CSS, or a hover effect with the pseudo CSS class :hoverprovided, of course, that you accept its elegant degradation.
Think about the background images
The background images are a real asset on the design of an email. They allow you to use text or buttons with an image in the background. We are therefore in the dissociation of the textual content and the graphic formatting.
However, if their primary implementation technique is relatively simple (use of the CSS background), it requires much more code when you want to ensure its display on most messaging solutions. It will therefore often be necessary to accumulate both the HTML attribute background, the CSS property background, and the CSS property background-image.
But it's a different story when you look at their display on... Outlook, the email desktop application for Windows.
Indeed, in order for a background image to appear on this messaging software, it is necessary to add VML (Vector Markup Language); a code in which it will be essential to add fixed dimensions. Apart from the problem of automatic block stretching, this also represents additional code. So :
<td background="<https://www.monsite.fr/images/monimagedefond.jpg>" style="background:url('<https://www.monsite.fr/images/monimagedefond.jpg>') no-repeat top center; background-image:url('<https://www.monsite.fr/images/monimagedefond.jpg>'); background-repeat:no-repeat; background-position:top center;">
</td>
Will become, for the background image to be supported on Outlook :
<td background="<https://www.monsite.fr/images/monimagedefond.jpg>" style="background:url('<https://www.monsite.fr/images/monimagedefond.jpg>') no-repeat top center; background-image:url('<https://www.monsite.fr/images/monimagedefond.jpg>'); background-repeat:no-repeat; background-position:top center; width:200px; height:200px;">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:200px;height:200px;">
<v:fill type="frame" src="<https://www.monsite.fr/images/monimagedefond.jpg>" color="#000000" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
Do you see where we are going? Background images should be used with care, as they greatly overload the weight of the final HTML code.
Moderating innovations
Another important part is to limit the "gadget" sections. A carousel in an email is fun, but it only works in a few email clients. And that requires a significant amount of code, plus a second layer of code to handle some cases where the carousel doesn't work.
The impact of a carousel compared to a "standard" section is also often negligible. This is the kind of element that pleases decision makers and marketers who are looking for a "WAOW" effect. Even for Badsender, this is something we appreciate for the technological challenge, the research and development and therefore the challenge. But in the end, it will have very little impact on the expected objectives of an email.
Design System Email
We often talk about Design System Email as, among other things, a gain in consistency and efficiency in the production of emails. The gain in efficiency already represents, in itself, a gain in production time, and therefore energy. But these are clearly not the only advantages! The Design System Email also allows, whether it is on design stage or code stage, to make "savings" on the weight of the files to create.
Let's take the example of the Figma prototyping platform: if you design atoms, molecules, organisms according to the principle of Atomic Design, you can call these organisms as instances of the main components in your future campaigns. You no longer need to recreate each organism separately, each time.
Coding in Fluid or Spongy
The Fluid or Spongy coding method consists in providing emails of 100% width, fluid therefore, with a maximum width via the CSS property max-width to limit the width of the email for the desktop format.
This technique is designed to display a mobile version of the email on email solutions that do not support media queries or that remove the media queries contained in the <style> style tag in the head <head> of the email.
It has both advantages and disadvantages.
- Advantages: It often includes design constraints, favoring the one column or a settlement system. As a result, the design is generally a bit more simplified. As this method does not change the "size" of some elements on mobile (since media queries are excluded), it can also simplify the work and time spent on the design. And since media queries are not required, it's a lot less code to write. No need to worry about breakpoints either since the email automatically adapts to the screen size.
- Disadvantages: because the CSS property
max-widthis not supported on the Outlook desktop application on Windows, it is necessary to surround fluid tables with conditional comments by so-called "phantom" tables, which have a fixed width. And to add<div>... And CSS reset... Anyway, this includes using additional code, making it more difficult to understand and maintain, but above all more cumbersome.
We are talking here only about the Fluid or Spongy method, and not Hybrid, which combines both the Fluid method + the use of media queries to further optimize the display of the mobile version of the email on messaging solutions that support them.
Need help?
Reading a guide can not make everything perfect. Maybe the best thing to do is to ask us. No ?
Email eco-design and code
Coding an email is complex. It is a question of having a correct rendering in different email clients that each have their own quirks. For this, we tend to have redundant code because one email client will understand instruction A and the other will understand instruction B. If we want to reduce the code, and therefore the weight of the email, we must find solutions to optimize the amount of code that will be written.
A few characters on an email will result in a fairly small change in weight, only a few kilobytes. But with the scale effects, even a few kilobytes - multiplied by hundreds of thousands, or even millions of emails, over several sendings per month - tends to be a serious weight.
For example, 10kb on four emails per month sent to 500.000 recipients, represents 240GB per year...
Calling non-websafe fonts
We will not discuss here the support or the simplicity in implementing this or that method. That is not the point. We focus on the resources called, or the weight of the code.
Several methods are possible to call an exotic typeface. We will detail here the two most common ones:
- The method
<link>with the link tag with the path of the CSS sheet where the hosted font is described. In the case of a Google Font, for example :
<link rel="preconnect" href="">
<link rel="preconnect" href="" crossorigin>
<link href="" rel="stylesheet">
- The method
@font-face. Copy and paste the content of this CSS sheet into the style tag<style>of your email. This gives :
/* cyrillic-ext */ @font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url() format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
} /* cyrillic */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url() format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
} /* vietnamese */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url() format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
} /* latin-ext */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url() format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
} /* latin */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url() format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
You will logically see that the second method is more code-intensive. This is probably true. But is it more energy-intensive on the called resources? Indeed, we are not calling an external stylesheet here, since its content is directly filled in the email code.
We do not have the definite numbers, so it is up to you to draw your conclusions.
Exploiting the HTML5 doctype
This doctype declaration, made at the very beginning of your HTML code in the form a specific tag !DOCTYPE HTML <!DOCTYPE HTML>has a significant advantage: to be able to shorten the writing of self-closing tags even more. Thus, the :
<meta />
<link href="" />
<img />
<br />
<hr />
Can, with the HTML 5 doctype, be written in the following way:
<meta>
<link href="">
<img>
<br>
<hr>
Define the click zones
You may want to make the entire email clickable. This maximizes the chances of clicks on campaigns effectively, but it puts a considerable burden on the code weight.
Know how to correctly delimit the click zones of your campaign. Generally, buttons or texts with underlining are to be preferred.
Perfecting media queries
The media queries, necessary for the proper display of the mobile version of the email, can be refined in several ways to reduce their weight and maintainability.
Think about the naming of class CSS.
To make it easier for any new integrator to find his way around your CSS classes (and thus gain in efficiency, productivity and work time, and therefore energy), do not hesitate to use explicit class naming. Let us clarify with a concrete case: we regularly encounter obscure classes in email codes. For example:
<p class="xd_45_haut">My paragraph</p>For a higher statement of the sort:
@media screen and (max-width:600px) {
.xd_45_haut {
font-size:18px !important;
}
}
How can you expect any new integrator to take over the HTML integration to know that the xd_45_haut can be used to change the font size of the element to 18px on mobile? And, in fact, why not simply name this class fontsize18px ? It's a bit more explicit, isn't it?
Declare the classes separately.
Here again, let's use a concrete case.
<p class="premier_paragraphe">My paragraph</p>
<p class="second_paragraphe">My paragraph</p>
<p class="troisieme_paragraphe">My paragraph</p>And the following attached media query:
@media screen and (max-width:600px) {
.premier_paragraph {
font-size:18px !important;
color:#000000 !important;
text-align:center !important;
}
.second_paragraph {
font-size:18px !important;
color:#000000 !important;
text-align:left !important;
}
.troisieme_paragraph {
font-size:18px !important;
color:#000000 !important;
text-align:left !important;
}
}You could greatly simplify the understanding and weight of the code in the following way:
<p class="fontsize18px colornoir textaligncenter">My paragraph</p>
<p class="fontsize18px colornoir textalignleft">My paragraph</p>
<p class="fontsize18px colornoir textalignleft">My paragraph</p>And the following media queries:
@media screen and (max-width:600px) {
.fontsize18px {
font-size:18px !important
}
.colornoir {
color:#000000 !important;
}
.textaligncenter {
text-align:center !important;
}
.textalignleft {
text-align:left !important;
}
}Minimize the code
Minification allows you to reduce the weight of the HTML file by removing the indentation (the arrangement) of the HTML code and so allowing you to lose a few kilobytes (even a lot of weight!). In addition to indentation, minification in its extreme version also makes it possible to remove all line breaks in the HTML code. This practice can be used, but always make sure that the rendering of the HTML code is not "broken" or that the ESP supports this minification!
In the framework Maizzle, when producing the final code, we can ask the code to be minified (indentation and line breaks removed). At Badsender, depending on the case, we do not minify our HTML code so that the client can update the code, make changes and find his way around easily.
Delete comments
At Badsender, we don't necessarily think about deleting comments for the good reason that they are there... for a good reason. But in general, we don't have any comments, especially in our CSS code: to avoid bugs but also to reduce the weight of the code a bit. So, don't forget to clean up your HTML code of any unnecessary comments!
Shorten...
Hexadecimal codes
It is customary to write a hexadecimal code for a color in six characters, for example #FF0000 for red. However, this value can be shortened to three characters for codes composed of identical pairs. Thus, #FF0000 will become #F00.
CSS values and properties
Here we talk about the values of the CSS properties, and the CSS properties themselves. Let's first imagine a cell with the following CSS properties:
<td style="padding-top:10px; padding-right:20px; padding-bottom:10px; padding-left:20px;">Well, you can shorten all of these individual properties statements : padding-top, padding-right, padding-bottom and padding-left in a single CSS property padding, this way:
<td style="padding:10px 20px;">This is of course applicable to the CSS property margin. (At Badsender, as we use the Maizzle framework, it is more difficult to gather all these variations in a mega-property). Let's now consider another example, the formatting of a text. Let's imagine a paragraph with the following graphic formatting:
<p style="font-family:Arial, Helvetica, sans-serif; font-size:16px; line-height:22px; font-weight:bold; font-style:italic;">You should know that it is possible to shorten the code this way :
<p style="font: Arial, Helvetica, sans-serif 16px/22px bold italic;">And the support is really good! Be careful though to respect the order of the values to make it work. Can I email... font shorthand
Take advantage of automatic tag formatting
Some HTML tags (obsolete for some of them, of course) inherit an automatic graphic formatting. These are the <b>, <strong>, , , . Here is the reconciliation of their graphic layout :
| Tags | Graphic layout |
|---|---|
| <b> | fat |
| <strong> | fat |
| italics | |
| italics | |
| underlined |
So why not use these tags whose formatting is unanimously approved? See this code:
<span style="font-weight:bold; font-style:italic; display:inline;">My text</span>From this code, we can then simply obtain :
<b><i>My text</i></b>Practical, isn't it? On the other hand, it is essential to also think about "accessibility", and therefore, use the appropriate tags. If it is only about graphic formatting (bold, italic), you can use the , , <b>. But if the text is important, use the <strong> or .
<strong><i>My text</i></strong>In the same way, let's be "practical": an HTML element <a> to insert a link around a text, will (no doubt) make the text underlined automatically. So is it necessary to add an attribute style with the value text-decoration:underline to this link? No.
Abandon the target="_blank"
Today we are used to declaring all links as follows:
<a href="https://www.monsite.fr" target="_blank">Either with an attribute target="_blank" to open a new tab on a browser when consulting emails in a webmail. However, in terms of user experience (UX), it is strongly recommended not to change the native behaviors of elements. In fact, we can take the liberty of not declaring this attribute targetand thus gain weight.
Also, do not add a title to your links, counterproductive in terms of accessibility.
Deletion of units
Still looking for a few characters to delete? Then why not look at the units set to zero values? If the values are equal to 0, why keep the unit? So:
<td style="padding:0px 0px 0px 10px;">will become :
<td style="padding:0 0 0 10px;">Getting out of the <table>
Mark Robbins as Rémi Parmentier have already raised the idea and taken this initiative, through their respective movements "Get off the table" and "Thinking outside the <table>". A small overview of the test results we are currently shooting.
- Most HTML elements (
<hn>,<p>,,,<strong>,<b>,,...) have a automatic graphic formatting (or by default) which differs according to the mail clients, media and browsers. Bold, italic, background color, indentation, bullets, text size... We can see that the tags of type<hn>are for example automatically in bold on almost all mail clients. This implies a series of "resets" in CSS. Can we then apply them directly in the<style>present in the<head>? - The
<style>present in the<head>is not interpreted by Android 5.1, Android 6.0, or on Gmail App IMAP (Android 4.4), nor on T-Online (regardless of the browser). This major constraint forces us to write our styles online (inline), directly on our HTML elements. - Inline CSS reset through CSS properties
line-height,font-size,margin,padding,font-family,font-weighttags work correctly on<hn>or<p>. - We see that we can use the element
<div>within an HTML email integration, but it does not support the CSSbackground-coloron Outlook 2007, 2010, 2013, 2016, and 2019. In addition, the CSS propertywidthis not interpreted at all on Outlook 2007, Outlook 2010, Outlook 2013, Outlook 2019 on Windows 10, and Windows 10 Mail (Windows 10), nor the CSS propertymax-width. Therefore, we are forced to use conditional comments specific to Outlook (versions greater than or equal to Outlook 2007) to simulate fixed widths on tables.
Without totally leaving the <table>However, it is possible to limit their use! Here are some tips...
Using semantic tags
Since we are concerned with accessibility in email marketing, it is customary to use semantic tags: multi-level titles (<h1>, <h2>, <h3>, <h4>, <h5>, <h6>), paragraphs (<p>), bulleted lists ()...
But did you know that you can also take advantage of these tags to lighten the weight of the code by accumulating these tags one after the other, without necessarily declaring a new row and cell each time? Thus:
<table>
<tr>
<td>Level 01 title</td>
</tr>
<tr>
<td>Level 02 title</td>
</tr>
<tr>
<td style="padding-top:20px;">Paragraph 01</td>
</tr>
<tr>
<td>Paragraph 02</td>
</tr>
</table>Will become :
<table>
<tr>
<td><h1>Level 01 title</h1>
<h2>Level 02 title</h2>
<p style="margin-top:20px;">Paragraph 01</p>
<p>Paragraph 02</p></td>
</tr>
</table>Use the padding and margin
An old myth in email coding is that margins between elements can only be designed with empty cells and rows. However, there are two handy CSS properties for handling both external and internal margins: margin and padding.
These two CSS properties can be used with the knowledge of their support and their small specificities: for example, the padding will be mainly well supported on <td>. However, beware of their use in the case of sister cells. The margin can be correctly used on paragraphs or titles.
Thus, the following code :
<table bgcolor="#F6F6F6">
<tr>
<td style="line-height:1px; font-size:1px; height:40px; width:40px;" height="40" width="40"> </td>
<td style="line-height:1px; font-size:1px; height:40px;" height="40"> </td>
<td style="line-height:1px; font-size:1px; height:40px; width:40px;" height="40" width="40"> </td>
</tr>
<tr>
<td style="line-height:1px; font-size:1px; width:40px;" width="40"> </td>
<td><h2>Title</h2></td>
<td style="line-height:1px; font-size:1px; width:40px;" width="40"> </td>
</tr>
<tr>
<td style="line-height:1px; font-size:1px; height:10px;" height="10" colspan="3"> </td>
</tr>
<tr>
<td style="line-height:1px; font-size:1px; width:40px;" width="40"> </td>
<td><p>My paragraph</p></td>
<td style="line-height:1px; font-size:1px; width:40px;" width="40"> </td>
</tr>
<tr>
<td style="line-height:1px; font-size:1px; height:40px; width:40px;" height="40" width="40" colspan="3"> </td>
</tr>
</table>Can be transformed in the following way:
<table bgcolor="#F6F6F6">
<tr>
<td style="padding:40px;"><h2>Title</h2>
<p style="margin-top:10px;">My paragraph</p></td>
</tr>
</table>
Quite a difference, isn't it?
Handling the "accessibility VS HTML file size" paradox
Coding methods to provide accessible email to people with disabilities include:
- The use of semantic tags (
<p>,<h1>,<h2>,<h3>...). - The implementation of attribute
role="presentation"on all tables that are not data tables. - The addition of an attribute
langon the tag<html>to specify the language of our content. - The addition of a
</code>.</li> <li>The addition of a <code><div></code> just after the <code><body></code>...</li> </ul> <p>Yes, but let's take the example of semantic tags: if we want to use them, we have to think about adding CSS reset so that we don't inherit the default styles of some browsers or email solutions.</p> <p>In short, many additions to be made. But then, this is counterproductive with our will to lighten the HTML code, isn't it? Or rather, our will to reduce the emailing carbon footprint?</p> <p>Yes... and no. Because if you don't offer an accessible version of your email, the user with a disability will use other solutions (which themselves generate digital usage) to try to browse and understand the content of your email. So, you might as well be ahead of the curve.</p> <p><strong>And then, it is quite possible to find a balance between these two objectives, isn't it?</strong></p> <h3 class="wp-block-heading">Keep only the minimum</h3> <p>A well-designed email is an email that works, renders and complies with all email solutions... And that contains only the bare minimum in terms of HTML code, without superfluous. And this can be a paradox. Because, in order to have a rendering that conforms to all email solutions, it is sometimes necessary to double HTML attributes with CSS properties for example, whose function will be the same (but not the support).</p> <p>Moreover, spending time to make sure that the graphic rendering of the email is compliant sometimes requires code adjustments, multiple tests... In short, time spent! And time spent on a computer is also, in itself, an expenditure of energy...</p> <h4 class="wp-block-heading">Accepting the paradox with Render / Pixel perfect</h4> <p>One of the complexities of email marketing is the difficulty to have an identical rendering in the different email clients. And yes, everyone obviously thinks of Outlook... Here it is important to know your target. If you target individuals, the use of Outlook desktop applications will be marginal. So it is not relevant to spend time and code weight to have a "perfect" rendering in Outlook. Often, a whole series of degradations will be acceptable and will not hinder the message at all (background images replaced by color, rounded corners that become straight, etc.). And if your target audience uses Outlook for the most part, then it will be important at the design stage to conceive a creative that will meet your objectives and that will be realistic in view of the limitations of Outlook software.</p> <p>Outlook is an example, but it is not limited to this case. <strong>There are many different contexts</strong> desktop and mobile versions, optimization for multiple screen sizes, retina images, darkmode, and of course, all the different interpretations between email clients. Again, the goal of design is to meet the objectives of an email.</p> <h4 class="wp-block-heading">The elegant degradation</h4> <blockquote class="wp-block-quote is-style-default"> <p>The premise of elegant degradation is to first build for the leading edge and the best, and then manage the worst performing systems.</p> <cite><a href="http://www.pompage.net/traduction/degradation-elegante-et-amelioration-progressive" data-wpel-link="external" target="_blank" rel="external noopener noreferrer">http://www.pompage.net/traduction/degradation-elegante-et-amelioration-progressive</a></cite></blockquote> <p>This concept applied to email design and email code resides in the acceptance of a degradation, for example of a CSS effect on email solutions that are less efficient in terms of support.</p> <p>Let's take the example of rounded corners: To design rounded corners in CSS, you must use the <code>border-radius</code>. This same property is not supported by all messaging solutions.</p> <div class="wp-block-image"> <figure class="aligncenter size-full"><a href="https://www.badsender.com/wp-content/uploads/2023/01/Untitled-2.png" data-wpel-link="external" target="_blank" rel="external noopener noreferrer"><img decoding="async" loading="lazy" width="640" height="400" src="https://www.badsender.com/wp-content/uploads/2023/01/Untitled-2.png" alt="support border-radius email" class="wp-image-556427" srcset="https://www.badsender.com/wp-content/uploads/2023/01/Untitled-2.png 640w, https://www.badsender.com/wp-content/uploads/2023/01/Untitled-2-300x188.png 300w, https://www.badsender.com/wp-content/uploads/2023/01/Untitled-2-18x12.png 18w" sizes="(max-width: 640px) 100vw, 640px" /></a></figure></div> <p>To guarantee the display of rounded corners on all messaging solutions, it would therefore be necessary :</p> <ul> <li>use rounded corners in images,</li> <li>or use VML.</li> </ul> <p>And therefore add extra code (not to mention the problems that this can also produce on the Dark Mode or on the elasticity of the elements, since the VML requires to use fixed widths and heights).</p> <p>Rendering an element with just the CSS property <code>border-radius</code>If the message is to be displayed on a messaging solution that does not support this same property, it will be square corners, without workaround. But does this affect the understanding of the message?</p> <p>Of course not. <strong>We can therefore "accept" that graphic effects or formatting are not supported, as long as they are not essential to the graphic rendering of the email or to the understanding of the message.</strong></p> <h2 class="wp-block-heading">Choose your tools</h2> <p>Another part on which Badsender has the hand on the design of an email is the choice of the tools. We do indeed choose responsible digital tools. We have for example left Microsoft Teams and OneDrive to go towards <a href="https://www.infomaniak.com/fr" data-wpel-link="external" target="_blank" rel="external noopener noreferrer">Infomaniak</a>a Swiss provider of similar services with <strong>carbon neutral servers</strong> and data protection in accordance with Swiss laws (and RGPD compliant), we opt for OpenSource tools whenever possible, etc.</p> <h3 class="wp-block-heading">Email Builder & Framework</h3> <p>Beware of heavy email builder codes that include many cases (without making a generalization). The best is to code emails by hand.</p> <p>Of course, when many emails are produced, it is interesting to use an Email Builder. But is it necessary to use a Builder when you only do 4 campaigns a year? Be careful when choosing your Email Builder, try to choose one that is responsible for the HTML code produced.</p> <p>Le Patron, the email builder developed by Badsender, is a special case, since it is an email builder that uses a "hand-made" and customized code.</p> <blockquote class="wp-block-quote is-style-default"> <p>At Badsender, we also use, for the production of HTML code, a framework named Maizzle which does not necessarily accept all the recommendations quoted above, but which allows us to gain greatly in production time. As a result, we can "find ourselves" between the time saving (energy saving) and the heavier code produced via this framework.</p> </blockquote> <h2 class="wp-block-heading">Reduce testing</h2> <p>Email preview tests are essential for debugging and validating the rendering of an email campaign before sending, that's a fact.</p> <p>But do we have to test a lot? Besides the fact that this can quickly represent a considerable cost, it is also important to note that testing requires not only time (and therefore energy spent by the integrator and the machine) but also hosted screenshots (more than 80 for example on EmailOnAcid).</p> <p>Therefore, opt for tests when you are sure that your email is completely finalized, or that you have made all the necessary returns. <strong>And don't forget to archive or delete your test results</strong> on these platforms when you no longer need them!</p> <h2 class="wp-block-heading">The Mantra to eco-design your emails</h2> <p>Before starting any investigation into an innovation, a design idea, a particular parameter, always ask yourself the question: is it worth it? Is it necessary to spend so much time in R&D to achieve such a rendering, such a configuration?</p> <p>It is not clear? So let's take the example of Dark Mode: Rendering emails on media or email solutions configured in dark mode is really not easy to perfect. But is this really the goal? Get to know the viewing habits of your recipients (which email solution do they use? What is their primary viewing format? Desktop? Mobile? Tablet?).</p> <div class="wp-block-image"> <figure class="aligncenter size-large"><a href="https://www.badsender.com/wp-content/uploads/2023/01/carlos-muza-hpjSkU2UYSU-unsplash-1-1.jpg" data-wpel-link="external" target="_blank" rel="external noopener noreferrer"><img decoding="async" loading="lazy" width="1024" height="466" src="https://www.badsender.com/wp-content/uploads/2023/01/carlos-muza-hpjSkU2UYSU-unsplash-1-1-1024x466.jpg" alt="eco-design email code" class="wp-image-556434" srcset="https://www.badsender.com/wp-content/uploads/2023/01/carlos-muza-hpjSkU2UYSU-unsplash-1-1-1024x466.jpg 1024w, https://www.badsender.com/wp-content/uploads/2023/01/carlos-muza-hpjSkU2UYSU-unsplash-1-1-300x137.jpg 300w, https://www.badsender.com/wp-content/uploads/2023/01/carlos-muza-hpjSkU2UYSU-unsplash-1-1-768x349.jpg 768w, https://www.badsender.com/wp-content/uploads/2023/01/carlos-muza-hpjSkU2UYSU-unsplash-1-1-1536x699.jpg 1536w, https://www.badsender.com/wp-content/uploads/2023/01/carlos-muza-hpjSkU2UYSU-unsplash-1-1-2048x932.jpg 2048w, https://www.badsender.com/wp-content/uploads/2023/01/carlos-muza-hpjSkU2UYSU-unsplash-1-1-18x8.jpg 18w, https://www.badsender.com/wp-content/uploads/2023/01/carlos-muza-hpjSkU2UYSU-unsplash-1-1.jpg 1360w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></figure></div> <p>The results you will get from this will allow you to highlight the choices to make in your design and coding methods. If your recipients are mainly a BtoC target, there is little chance that the opening will be mainly on the Outlook for Windows software. So can't we abandon all the code palliatives specific to Outlook to lighten the load?</p> <h2 class="wp-block-heading">To conclude</h2> <p>Marketing is a practice that often goes against the ecological needs of our time. Badsender is aware of this, and we want to do everything we can to be consistent with our values. This includes reducing, as much as possible, the carbon footprint of an email. From now on, this is something we will systematically put forward and propose to our customers.</p> <p>And we're only talking about the levers that can be used to create the email, but <strong>There are many other ways to limit the impact of email marketing in general:</strong> target relevant recipients for emails, in order to send less; use the most carbon-friendly tools and providers possible (<a href="https://www.badsender.com/en/2022/04/20/carbon-balance-badsender-2021/" data-wpel-link="external" target="_blank" rel="external noopener noreferrer">You can see the result of Badsender's 2021 carbon footprint here</a>); getting involved in projects such as <a href="https://www.zerocarbon.email/fr/accueil/" data-wpel-link="external" target="_blank" rel="external noopener noreferrer">Zero Carbon Email</a> (supported by Badsender); making it easy to unsubscribe so you don't send emails to people who aren't interested; etc. All of which will require further articles to explore.</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-539519"><a href="https://www.badsender.com/en/carbon-footprint/" class="elementor-item" data-wpel-link="internal">Our carbon footprint</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> <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> <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-539519"><a href="https://www.badsender.com/en/carbon-footprint/" class="elementor-item" tabindex="-1" data-wpel-link="internal">Our carbon footprint</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> <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 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><style class="optimize_css_2" type="text/css" media="all">.elementor-549982 .elementor-element.elementor-element-ed078a0>.elementor-container>.elementor-column>.elementor-widget-wrap{align-content:center;align-items:center}.elementor-549982 .elementor-element.elementor-element-ed078a0:not(.elementor-motion-effects-element-type-background),.elementor-549982 .elementor-element.elementor-element-ed078a0>.elementor-motion-effects-container>.elementor-motion-effects-layer{background-color:var(--e-global-color-primary)}.elementor-549982 .elementor-element.elementor-element-ed078a0{transition:background 0.3s,border 0.3s,border-radius 0.3s,box-shadow 0.3s;margin-top:20px;margin-bottom:20px;padding:40px 40px 40px 40px}.elementor-549982 .elementor-element.elementor-element-ed078a0>.elementor-background-overlay{transition:background 0.3s,border-radius 0.3s,opacity 0.3s}.elementor-549982 .elementor-element.elementor-element-a06bc63>.elementor-element-populated{border-style:solid;border-width:0 1px 0 0;border-color:var(--e-global-color-ab53a73);transition:background 0.3s,border 0.3s,border-radius 0.3s,box-shadow 0.3s;margin:0 40px 0 0;--e-column-margin-right:40px;--e-column-margin-left:0px;padding:0 40px 0 0}.elementor-549982 .elementor-element.elementor-element-a06bc63>.elementor-element-populated>.elementor-background-overlay{transition:background 0.3s,border-radius 0.3s,opacity 0.3s}.elementor-549982 .elementor-element.elementor-element-66acdc1 .elementor-heading-title{color:var(--e-global-color-ab53a73)}.elementor-549982 .elementor-element.elementor-element-b91c18f{color:var(--e-global-color-ab53a73);font-family:var(--e-global-typography-text-font-family),Sans-serif;font-size:var(--e-global-typography-text-font-size);font-weight:var(--e-global-typography-text-font-weight);line-height:var(--e-global-typography-text-line-height)}.elementor-549982 .elementor-element.elementor-element-b91c18f>.elementor-widget-container{margin:10px 0 0 0}.elementor-549982 .elementor-element.elementor-element-b22a5ed>.elementor-element-populated{padding:0 0 0 0}@media(min-width:768px){.elementor-549982 .elementor-element.elementor-element-a06bc63{width:55%}.elementor-549982 .elementor-element.elementor-element-b22a5ed{width:45%}}@media(max-width:1024px){.elementor-549982 .elementor-element.elementor-element-a06bc63>.elementor-element-populated{border-width:0 0 0 0;margin:0 0 0 0;--e-column-margin-right:0px;--e-column-margin-left:0px;padding:0 0 0 0}.elementor-549982 .elementor-element.elementor-element-b91c18f{font-size:var(--e-global-typography-text-font-size);line-height:var(--e-global-typography-text-line-height)}}@media(max-width:767px){.elementor-549982 .elementor-element.elementor-element-b91c18f{font-size:var(--e-global-typography-text-font-size);line-height:var(--e-global-typography-text-line-height)}.elementor-549982 .elementor-element.elementor-element-b22a5ed>.elementor-element-populated{margin:20px 0 0 0;--e-column-margin-right:0px;--e-column-margin-left:0px}}.elementor-558412 .elementor-element.elementor-element-e11648b>.elementor-element-populated{padding:0 0 0 0}.elementor-558412 .elementor-element.elementor-element-338ea20 .elementor-field-group{padding-right:calc(10px/2);padding-left:calc(10px/2);margin-bottom:10px}.elementor-558412 .elementor-element.elementor-element-338ea20 .elementor-form-fields-wrapper{margin-left:calc(-10px/2);margin-right:calc(-10px/2);margin-bottom:-10px}.elementor-558412 .elementor-element.elementor-element-338ea20 .elementor-field-group.recaptcha_v3-bottomleft,.elementor-558412 .elementor-element.elementor-element-338ea20 .elementor-field-group.recaptcha_v3-bottomright{margin-bottom:0}body.rtl .elementor-558412 .elementor-element.elementor-element-338ea20 .elementor-labels-inline .elementor-field-group>label{padding-left:0}body:not(.rtl) .elementor-558412 .elementor-element.elementor-element-338ea20 .elementor-labels-inline .elementor-field-group>label{padding-right:0}body .elementor-558412 .elementor-element.elementor-element-338ea20 .elementor-labels-above .elementor-field-group>label{padding-bottom:0}.elementor-558412 .elementor-element.elementor-element-338ea20 .elementor-field-group>label,.elementor-558412 .elementor-element.elementor-element-338ea20 .elementor-field-subgroup label{color:var(--e-global-color-ab53a73)}.elementor-558412 .elementor-element.elementor-element-338ea20 .elementor-field-type-html{padding-bottom:0}.elementor-558412 .elementor-element.elementor-element-338ea20 .elementor-field-group .elementor-field{color:var(--e-global-color-6543791)}.elementor-558412 .elementor-element.elementor-element-338ea20 .elementor-field-group .elementor-field,.elementor-558412 .elementor-element.elementor-element-338ea20 .elementor-field-subgroup label{font-family:var(--e-global-typography-708c90c-font-family),Sans-serif;font-size:var(--e-global-typography-708c90c-font-size);font-weight:var(--e-global-typography-708c90c-font-weight);line-height:var(--e-global-typography-708c90c-line-height);letter-spacing:var(--e-global-typography-708c90c-letter-spacing);word-spacing:var(--e-global-typography-708c90c-word-spacing)}.elementor-558412 .elementor-element.elementor-element-338ea20 .elementor-field-group:not(.elementor-field-type-upload) .elementor-field:not(.elementor-select-wrapper){background-color:var(--e-global-color-ab53a73);border-width:0 0 0 0;border-radius:5px 5px 5px 5px}.elementor-558412 .elementor-element.elementor-element-338ea20 .elementor-field-group .elementor-select-wrapper select{background-color:var(--e-global-color-ab53a73);border-width:0 0 0 0;border-radius:5px 5px 5px 5px}.elementor-558412 .elementor-element.elementor-element-338ea20 .e-form__buttons__wrapper__button-next{background-color:var(--e-global-color-ab53a73);color:var(--e-global-color-primary)}.elementor-558412 .elementor-element.elementor-element-338ea20 .elementor-button[type="submit"]{background-color:var(--e-global-color-ab53a73);color:var(--e-global-color-primary)}.elementor-558412 .elementor-element.elementor-element-338ea20 .elementor-button[type="submit"] svg *{fill:var(--e-global-color-primary)}.elementor-558412 .elementor-element.elementor-element-338ea20 .e-form__buttons__wrapper__button-previous{color:#fff}.elementor-558412 .elementor-element.elementor-element-338ea20 .elementor-button{padding:10px 10px 10px 10px}.elementor-558412 .elementor-element.elementor-element-338ea20 .elementor-message{font-family:var(--e-global-typography-708c90c-font-family),Sans-serif;font-size:var(--e-global-typography-708c90c-font-size);font-weight:var(--e-global-typography-708c90c-font-weight);line-height:var(--e-global-typography-708c90c-line-height);letter-spacing:var(--e-global-typography-708c90c-letter-spacing);word-spacing:var(--e-global-typography-708c90c-word-spacing)}.elementor-558412 .elementor-element.elementor-element-338ea20 .elementor-message.elementor-message-success{color:var(--e-global-color-ab53a73)}.elementor-558412 .elementor-element.elementor-element-338ea20 .elementor-message.elementor-message-danger{color:var(--e-global-color-ab53a73)}.elementor-558412 .elementor-element.elementor-element-338ea20 .elementor-message.elementor-help-inline{color:var(--e-global-color-ab53a73)}.elementor-558412 .elementor-element.elementor-element-338ea20{--e-form-steps-indicators-spacing:20px;--e-form-steps-indicator-padding:30px;--e-form-steps-indicator-inactive-secondary-color:#ffffff;--e-form-steps-indicator-active-secondary-color:#ffffff;--e-form-steps-indicator-completed-secondary-color:#ffffff;--e-form-steps-divider-width:1px;--e-form-steps-divider-gap:10px}@media(max-width:1024px){.elementor-558412 .elementor-element.elementor-element-338ea20 .elementor-field-group .elementor-field,.elementor-558412 .elementor-element.elementor-element-338ea20 .elementor-field-subgroup label{font-size:var(--e-global-typography-708c90c-font-size);line-height:var(--e-global-typography-708c90c-line-height);letter-spacing:var(--e-global-typography-708c90c-letter-spacing);word-spacing:var(--e-global-typography-708c90c-word-spacing)}.elementor-558412 .elementor-element.elementor-element-338ea20 .elementor-message{font-size:var(--e-global-typography-708c90c-font-size);line-height:var(--e-global-typography-708c90c-line-height);letter-spacing:var(--e-global-typography-708c90c-letter-spacing);word-spacing:var(--e-global-typography-708c90c-word-spacing)}}@media(max-width:767px){.elementor-558412 .elementor-element.elementor-element-338ea20 .elementor-field-group .elementor-field,.elementor-558412 .elementor-element.elementor-element-338ea20 .elementor-field-subgroup label{font-size:var(--e-global-typography-708c90c-font-size);line-height:var(--e-global-typography-708c90c-line-height);letter-spacing:var(--e-global-typography-708c90c-letter-spacing);word-spacing:var(--e-global-typography-708c90c-word-spacing)}.elementor-558412 .elementor-element.elementor-element-338ea20 .elementor-message{font-size:var(--e-global-typography-708c90c-font-size);line-height:var(--e-global-typography-708c90c-line-height);letter-spacing:var(--e-global-typography-708c90c-letter-spacing);word-spacing:var(--e-global-typography-708c90c-word-spacing)}}.elementor-field-option{line-height:100%!important;font-size:14px!important}.elementor-field-option label{line-height:100%!important;font-size:14px!important}</style> <script type='text/javascript' id='wpo_min-footer-0-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":"11403a6862","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 defer type='text/javascript' src='https://www.badsender.com/wp-content/cache/wpo-minify/1680120618/assets/wpo-minify-footer-93cc09d3.min.js' id='wpo_min-footer-0-js'></script> <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js' id='mo-google-webfont-js'></script> <script type='text/javascript' id='wpo_min-footer-2-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\/eco-design-email-code\/?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"}; var complianz = {"prefix":"cmplz_","user_banner_id":"1","set_cookies":[],"block_ajax_content":"","banner_version":"32","version":"6.4.3","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","css_file":"https:\/\/www.badsender.com\/wp-content\/uploads\/complianz\/css\/banner-{banner_id}-{type}.css?v=32","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/cache/wpo-minify/1680120618/assets/wpo-minify-footer-57b012d0.min.js' id='wpo_min-footer-2-js'></script> <script type='text/javascript' src='https://www.google.com/recaptcha/api.js?render=explicit&ver=3.12.0' id='elementor-recaptcha_v3-api-js'></script> <script defer type='text/javascript' src='https://www.badsender.com/wp-content/cache/wpo-minify/1680120618/assets/wpo-minify-footer-2afd4a95.min.js' id='wpo_min-footer-4-js'></script> <script defer type='text/javascript' src='https://www.badsender.com/wp-content/cache/wpo-minify/1680120618/assets/wpo-minify-footer-07471975.min.js' id='wpo_min-footer-5-js'></script> <script defer type='text/javascript' src='https://www.badsender.com/wp-content/cache/wpo-minify/1680120618/assets/wpo-minify-footer-39c71641.min.js' id='wpo_min-footer-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.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> <script>!function(e){"use strict";var t=function(t,n,o,r){function i(e){return l.body?e():void setTimeout(function(){i(e)})}function d(){s.addEventListener&&s.removeEventListener("load",d),s.media=o||"all"}var a,l=e.document,s=l.createElement("link");if(n)a=n;else{var f=(l.body||l.getElementsByTagName("head")[0]).childNodes;a=f[f.length-1]}var u=l.styleSheets;if(r)for(var c in r)r.hasOwnProperty(c)&&s.setAttribute(c,r[c]);s.rel="stylesheet",s.href=t,s.media="only x",i(function(){a.parentNode.insertBefore(s,n?a:a.nextSibling)});var v=function(e){for(var t=s.href,n=u.length;n--;)if(u[n].href===t)return e();setTimeout(function(){v(e)})};return s.addEventListener&&s.addEventListener("load",d),s.onloadcssdefined=v,v(d),s};"undefined"!=typeof exports?exports.loadCSS=t:e.loadCSS=t}("undefined"!=typeof global?global:this);</script> </body> </html>