Want to improve your digital marketing? Email marketing is the channel most likely to increase your conversions! But to do so, you need to know how to create your own emails and newsletters (editorial, transactional...) in html.
HTML email coding basics
HTML email integration is the method by which a developer will transform a graphic design (Photoshop, Figma, Sketch, etc... for the source file, with a JPEG file for confirmation) in HTML format.
Mockup for transforming a graphic model into HTML/CSS integration
To the question: "Is it more complex to code an email or a web page?" we will answer this: "It depends on the point of view." It also depends on the developer. The email integration is not so complex in the sense that it consists of "dumb and nasty". It is limited to the design of a single HTML file, designed via nested tables, with "inline" styles, and a folder of attached images, when the development of a web page will involve multiple files, multiple language types, multiple HTML tags and CSS properties, etc.
Mockup of an email structure (left) and a website (right)
The techniques are radically different. And this is where the nested array construction makes things slightly more complex for the average developer used to using semantic elements: <div>, <p>, Designing as tabular HTML (nested tables) allows to guarantee, in principle, an identical result on all the mail clients.
Moreover, where the design of a web page will be validated on a few browsers, an email will be tested on many more email clients, with their own interpretation, their multiple versions, on webmails also subject to the vagaries of browsers ... When a web page is "tested" on 4 or 5 browsers (Chrome, Firefox, Internet Explorer, Opera, Safari) and their different resolutions, an email is viewed on Thunderbird, Outlook (and its multiple versions) Gmail, Yahoo Mail !, Free, Orange.fr, Office 365, Google App, Apple Mail, Lotus Notes, AOL, Free.fr, Outlook.com, but also on the "variations" of versions, browsers, resolutions ...
It is therefore different from the HTML integration of web pages because it must take into account the difficulties of interpreting the code by email interfaces. Because it is important to know thatthere are no internationally standardized technical conventions for HTML email integration (when there is the W3C, World Wide Web Consortium, for the web pages) . But what exactly is HTML?
HTML
HTML (for HyperText Markup Language) is a markup language that allows you to frame elements in a page (images, titles, paragraphs) by tags to allow them to be formatted in a second time (via the CSS language) . It is therefore not strictly speaking a programming language. Viewing an HTML file can be done in a browser. HTML documents have a tree structure, with a root element containing all other elements.
Example diagram of an HTML document structure
Tags
HTML tags allow you to insert or create, within an HTML document, elements: texts, visuals, data... The list is long. A tag to create an HTML element starts with the acronym < and ends with the symbol >. As with the creation of an element, it will also be necessary to close the creation of this element. To do this, the closing tag must begin with the </ and end with the acronym >.
<p>Content</p>An HTML element therefore consists mostly of a start tag, and an end tag with the content inserted between them. Some HTML tags are self-closing. In this case, the syntax is as follows:
<img src="nomdelimage.jpg" />or
<img src="nomdelimage.jpg">with the HTML5 doctype.
HTML tags are not case sensitive. However, it is recommended to write them in lower case. HTML elements can be nested (elements contain other elements) . Any HTML document consists of a nesting of HTML elements.
<!DOCTYPE html>
<html>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" role="presentation">
<tr>
<td>
<p>Content</p>
</td>
</tr>
</table>
</body>
</html>Note that some tags have specific behaviors: either they will behave as block elements, or as inline elements:
A block element will always start on a new line and will take up the entire available width of the page. In addition, it can contain other block elements, as well as inline elements.
Unlike block elements, inline elements do not start on a new line, but are inserted into the current line. They take only the width that is necessary for them (i.e. the width of their content) .
The knowledge of the type of an HTML element and the differences in behavior between inline and block elements will be essential to create a functional email: it will not be possible to act in the same way in CSS to manipulate block and inline elements.
doctype
Must be on the first line of the HTML code, and must start any HTML emailing integration . It is not strictly speaking a tag but a declaration, an instruction dedicated to the browser on the HTML version in which the code is written. There are several possible declarations:
HTML 5:
HTML 4.01 Strict:
HTML 4.01 Transitional:
HTML 4.01 Frameset:
XHTML 1.0 Strict:
XHTML 1.0 Transitional:
XHTML 1.0 Frameset:
XHTML 1.1:Depending on the declaration, differences in code interpretation may appear on some webmails. The truth is that in the world of email marketing, we must distinguish between several types of email clients: those that respect the indicated doctype, those that use an HTML5 doctype, those that do not have a doctype, and clients that use another doctype.
html
Tells the browser that it is an HTML document. It represents the root of any HTML document. The tag <html> is the container for all other HTML elements (except for the .
<!DOCTYPE html>
<html>
</html>head
Can contain the title of the document, scripts (banned in emailing) These data can be specified directly in the </code>, <code></code>, <code></code>, <code></code>. It is rather a structural element <em>(in the same way as the tags <code><html></code> or <code><body></code>)</em>.</p>
<pre class="wp-block-code prettyprint"><code><!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html></code></pre>
<h5 class="wp-block-heading" id="h-meta">meta</h5>
<p>Allows to provide metadata on the HTML document. The metadata are not visible on the page and can be used by browsers to know, for example, how to display the content of a page. They allow, among other things, to take control over the viewport <em>(the visible part of a page)</em>to specify the type of encoding of special characters, to allow a responsive behavior on some mobile devices... <code></code> are always filled in within the <code></code>.</p>
<pre class="wp-block-code prettyprint"><code><!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="date=no">
<meta name="format-detection" content="address=no">
<meta name="format-detection" content="email=no">
</head>
<body>
</body>
</html></code></pre>
<h5 class="wp-block-heading" id="h-style">style</h5>
<p>Used for <strong>define "graphic" layouts within an HTML document</strong>. Within this tag, it is possible to specify how the HTML elements will be displayed. An HTML document can contain several tags <code></code>. It is also essential for the implementation of media queries and responsive.</p>
<p>The style of an HTML element can, in theory, be applied via three methods:</p>
<ul>
<li>By including CSS rules in the HTML tag <code></code> of the section <code></code> of the HTML document <em>(what concerns us in this chapter)</em></li>
</ul>
<pre class="wp-block-code prettyprint"><code>.cell_title {background-color:#FF0000; font-size:24px; font-style:
italic}</code></pre>
<ul>
<li>By pointing to an external CSS file, containing all the CSS rules.</li>
</ul>
<pre class="wp-block-code prettyprint"><code></code></pre>
<ul>
<li>Or by using inline CSS style.</li>
</ul>
<pre class="wp-block-code prettyprint"><code><p style="margin:0; font:14px/20px Arial, Helvetica, sans-serif; color:#333; text-align:left">Textual content.</p></code></pre>
<p>In the world of emailing code, the second method is to be avoided for the moment. The structure of the HTML file looks like this:</p>
<pre class="wp-block-code prettyprint"><code><!DOCTYPE html>
<html>
<head>
<style>
body {
margin:0px auto !important;
padding:0px
}
</style>
</head>
<body>
</body>
</html></code></pre>
<h5 class="wp-block-heading" id="h-body">body</h5>
<p>Defines the body of the HTML document. The "visible" part of an HTML document is contained between the <code><body></code> and <code></body></code>. The element contains all the contents of an HTML document: <em>texts, visuals, links, tables, lines, etc...</em> It is in this element that the construction in nested arrays can begin.</p>
<pre class="wp-block-code prettyprint"><code><!DOCTYPE html>
<html>
<head>
</head>
<body>
<table cellpadding="0" cellspacing="0" border="0" style="width:100%" role="presentation">
<tr>
<td>
<p>My visible content</p>
</td>
</tr>
</table>
</body>
</html></code></pre>
<h5 class="wp-block-heading" id="h-table">table</h5>
<p><strong>A reference tag for the emailing integrator</strong>This is one of its best friends. An HTML table is built using this tag. When we talk about nested tables, we automatically think of this tag. A table is made of line(s) <em>(<code><tr></code>)</em>composed of data cell(s) (<code><td></code>) or title cell(s) <em>(<code><th></code>)</em>. In concrete terms, an HTML table for emailing is structured as follows:</p>
<pre class="wp-block-code prettyprint"><code><table cellpadding="0" cellspacing="0" border="0" style="width:100%" role="presentation">
<tr>
<td> </td>
</tr>
</table>
</code></pre>
<p>An HTML table could also contain HTML elements like <code><caption></code>, <code><col></code>, <code><colgroup></code>, <code><thead></code>, <code><tfoot></code>, <code><tbody></code>. <strong>But an HTML table for an email will remain as simple as possible</strong>to ensure common interpretation and rendering across all mail clients.</p>
<h5 class="wp-block-heading" id="h-tr">tr</h5>
<p><code><tr></code> <em>(for Table Row)</em> simply defines a row in an array. Can contain one or more elements <code><td></code>. This is certainly the element on which the least amount of HTML attributes and CSS styles will be specified. Most often, in an HTML emailing integration, the <code><tr></code> remain blank.</p>
<h5 class="wp-block-heading" id="h-td">td</h5>
<p>After the tag <code><table></code>The second best friend of the emailing integrator: defines a cell in an HTML table. It can take the form of a standard cell <em>(<code><td></code> for Table Data)</em>or in the form of a "title" cell <em>(<code><th></code> for Table Header)</em>.</p>
<p>A cell can contain both textual data <em>(plain text)</em> than visual data <em>(images, visuals, animated gifs)</em>. Finally, it is the cells that most of the time contain all the content of an email. It is very rare to fill in content data outside the cells. Thus, a cell will look like this in its final version for text data:</p>
<pre class="wp-block-code prettyprint"><code><td style="padding:15px"><p>Textual content.</p></td></code></pre>
<p>The tags <code><table></code>, <code><tr></code>, <code><td></code> tags must therefore be opened and then closed: they are not self-closing tags. Forgetting to close a tag could result in a rendering problem <em>(even if some mail clients or browsers can sometimes correct these omissions)</em>.</p>
<h5 class="wp-block-heading" id="h-img">img</h5>
<p><code><img></code> <em>(for image)</em> tag is used to insert a visual within an HTML document. This tag mainly requires two mandatory attributes: <code>src</code> and <code>alt</code>. <strong>Note that the visuals are not technically inserted into the document. Instead, they are called up via this tag.</strong> <code><img></code> creates a space reserved for the called image. The call to the image in question is made via the attribute <code>src</code>.</p>
<p>Several image formats are possible in an email: jpeg, gif, or png. Each of these formats has its qualities... And its defects:</p>
<figure class="wp-block-table"><table><thead><tr><th></th><th>JPEG</th><th>GIF</th><th>PNG</th></tr></thead><tbody><tr><td>Benefits</td><td>Perfect for gradients, it also allows you to adjust the quality of the image compression. This format can display several million colors. It is ideal for any photo or product visual.</td><td>Allows transparency, and also allows to choose the color palette. Even better, this type of format allows you to generate so-called "animated" gifs.</td><td>Allows transparency, while keeping a good image quality. PNG-8 is very similar to gif, since it supports 256 colors and allows transparency, and can even be lighter than a gif. PNG-24 is similar to jpeg, since it can include up to 16 million colors.</td></tr><tr><td>Disadvantages</td><td>Does not allow for transparency and can be relatively heavy without compression.</td><td>This format is not very good in gradients. Moreover, it only supports a maximum of 256 colors. It is generally used for texts, pictograms, or logos.</td><td>Its weight can sometimes be a bit too heavy.</td></tr></tbody></table></figure>
<h5 class="wp-block-heading" id="h-a">a</h5>
<p>Indispensable within an HTML email integration, the <code><a></code> <em>(for anchor)</em> creates a hyperlink that will be used, among other things, to link an HTML element to a Web page. The attribute required for the tag is called <code>href</code>. This attribute is used to indicate the destination or functionality of the link. Without attribute <code>href</code>tag, the <code><a></code> is no longer a hyperlink, and could be used as an anchor in an HTML <em>(functionality to be proscribed, we will see why later)</em>.</p>
<h5 class="wp-block-heading" id="h-span">span</h5>
<p><code><span></code> <em>(for "cover")</em> allows you to group several inline elements, parts and pieces of text, in order to assign them a particular CSS code. If within a paragraph a group of words should be displayed in red, the code will be as follows:</p>
<pre class="wp-block-code prettyprint"><code><p>Sentence in which <span style="color:red;">a group of words
will be displayed in red</span> without impact on the rest of the text.</p></code></pre>
<h5 class="wp-block-heading" id="h-br">br</h5>
<p><code><br></code> <em>(for line break)</em> allows you to create a line break.</p>
<pre class="wp-block-code prettyprint"><code><p>Portion of text 01.<br>
Portion of text 02 after line break.</p></code></pre>
<h5 class="wp-block-heading" id="h-div">div</h5>
<p>In an HTML document, a <code><div></code> <em>(for division)</em> defines a division or section. The element <code><div></code> is often used as a container for other HTML elements. In emailing, its use is very perilous. This tag has a formatting <em>(thus, CSS properties)</em> by default on some mail clients and browsers and its positioning and formatting properties <em>(<code>float</code>, <code>margin</code>)</em> are not always well supported. In our opinion, it should only be used in very specific cases:</p>
<ul>
<li>For the implementation of fully clickable buttons <em>(via the <a href="https://buttons.cm/" target="_blank" rel="noreferrer noopener">buttons.cm</a>)</em></li>
<li>For background image placement <em>(via the <a href="https://backgrounds.cm/" target="_blank" rel="noreferrer noopener">backgrounds.cm</a>)</em></li>
<li>For building responsive emails without media queries <em>(Emails Fluid)</em></li>
</ul>
<h5 class="wp-block-heading" id="h-p">p</h5>
<p><code><p></code> <em>(for paragraph)</em> must be used in an email, but it is necessary to take into account its automatic graphic formatting by some email clients <em>(and thus apply a CSS reset to this element)</em>. This tag is useful for accessibility purposes, as it indicates to screen readers that it is a paragraph.</p>
<h5 class="wp-block-heading" id="h-hn">hn</h5>
<p>As the <code><p></code>, <code></code> <em>(for heading, values of <code><h1></code> à <code><h6></code>)</em> must be used in an email, but it is necessary to take into account its automatic graphic formatting by some email clients <em>(and thus apply a CSS reset to these elements)</em>. These tags have accessibility value, as they indicate to screen readers that this is a title level.</p>
<h5 class="wp-block-heading" id="h-commentaires">Comments</h5>
<p>A vital feature for any good email integrator, it allows comments to be inserted into HTML code. This allows the developer to quickly identify the different modules of his integration, in order to orientate himself more quickly and easily in the event of an update or debugging, but also to explain or complete his code, which can considerably help the understanding of the code during a re-reading.</p>
<p>HTML comments start with <code><!--</code> and end with <code>--></code>. Any code between these two elements will not be displayed on the screen.</p>
<pre class="wp-block-code prettyprint"><code><!-- DEBUT MODULE ARTICLE PRINCIPAL -->
<table cellpadding="0" cellspacing="0" border="0"
style="width:600px; margin:0px auto" align="center" class="width100pc" role="presentation">...
</table>
<!-- FIN MODULE ARTICLE PRINCIPAL --></code></pre>
<h4 class="wp-block-heading" id="h-attributs">Attributes</h4>
<p>Each HTML element can have one or more attributes. These attributes are additional values that allow to configure the elements or to adapt their behavior. The following list is not exhaustive but includes the most commonly used HTML attributes in email coding.</p>
<h5 class="wp-block-heading" id="h-alt">alt</h5>
<p>Some email clients block images by default. Sometimes recipients can change their email settings to block images from being displayed. When images are not displayed, the content of the <code>alt</code> <em>(for alternative text)</em> appears.</p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><a href="https://www.badsender.com/wp-content/uploads/2023/02/image-4.png"><img decoding="async" loading="lazy" width="446" height="191" src="https://www.badsender.com/wp-content/uploads/2023/02/image-4.png" alt="Example of alternative text displayed when an image does not appear on the screen" class="wp-image-558033" srcset="https://www.badsender.com/wp-content/uploads/2023/02/image-4.png 446w, https://www.badsender.com/wp-content/uploads/2023/02/image-4-300x128.png 300w, https://www.badsender.com/wp-content/uploads/2023/02/image-4-18x8.png 18w" sizes="(max-width: 446px) 100vw, 446px" /></a><figcaption class="wp-element-caption">Example of alternative text displayed when an image does not appear on the screen</figcaption></figure></div>
<p>This text provides a textual alternative to the non-textual content of an email. If the images are not displayed, it can considerably reduce the understanding of the email by the recipients. It is therefore very important to fill in the <code>alt</code>and to optimize its graphic formatting, to guarantee an optimal rendering of the email when the images are not displayed. Keep in mind that the style will not be applied in all email clients. This will be possible by indicating some CSS properties via the image style attribute.</p>
<pre class="wp-block-code prettyprint"><code><img src="images/nomdelimage.jpg" alt="Alternative text" style="display:block; font:16px/20px Arial, Helvetica, sans-serif; color:#333; margin:0px auto"></code></pre>
<div class="wp-block-image">
<figure class="aligncenter size-full"><a href="https://www.badsender.com/wp-content/uploads/2023/02/image-5.png"><img decoding="async" loading="lazy" width="384" height="193" src="https://www.badsender.com/wp-content/uploads/2023/02/image-5.png" alt="Example of stylized alternative text" class="wp-image-558034" srcset="https://www.badsender.com/wp-content/uploads/2023/02/image-5.png 384w, https://www.badsender.com/wp-content/uploads/2023/02/image-5-300x151.png 300w, https://www.badsender.com/wp-content/uploads/2023/02/image-5-18x9.png 18w" sizes="(max-width: 384px) 100vw, 384px" /></a><figcaption class="wp-element-caption">Example of stylized alternative text</figcaption></figure></div>
<p><strong>Alternative text also has an accessibility function: it is announced by screen review software, making the content or function of the image accessible to users with visual or cognitive impairments.</strong> Without alternative text, screen review software sometimes indicates the other information available in the image <em>(file name, dimensions)</em>.</p>
<p>Therefore, when writing the alternative text, keep in mind that its content should be precise and equivalent to the content and functions of the image. Be short: in a few words, as few as possible. Not be redundant with other alt text or other textual information in the email. Do not contain "image of..." or "graphic of...". If a link is present on the image, the alt text can summarize the function present on the link, related to the image.</p>
<p>When it is a decorative image, an attribute <code>alt</code> can be sufficient. In the case of a large cut-out image, it is best to fill in the alternative text only once in the largest image, and not to repeat it for each piece of image. Background images cannot have alt text. If the content of an image is important, the image should not be applied in the background. Finally, it is important to remember that the alternative text is chosen according to the context.</p>
<h5 class="wp-block-heading" id="h-src">src</h5>
<p><code>src</code> <em>(for source)</em> tag is required to specify the path of the called image. It therefore goes hand in hand with the <code><img></code>. The syntax of this attribute is as follows: <code>src="urldelimage"</code>. In a local HTML integration, the paths will be relative: they will point to a folder where the images are located.</p>
<pre class="wp-block-code prettyprint"><code><img src="images/produit_01_visuel.jpg"></code></pre>
<p>Once the images are hosted on a server, the paths of the visuals will be said to be absolute <em>(or absolute urls)</em>.</p>
<pre class="wp-block-code prettyprint"><code><img src="https://www.badsender.com/images/produit_01_visuel.jpg"></code></pre>
<h5 class="wp-block-heading" id="h-href">href</h5>
<p><code>href</code> <em>(for Hypertext REFerence)</em> specifies the destination of the link. Generally, it is a url <em>(of type http://)</em>but this url can also contain tracking information and take a more complex aspect. Finally, it can also be more "specific" paths:</p>
<ul>
<li>A link to an element of the page or email with a <code>id</code> precise. However, this feature should not be used in HTML emailing integration <em>(we will see why later)</em>.</li>
<li>Another protocol: <code>mailto</code> <em>(to write an email)</em> or <code>such as</code> <em>(to generate a call to a specific number)</em>. In the case of a <code>mailto</code>attribute, the <code>href</code> will take the following syntax:</li>
</ul>
<pre class="wp-block-code prettyprint"><code><a href="mailto:someone@example.com?cc=someoneelse@example.com&bcc=andsomeoneelse@example.com&subject=Summer Party&body=You are invited to a big summer party!">Send mail!</a></code></pre>
<p>In this case, several fields have been specified in the protocol <code>mailto</code> : the email addresses in copy <em>(via the variables <code>cc</code>)</em>the subject of the mail <em>(via the variable <code>subject</code>)</em> and finally, the content of the mail <em>(via the variable <code>body</code>)</em>. In the case of the <code>such as</code>the syntax will be as follows:</p>
<pre class="wp-block-code prettyprint"><code><a href="tel: 33344547301">Give us a call!</a></code></pre>
<h5 class="wp-block-heading" id="h-width">width</h5>
<p>Specifies the width of an element, in pixels. The attribute <code>width</code> is very important: it will, most of the time, be assigned to tables, cells, or visuals. This attribute is often filled in pixels <em>(in this case, the unit is not specified)</em>. It can also be specified as a percentage <em>(in this case, the percentage unit is specified)</em>.</p>
<pre class="wp-block-code prettyprint"><code><img src="chemindelimage" width="400"></code></pre>
<p>Its purpose is to specify the width of an HTML element. It is possible to leave it blank for a cell or a table, to let the element take the width of its content. With the growth in the use of fluid and hybrid methods, tables will regularly be filled in as a percentage, to adapt to the resolution of the viewing window.</p>
<h5 class="wp-block-heading" id="h-height">height</h5>
<p>Specifies the height of an element, in pixels <em>(in this case, the unit is not specified)</em>. The <code>height</code> will be used mainly on the images and visuals of the HTML integration. It is important to fill in this attribute correctly to avoid any rendering inconvenience on some email clients when the images are not displayed <em>(except when the visuals have a width indicated in percentage)</em>.</p>
<p>If the attribute <code>width</code> also concerns cells and tables, we advise against setting a fixed height on these elements: coupled with some CSS properties <em>(<code>margin</code>, <code>padding</code>)</em>It can be interpreted differently by different email clients. Moreover, the integration of an email must be "flexible" and stretchable, the structure must be able to adapt to its content. <strong>The integration must breathe, keep some elasticity, to adapt to its content.</strong></p>
<h5 class="wp-block-heading" id="h-cellpadding">cellpadding</h5>
<p>Defines the space <em>(in pixels)</em> between the edge of the cell and the content of the cell. As a precaution, we recommend that you always specify this attribute for each <code><table></code>and to inform its value at <code>0</code>. The internal margins of the cells will be generated via the CSS property <code>padding</code>because even if the attribute <code>cellpadding</code> property is correctly supported by all mail clients, it will be much more complex to modify its value in responsive, unlike the CSS <code>padding</code>.</p>
<h5 class="wp-block-heading" id="h-cellspacing">cellspacing</h5>
<p>Defines the space between the cells. As for the <code>cellpadding</code>we recommend that you specify this attribute for each created, and set the value to <code>0</code>.</p>
<h5 class="wp-block-heading" id="h-border">border</h5>
<p>Not to be confused with the CSS property <code>border</code>This attribute specifies the width in pixels of a border. To avoid any rendering problems, a good practice is to fill this attribute on any image, and to specify its value to <code>0</code>.</p>
<h5 class="wp-block-heading" id="h-bgcolor">bgcolor</h5>
<p>Regularly used in the HTML integration of an email, it allows to specify a background color <em>(<code>bgcolor</code> for background-color)</em>. Its value will be, most of the time, a hexadecimal code. This attribute will be specified mainly on cells or tables, to ensure its correct interpretation by all mail clients.</p>
<p>There are several ways to specify the color: it can be in all letters <em>(<code>red</code>, <code>yellow</code>)</em>in rgb code <em>(for Red Green Blue, with values from 0 to 255)</em>in rgba code <em>(for Red Green Blue and Alpha, for transparency)</em>hsl <em>(for Hue Saturation Lightness)</em>, hsla or hexadecimal code <em>(HEX value)</em>.</p>
<p><strong>The hexadecimal code, which is probably the most widely used because it is the best supported, is composed of six digits</strong>. Each pair of characters in the Hex code representing the intensity of red, green and blue in the color, respectively. The value of a pair of characters varies from 00 <em>(the lowest intensity)</em> to FF <em>(which represents the highest intensity)</em>. The color white for example is made by each of the three primary colors, at their full intensity, resulting in the color code Hex <code>#FFFFFF</code>. The Hex code is not case sensitive.</p>
<pre class="wp-block-code prettyprint"><code><td bgcolor="#F2F2F2"></code></pre>
<h5 class="wp-block-heading" id="h-align">align</h5>
<p>Allows to align horizontally contents or elements of block type. Can take several values: <code>left</code>, <code>right</code>, <code>center</code>, <code>justify</code>... Depending on its value, the content of the cell will be left-ironed, right-ironed, centered, or justified...</p>
<pre class="wp-block-code prettyprint"><code><td align="center">Here, a centered text content</td></code></pre>
<h5 class="wp-block-heading" id="h-style-0">style</h5>
<p>Specifies an inline style for an HTML element. This attribute will override all other styles, specified for example in the <code></code> or in an external CSS file.</p>
<pre class="wp-block-code prettyprint"><code><p style="font:14px/20px Arial, Helvetica, sans-serif; color:#333; text-align:left">My content</p></code></pre>
<h5 class="wp-block-heading" id="h-id">id</h5>
<p>Corresponds to a unique identifier for an HTML element. Its value must therefore also be unique within an HTML document. There cannot be two identical ids <em>(on their value)</em> in the same HTML document. This attribute is mainly used to specify a specific style for an element, and in particular when using media queries: it allows to target, in media queries, the single element of the HTML integration concerned by the CSS modifications to be made.</p>
<pre class="wp-block-code prettyprint"><code><p style="font:12px/16px Arial, Helvetica, sans-serif; color:#000" id="monparagraphe">My content</p></code></pre>
<h5 class="wp-block-heading" id="h-class">class</h5>
<p>Has, finally, the same function in HTML emailing integration as the <code>id</code>attribute, that is to say: pointing to an element in order to assign specific CSS styles to it. The difference is that the <code>class</code> does not have to be unique. Thus, it will be possible to fill in several values for the attribute <code>class</code> to a single HTML element. For example:</p>
<pre class="wp-block-code prettyprint"><code><p style="font:12px/16px Arial, Helvetica, sans-serif; color:#000" class="fontsize14px margintop20px">My content</p></code></pre>
<p>Via the attribute <code>class</code>In this way we can specify several CSS properties that we can then define in our media queries. It is also possible to apply the same <code>class</code> on multiple HTML elements within the same document.</p>
<h5 class="wp-block-heading" id="h-role">role</h5>
<p>The attribute <code>role</code> is mainly used in email marketing to optimize the accessibility of an email. Indeed, the tables used to format the email are actually data tables. It is therefore necessary to indicate to screen readers that they are used here as formatting tables. This is done through the attribute <code>role</code>with the value <code>presentation</code>.</p>
<pre class="wp-block-code prettyprint"><code><table role="presentation"></code></pre>
<h3 class="wp-block-heading" id="h-css">CSS</h3>
<p>CSS for Cascading Style Sheets <em>(cascading style sheets)</em>. <strong>CSS is a computer language that describes how HTML elements should be displayed on screen, on paper or on other media.</strong> The standards defining CSS are published by the World Wide Web Consortium <em>(W3C)</em>.</p>
<p>Unlike software, CSS specifications are not developed in successive versions, which would allow a browser to refer to a particular version. CSS is developed in "levels", which forces each new level to integrate the previous one, and each implementation to be compatible with the previous one: CSS1 is thus developed to be a subset of CSS2, which is itself developed to be a subset of CSS3. This partly explains the slow progress of CSS.</p>
<p>As we have seen in the previous chapters, CSS can be added to HTML elements in 3 ways:</p>
<ul>
<li>Inline - using the <code>style</code> in HTML elements.</li>
<li>Internal - using an element <code></code> in the section <code></code>.</li>
<li>External - using an external CSS file.</li>
</ul>
<p><strong>We will use inline and internal styles in the email coding.</strong> The characteristics applicable to CSS are expressed as a couple <code>property: value</code>. These couples are separated by <code>;</code>. When a CSS property can take several values, these values are separated by <code>,</code>.</p>
<p>The values can be expressed with normalized units, or with CSS keywords. In an internal style, the properties are grouped by blocks of rules, delimited by the braces <code>{}</code>.</p>
<h4 class="wp-block-heading" id="h-css-en-ligne">CSS online</h4>
<p>Should we stop writing inline styles in emails? The question has often been asked to email integrators: Can we stop writing our inline styles when Litmus seems to allow it? <em>(Because it must be admitted that this method is a bit tedious)</em>. Until 2016, Gmail supported almost only inline styles. Webmails from Yahoo, AOL, Outlook.com and even versions of Outlook from 2007 to 2016 on Windows support the tags <code></code> for a long time. The 2016 Gmail update seemed to change everything by officially adding support for tags <code></code> and attributes <code>class</code> and <code>id</code>.</p>
<p>And yet: Many international clients do not support the <code></code>. Popular clients like Libero <em>(Italy)</em>Mail.ru, Yandex <em>(Russia)</em>Nate, Naver <em>(Korea)</em>T-online <em>(Germany)</em>Telstra <em>(Australia)</em> or Terra <em>(Brazil)</em>. But there are also some versions of some mail clients, like the iOS application of SFR or the Android application of Orange. And finally, there is always Gmail on Android with an account other than Gmail <em>(nicknamed GANGA)</em>Yahoo in their Android application or mobile webmail, and Outlook.com on mobile in the old version of their webmail.</p>
<p>In addition, mail clients have their own default styles. <strong>The HTML of your email could therefore, potentially, inherit too generic styles from webmails</strong>. The advantage of writing your styles online is that <strong>it automatically overrides the default styles of the mail clients</strong>.</p>
<p>The main advantage of writing styles online is that they will override the default styles of the mail clients <em>(because mail clients have their own default styles, like Outlook.com which adds styles like <code>background-color</code> or <code>border-bottom</code> on each tag <code></code>)</em>.</p>
<p>The main disadvantage: the weight of the email is heavier <em>(sometimes up to 25% difference with an email without online styles)</em>The style of each cell, each text, must be filled in, even if the styles are sometimes identical. <strong>A lighter HTML code means that it will be faster to send, faster to load, and most importantly, avoids truncating the email on some email clients like Gmail which cuts any content after the 102<sup>ers</sup> kilobytes of an email.</strong></p>
<p>Conversely, not writing inline styles for elements that appear only once in the email can unnecessarily overload the code <em>(an attribute <code>class</code> + a tag <code></code> will carry more weight than a simple attribute <code>style</code> online)</em>.</p>
<p>To simplify the writing of online styles, there are nowadays inliners, snippets or :</p>
<ul>
<li>Snippet for Dreamweaver</li>
<li>Emmet</li>
</ul>
<h4 class="wp-block-heading" id="h-proprietes-css">CSS properties</h4>
<p><strong>CSS properties allow you to modulate, work on, and modify a set of technical and graphic characteristics of an HTML element.</strong> <em>Font, color, size, fat, text alignment, width, height, position, background color and image and container behavior, borders, internal margins...</em> Multiple possibilities are offered on the graphic formatting of HTML elements via CSS properties. There is no limit to the declaration of these CSS properties within an attribute <code>style</code>. Any CSS property can be modified directly in the media queries for the responsive version of an email. The following list is not exhaustive but includes the most commonly used CSS properties in email coding.</p>
<h5 class="wp-block-heading" id="h-font-size">font-size</h5>
<p>Specifies the typography size of a text. The value is usually given in pixels <em>(fixed unit)</em>but it is possible to choose among several values: xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger... It is also possible to enter the value of <code>font-size</code> in percent <em>(evolving value)</em>.</p>
<h5 class="wp-block-heading" id="h-font-family">font-family</h5>
<p>Specifies the font family of a text. The property <code>font-family</code> can contain several surnames as backup typefaces <em>(then separated by commas)</em>. If the browser or mail client does not support the first specified font, it will switch to the next font <em>(and so on)</em>.</p>
<pre class="wp-block-code prettyprint"><code>font-family:Arial, Helvetica, Sans-Serif;</code></pre>
<p>There are two types of typography families: family-name <em>(Times, Courier, Arial)</em> and generic-family <em>(serif, sans-serif, cursive...)</em>. Ideally, it is better to start with a specific typeface <em>(family-name)</em> and end the declaration of the property with a generic family, to let the machine, the mail client or the browser choose a typeface in a generic family if it doesn't find any of the typefaces previously filled in.</p>
<h5 class="wp-block-heading" id="h-font-weight">font-weight</h5>
<p><strong>Allows to define the fat of the concerned text</strong>. Its values can be defined in words (<code>normal</code>, <code>bold</code>, <code>bolder</code>, <code>lighter</code>) than in a sequence of numbers <em>(from 100 to 900, in increments of 100, <code>400</code> corresponding to the value <code>normal</code>and <code>700</code> to the value <code>bold</code>)</em>.</p>
<h5 class="wp-block-heading" id="h-color">color</h5>
<p>Allows you to specify the color of a text. There are several ways to define the value of a color <em>(<a href="#h-bgcolor">see attribute bgcolor</a>)</em>.</p>
<h5 class="wp-block-heading" id="h-padding">padding</h5>
<p>Allows, in CSS, to specify internal margins for an HTML element <em>(the space between a content and its border, between the content and its container)</em>. It can be declined according to the concerned sides: <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code>, <code>padding-left</code>.</p>
<p>Let us detail the multiple cases of its values:</p>
<ul>
<li>4 values <em>(<code>padding: 10px 5px 15px 20px</code>)</em> :
<ul>
<li>Padding-top at 10px</li>
<li>Padding-right at 5px</li>
<li>Padding-bottom at 15px</li>
<li>Padding-left at 20px</li>
</ul>
</li>
<li>3 values <em>(<code>padding: 10px 5px 15px</code>)</em> :
<ul>
<li>Padding-top at 10px</li>
<li>Padding-right and padding-left at 5px</li>
<li>Padding-bottom at 15px</li>
</ul>
</li>
<li>2 values <em>(<code>padding: 10px 5px</code>)</em> :
<ul>
<li>Padding-top and padding-bottom at 10px</li>
<li>Padding-right and padding-left at 5px</li>
</ul>
</li>
<li>1 value <em>(<code>padding: 10px</code>)</em> :
<ul>
<li>The four paddings at 10px</li>
</ul>
</li>
</ul>
<p>Negative values are not allowed in the <code>padding</code>. <strong>The CSS property <code>padding</code> is mainly well supported on the <code><td></code>.</strong></p>
<pre class="wp-block-code prettyprint"><code><td bgcolor="#f5a316" style="padding:20px 30px 40px">
<p style="font:14px/20px Arial, Helvetica, sans-serif; color:#FFF; text-align:left">Nullam hendrerit condimentum orci vel aliquam. Donec vitae aliquam leo. Ut pulvinar mi quis metus venenatis convallis.</p>
</td></code></pre>
<div class="wp-block-image">
<figure class="aligncenter size-full"><a href="https://www.badsender.com/wp-content/uploads/2023/02/image-10.png"><img decoding="async" loading="lazy" width="527" height="164" src="https://www.badsender.com/wp-content/uploads/2023/02/image-10.png" alt="Example of rendering with the use of the CSS padding property in an email" class="wp-image-558039" srcset="https://www.badsender.com/wp-content/uploads/2023/02/image-10.png 527w, https://www.badsender.com/wp-content/uploads/2023/02/image-10-300x93.png 300w, https://www.badsender.com/wp-content/uploads/2023/02/image-10-18x6.png 18w" sizes="(max-width: 527px) 100vw, 527px" /></a><figcaption class="wp-element-caption">Example of rendering with the use of the CSS padding property in an email</figcaption></figure></div>
<h5 class="wp-block-heading" id="h-margin">margin</h5>
<p>This property allows, in CSS, to specify external margins to an HTML element. As for the <code>padding</code>It can contain in four values the 4 sides of the element concerned. <strong>The property <code>margin</code> is particularly well supported and useful on <code><p></code> or <code></code>to add spacing.</strong></p>
<pre class="wp-block-code prettyprint"><code><p style="margin-top:20px">My paragraph</p></code></pre>
<h5 class="wp-block-heading" id="h-line-height">line-height</h5>
<p>Allows you to specify the line spacing of a text. Its value can be expressed in pixels, points <em>(for fixed units)</em>or without unit. In the latter case, the value concerned will be multiplied by the <code>font-size</code> assigned to obtain the final line spacing. Negative values create rendering problems in Outlook for Windows.</p>
<pre class="wp-block-code prettyprint"><code><p style="font-size:14px; line-height:20px">My text</p></code></pre>
<h5 class="wp-block-heading" id="h-text-align">text-align</h5>
<p>Allows you to specify the horizontal alignment of a text within an HTML element. This property can take the following values: <code>left</code>, <code>right</code>, <code>center</code>, <code>justify</code>. Justify a text allows you to make the text take the width of its container <em>(as in newspapers and magazines)</em>.</p>
<pre class="wp-block-code prettyprint"><code><p style="text-align:justify">My text</p></code></pre>
<h5 class="wp-block-heading" id="h-vertical-align">vertical-align</h5>
<p>Allows you to specify the vertical alignment of a content within an HTML element. It can take several values: <code>top</code>, <code>middle</code>, <code>bottom</code>, <code>baseline</code>. Its use will be particularly noticed in the case where two cells <em>(or more)</em> of the same line contain contents of different heights <em>(or variables)</em> and that a decision will have to be made about the vertical positioning of this data.</p>
<pre class="wp-block-code prettyprint"><code><td style="vertical-align:top"><p>My content</p></td>
</code></pre>
<h5 class="wp-block-heading" id="h-display">display</h5>
<p>Allows you to change the behavior of an HTML element. Remember that HTML elements <em>(as <code><img></code>)</em> behaves as an inline element. While other <code>(as <table>)</code> behave as a block element. A block element always starts on a new line and takes the whole width of its container. It is possible to modify these behaviors by specifying the <code>display</code> the values <code>inline</code>, <code>inline-block</code>, <code>none</code> or <code>block</code> <em>(among others)</em>.</p>
<p>In response, when an element <em>(<code><td></code> for example)</em> element must take all the width, and the brother element must go underneath, it will be possible to modify the styles of these elements via the media queries by modifying their behavior in <code>display:block</code>.</p>
<h4 class="wp-block-heading" id="h-commentaires-0">Comments</h4>
<p>In CSS as in HTML, it is possible to add comments, or to pass some pieces of code as comments. This not only allows you to comment your code for any future update, or any code transfer by another integrator, but also to avoid deleting certain properties that could be useful in other integrations. The syntax is however different from HTML: in CSS, any text between <code>/*</code> (beginning of commentary) and <code>*/</code> (end of comment) will be correctly interpreted as a comment.</p>
<pre class="wp-block-code prettyprint"><code>/* To hide items on Outlook 2007 to 2013 */
.visibility_mobile {
display:none;
mso-hide:all;
visibility:hidden;
max-height:0;
font-size:0;
line-height:0;
padding:0
}</code></pre>
<p>Warning: CSS comments can only be inserted in the <code></code>. Outside the <code></code>you will have to use HTML comments.</p>
<h3 class="wp-block-heading" id="h-encodage-de-caracteres">Character encoding</h3>
<p>Web pages can be written in all kinds of languages and a large number of characters can be used, which requires either a character set for each type of writing or a universal character set. At the time of the appearance of HTML, the universal character set Unicode had not yet been invented, and many character sets were in use, including ISO-8859-1 for the Latin and Western European alphabets, Shift-JIS for Japanese, KOI8-R for Cyrillic. Today, Unicode's UTF-8 encoding is the most widely used.</p>
<p>The HTTP communication protocol transmits the name of the character set. The HTML header may contain a reminder of this character set, which should be the same unless it is set incorrectly. Finally, as a result of an incorrect setting, the character set actually used may still differ from the announced character set. These wrong settings usually cause text display errors, especially for characters not covered by the ASCII standard.</p>
<p>Because, originally, HTML files are made to be encoded in ASCII, that is to say without special characters. In ASCII, the characters are coded on 7 bits, that is to say a code composed of seven digits which are all equal to 0 or 1. It thus makes it possible to represent 2<sup>7</sup> or 128 different characters. 128 characters are enough to store our alphabet, numbers, punctuation elements, but not enough to store our special characters <em>(accents, cedillas...)</em>.</p>
<p>Before the generalization of Unicode, entities were defined to represent some non-ASCII characters: each special character is thus translated by a numeric alpha code. Several lists of these characters are available on the web. Even today, using a conversion table allows to avoid incompatibilities.</p>
<h3 class="wp-block-heading" id="h-indentation">Indentation</h3>
<p>In computer science, <strong>indentation consists in adding tabs or spaces in a file, for a better reading and understanding of the code</strong>. The indentation of an HTML file is important: it facilitates the reading of the code, the resolution of bugs, the dissociation of the different elements and their correct opening and closing. An optimal HTML code for email must absolutely be correctly indented.</p>
<h2 class="wp-block-heading" id="h-mobile-pourquoi-creer-un-template-email-responsive">Mobile, why create a responsive email template?</h2>
<p>Mobile email is no longer optional. Mobile email is imperative. An emailing campaign must, today, propose a version adapted to its multiple consultation supports.</p>
<p>So how can you not design an email for this new kind of interface? Email is constantly evolving, but mobile email marketing is, in this sense, not really a novelty. Many techniques have been created, tested, implemented and continue to evolve, to guarantee the mobile recipient a different viewing experience.</p>
<p>Because that's where the interest lies: if desktop email is a technical peculiarity in the world of web development, mobile email requires and imposes a certain number of constraints to optimize the understanding of the message on a screen that is now much smaller and narrower than that of a computer: it is no longer possible to be satisfied with typography sizes that are too small, with illegible texts, with visuals that are difficult to identify, or with miniature calls to action.</p>
<p>Where the emailing integrator used to focus on obtaining a perfect rendering on complex email software based on code interpretation <em>(Outlook)</em>, <strong>the priority today is to provide a quality mobile rendering that is ergonomic, accessible and practical.</strong></p>
<p>The most common technique nowadays is Responsive Web Design.</p>
<h3 class="wp-block-heading" id="h-qu-est-ce-que-le-responsive-web-design">What is Responsive Web Design?</h3>
<p>The responsive web design encompasses the design methods that propose, thanks to different principles and techniques, contents and ergonomics that are self-adaptable according to the consultation interfaces used by the visitor, and therefore a comfortable consultation, whatever the support used. The responsive in email marketing induces to facilitate the reading or consultation of an email from a mobile support. The recipient can consult the same email "across a wide range of devices with the same visual comfort and without having to scroll horizontally or zoom in/out on touch devices in particular, manipulations that can sometimes degrade the user experience, both in reading and in browsing.</p>
<p><strong>In other words, with a reduced screen, offer a content that is just as readable and understandable.</strong> But not only: by extension, with a reduced connection, propose content that will be displayed just as quickly. When interaction is impossible, offer backup solutions. The truth is that mobile email client usage is slowly eclipsing that of webmail and desktop clients, which means that providing a poor reading experience on a small screen can now be inconvenient for the majority of recipients. This can lead to lower response rates, or as Return Path summarized in a recent report:</p>
<blockquote class="wp-block-quote is-style-default">
<p>"...those that aren't tracking which device their subscribers are reading their emails on, or optimizing their emails or websites for mobile devices stand to lose out. A poor user experience could mean no response, no action, or plainly put, no ROI."</p>
<cite>Return Path</cite></blockquote>
<p>The responsive in email marketing is therefore a collection of graphic practices, techniques <em>(media queries, fluid grids, fluid images)</em> that aim to provide the optimal visual experience on various platforms.</p>
<h4 class="wp-block-heading" id="h-contraintes-liees-aux-supports-nomades">Constraints related to mobile media</h4>
<p>The mobile supports imply, by some of their characteristics, a certain number of constraints which it is judicious to revise here:</p>
<ul>
<li>The screen of a smartphone or a tablet is smaller than that of a computer: The navigation space is therefore restricted.</li>
<li>The network is not stable all the time: The internet connection can be fluctuating from cell phones, or not very present.</li>
<li>Hovering features cannot be detected on touch screens.</li>
</ul>
<p>From these constraints come certain requirements on the product:</p>
<ul>
<li>Visual superfluity due to small size is not allowed.</li>
<li>The organization of the elements, the ergonomics, the gestures are all elements to which we must pay great attention.</li>
<li>The features can't fit in large numbers without drowning the user.</li>
<li>You should only keep the information that is important for the customers and avoid transposing the desktop version to mobile.</li>
<li>The design must be simple and light to support network instabilities.</li>
<li>Given the unstable or fluctuating connection, it is important to design the mails accordingly, especially by reducing the amount of data to be received as much as possible. It is very unpleasant for users to have to wait while images are loading.</li>
</ul>
<h4 class="wp-block-heading" id="h-bonnes-pratiques-us-et-coutumes">Good practices / customs</h4>
<p>If email consultation on mobile now supplants desktop consultation, this induces editorial, graphic, ergonomic, but also technical impacts. If we take this into account, it becomes logical to apply some sensible practices to improve the user experience of email consultation on mobile media.</p>
<p>The best way to apprehend, understand, guess and grasp these practices remains the user experience, and therefore, to test.</p>
<blockquote class="wp-block-quote is-style-default">
<p>Keep in mind: "What bothers me, will bother my recipients... Surely."</p>
</blockquote>
<h5 class="wp-block-heading" id="h-changer-la-navigation">Change navigation</h5>
<p>Avoid or even ban all horizontal scrolling and favor vertical scrolling.</p>
<p>More than ever, keep the message concise and place all important design elements at the top of the email. Is the main Call to Action immediately visible when the email is opened on mobile? Does the recipient have to scroll to see it? This also includes the ability to hide <em>(or show)</em> specific content on mobile, add or remove margins around content, and change the order of modules and the hierarchy of information...</p>
<h5 class="wp-block-heading" id="h-modulation-des-call-to-action">Modulation of Call to Action</h5>
<p>Simply facilitate the area and increase the click margin on a Call to Action. A Call to Action with dimensions of 140 pixels wide by 40 pixels high will seem, on a desktop screen, quite visible and easily clickable.</p>
<p>Will it be the same on a mobile or tablet? The precision of a finger is not the same as that of a mouse cursor. Who has never had the unpleasant surprise of clicking on a Call to Action contained in an email consulted on a mobile device, without anything happening? Or to find yourself in "text selection" mode after tapping on a link? The reaction is sometimes immediate and heavy with consequences: the recipient, frustrated, may leave the consultation.</p>
<p>Call to Action size is a key factor in mobile emails. Increasing the click area, or the size of the button itself is an imperative task when switching to responsive. Links and buttons should ideally have <em>(and according to old recommendations and instructions from Apple)</em> a minimum target area of 44 pixels high by 44 pixels wide.</p>
<h5 class="wp-block-heading" id="h-taille-des-textes">Text size</h5>
<p>Increase the size of HTML texts if necessary to guarantee their readability, comprehension and accessibility. Will a 10px text still be readable on an iPhone 5S screen? Will it be necessary to zoom in to understand the content? To find out, the real rendering test is always the best option...</p>
<h5 class="wp-block-heading" id="h-redimensionner-changer-les-visuels">Resize / change visuals</h5>
<p>A visual for the desktop version of an email will not necessarily be adapted to a mobile version: consider a visual of 600 pixels wide, in which a text of 14 pixels is inserted. If we quickly divide the width of this visual to arrive at the lowest resolution for a mobile consultation <em>(i.e. 300 pixels)</em>In the mobile version, we can quickly deduce the size of the text: 7 pixels. It becomes impossible to read or understand this text.</p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><a href="https://www.badsender.com/wp-content/uploads/2023/02/image-11.png"><img decoding="async" loading="lazy" width="614" height="240" src="https://www.badsender.com/wp-content/uploads/2023/02/image-11.png" alt="Example of image in desktop version" class="wp-image-558040" srcset="https://www.badsender.com/wp-content/uploads/2023/02/image-11.png 614w, https://www.badsender.com/wp-content/uploads/2023/02/image-11-300x117.png 300w, https://www.badsender.com/wp-content/uploads/2023/02/image-11-18x7.png 18w" sizes="(max-width: 614px) 100vw, 614px" /></a><figcaption class="wp-element-caption">Example of image in desktop version</figcaption></figure></div>
<div class="wp-block-image">
<figure class="aligncenter size-full"><a href="https://www.badsender.com/wp-content/uploads/2023/02/image-12.png"><img decoding="async" loading="lazy" width="309" height="121" src="https://www.badsender.com/wp-content/uploads/2023/02/image-12.png" alt="Example of an image reduced in width, with the same ratio, on mobile: the text is unreadable." class="wp-image-558041" srcset="https://www.badsender.com/wp-content/uploads/2023/02/image-12.png 309w, https://www.badsender.com/wp-content/uploads/2023/02/image-12-300x117.png 300w, https://www.badsender.com/wp-content/uploads/2023/02/image-12-18x7.png 18w" sizes="(max-width: 309px) 100vw, 309px" /></a><figcaption class="wp-element-caption">Example of an image reduced in width, with the same ratio, on mobile: the text is unreadable.</figcaption></figure></div>
<p>Responsive may mean providing visuals specific to the mobile version, or resizing a desktop visual for the Responsive version.</p>
<h5 class="wp-block-heading" id="h-ordre-des-modules">Order of the modules</h5>
<p>Let's ask ourselves the right questions: when a content configuration looks like this: visual on the left, text and Call to Action on the right, what will be the default rendering in mobile? Chances are that the visual will be in the first part, and the text and Call to Action in the second. If the visual is clickable, or includes the main offer, this may not be a concern. But what if it's not? If it is only an illustrative visual?</p>
<p>The CSS property <code>direction</code> allows you to alternate the order of the contents in order to offer the recipient the contents that the sender considers appropriate as quickly as possible.</p>
<h5 class="wp-block-heading" id="h-temps-de-chargement">Loading time</h5>
<p>Without doubt the most important objective to achieve in responsive email: reduce the loading time of the email on mobile consultation. An emailing design can quickly turn out to be relatively heavy in HTML code and attached images. Even if the recommendations are to limit the weight of an email in desktop version, it becomes essential to drastically reduce it in responsive version in order to improve the loading and display speed.</p>
<p>This can be done through several techniques: display only the images that are essential to the proper understanding of the email and do not show superfluous visuals. Hiding "secondary" modules, whose presence has no impact on the understanding of the entire email <em>(menu, reassurance banner)</em>.</p>
<h5 class="wp-block-heading" id="h-poids-des-donnees">Data weight</h5>
<p>An email without images is probably less attractive than an email with images, that's a fact. Even if one of the trends in email marketing is the increase in sending emails in "full text", it remains that the image has an important part in the recipient's behavior on the email. However, images are definitely the largest volume of data to be downloaded when an email is opened.</p>
<p>In this case, how to optimize the loading time of these images? How to overcome the complexities of the reception speed of each, and display quickly visuals of quality despite everything? It is precisely through the intermediary of requests <em>(Media Queries)</em> that the sender can decide not to display certain visuals, certain modules, using CSS properties like <code>display</code> with the value <code>none</code>. The concerned elements will not be displayed, so it can considerably reduce the weight of the email and its data.</p>
<p>Moreover, it is essential to optimize the weight of the images themselves, not only when exporting and cutting them, but in a second time, via platforms specialized in image compression such as <a href="https://www.jpegmini.com/" target="_blank" rel="noreferrer noopener">JPEGmini</a>, <a href="https://tinyjpg.com/" target="_blank" rel="noreferrer noopener">tinyjpg</a>, <a href="https://tinypng.com/" target="_blank" rel="noreferrer noopener">tinypng</a>, or <a href="https://ezgif.com/optimize" target="_blank" rel="noreferrer noopener">ezgif</a> for example. The quality will, in most cases, be maintained, while the weight will be considerably reduced.</p>
<p>The extension of the images is, there too, more than important. If it was still possible to ignore it on exclusively desktop consultations, it is no longer a question of ignoring this subject with the connection and data constraints: an image in .gif format will not, without a doubt, have the same weight as the same image in jpeg or png format.</p>
<p>Although the quality of a visual is important in a campaign, it is wise to ask yourself the right questions: Should you prioritize the maximum quality of an image, even if it means impacting its display time? We are, especially with the web and mobile, in a world of immediacy. It becomes laborious to wait for the display of a content. The information must be displayed instantly! Inflicting a waiting time to the recipient for the display of information can only negatively impact the click rate on a campaign.</p>
<h3 class="wp-block-heading" id="h-responsive-la-methode-des-media-queries">Responsive, the media queries method</h3>
<p>The CSS3 Media Queries specification defines the techniques for applying style sheets to the viewing devices used for HTML.</p>
<h4 class="wp-block-heading" id="h-historique">History</h4>
<p>With CSS2 and HTML4, it was already possible to specify a destination media for the application of one or several style sheets. This is how it was possible to associate additional CSS rules for printing, modifying the layout, favoring one element or making another useless for the paper output, for example a navigation menu. The tag is then duplicated for as many style sheets as necessary, and includes a <code>media</code> specifying the context in which the styles must be applied:</p>
<pre class="wp-block-code prettyprint"><code><You'll be able to see the screen on the map.
<This is the first time you'll be able to see the screen.</code></pre>
<p>The media attribute can take <em>(since CSS2)</em> the following values: <code>screen</code> <em>(Screens)</em> | <code>handheld</code> <em>(Mobile or small devices)</em> | <code>print</code> <em>(Print)</em> | <code>aural</code> <em>(CSS 2.0)</em> / <code>speech</code> <em>(CSS 2.1)</em> <em>(Voice synthesis)</em> | <code>Braille</code> <em>(Braille pages)</em> | <code>embossed</code> <em>(Braille printers)</em> | <code>projection</code> <em>(Projectors or presentations with slides)</em> | <code>tty</code> <em>(Terminal/police with fixed pitch)</em> | <code>tv</code> <em>(Television)</em> | <code>all</code> <em>(All precedents)</em>.</p>
<p>The philosophy of Media Queries <em>(or media requests)</em> is to offer a wider and more precise set of criteria, using properties and numerical values, as well as multiple combinations of these same criteria. The goal is to target destination devices more finely based on their intrinsic capabilities.</p>
<p>In most cases, <strong>we use media queries to produce specific improvements for mobile display</strong>which are directly concerned by criteria on the dimensions of the screen <em>(in terms of resolution and available space)</em> and on the tactile use.</p>
<p>Thus we will find most frequently rules for :</p>
<ul>
<li>Increase the size of the text.</li>
<li>Increase the size of controls and clickable areas <em>(for use with a finger)</em>.</li>
<li>Move the content to a single column.</li>
<li>Hide or show specific items.</li>
<li>Adjust dimensions and margins.</li>
</ul>
<p>The responsive email uses a multimedia request <em>(<code>@media</code>)</em> with a special set of CSS styles that act as conditional instructions or dynamic rules. Carefully planned, they can help make emails more readable on different screen sizes. Multimedia queries detect the screen size of a device, then activate different sets of rules based on the screen size. These can be very simple to implement or quite complex, depending on what you want to accomplish. They require more planning and testing than standard emails and do not work in all email clients.</p>
<h4 class="wp-block-heading" id="h-fonctionnement">Operation</h4>
<p>In the context of email, media types define the CSS styles to be used based on the screen size. This media type indicates <em>"If the email is displayed on a screen size of 480 pixels or less, use the following CSS code"</em>.</p>
<blockquote class="wp-block-quote is-style-default">
<p>"The CSS3 Media Queries specification defines techniques for applying style sheets based on the viewing devices used for HTML."</p>
</blockquote>
<p>This statement is to be adapted to emailing: media queries, a particular CSS3 code, allows to apply particular formatting according to the devices of consultation. Media queries are therefore, by their definition, the logical continuation of responsive web design. It is an integral part of responsive, since we dynamically adapt the design using CSS. Concretely, media queries indicate this:</p>
<blockquote class="wp-block-quote is-style-default">
<p>"If the viewing media has a width less than/superior to [value]pixels, then:"</p>
</blockquote>
<p>These additional rules can therefore be used to modify the layout, favouring one element or removing another that has become useless or too cumbersome. The media queries directives are integrated directly into the <code></code> of an HTML integration. It will then be necessary to use the <code>@media</code> followed directly by the type of media <em>(in general, <code>screen</code> for email marketing)</em>.</p>
<p>The writing of these queries is quite explicit: <strong>a media query is an expression whose value is always true or false</strong>. It is enough to associate the different possible declarations with a logical operator to define the set of conditions to be met for the application of the styles included in the adjacent block.</p>
<p>Logical operators can be :</p>
<ul>
<li><code>and</code> and",</li>
<li><code>only</code> : "only".</li>
<li><code>not</code> : "no"</li>
</ul>
<p>To get the equivalent of "or", simply list different media queries in a row, separated by commas: if one of them is valid, then the whole rule will be applied. In general, a media type is combined together <em>(<code>screen</code>, <code>all</code>...)</em> and an expression through <code>and</code>although a single expression can be used. The expression is always written in parentheses.</p>
<p>The following two examples target screens smaller than 640 pixels in width using the rule <code>max-width</code> associated with the value <code>640px</code>.</p>
<pre class="wp-block-code prettyprint"><code>@media screen and (max-width:640px) {
.block {
display:block;
}
}</code></pre>
<p>The combinations can be multiple. Here we are addressing a screen whose width resolution is between 200 and 640 pixels:</p>
<pre class="wp-block-code prettyprint"><code>@media screen and (min-width:200px) and (max-width:640px) {
.block {
display:block;
}
}</code></pre>
<p>Most of the criteria <em>(or features)</em> can be prefixed by <code>min-</code> and <code>max-</code> when they accept numerical values to define minimum or maximum values to be respected: <code>device-aspect-ratio</code> <em>(ratio of the output device, e.g. 16/9)</em>, <code>aspect-ratio</code> <em>(ratio of the display area)</em>, <code>device-height</code> <em>(dimension in height of the peripheral)</em>, <code>device-width</code> <em>(width dimension of the device)</em>, <code>width</code> <em>(dimension in width of the display area)</em>... Dimensions can be evaluated with units <em>(px, em)</em>.</p>
<p>The functionality <em>(or criteria)</em> The most commonly used width in email marketing remains the width, since it is the main constraint that leads us to use media queries and propose a more readable version. We will then talk about "breakpoints": A breakpoint is a milestone, a particular size from which we switch to another display style, other CSS properties.</p>
<p>Directly in the HTML code of the emailing we assign <code>class</code> and <code>id</code> to several content elements that will be displayed, or not, depending on the resolution of the recipient terminal, which will take into account this or that modification of typography size, colors, margins, positioning, etc...</p>
<h4 class="wp-block-heading" id="h-support">Support</h4>
<p>The first thing to be aware of is that it is not possible to have Media Queries in CSS style inline. The media queries must be filled in the <code></code>present in the <code></code> of the email. A responsive email on a client that does not support CSS in <code></code> is therefore already excluded.</p>
<p>To target <code>class</code> and <code>id</code>the syntax will be as follows:</p>
<pre class="wp-block-code prettyprint"><code>@media only screen and (max-width:600px) {
.width300px {
width:300px !important
}
}</code></pre>
<p>The support of media queries is quite good on all mail clients, as shown in this table:</p>
<figure class="wp-block-table"><table><thead><tr><th>Desktop</th><th>Mobile</th><th>Webmails</th></tr></thead><tbody><tr><td>v AOL Desktop</td><td>v Android 4.2.2 Mail</td><td>x AOL Mail </td></tr><tr><td>v Apple Mail</td><td>v Android 4.4.4 Mail</td><td>v G Suite </td></tr><tr><td>x IBM Notes 9</td><td>x AOL Alto Android app</td><td>v Gmail </td></tr><tr><td>v Outlook 2000-03</td><td>x AOL Alto iOS app </td><td>v Google Inbox </td></tr><tr><td>v Outlook 2007-16</td><td>v BlackBerry </td><td>x Outlook.com </td></tr><tr><td>v Outlook Express</td><td>v Gmail Android app </td><td>v Yahoo! Mail</td></tr><tr><td>v Outlook for Mac</td><td>x Gmail Android app IMAP </td><td></td></tr><tr><td>v Thunderbird</td><td>v Gmail iOS app </td><td></td></tr><tr><td>x Windows 10 Mail</td><td>x Gmail mobile webmail </td><td></td></tr><tr><td>v Windows Live Mail</td><td>v Google Inbox Android app </td><td></td></tr><tr><td></td><td>v Google Inbox iOS app </td><td></td></tr><tr><td></td><td>v iOS 10 Mail </td><td></td></tr><tr><td></td><td>v iOS 11 Mail </td><td></td></tr><tr><td></td><td>v Outlook Android app </td><td></td></tr><tr><td></td><td>v Outlook iOS app </td><td></td></tr><tr><td></td><td>v Windows Phone 8 Mail </td><td></td></tr><tr><td></td><td>v Yahoo! Mail Android app </td><td></td></tr><tr><td></td><td>v Yahoo! Mail iOS app</td><td></td></tr></tbody></table><figcaption class="wp-element-caption">Summary table of media queries support according to messaging solutions</figcaption></figure>
<h3 class="wp-block-heading" id="h-responsive-la-methode-fluid-hybrid">Responsive, the fluid hybrid method</h3>
<p>The Hybrid coding approach <em>(sometimes called "Spongy Coding")</em> is a direct reaction to mail clients such as Gmail <em>(on some versions)</em> that ignore media queries. Created by Fabio Carneiro, popularized by Mike Regan and Nicole Merlin, this technique still uses fluid tables and images which, unlike responsive emails with media queries, are "fluid by default" here. Instead of using media queries to trigger these fluid behaviors, <strong>Hybrid coding favors Microsoft's conditional comments to contain the width of tables on larger screens</strong>. Hybrid emails work according to the following principles:</p>
<ul>
<li>Tables and fluid elements by default.</li>
<li>The CSS property <code>max-width</code> to constrain the width of elements on desktop.</li>
<li>Outlook conditional comments to limit the width on Outlook.</li>
</ul>
<p>Let's look at a piece of code from a hybrid email a little closer:</p>
<pre class="wp-block-code prettyprint"><code><table role="presentation">
<tr>
<td align="center"><!--[if (gte mso 9)|(IE)]><table border="0" cellspacing="0" cellpadding="0" style="width:600px"><tr><td><![endif]-->
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px">
<tr>
<td><img src="monimage.jpg" width="400" style="display:block"></td>
</tr>
<tr>
<td><p style="margin:0">My text</p></td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></td>
</tr>
</table>
</code></pre>
<p>So here we use percentage values for table or image widths. This allows the email content to "fill" all possible screen sizes. To prevent the recipient from seeing a very wide email on his desktop, we need to add the CSS property <code>max-width</code> to the table and image. However, Microsoft Outlook does not currently understand this property. It will therefore be necessary to use conditional comments to create invisible fixed-width tables, which will only be present in Outlook. All elements are fluid by default, so our email works fine on all screen resolutions. And since it does not rely on any media query to trigger this responsive behavior, it also works on email clients that would not interpret media queries.</p>
<p>The advantage of the hydbrid method is that it supports all email clients. Since everything happens in the <em>(<code><body></code>)</em> and that no media query or style in the <code></code> is not necessary, this method works everywhere. Moreover, it will always be possible to add media queries to further improve the rendering on email clients supporting these requests. On the other hand, the hybrid method requires a particular work on the design of the email: since media queries are not possible, you will have to adopt a system of columns to obtain a correct graphic rendering on mobile. These same columns <em>(on a two-column side-by-side system)</em> will not be able to exceed a maximum width of 300 or 320 pixels wide, since this is the lowest resolution on mobile. This means that you must limit your email to a maximum width of 600 to 640 pixels wide for the desktop version.</p>
<p>Before implementing such a coding technique and method, or even before starting an email design, it is therefore important to consider these few questions:</p>
<ul>
<li>Should I consider mail clients that do not support media queries <em>(to be analyzed in relation to statistics and feedback from previous campaigns)</em> ?</li>
<li>How complex is my layout?</li>
<li>How comfortable am I with such code complexity?</li>
</ul>
<p>It takes a lot of practice and experimentation to develop hybrid emails. If you don't have the knowledge or time to invest in learning hybrid code, media queries and traditional responsive will do. Also, analyze any design before deciding how to code.</p>
<h2 class="wp-block-heading" id="h-integration-email-les-contenus-a-utiliser-avec-precaution">Email integration: content to be used with care</h2>
<p>HTML integration for email is a complex subject partly due to the way it is coded. But, as we have seen so far, its difficulty also lies in the support of HTML tags, attributes, and CSS properties depending on the email client. However, any emailing designer would like to avoid having his creativity limited by a set of too many constraints. However, before starting any creation, it is imperative to know the contents to be used with care, and those that will simply be banned. Let's get started.</p>
<h3 class="wp-block-heading" id="h-images-d-arriere-plan">Background images</h3>
<p>Sometimes it is necessary to use background images. Even if every emailing designer is quite nervous and reluctant to use background images, they are sometimes essential to bring some rhythm to the whole creative. If the subject of background images is sensitive, it is mainly because it is technically complex. Solutions exist, sometimes heavy and difficult, but they do exist. Campaign Monitor has even developed a <a href="https://backgrounds.cm/" target="_blank" rel="noreferrer noopener">background image generator for email</a> some time ago to simplify our lives.</p>
<p>Background images are therefore difficult to implement within an HTML email integration because the support is very complex. This requires a considerable amount of time in email rendering tests. Despite all the existing techniques, none of them allows a total support. Wherever possible, it is necessary to separate the textual content from the design. This avoids the need to export textual information as an image, or to use the background image technique.</p>
<h3 class="wp-block-heading" id="h-typographie">Typography</h3>
<h4 class="wp-block-heading" id="h-typos-standards-ou-websafe-font">Standard fonts or websafe font</h4>
<p>The so-called standard fonts or websafe, are fonts installed by default on the client machine. There are several different configurations <em>(Windows, Mac OS, Linux...)</em>and each configuration has its own basic font set <em>(Arial is provided on Windows but not on Mac OS, and conversely for Helvetica)</em>. In CSS, we will therefore, within an email, try to define a list of fonts <em>(or policy family)</em> more or less similar and compatible to ensure a homogeneous rendering for everyone.</p>
<p>The list of Websafe fonts is quite limited: Arial, Helvetica, Times New Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino, Garamond, Bookman, Comic Sans MS, Trebuchet MS, Arial Black, Impact. There are several categories of fonts: Sans-Serif <em>(sans serif fonts, similar to "stick" typefaces, without embellishment)</em>, Serif <em>(serif fonts)</em>, Monospace <em>(or fixed width font: each character takes the same width/height)</em>Fantasy, Script. Each of these categories includes several typefaces, more or less well supported on this or that operating system.</p>
<p>The main advantage of these fonts is that they do not require any additional loading since they are already present on the client computer <em>(and thus limits to the maximum the loading time for the display of an email, since no call to an external typography)</em>. The disadvantages: depending on the OS, you may not have all of them. Limiting yourself to these typographies also limits your creativity.</p>
<p>Unfortunately, there are some specificities on some fonts, making the choice of websafe fonts sometimes complex. For example, Symbol or Webdings fonts only work on IE, and will be substituted by other fonts on other browsers.</p>
<h4 class="wp-block-heading" id="h-webfont-typos-specifiques-typos-exotiques">Webfont, specific fonts, exotic fonts</h4>
<p>Which mail client supports web fonts? Apple Mail, Outlook 2011 for Mac, iOS Mail, Apple Mail, ipad and iphone <em>(other than GANGA account)</em>Android Mail <em>(other than GANGA account)</em>Thunderbird. Which mail client does not support web fonts? Lotus Notes 8, Lotus Notes 8.5, Gmail, Google Apps, Office 365, Yahoo!, Outlook.com, Outlook 2003/2007/2010/2013/2016, AOL, Free.</p>
<p>So keep in mind that the web font call is a rather perilous exercise, to be handled with care. Its support is still relatively weak. However, if you really want to use it, one method is to be preferred: In 2010, Google launched its own free font library: Google Fonts. Create a <code></code>at the top of your HTML integration, in the <code></code>. Within this element <code></code>use the police url.</p>
<pre class="wp-block-code prettyprint"><code></code></pre>
<p>Then, call the police in question first, in your property <code>font-family</code>followed by the typos or families of relief:</p>
<pre class="wp-block-code prettyprint"><code>font-family: 'Open Sans', sans-serif</code></pre>
<p>There are other methods of importing specific typos: The first is to specify a <code>@import</code> in the CSS code :</p>
<pre class="wp-block-code prettyprint"><code>@import url('https://fonts.googleapis.com/css?family=Open+Sans');</code></pre>
<p>The second method uses the query <code>@font-face</code> :</p>
<pre class="wp-block-code prettyprint"><code>@font-face {
font-family:'Open Sans';
font-style:normal;
font-weight:400;
src:local('Open Sans'),
local('OpenSans'),
url('https://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3bO3LdcAZYWl9Si6vvxL-qU.woff') format('woff');
}</code></pre>
<p>Ideally, and if the HTML integration allows it, always use the <code></code>.</p>
<div data-elementor-type="section" data-elementor-id="549982" class="elementor elementor-549982 elementor-location-single" data-elementor-post-type="elementor_library">
<div class="elementor-element elementor-element-7b800f9 e-con-full e-flex e-con e-parent" data-id="7b800f9" data-element_type="container" data-settings="{"content_width":"full","background_background":"classic","container_type":"flex"}" data-core-v316-plus="true">
<div class="elementor-element elementor-element-af87e42 e-con-full e-flex e-con e-child" data-id="af87e42" data-element_type="container" data-settings="{"content_width":"full","container_type":"flex"}">
<div class="elementor-element elementor-element-a8af8b7 elementor-widget elementor-widget-heading" data-id="a8af8b7" data-element_type="widget" data-widget_type="heading.default">
<div class="elementor-widget-container">
<p class="elementor-heading-title elementor-size-default">Need help?</p> </div>
</div>
<div class="elementor-element elementor-element-9349a23 elementor-widget elementor-widget-text-editor" data-id="9349a23" data-element_type="widget" data-widget_type="text-editor.default">
<div class="elementor-widget-container">
<p>Reading content isn't everything. Maybe the best thing to do is to call on us. No ?</p> </div>
</div>
</div>
<div class="elementor-element elementor-element-db0b1e9 elementor-widget__width-inherit elementor-widget elementor-widget-wp-widget-forminator_widget" data-id="db0b1e9" data-element_type="widget" data-widget_type="wp-widget-forminator_widget.default">
<div class="elementor-widget-container">
<div class="forminator-ui forminator-custom-form forminator-custom-form-564970 forminator_ajax" data-forminator-render="0" data-form="forminator-module-564970" data-uid="65142dc92e147"><br/></div><form
id="forminator-module-564970"
class="forminator-ui forminator-custom-form forminator-custom-form-564970 forminator_ajax"
method="post"
data-forminator-render="0"
data-form-id="564970"
data-design="none"
data-grid="open"
style="display: none;"
data-uid="65142dc92e147" action=""
><div role="alert" aria-live="polite" class="forminator-response-message forminator-error" aria-hidden="true"></div><div class="forminator-row"><div id="email-1" class="forminator-field-email forminator-col forminator-col-12"><div class="forminator-field"><input type="email" name="email-1" value="" placeholder="E-mail" id="forminator-field-email-1_65142dc92e147" class="forminator-input forminator-email--field" data-required="1" aria-required="true" /></div></div></div><div class="forminator-row forminator-hidden"><input type="hidden" id="hidden-1_65142dc92e147" name="hidden-1" value="Comment coder un template email responsive en HTML et CSS" /></div><input type="hidden" name="referer_url" value="" /><div class="forminator-row forminator-row-last"><div class="forminator-col"><div class="forminator-field"><button class="forminator-button forminator-button-submit">I need help!</button></div></div></div><input type="hidden" id="forminator_nonce" name="forminator_nonce" value="339f2d641b" /><input type="hidden" name="_wp_http_referer" value="/en/guides/code-a-email/" /><input type="hidden" name="form_id" value="564970"><input type="hidden" name="page_id" value="562814"><input type="hidden" name="form_type" value="default"><input type="hidden" name="current_url" value="https://www.badsender.com/en/guides/code-a-email/"><input type="hidden" name="render_id" value="0"><input type="hidden" name="action" value="forminator_submit_form_custom-forms"><input type="hidden" name="trp-form-language" value="en"/></form> </div>
</div>
</div>
</div>
<h3 class="wp-block-heading" id="h-retina-et-la-qualite-des-images">Retina and image quality</h3>
<p>Besides screen sizes, the mobile email revolution introduces another challenge for email integrators: high-resolution screens. These screens, often referred to as Retina displays, have the power to enhance an email campaign by giving subscribers a better experience. In 2010, Apple released the iPhone 4, which then featured what Apple called a Retina display. This type of display was one of the first high-resolution displays <em>(high resolution of dots per inch, pixel density on the screen)</em>. Plus DPI <em>(Dots per inch)</em> is high, the more detailed and clear the images and text on this screen are. Other display manufacturers have also been quick to jump on the bandwagon, and Retina displays are now found on tablets, laptops and desktops.</p>
<p>Because of the way high-resolution displays work, images not optimized for Retina end up appearing blurry and pixelated in an email on these same screens.</p>
<figure class="wp-block-image size-full"><a href="https://www.badsender.com/wp-content/uploads/2023/02/image-13.png"><img decoding="async" loading="lazy" width="523" height="299" src="https://www.badsender.com/wp-content/uploads/2023/02/image-13.png" alt="" class="wp-image-558042" srcset="https://www.badsender.com/wp-content/uploads/2023/02/image-13.png 523w, https://www.badsender.com/wp-content/uploads/2023/02/image-13-300x172.png 300w, https://www.badsender.com/wp-content/uploads/2023/02/image-13-18x10.png 18w" sizes="(max-width: 523px) 100vw, 523px" /></a></figure>
<p>As users get used to using Retina displays, they also expect text and images to appear crisp and clear. If you don't optimize these elements, recipients see a degraded design, which can lead to a loss of brand trust.</p>
<h4 class="wp-block-heading" id="h-technique">Technique</h4>
<p>High resolution displays have twice as many pixels per inch as other traditional displays. Therefore, the images in an email need to be twice as large for Retina screens to display more pixels. So, first of all, it is necessary to design your email images with twice the size. Then, in the HTML code, we call the original display size provided in the attributes <code>width</code> and <code>height</code>to correctly scale this much larger image. Thus, for an image that should originally have a width of 120 pixels and a height of 50 pixels, we will work on a width of 240 pixels for a height of 100 pixels. However, in the HTML code, the definition of its attributes <code>width</code> and <code>height</code> will remain as follows:</p>
<pre class="wp-block-code prettyprint"><code><img src="nomdelimage.jpg" width="120" height="50" style="display:block;"></code></pre>
<p>It is also possible to use Retina images for background images, although the technique is a bit more complex.</p>
<h2 class="wp-block-heading" id="h-code-email-les-contenus-a-ne-pas-utiliser">Email code, content not to use</h2>
<h3 class="wp-block-heading" id="h-javascript">Javascript</h3>
<p>JavaScript is a programming language that elaborates interactive web content and allows, on websites, to propose transition effects, animation, such as auto-scrolling effects, slides and carousels, but also to check, validate and send forms <em>(among other utilities)</em>. However, in the world of email marketing, adding javascript to an email code will ensure that your campaign is sent directly to your recipients' Junk Box.</p>
<p>Why is this? On a web page, it is the Internet user who decides which web pages to visit. He will decide not to visit pages that he thinks may contain elements that could harm his computer or his security. With emails, the sender has the most control over the emails sent, and the recipient has much less control. This is where anti-spam robots and filtering techniques come into play: the security settings of email programs prevent Javascript from running in emails as a security measure to prevent viruses, among other things, or because the scripts in the email could hide malicious content.</p>
<h3 class="wp-block-heading" id="h-element-iframe">Iframe element</h3>
<p>This is an HTML tag that allows you to embed an HTML page within another HTML document. Iframe for Inline Frame. The iframe tag allows you to insert elements from another server into a web page without the visitor being aware of it. And this is the problem of iframe in emailing: As iframes can potentially create a link to malicious content <em>(like JavaScript)</em>Many email clients disable them. The support of this tag is therefore very low.</p>
<figure class="wp-block-table"><table><thead><tr><th>Customer</th><th>Display of the iframe</th></tr></thead><tbody><tr><td>AOL Webmail </td><td>No</td></tr><tr><td>Gmail </td><td>No</td></tr><tr><td>Windows Live Hotmail </td><td>No</td></tr><tr><td>Yahoo! Mail </td><td>No</td></tr><tr><td>AOL 9 </td><td>No</td></tr><tr><td>Apple Mail ¾ </td><td>Yes</td></tr><tr><td>Entourage 2008 </td><td>No</td></tr><tr><td>Lotus Notes 6/7 </td><td>No</td></tr><tr><td>Lotus Notes 8 </td><td>Yes</td></tr><tr><td>Outlook 2000 </td><td>Yes</td></tr><tr><td>Outlook XP/2003/2007/2010 </td><td>No</td></tr><tr><td>Thunderbird </td><td>Yes</td></tr><tr><td>Windows Mail </td><td>Yes</td></tr><tr><td>Blackberry </td><td>No</td></tr><tr><td>iPhone/iPad </td><td>Yes</td></tr><tr><td>Windows Mobile 5 </td><td>No</td></tr><tr><td>Windows Mobile 6 </td><td>Yes</td></tr><tr><td>Android (default client) </td><td>Yes</td></tr><tr><td>Android (Gmail client)</td><td>No</td></tr></tbody></table><figcaption class="wp-element-caption">Table of iframe support according to messaging solutions</figcaption></figure>
<h3 class="wp-block-heading" id="h-flash">Flash</h3>
<p>Flash should no longer be integrated into an email: first of all, its support is absolutely deplorable. Only Mac Mail will display the content. Most mail clients will not display Flash content, nor its alternative content. But, in addition, security warnings will also be displayed on some mail clients <em>(Outlook)</em>. The Flash technique should therefore definitely be banned.</p>
<h3 class="wp-block-heading" id="h-formulaires-html">HTML Forms</h3>
<p>Forms are important because they allow you to share data from subscribers or customers. The problem is that a form in an email is not secure and, even if there were a way to do this, the email clients that subscribers use may see the form as a security risk and send an alert to the subscriber that would discourage them from completing it.</p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><a href="https://www.badsender.com/wp-content/uploads/2023/02/image-14.png"><img decoding="async" loading="lazy" width="406" height="133" src="https://www.badsender.com/wp-content/uploads/2023/02/image-14.png" alt="Example of a modal window displayed when receiving an email with a form." class="wp-image-558043" srcset="https://www.badsender.com/wp-content/uploads/2023/02/image-14.png 406w, https://www.badsender.com/wp-content/uploads/2023/02/image-14-300x98.png 300w, https://www.badsender.com/wp-content/uploads/2023/02/image-14-18x6.png 18w" sizes="(max-width: 406px) 100vw, 406px" /></a><figcaption class="wp-element-caption">Example of a modal window displayed when receiving an email with a form.</figcaption></figure></div>
<p>In addition, text fields, text inputs, radio buttons and checkboxes are simple HTML form elements, but the submit button often requires JavaScript. Some email clients will display the forms, but unfortunately subscribers will not be able to send them. Avoid HTML forms and consider an alternative.</p>
<h4 class="wp-block-heading" id="h-alternatives">Alternatives</h4>
<h5 class="wp-block-heading" id="h-questions-a-choix-multiples">Multiple choice questions</h5>
<p>It is possible, in order to obtain the same feedback as a form, to propose to the recipient answers to the questions asked in an email, and to let him choose his answers. Depending on the answer clicked, the tracking will be different, or the redirection page different. The MCQ method can be an alternative if you want to get answers to questions directly in your email campaigns.</p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><a href="https://www.badsender.com/wp-content/uploads/2023/02/image-15.png"><img decoding="async" loading="lazy" width="447" height="414" src="https://www.badsender.com/wp-content/uploads/2023/02/image-15.png" alt="Example of an alternative method to forms in emails." class="wp-image-558044" srcset="https://www.badsender.com/wp-content/uploads/2023/02/image-15.png 447w, https://www.badsender.com/wp-content/uploads/2023/02/image-15-300x278.png 300w, https://www.badsender.com/wp-content/uploads/2023/02/image-15-13x12.png 13w" sizes="(max-width: 447px) 100vw, 447px" /></a><figcaption class="wp-element-caption">Example of an alternative method to forms in emails.</figcaption></figure></div>
<h5 class="wp-block-heading" id="h-amp">AMP</h5>
<p>AMP for Accelerated Mobile Pages: an initiative by Google in 2015 to speed up the loading time of mobile pages by eliminating unnecessary codes and scripts such as Javascript. Due to its popularity and efficiency, AMP has grown. Now, it is not only used to load pages or articles faster: It can create carousels on mobile, accept user feedback via forms, create personalized interactions, etc... Logically, the evolution of AMP also aims to expand to one of the most popular communication channels in the world: email.</p>
<h6 class="wp-block-heading" id="h-amp4email">AMP4email</h6>
<p>The goal is to improve and modernize the messaging experience by supporting dynamic content and interactivity while ensuring user security.</p>
<p>By introducing AMP into email, recipients could then perform tasks typically reserved for websites. AMP could be a game changer for the impact of email and promises more engaging, interactive and actionable email experiences. As a result, Google presents the following possibilities:</p>
<ul>
<li>Design interactive components using an extensive library of supported AMP components, such as carousel, forms, lists...</li>
<li>Help email designers to update their content automatically and offer interactivity to users.</li>
</ul>
<p>The most important advantage of AMP is probably that users could act quickly via email, without having to visit a separate landing page: this limits the number of steps and interactions, which is only positive in an email campaign, as the conversion rate can be greatly optimized: tasks such as filling out a form, scheduling an appointment, browsing interactive catalogs, lists, saving them... AMP would also use dynamic content to offer automatically updated emails, without a lifespan</p>
<h6 class="wp-block-heading" id="h-technique-0">Technique</h6>
<p>Until now, an email can be designed in two formats: plain text version, or HTML version. The AMP version is now to be considered. This means that when you send an email, the AMP version will appear on email clients supporting AMP, and will use the HTML or plain text version for all clients not supporting AMP.</p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><a href="https://www.badsender.com/wp-content/uploads/2023/02/image-16.png"><img decoding="async" loading="lazy" width="152" height="182" src="https://www.badsender.com/wp-content/uploads/2023/02/image-16.png" alt="Email text version" class="wp-image-558045" srcset="https://www.badsender.com/wp-content/uploads/2023/02/image-16.png 152w, https://www.badsender.com/wp-content/uploads/2023/02/image-16-10x12.png 10w" sizes="(max-width: 152px) 100vw, 152px" /></a><figcaption class="wp-element-caption">Email text version</figcaption></figure></div>
<div class="wp-block-image">
<figure class="aligncenter size-full"><a href="https://www.badsender.com/wp-content/uploads/2023/02/image-17.png"><img decoding="async" loading="lazy" width="381" height="173" src="https://www.badsender.com/wp-content/uploads/2023/02/image-17.png" alt="Email in HTML format" class="wp-image-558046" srcset="https://www.badsender.com/wp-content/uploads/2023/02/image-17.png 381w, https://www.badsender.com/wp-content/uploads/2023/02/image-17-300x136.png 300w, https://www.badsender.com/wp-content/uploads/2023/02/image-17-18x8.png 18w" sizes="(max-width: 381px) 100vw, 381px" /></a><figcaption class="wp-element-caption">Email in HTML format</figcaption></figure></div>
<div class="wp-block-image">
<figure class="aligncenter size-full"><a href="https://www.badsender.com/wp-content/uploads/2023/02/image-18.png"><img decoding="async" loading="lazy" width="342" height="305" src="https://www.badsender.com/wp-content/uploads/2023/02/image-18.png" alt="Email in AMP4email format" class="wp-image-558047" srcset="https://www.badsender.com/wp-content/uploads/2023/02/image-18.png 342w, https://www.badsender.com/wp-content/uploads/2023/02/image-18-300x268.png 300w, https://www.badsender.com/wp-content/uploads/2023/02/image-18-13x12.png 13w" sizes="(max-width: 342px) 100vw, 342px" /></a><figcaption class="wp-element-caption">Email in AMP4email format</figcaption></figure></div>
<p>The AMP version will not affect the HTML or plain text versions of the email. AMP in email marketing would support most of the AMP components already used for AMP pages, including:</p>
<ul>
<li>Dynamic content <em>(<code>amp-from</code>, <code>amp-selector</code>, <code>amp-bind</code>, <code>amp-state</code>, <code>amp-list</code>, <code>amp-mustache</code>)</em></li>
<li>Presentation <em>(<code>amp-acordion</code>, <code>amp-carousel</code>, <code>amp-sidebar</code>, <code>amp-image-lightbox</code>, <code>amp-lightbox</code>, <code>amp-fit-text</code>, <code>amp-timeage</code>)</em></li>
<li>Media <em>(<code>amp-img</code>, <code>amp-anim</code>)</em></li>
</ul>
<p>AMP for Email is a subset of AMP that, like AMP, provides Javascript-like functionality for email. Since all email clients block Javascript by default, AMP offers a limited and secure alternative to Javascript without giving senders the ability to execute code in their email. The "AMP HTML for Email spec" specification involves adding a new "text-x-amphtml" MIME part to your email address containing AMP HTML markup. The reasoning is that AMP-enabled email clients would then render this part instead of the HTML part and other non-AMP clients would continue to render the HTML part.</p>
<h6 class="wp-block-heading" id="h-controverses">Controversies</h6>
<p>If interactivity seems to be an advantage in an email, it can become a disadvantage when viewing websites. AMP would blur the line between emails and websites. Its detractors also see in this technique another way for Google to control and insert itself in the web experience of its users: the motivations would therefore be less focused on "user experience" than it would seem.</p>
<p>Google also hopes that other email clients will also adopt AMP. This is also where the problem lies: not only does Google ask email integrators to do a new job in addition to the one they had to do until now. But if Google allows itself, Microsoft or another system could just as easily create its own language. The complexity of an email campaign will be even more affected.</p>
<h6 class="wp-block-heading" id="h-conclusion">Conclusion</h6>
<p>There are still a lot of grey areas when it comes to AMP: will all actions taken from an AMP-encoded email be trackable? Will senders have access to analytics showing them who interacted with their emails? Beyond that, it's unclear whether there will be an option for users to disable AMP in favor of normal HTML emails. Also, the release date of this language and its support are still unclear for the moment. Finally, emailgeeks insist that it would be better to focus on existing HTML and CSS standards to allow forms, CSS animations and interactivity instead of extending a controversial specification controlled by Google to the email environment.</p>
<h3 class="wp-block-heading" id="h-medias-integres">Integrated media</h3>
<p>Video is engaging and entertaining. Including video in an email can result in a 19% increase in open rate and click-through rate would increase by over 50%. However, this media will not display in the inbox unless your subscriber's email client supports the HTML5 format and tags. Since only one popular email client, Apple Mail, supports these tags, it's best to avoid embedded media and consider an alternative. Consider animated gifs or Kristian Robinson's "Fake Video" technique. To send audio files, share a link to an audio file.</p>
<p>Using a play button above a static image is probably the easiest way to link to video content hosted on site.</p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><a href="https://www.badsender.com/wp-content/uploads/2023/02/image-19.png"><img decoding="async" loading="lazy" width="440" height="265" src="https://www.badsender.com/wp-content/uploads/2023/02/image-19.png" alt="Example of a player added above a still image." class="wp-image-558048" srcset="https://www.badsender.com/wp-content/uploads/2023/02/image-19.png 440w, https://www.badsender.com/wp-content/uploads/2023/02/image-19-300x181.png 300w, https://www.badsender.com/wp-content/uploads/2023/02/image-19-18x12.png 18w" sizes="(max-width: 440px) 100vw, 440px" /></a><figcaption class="wp-element-caption">Example of a player added above a still image.</figcaption></figure></div>
<p>Another very easy way to give the illusion of a video in an email is to use an animated gif. The gif format is widely supported, but keep in mind that it doesn't work everywhere: In Outlook 2007, 2010, 2013 and Windows Phone 7, only the first image of your GIF file will be displayed. So make sure that all key information is in that first image. Also, be aware of the weight of your animated gif.</p>
<h2 class="wp-block-heading" id="h-eco-conception-et-accessibilite">Eco-design and accessibility</h2>
<h3 class="wp-block-heading" id="h-poids-de-vos-template-emails">Email template weight</h3>
<p>The weight of an HTML file as well as the attached images is a particularly important subject in emailing. It impacts several important points of a good campaign: its deliverability, its loading time. To get an idea of the loading time required to display an email, here is a small illustration of the loading time of a 1 MB email on mobile networks. By analyzing this document, we recommend that you keep the weight of your email at <em>(images + HTML file)</em> less than 1 Mb <em>(preferably around 500 kb)</em> to provide an appropriate loading experience, even for those who read your emails with limited download speed.</p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><a href="https://www.badsender.com/wp-content/uploads/2023/02/image-20.png"><img decoding="async" loading="lazy" width="434" height="431" src="https://www.badsender.com/wp-content/uploads/2023/02/image-20.png" alt="Loading time for a 1Mb email depending on the recipient's connection." class="wp-image-558049" srcset="https://www.badsender.com/wp-content/uploads/2023/02/image-20.png 434w, https://www.badsender.com/wp-content/uploads/2023/02/image-20-300x298.png 300w, https://www.badsender.com/wp-content/uploads/2023/02/image-20-150x150.png 150w, https://www.badsender.com/wp-content/uploads/2023/02/image-20-12x12.png 12w" sizes="(max-width: 434px) 100vw, 434px" /></a><figcaption class="wp-element-caption">Loading time for a 1Mb email depending on the recipient's connection.</figcaption></figure></div>
<h4 class="wp-block-heading" id="h-le-poids-des-images">The weight of images</h4>
<p>Images are a considerable resource in the loading time of an email. If an email may seem to take a long time to download and display, it may be due to the weight of the attached images. Connection speeds are variable, and with mobile devices now ubiquitous, it is essential to optimize the number and weight of images to improve the loading speed. To do this, you need to:</p>
<ul>
<li>Choose the right image formats: GIF, JPEG, PNG. Choose the extension according to the quality, the content, and the desired rendering of the image.</li>
<li>Use image "optimizers" to reduce the weight, while maintaining the best possible quality.</li>
<li>Make sure that the server where your images are hosted will be able to display them quickly on a large scale.</li>
<li>Use as few images as possible: each image you include in your email will be downloaded from your server. If you have 20 images, that means 20 requests to the server.</li>
</ul>
<h4 class="wp-block-heading" id="h-le-poids-du-code-html-css">The weight of HTML CSS code</h4>
<p>Should we restrict ourselves to a certain weight for the HTML file? Keep in mind: less is more! If the weight of an HTML file is reduced to its minimum, its loading time will be optimized! Moreover, you should know that Gmail truncates any content after the 102<sup>ers</sup> kilobytes of an email.</p>
<p>To reduce the weight of an HTML file, you must first think about it upstream, before any integration begins: the integration method <em>(responsive coding, hybrid)</em> can impact the total weight of an HTML file. You should almost think about the weight of the file even further upstream, during the graphic creation of the email: a very "high" email, with a complex responsive version, requiring many media queries, should get your attention!</p>
<p>To reduce the size of the HTML file, remove all media queries, styles, attributes, properties, comments that are not absolutely necessary. You can also decide to "minify" your HTML file, by removing the indentation, but make sure that the CSS properties and the HTML code will remain unchanged.</p>
<h3 class="wp-block-heading" id="h-hauteur">Height</h3>
<p>Outlook 2007 and 2010 use the Microsoft Word rendering engine to display an email. Microsoft Word offers different display modes. Outlook uses the "Web" view. Within this mode there are text limits. If the limit is exceeded, a line break is automatically inserted. The last value returned was 23.7 inches, or about 1790 pixels. To avoid this problem, split your integration into separate tables.</p>
<h3 class="wp-block-heading" id="h-semantique">Semantics</h3>
<p>Semantic HTML is the use of HTML markup to enhance the semantics of a website. <em>(the meaning)</em> of the information contained, i.e. its meaning, rather than simply defining its presentation <em>(or appearance)</em>. Semantic HTML is processed by common browsers, but also by many other user agents.</p>
<p>For example, recent HTML specifications discourage the use of the <code><i></code>which indicates an italic font style, in favor of semantically more precise tags, such as <code><em></code>which indicates an emphasis. It is the CSS that then specifies whether this emphasis is represented by an italic style, a bold style, an underline, a slower or stronger pronunciation, etc. Tagging information in different ways allows Web agents to <em>(or user-Agent)</em> such as search engines and other software to accurately assess the importance of the text.</p>
<p>If semantics is starting to appear in email, it is mainly for accessibility reasons.</p>
<h4 class="wp-block-heading" id="h-accessibilite">Accessibility</h4>
<p>Accessibility includes notions that we can no longer ignore. The accessibility of an email is not only about its support on email clients, its readable design, the ability to understand the information, or the presence of a full text version or a link to a mirror page. Accessibility also means being able to work with assistive tools. And this is where semantics also comes into play. Assistive tools are screen readers, magnifiers, software to accentuate contrast or tints, the ability to navigate through the email without the use of the mouse...</p>
<p>The new good practices recommend using the right tools for a better understanding: using <code><p></code> for paragraphs <code><ul></code> and <code><li></code> for bulleted lists <code><table></code> for tables... Finally, semantic markup in an email will have an accessibility function mainly for screen readers who, by scanning the content of the email, will then be able to correctly define titles, lists, emphasized texts, specific texts, quotes, etc...</p>
<h2 class="wp-block-heading" id="h-boites-de-reception-les-clients-mails-et-os">Inboxes: mail clients and OS</h2>
<p>Web developers consider a handful of browsers when designing and building a website. Standards-based Web design has brought most browsers to relative parity. But in the email world, there are dozens of email clients, some of which have been around for decades. Large, slow-moving companies still have employees who rely on outdated clients such as Lotus Notes or Outlook 2000.</p>
<p>Besides email software, webmails present twice as many problems: you are forced to consider not only how the email client itself displays and interprets HTML and CSS, but also how the browser in which the client is displayed interprets those same languages. An email displayed in Gmail on Firefox can look very different from an email in Gmail on Internet Explorer 8.</p>
<p>With the exponential growth of mobile, a new scene for email clients has materialized. Here is a non-exhaustive list of the most used email clients.</p>
<h3 class="wp-block-heading" id="h-clients-email-desktop">Desktop email clients</h3>
<p>Desktop clients or email software are the traditional way to read email, as they are strongly linked to desktop environments. Actual usage is dominated by Outlook. But as the number of mobile readers increases, desktop viewing continues to experience a significant decline.</p>
<h4 class="wp-block-heading" id="h-microsoft-windows">Microsoft Windows</h4>
<p>Microsoft's Outlook is by far the most popular software in the world. For years, Outlook has been integrated into the Windows operating system, which has ensured its widespread use in homes and businesses.</p>
<h5 class="wp-block-heading" id="h-outlook-2007-2010-2013">Outlook 2007/2010/2013</h5>
<p>In 2007, Microsoft chose to replace the HTML rendering engine of Outlook that was previously based on Internet Explorer 6 with a rendering engine based on Word. As a result, Outlook 2007 has catastrophic CSS support. The 2010 and 2013 versions suffer from the same problem.</p>
<h6 class="wp-block-heading" id="h-commentaires-conditionnels">Conditional comments</h6>
<p>Conditional comments are actually used to provide Outlook-specific styles or HTML elements. It works the same way as targeting Internet Explorer when designing a website, but here we target Microsoft Office, or "mso". Precede the comment with <code>gt</code> <em>(for greater than)</em> will target newer versions to the targeted version. Precede the comment with <code>lt</code> <em>(for lesser than)</em> will target older versions to the targeted version. Add a <code>e</code> à <code>gt</code> or <code>lt</code> will allow to target higher, lower or equal versions, respectively.</p>
<pre class="wp-block-code prettyprint"><code><!--[if gte mso 9]>-->
/* Your Outlook-specific CSS comes here */</code></pre>
<p>In the example above for example, <code>gte</code> is added so that the comment applies only to Microsoft Office versions greater than or equal to 9<sup>ème</sup> version. Version 9 of Outlook corresponds to Office 2000. Here is the list of the different versions and their correspondences:</p>
<ul>
<li>Outlook 2000: Version 9</li>
<li>Outlook 2002: Version 10</li>
<li>Outlook 2003: Version 11</li>
<li>Outlook 2007: Version 12</li>
<li>Outlook 2010: Version 14</li>
<li>Outlook 2013: Version 15</li>
</ul>
<p>Conditional comments are remarkable for eliminating bugs and greatly reducing Outlook-related coding issues.</p>
<h6 class="wp-block-heading" id="h-dpi">DPI</h6>
<p>DPI stands for "dots per inch". In French: points par pouce. Computer screens are usually configured in 72 dpi149 <em>(at least that's what was set in the 1990s)</em>This is 72 pixels by 72 pixels, or 5184 pixels in a square 2.54 cm wide by 2.54 cm high. This changes in 2011, when the fictitious resolution of 96 dpi takes over. But a 120 dpi resolution becomes the default setting on most new high-resolution laptops <em>(HiDPI devices)</em> or perhaps the machine is configured that way for accessibility reasons. However, when a higher DPI is used, all text and graphic elements are scaled, as when you zoom in on text from Mozilla Firefox for example.</p>
<p>However, since Outlook uses Microsoft Word to render an email, the rendering on Outlook in 120 DPI will be affected by this change. The code will be modified, but only on certain parts, while leaving other parts unchanged. Specifically, the pixel values of the <code>width</code> and <code>height</code> of <code><table></code> and <code><td></code> will remain unchanged <em>(so, in pixels)</em> when the other pixel values in the email will be transformed into points <em>(the property <code>font-size</code> for example)</em>. This combination of non-evolving values <em>(pixels)</em> and evolving values <em>(dot)</em> creates rendering problems that we see in Outlook at 120 DPI.</p>
<p>A solution exists to overcome these rendering problems:</p>
<ul>
<li>Add an XML Namespace to the tag <code><html></code>. This point is essential for Outlook to interpret the changes to be made.</li>
</ul>
<pre class="wp-block-code prettyprint"><code><html xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office"></code></pre>
<ul>
<li>Correct the DPI for images. We'll add a piece of code specific to Outlook just before closing the <code></code>. This piece of code allows us to force the desired DPI parameter, which is 96.</li>
</ul>
<pre class="wp-block-code prettyprint"><code><!--[if gte mso 9]>-->
96</code></pre>
<ul>
<li>Use widths and heights as CSS properties instead of attributes. This makes the task a little more difficult, but it is essential <em>(and in the end, it's just a good habit to get into)</em>. This is only necessary when widths and heights are defined in pixels of course, since the percentage is already a scalable value. Thus :</li>
</ul>
<pre class="wp-block-code prettyprint"><code><table width="600"></code></pre>
<p>Will become :</p>
<pre class="wp-block-code prettyprint"><code><table style="width:600px"></code></pre>
<p>And the same goes for cells! Keep this fix in mind for anything that might contain attributes with the unit "pixel" after all: <code>cellpadding</code>, <code>cellspacing</code>Outlook specific codes for hybrid emails...</p>
<h6 class="wp-block-heading" id="h-image-de-fond">Background image</h6>
<p>Setting up background images in Outlook is a particularly perilous exercise. A particular technique uses the VML language <em>(Vector Markup Language)</em> to ensure the display of background images in Microsoft's Outlook suite of email clients. Campaign Monitor has developed a <a href="https://backgrounds.cm/" target="_blank" rel="noreferrer noopener">bulletproof" background image generator</a> based on this technique.</p>
<h6 class="wp-block-heading" id="h-image-de-fond-et-dpi">Background image and DPI</h6>
<p>The width in pixels and the height entered in the cell containing the background image in question are not correctly transcribed at 120 DPI, even if they are well entered in CSS properties. As a result, the cell remains at the defined width and height, and the content is completely cut off.</p>
<p>For this, a trick exists. Replace the tag at the top of the code with the following piece of code:</p>
<pre class="wp-block-code prettyprint"><code><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"
xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoftcom:office:office"></code></pre>
<p>And then add, just before closing the tag, the following piece of code:</p>
<pre class="wp-block-code prettyprint"><code><!--[if mso]>--></code></pre>
<h6 class="wp-block-heading" id="h-call-to-action">Call to action</h6>
<p>Good email marketing practices require that all "Call to action" be generated in HTML and CSS: first of all, this allows for immediate display of this essential content without downloading or displaying the necessary images. In addition, it also makes it easier to modulate the size of the element using media queries on the responsive version of the email, but also improves the accessibility of the email, as the data in the element will, perhaps, be more easily readable and better interpreted by voice readers or other accessibility tools.</p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><a href="https://www.badsender.com/wp-content/uploads/2023/02/image-21.png"><img decoding="async" loading="lazy" width="528" height="88" src="https://www.badsender.com/wp-content/uploads/2023/02/image-21.png" alt="Example of button created in HTML and CSS in an email." class="wp-image-558050" srcset="https://www.badsender.com/wp-content/uploads/2023/02/image-21.png 528w, https://www.badsender.com/wp-content/uploads/2023/02/image-21-300x50.png 300w, https://www.badsender.com/wp-content/uploads/2023/02/image-21-18x3.png 18w" sizes="(max-width: 528px) 100vw, 528px" /></a><figcaption class="wp-element-caption">Example of button created in HTML and CSS in an email.</figcaption></figure></div>
<p>However, a CTA sometimes implies a methodology of use and visual recognition somewhat "returned in the standards" and in the habits of the recipient <em>(border, rounded edges, fully clickable button)</em>. So many graphic properties and interactions that are difficult to reproduce in a complex mail client like Outlook. Indeed, the <code>display</code>which would make the <code><a></code> fully clickable by assigning a fixed width, height and line-height, is laborious to implement in an email. Moreover, the CSS properties that allow to reproduce the rounded edge effect will also be difficult to interpret on most email clients.</p>
<p>Campaign Monitor has also made life much easier for email integrators by offering <a href="https://buttons.cm/" target="_blank" rel="noreferrer noopener">a platform generating a code</a>This code will give a more than correct rendering on most of the expected mail clients. On Outlook, the desired effects and rendering will be obtained using conditional comments and VML code. The main disadvantage of this solution is the duplication <em>(according to the criteria entered)</em> of the button, i.e. the generation of two links <em>(identical)</em> to be modified during an update. Finally, the difficulty and limitations come from the fact that the width of the button is fixed and does not adapt to its content, and that a CTA with more than one line of text cannot be considered.</p>
<p>You should also know that it will not be possible for you to <em>(for the moment)</em> to combine the use of "Bulletproof buttons" and "Bulletproof background images", because Outlook does not support nested VML elements.</p>
<h6 class="wp-block-heading" id="h-cellule-vide">Empty cell</h6>
<p>In Outlook 2013, empty table cells, or cells containing a <code></code> have a minimum height of about 15 pixels, regardless of the CSS property <code>height</code> that you have defined.</p>
<p>This can be annoying when you use empty cells to create margins between paragraphs, internal cell margins, or, why not, horizontal lines. But there is a solution. If you have an empty cell the kind :</p>
<pre class="wp-block-code prettyprint"><code><td style="height:5px"></code></pre>
<p>Outlook will therefore give this cell a minimum size of 15 pixels high, unless you add a <code>style="line-height:5px; font-size:5px"</code> where 5px would be the height of the cell you are looking for. This gives us :</p>
<pre class="wp-block-code prettyprint"><code><td style="height:5px; font-size:5px; line-height:5px"></code></pre>
<h6 class="wp-block-heading" id="h-google-font">Google Font</h6>
<p>In Outlook 2010 and 2013, non-web safe fonts are replaced by Times New Roman, regardless of the backup fonts implemented in the code. A 1<sup>era</sup> solution would be to target only Outlook with conditional comments and to assign to all cells with text in specific typeface <em>(via a <code>class</code> for example)</em> this code:</p>
<pre class="wp-block-code prettyprint"><code><!--[if mso]>-->
.myfont {
font-family:Arial, sans-serif !important
}</code></pre>
<p>Another solution exists, which allows to display correctly the backup fonts on Outlook. To do this, add the following style to your code:</p>
<pre class="wp-block-code prettyprint"><code>[style*="Open Sans"] {
font-family:'Open Sans', Arial, sans-serif !important
}</code></pre>
<p>Then, simply move the call to the specific typeface to the end of your property <code>font-family</code> :</p>
<pre class="wp-block-code prettyprint"><code><p style="font-family:Arial, sans-serif, 'Open Sans'"></code></pre>
<h5 class="wp-block-heading" id="h-outlook-2000-2002-2003">Outlook 2000/2002/2003</h5>
<p>Unlike its more modern counterparts, early versions of Outlook tend to display HTML emails better simply because of the difference in rendering engine. Prior to 2007, Outlook email clients were powered by the Internet Explorer engine. Although they were better at rendering HTML than modern Outlook clients, these versions still relied on Internet Explorer browser technology and thus shared the same problems.</p>
<h5 class="wp-block-heading" id="h-windows-live-mail">Windows Live Mail</h5>
<p>Live Mail is a free desktop client for Windows, integrated with the Windows Essentials suite of software. Considering Microsoft's track record, this mail client is surprisingly good. Unfortunately, although it supports CSS, its total market share is relatively small.</p>
<h5 class="wp-block-heading" id="h-lotus-ibm-notes">Lotus/IBM Notes</h5>
<p>IBM Notes - formerly Lotus Notes - is a Windows desktop client with similar functionality to Microsoft Outlook. Its CSS support is just as poor <em>(or worse)</em> than the latest versions of Outlook. This mail client should be excluded if you are looking for a correct rendering of an HTML email integration. Its use is more and more restricted, and it represents today a very small part of the email client market.</p>
<h4 class="wp-block-heading" id="h-apple-osx">Apple OSX</h4>
<p>Email clients on Apple's OSX operating system use the WebKit rendering engine to display HTML emails, which means that emails generally encounter few problems in the platform's email clients.</p>
<h6 class="wp-block-heading" id="h-mail">Mail</h6>
<p>Apple Mail is flawless as an email client. It's based on the WebKit rendering engine, which powers browsers like Apple Safari and Google Chrome all the way to the PlayStation 3 browser. Its CSS support is state-of-the-art, and you will rarely encounter rendering problems, as its CSS support is so advanced.</p>
<h6 class="wp-block-heading" id="h-outlook">Outlook</h6>
<p>Microsoft has also designed an Outlook client for Mac, but unlike its Windows cousins, it is powered by WebKit. This means that it works just as well as Apple Mail with excellent HTML and CSS support.</p>
<h6 class="wp-block-heading" id="h-entourage">Entourage</h6>
<p>Entourage is another Microsoft desktop email client, and is the predecessor of Outlook for OSX. Entourage 2008 has a WebKit-based HTML rendering engine, and with that, pretty solid CSS support. Microsoft stopped developing Entourage in favor of Outlook for Mac.</p>
<h4 class="wp-block-heading" id="h-multiplateformes">Multiplatform</h4>
<h5 class="wp-block-heading" id="h-thunderbird">Thunderbird</h5>
<p>Thunderbird, an email client from Mozilla, the maker of Firefox, has a very small market share. Nevertheless, it is a solid mail client that supports HTML and CSS quite well.</p>
<h4 class="wp-block-heading" id="h-webmails">Webmails</h4>
<p>A webmail or online email solution is the third most popular way to receive and read emails, after mobile and desktop. The rise of mobile readers has hurt webmails, whose usage continues to decline moderately.</p>
<h5 class="wp-block-heading" id="h-outlook-com-hotmail">Outlook.com/Hotmail</h5>
<p>Outlook.com, formerly Hotmail, is Microsoft's webmail offering. It is also the most popular webmail client, which means it greatly influences email design in general. Unfortunately, it suffers from a few quirks that can be troublesome for your email layout.</p>
<h5 class="wp-block-heading" id="h-yahoo-mail">Yahoo! Mail</h5>
<p>The second most popular webmail after Outlook.com/Hotmail, making it an important client to consider when designing and creating your email. Yahoo's CSS support is among the best.</p>
<h5 class="wp-block-heading" id="h-gmail">Gmail</h5>
<h6 class="wp-block-heading" id="h-limite-des-102ko">102kb limit</h6>
<p>If a mail exceeds a weight of 102kb, Gmail will display the 102<sup>ers</sup> kilobytes of the message, then generate a text informing that the message has been truncated and prompt you to click on the "View full message" message.</p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><a href="https://www.badsender.com/wp-content/uploads/2023/02/image-22.png"><img decoding="async" loading="lazy" width="447" height="434" src="https://www.badsender.com/wp-content/uploads/2023/02/image-22.png" alt="Example of a message displayed by Gmail when the 102kb limit is reached." class="wp-image-558051" srcset="https://www.badsender.com/wp-content/uploads/2023/02/image-22.png 447w, https://www.badsender.com/wp-content/uploads/2023/02/image-22-300x291.png 300w, https://www.badsender.com/wp-content/uploads/2023/02/image-22-12x12.png 12w" sizes="(max-width: 447px) 100vw, 447px" /></a><figcaption class="wp-element-caption">Example of a message displayed by Gmail when the 102kb limit is reached.</figcaption></figure></div>
<p>This already requires a first action from the recipient, and you should try to limit the interactions as much as possible, and get to the message itself as quickly as possible. With this system, the recipient does not have direct access to the content, you risk losing his attention and therefore, losing him altogether. This will affect the click rate of your campaigns.</p>
<p>Moreover, the unsubscribe link usually located at the bottom of the email is no longer visible, which means that, technically, the email is no longer compatible with the legal obligations of the CAN-SPAM and the RGPD... Finally, the tracking code that you usually place at the bottom of the email is also missing: you are unable to know the precise opening rate of your campaign. On mobile, it will regularly happen that you have to "reload" the email, or scroll down, and sometimes, no indication appears.</p>
<p>Is it possible to design emails with a weight lower than 102kb? You should already know that Google only takes into account the HTML code, and not the images. But 102kb are quickly reached, especially when it comes to templates with many modules, responsive versions with large media queries, etc.</p>
<p>A few tips for staying on track:</p>
<ul>
<li>Avoid overloading your code: Remove any property, cell, table, row, media queries that might be superfluous <em>(<code>padding</code> instead of the <code><td></code> empty for example for internal margins)</em>.</li>
<li>Keep your campaign message simple, engaging, without too much information. Make sure you only broadcast the information you really need.</li>
<li>Don't send multiple campaigns with the same subject line, as Gmail combines these emails into one "thread", which can make the message heavier than 102ko.</li>
</ul>
<p>If you can't reduce the message to less than 102kb, then make the right decisions: propose a link to a mirror page in the first 102kb, insert your tracking pixel in the email header <em>(even if it is not very aesthetic)</em>and place the unsubscribe link in the 102<sup>ers</sup> ko too!</p>
<h5 class="wp-block-heading" id="h-aol">AOL</h5>
<p>AOL is arguably the best webmail client: It has the best CSS support, including support for background images, positioning and display, and even some CSS3 properties. Unfortunately, AOL has a limited user base.</p>
<h3 class="wp-block-heading" id="h-clients-email-mobile">Mobile email customers</h3>
<h4 class="wp-block-heading" id="h-apple-ios">Apple iOS</h4>
<p>Apple's iOS platform is not limited to the iPhone. It also includes the iPad and iPod Touch, both of which can receive email. The iOS email app is based on WebKit, like its big brother OSX. Its CSS support is unmatched, giving you a lot of freedom in designing your emails. However, iOS mail has a few small quirks that you should be aware of:</p>
<ul>
<li>It requires the CSS property <code>min-width:100%</code> to encompass the entire email.</li>
<li>It needs the CSS property <code>webkit-text-size-adjust</code>.</li>
<li>The graphic styles of addresses, phone numbers, dates or personalities of the music world are replaced by blue automatic links with underlining.</li>
</ul>
<h4 class="wp-block-heading" id="h-gmail-app">Gmail app</h4>
<p>To the question: "Does it work in Gmail?", we will answer: "It depends... On which version?</p>
<p>It is important to realize that CSS support depends on multiple factors. Google has several official mail clients for Gmail <em>(G Suite Basic, G Suite Business, G Suite for Education, G Suite for Nonprofits, etc.)</em>. But the Gmail app on Android also allows you to use any address from any email provider since November 2014. And in February 2016, Google also introduced a feature to "Gmailify" an address and thus activate certain Gmail features, even on third-party addresses.</p>
<p>Since its update in 2016, Gmail is therefore supposed to guarantee better support for CSS properties. However, depending on the type of client, the CSS support is not the same. So, depending on the use of Gmail, you will find different types of CSS support, which could then be summarized as follows:</p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><a href="https://www.badsender.com/wp-content/uploads/2023/02/image-23.png"><img decoding="async" loading="lazy" width="525" height="340" src="https://www.badsender.com/wp-content/uploads/2023/02/image-23.png" alt="Media queries support scheme according to the Gmail version used." class="wp-image-558052" srcset="https://www.badsender.com/wp-content/uploads/2023/02/image-23.png 525w, https://www.badsender.com/wp-content/uploads/2023/02/image-23-300x194.png 300w, https://www.badsender.com/wp-content/uploads/2023/02/image-23-18x12.png 18w" sizes="(max-width: 525px) 100vw, 525px" /></a><figcaption class="wp-element-caption">Media queries support scheme according to the Gmail version used.</figcaption></figure></div>
<p>The different levels mentioned here are levels established by Rémi Parmentier on the CSS support.</p>
<ul>
<li>Level 1 would thus correspond to "basic" CSS. This level now only concerns the Gmail Android application configured with a third party account <em>(nicknamed GANGA for Gmail Android with a Non Gmail Account)</em>.</li>
<li>Level 2 corresponds to level 1 + property support <code>calc()</code> and background images.</li>
<li>As for level 3, it is the level 2 + the support of the <code></code></li>
</ul>
<p>But how much of your campaigns will be viewed from an Android mobile with a default POP/IMAP account? Take the time to ask yourself this question...</p>
<h5 class="wp-block-heading" id="h-tips-n-tricks">Tips 'N Tricks</h5>
<h6 class="wp-block-heading" id="h-forcer-rendu-desktop-sur-gmail-app">Force desktop rendering on Gmail app</h6>
<p>This leaves very few types of Gmail usage that do not interpret the <code></code> and media queries. But it can still account for a big chunk of views on your campaigns. And if you don't code your emails in Fluid, you'll find that Gmail app automatically resizes the layout of your emailing to the size of the smartphone <em>(which can cause serious rendering problems: the columns are much narrower if a column layout is used of course, the background images will repeat, breaks appear...)</em>.</p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><a href="https://www.badsender.com/wp-content/uploads/2023/02/image-24.png"><img decoding="async" loading="lazy" width="687" height="477" src="https://www.badsender.com/wp-content/uploads/2023/02/image-24.png" alt="Example of a rendering problem when an automatic resizing on Gmail" class="wp-image-558053" srcset="https://www.badsender.com/wp-content/uploads/2023/02/image-24.png 687w, https://www.badsender.com/wp-content/uploads/2023/02/image-24-300x208.png 300w, https://www.badsender.com/wp-content/uploads/2023/02/image-24-18x12.png 18w" sizes="(max-width: 687px) 100vw, 687px" /></a><figcaption class="wp-element-caption">Example of a rendering problem when an automatic resizing on Gmail</figcaption></figure></div>
<p>If you want to force Gmail to display the Desktop version <em>(on media that do not support media)</em>There are two fixes: one for Android, the second for iPhone. This solution is not necessarily ideal, since it is sometimes necessary to zoom in to read certain content, but at least the layout remains consistent since the desktop version will be displayed at the scale of the smartphone.</p>
<p>For Android:</p>
<ul>
<li>Create a spacer <em>(one pixel transparent gif)</em></li>
<li>Create a class <code>.hide {display:none}</code> in the header of the HTML document to hide the spacer on other email clients.</li>
<li>Insert the following piece of HTML code in the main table of your email.</li>
</ul>
<pre class="wp-block-code prettyprint"><code><tr>
<td height="1" class="hide" style="min-width:600px; font-size:0px;line-height:0px"><img height="1" src="spacer.gif" style="min-width:600px; text-decoration:none; border:none; -ms-interpolation-mode:bicubic"></td>
</tr></code></pre>
<p>For iPhone :</p>
<ul>
<li>Create a class <code>.gmailfix {display:none; display:none !important}</code> in the header of the HTML document.</li>
<li>Insert the following piece of HTML code at the bottom of your HTML code.</li>
</ul>
<pre class="wp-block-code prettyprint"><code><div class="gmailfix" style="white-space:nowrap; font:15pxcourier; line-height:0">
</div></code></pre>
<h6 class="wp-block-heading" id="h-width-100">width="100%"</h6>
<p>Recently we noticed on the Gmail application on Android that our tables, even with an attribute <code>width="100%"</code>were limited in width to their content <em>(a kind of automatic shrinkage)</em>. We were not able to reproduce the problem. So we just added a <code>style="width:100% !important; margin:0px auto"</code> which, it seems, solved the problem on the real tests.</p>
<p>Mark Robbins posted on the Litmus community forum that he had encountered the same problem on several campaigns, but now he could not reproduce it. He also noticed that Gmail app refused to respect the 100% width assigned to some tables and adapted the width to the content. Mark Robbins even added that even when a <code>style="width:100%"</code> was put in place, it did not solve the concern. Instead, he argued that adding a <code>style="min-width:100%"</code> assigned to the painting in question solved the problem.</p>
<p>In fact, it is at Mosaico that the explanation was found: The Gmail application for Android <em>(and not on iOS)</em> would sometimes, under certain circumstances, remove the properties <code>width</code> and <code>min-width</code> tables, cells and images by adding a class <code>.munged</code> on the elements concerned. This class <code>.munged</code> is defined as follows by Gmail App on Android:</p>
<pre class="wp-block-code prettyprint"><code>table.munged {
width:auto !important;
table-layout:auto !important;
}
td.munged {
width:auto !important;
white-space:normal !important;
}</code></pre>
<p>To get more technical via the source code generated by Gmail App on Android: a script performs some logic to add this <code>class</code> according to certain variables, including a constant <code>WEBVIEW_WIDTH</code> <em>(relative to the consultation medium itself)</em>.</p>
<pre class="wp-block-code prettyprint"><code>documentWidth = document.body.offsetWidth;
goalWidth = WEBVIEW_WIDTH;</code></pre>
<p>The script adds the <code>class</code>and then observe the width of the email resulting from this change. If the result is satisfactory <em>(a constant <code>TRANSFORM_MINIMUM_EFFECTIVE_RATIO</code> is used to determine the successful reduction rate)</em>the <code>class</code> will be kept, otherwise the script will reverse all operations.</p>
<pre class="wp-block-code prettyprint"><code>// If the transformations shrank the width significantly enough, leave them in place.
// We figure that in those cases, the benefits outweight the risk of rendering artifacts.
if (!done && (elWidth - newWidth) / (elWidth - docWidth) >
TRANSFORM_MINIMUM_EFFECTIVE_RATIO) {
console.log("transform(s) deemed effective enough");
done</code></pre>
<p>The classes <code>.munged</code> being applied and kept on some tables, cells, or images only, this can explain the "random" side of this bug. Finally, it should be noted that this problem only concerns Gmail App on Android, not on iOS. Mozaico deduced that this could be due to differences in screen size and resolution, or to the fact that the same script was not necessarily used on iOS.</p>
<h2 class="wp-block-heading" id="h-astuces-et-bonnes-pratiques-de-code-email">Email code tips and best practices</h2>
<h3 class="wp-block-heading" id="h-sup"><code>sup</code></h3>
<p>Each mail client has a particular interpretation <em>(at least, that's the impression you get when you run a test)</em> of this small HTML tag. If the difference in graphic rendering often seems infinitesimal, it can be much more important on texts in a much larger font size. Similarly, when you want to set a particular type size on the <code><sup></code>the rendering can really become problematic.</p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><a href="https://www.badsender.com/wp-content/uploads/2023/02/image-25.png"><img decoding="async" loading="lazy" width="517" height="146" src="https://www.badsender.com/wp-content/uploads/2023/02/image-25.png" alt="Example of how the <sup> tag is rendered according to messaging solutions" class="wp-image-558054" srcset="https://www.badsender.com/wp-content/uploads/2023/02/image-25.png 517w, https://www.badsender.com/wp-content/uploads/2023/02/image-25-300x85.png 300w, https://www.badsender.com/wp-content/uploads/2023/02/image-25-18x5.png 18w" sizes="(max-width: 517px) 100vw, 517px" /></a><figcaption class="wp-element-caption">Example of how the <sup> tag is rendered according to messaging solutions</figcaption></figure></div>
<p>To ensure that this tag is rendered in the same way on most email clients, you need to implement the following HTML/CSS code:</p>
<pre class="wp-block-code prettyprint"><code><sup style="font-size:[value]px;line-height:0;vertical-align:[value]px">®</sup></code></pre>
<h3 class="wp-block-heading" id="h-strong-em-i-u-mark">strong, em, i, u, mark</h3>
<p>Many HTML integrations make unintended use of <code><strong></code>, <code><em></code>, <code><b></code>, <code><i></code>or <code><u></code> to format graphically <em>(not for semantic use)</em> a piece of text. And this is a bad habit. Indeed, any text within a <code><strong></code> will be displayed in bold. Any text in a <code><em></code> will be displayed in italics, and so on...</p>
<p>But these tags are in no way intended for a graphic formatting of an HTML text. It is a default formatting that is assigned to them for the moment, where all email clients and browsers seem to be unanimous on the display. However, when we consult the definitions and uses of each of these tags on the w3schools website, we can see that these tags have a "semantic" function.</p>
<ul>
<li><code><i></code> This tag defines a part of the text in another tone or "mood".</li>
<li><code><u></code> This tag represents text that must be "stylistically" different from normal text, such as misspelled words.</li>
<li><code><strong></code> This tag defines an important text.</li>
<li><code><em></code> This tag defines an underlined text, in the sense of "the emphasis is on...".</li>
<li><code><mark></code> This tag is used to highlight parts of a text.</li>
</ul>
<p>The tag <code><mark></code> can already be definitively removed from the list: its "graphic" support is not supported by all mail clients. As for the other tags, keep in mind that their purpose is semantic. But if it is only a graphic formatting, prefer the use of a <code><span></code> with the corresponding CSS property : <code>font-weight</code>, <code>font-style</code>, <code>text-decoration</code>, <code>background-color</code>.</p>
<p>This point does not really pose a problem for rendering on the mail clients for the moment, but it is necessary to address it, because, in the future, perhaps the graphic formatting of the <code><strong></code>, <code><em></code>, <code><i></code>, <code><u></code> or <code><mark></code> could change.</p>
<h3 class="wp-block-heading" id="h-soulignement-et-liens-automatiques">Underlining and automatic links</h3>
<p>The automatic underlining of addresses, phone numbers, dates or sequence of numbers or words on iOS, with that characteristic electric blue, sometimes interferes with your creative! But if the formatting leaves something to be desired, it is still interesting to leave the link automatically present on these pieces of text. Why should you do this? Because it's a question of ergonomics, functionality and accessibility! If a phone number can become automatically clickable to generate a call, or an address to bring on Google map, or a date to create an event in a calendar, it would be a shame to remove these features.</p>
<p>However, let's admit that the formatting of the blue text can also cause readability problems <em>(if the background of the cell is in a shade of blue or purple for example)</em>. This can impact the readability of the email and its content.</p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><a href="https://www.badsender.com/wp-content/uploads/2023/02/image-26.png"><img decoding="async" loading="lazy" width="516" height="291" src="https://www.badsender.com/wp-content/uploads/2023/02/image-26.png" alt="Example of automatic underlining that is difficult to read" class="wp-image-558055" srcset="https://www.badsender.com/wp-content/uploads/2023/02/image-26.png 516w, https://www.badsender.com/wp-content/uploads/2023/02/image-26-300x169.png 300w, https://www.badsender.com/wp-content/uploads/2023/02/image-26-18x10.png 18w" sizes="(max-width: 516px) 100vw, 516px" /></a><figcaption class="wp-element-caption">Example of automatic underlining that is difficult to read</figcaption></figure></div>
<p>If we take a closer look at the code generated on iOS, we realize that on iOS devices, the attribute <code>x-apple-data-detectors</code> is added to the links in question.</p>
<pre class="wp-block-code prettyprint"><code><a href="#" x-apple-data-detectors="true"></code></pre>
<p>A "tip" can then be applied accordingly: in the declaration <code></code>specify all links with this attribute to apply <code>color</code>, <code>font-size</code>, <code>font-family</code>, <code>font-weight</code>and <code>line-height</code> in <code>inherit</code> <em>(inherited from their cell)</em>.</p>
<pre class="wp-block-code prettyprint"><code>a[x-apple-data-detectors] {
color:inherit !important;
text-decoration:none !important;
font-size:inherit !important;
font-family:inherit !important;
font-weight:inherit !important;
line-height:inherit !important
}</code></pre>
<p>Thus, these automatic links will automatically inherit the colors, <code>font-weight</code>, <code>line-height</code> defined in the HTML element, while maintaining their functionality! Of course, don't forget the <code>!important</code> to overwrite the automatic formatting <em>(and specify, if necessary, a <code>text-decoration:none</code> if you do not wish to see these texts underlined)</em>.</p>
<p>If, in spite of everything, pieces of text or numbers should contain links when there is no need for them <code>(sequence of numbers on a SIRET code for example)</code>or you are on Gmail which since September 2017 has applied the same features as iOS on addresses and phone numbers, there is another little tip that should allow you to solve the problem: put a around the concerned text :</p>
<pre class="wp-block-code prettyprint"><code><span class="appleLinks01">RCS 195 645 362</span></code></pre>
<p>with a named class, for example, <code>appleLinks01</code>. Then, in the <code></code> of your email, specify that this class must be in a certain color, without <code>text-decoration</code> :</p>
<pre class="wp-block-code prettyprint"><code>.appleLinks01 * {text-decoration:none !important; color:#000 !important}</code></pre>
<p>On the Zimbra webmail <em>(used by Free and by laposte.net)</em> Zimbra transforms the dates into blue links to connect the date with the integrated calendar. Here too, a small piece of code solves the problem:</p>
<pre class="wp-block-code prettyprint"><code>span.Object {
color:inherit !important
}
span.Object-hover {
color:inherit !important;
text-decoration:none !important
}</code></pre>
<h3 class="wp-block-heading" id="h-balise-lien-a-invalides-et-office-365">Invalid "a" link tag and office 365</h3>
<p>More than three years ago, we learned that Office 365 was removing all tag <code><a></code> with an attribute <code>href</code> vacuum <em>(or without attribute <code>href</code>)</em>. In truth, it is a little more complex: When you insert, within your <code>href</code>If you want to use a URL other than a URL, Office 365 will display this content within the email inside the brackets. Thus, the following code :</p>
<pre class="wp-block-code prettyprint"><code><a href="/en/Hello/">world</a></code></pre>
<p>Will become :</p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><a href="https://www.badsender.com/wp-content/uploads/2023/02/image-27.png"><img decoding="async" loading="lazy" width="298" height="137" src="https://www.badsender.com/wp-content/uploads/2023/02/image-27.png" alt="Rendering an href attribute that does not respect the protocols allowed on outlook.com" class="wp-image-558056" srcset="https://www.badsender.com/wp-content/uploads/2023/02/image-27.png 298w, https://www.badsender.com/wp-content/uploads/2023/02/image-27-18x8.png 18w" sizes="(max-width: 298px) 100vw, 298px" /></a><figcaption class="wp-element-caption">Rendering an href attribute that does not respect the protocols allowed on outlook.com</figcaption></figure></div>
<p>While Justin Khoo <em>(from Freshinbox)</em> and Elliot Ross <em>(Action Rocket / Taxi for Email)</em> specified that adding a <code>#</code> <em>(for an anchor)</em> or a <code>http://</code> <em>(for a valid url)</em> just before the content would solve the problem, we still have the impression that this is not enough today <em>(at least for the <code>#</code>)</em>. Because we often have to set up <code>#oreplace</code> within attributes <code>href</code>This can become particularly problematic when you try to insert anchors for example in your email <em>(starting with a <code>#</code>)</em>.</p>
<p>The solution is of course to fill in valid urls in the href attributes of your <code><a></code> and to abandon, at least for the moment, the use of anchors which are not well supported on all mail clients. Rémi Parmentier even detailed that the styles applied to a <code><a></code> The "problematic" elements were applied to the first element with an attribute <code>style</code> in the following code. Thus, on Outlook.com, the following code:</p>
<pre class="wp-block-code prettyprint"><code><a style="color:red; background-color:yellow;"></a>
<p>A paragraph</p>
<p>Second paragraph with no style</p>
<p style="">Third paragraph with style</p>
<p style="">Fourth paragraph with style</p></code></pre>
<p>Became :</p>
<pre class="wp-block-code prettyprint"><code><p>A paragraph</p>
<p>Second paragraph with no style</p>
<p style="color:red; background-color:yellow;">Third paragraph with
style</p>
<p style="">Fourth paragraph with style</p></code></pre>
<p>And to go further: any style of a tag <code><a></code> invalid will be "pushed" to a kind of styles array, array then inserted on the first element with a style attribute. So :</p>
<pre class="wp-block-code prettyprint"><code><a style="color:cyan; background-color:cyan;">cyan</a>
<a style="color:purple; background-color:purple;">purple</a>
<a style="color:black; background-color:black;">black</a>
<p style="">Empty style 1</p>
<p style="">Empty style 2</p>
<p style="">Empty style 3</p></code></pre>
<p>Will become :</p>
<pre class="wp-block-code prettyprint"><code><p style="color:cyan; background-color:cyan; color:purple; background-color:purple; color:black; background-color: black;">Empty style 1</p>
<p style="">Empty style 2</p>
<p style="">Empty style 3</p></code></pre>
<h2 class="wp-block-heading" id="h-efforts-croissants-des-clients-mails">Increasing efforts of email clients</h2>
<p>We now see, and this is probably thanks to the growing email marketing community, that the rendering problems reported are generally quickly solved, not only by hacks & tips developed by integrators, but also by the email client itself <em>(and it is important to note this, because it shows the willingness of some email clients, not all of them, to evolve)</em>.</p>
<h3 class="wp-block-heading" id="h-goomoji">Goomoji</h3>
<p> Thus, on November 27, 2017, EmailonAcid brought up on his blog the fact that the symbols ™ <em>(trademark)</em>, ® <em>(registered)</em> or ©. <em>(copyright)</em> were replaced, on Gmail iOS, by blue Emoji <em>(more precisely goomoji)</em> larger than the substituted text <em>(24 pixels by 24 pixels)</em>.</p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><a href="https://www.badsender.com/wp-content/uploads/2023/02/image-28.png"><img decoding="async" loading="lazy" width="518" height="558" src="https://www.badsender.com/wp-content/uploads/2023/02/image-28.png" alt="Example of Goomoji" class="wp-image-558057" srcset="https://www.badsender.com/wp-content/uploads/2023/02/image-28.png 518w, https://www.badsender.com/wp-content/uploads/2023/02/image-28-278x300.png 278w, https://www.badsender.com/wp-content/uploads/2023/02/image-28-11x12.png 11w" sizes="(max-width: 518px) 100vw, 518px" /></a><figcaption class="wp-element-caption">Example of Goomoji</figcaption></figure></div>
<p>Several fixes were developed and tested, more or less successful. Two days later, the problem was solved by Gmail.</p>
<h3 class="wp-block-heading" id="h-espaces-sous-les-images">Spaces under the images</h3>
<p>We at Badsender have contributed, in our own way, to the correction of a bug on Outlook.com. A little more than a year ago, we noticed on our email preview tests that a space came under our images on Office 365 and Outlook.com.</p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><a href="https://www.badsender.com/wp-content/uploads/2023/02/image-29.png"><img decoding="async" loading="lazy" width="679" height="480" src="https://www.badsender.com/wp-content/uploads/2023/02/image-29.png" alt="Example of spaces or breaks under the images on Outlook.com" class="wp-image-558058" srcset="https://www.badsender.com/wp-content/uploads/2023/02/image-29.png 679w, https://www.badsender.com/wp-content/uploads/2023/02/image-29-300x212.png 300w, https://www.badsender.com/wp-content/uploads/2023/02/image-29-18x12.png 18w" sizes="(max-width: 679px) 100vw, 679px" /></a><figcaption class="wp-element-caption">Example of spaces or breaks under the images on Outlook.com</figcaption></figure></div>
<p>We had a solution: add a <code>style="font-size:0px"</code> on the cells containing these images. But we did not understand the problem. We posted a message on the Litmus community forum to find out what the problem was.</p>
<p>This was followed by a series of discussions <em>(Outlook actually came to transform a simple <code><img></code> in <code><div><button><img></code>)</em>a set of hacks <em>(adding id starting with <code>OWATemporaryImageDivContainer</code> on the images)</em>. But Rémi Parmentier hastened to close the subject: The Outlook.com staff had implemented an update that corrected this problem.</p>
<p>Once again, the teams of the concerned email clients tried to solve, by themselves, the problems raised, and thus contributed to the improvement of the HTML integration of the emails.</p>
<h3 class="wp-block-heading" id="h-rendu-et-environnements-d-ouverture-en-conclusion">Concluding rendering and opening environments</h3>
<p>Get to know the clients and operating systems for which you will be graphically and technically designing your emails. This is just as important as knowing how to design <em>(graphically and technically)</em> of the emails. This task is done step by step by regularly analyzing, via the campaign statistics, the email clients on which your campaigns are consulted.</p>
<p>BtoB webmails and email software are clearly not the same as BtoC ones. This is not the only element to take into account of course, it is only an example, but the technical constraints that can result from it are quite different. Analyze the average age of your target, its type of consultation medium <em>(resolution, OS)</em>Know your target to adjust your emails, your coding methods <em>(as in design)</em> accordingly.</p>
<p>If you don't have any feedback on your campaigns, or are just starting out with email marketing, then get inspired by an overview of the usage and market share of email clients, such as <a href="https://www.litmus.com/email-client-market-share" target="_blank" rel="noreferrer noopener">the one proposed by Litmus</a>. These statistics are automatically updated every month. You can use the top 10 customers as a basis.</p>
<h2 class="wp-block-heading" id="h-mantra-de-l-integrateur-d-emails">Email Integrator Mantra</h2>
<h3 class="wp-block-heading" id="h-qu-est-ce-qui-est-le-mieux-pour-l-utilisateur">What's best for the user?</h3>
<p>The email template uses third party fonts? I can code this email all in images. Or I can integrate this font in CSS and leave the text in HTML, knowing however that it won't work everywhere.</p>
<p>Not all mail clients support the <code></code> ? I can write all my styles inline. Or I can make sure that the email will degrade gracefully and display as well as possible on other email clients.</p>
<p>There is no absolute answer to this question, because each project is specific. What will work for one project may not work tomorrow for another.</p>
<h3 class="wp-block-heading" id="h-tout-depend-de-la-cible">It all depends on the target</h3>
<p>Each project is specific, in the sense that the list of recipients is specific to each project. Depending on the target of the campaign, and on its behavior <em>(the medium used for the consultation of the email, or the requested email client)</em>some coding techniques and methods may be preferred to others <em>(if the consultation on international webmails is absent, and the opening from a GANGA very weak, then it is perhaps interesting not to code the CSS online for example)</em>.</p>
<p>To summarize:</p>
<figure class="wp-block-table"><table><thead><tr><th>Safe use</th><th>Use with care</th><th>Do not use</th></tr></thead><tbody><tr><td>- Static layouts with tables<br />- HTML tables and nested tables<br />- Width of the model <= 600px<br />- Simple, inline CSS<br />- Standard fonts</td><td>- Background images<br />- Specific/exotic web fonts<br />- The CSS in the <code></code></td><td>- JavaScript<br />– <code></code><br />- Flash<br />- Integrated audio<br />- Integrated video<br />- Forms<br />– <code><div></code></td></tr></tbody></table><figcaption class="wp-element-caption">Secure use: easily supported by most email clients.<br />Use with caution: limited support for most mail clients.<br />Do not use: not supported by most email clients.</figcaption></figure>
<h3 class="wp-block-heading" id="h-anticiper-l-integration-html-des-la-phase-de-design">Anticipate HTML integration from the design phase</h3>
<p>The work on the design of the email must be carried out with the knowledge of the technical constraints to be expected during the coding phase. That's why a Print Designer is not suitable for email design. Nor a Web Designer for that matter. Because a Web Designer will think of the email as a page <em>(if he does not know and master the complexities)</em> and will therefore not take into account, for example: the fact of not designing emails with a width greater than 600 pixels, of using very few specific fonts, of using background images with care, of not setting up a video, etc.</p>
<h2 class="wp-block-heading" id="h-quels-outils-pour-creer-vos-email">What tools do you need to create your emails?</h2>
<p>The HTML integration of an emailing is made of multiple steps, each requiring specific tools: design and development of the HTML code, auto-completion, indentation, email preview / email rendering tests, delivery to the client... Let's see in detail the tools and platforms specific to these different phases.</p>
<h3 class="wp-block-heading" id="h-les-outils-de-conception-email">Email design tools</h3>
<h4 class="wp-block-heading" id="h-dreamweaver">Dreamweaver</h4>
<p>Dreamweaver is a WYSIWYG web site editor for Microsoft Windows and Mac OS X created in 1997, marketed by Macromedia and then Adobe Systems. Dreamweaver was one of the first "such a view, such a result" HTML editors, but also one of the first to integrate a site manager. These innovations quickly made it one of the main web site editors, usable by both beginners and professionals.</p>
<p>Dreamweaver offers two design modes through its view menu. The user can choose between a creation mode allowing to make the layout directly with simple tools, comparable to a word processor <em>(table insertion, image insertion, etc.)</em>. It is also possible to display and modify directly the code <em>(HTML or other)</em> which composes the page. You can easily switch from one display mode to another, or opt for a mixed display. This last option is particularly interesting for beginners who, in the long run, wish to become familiar with the HTML language.</p>
<h4 class="wp-block-heading" id="h-brackets">Brackets</h4>
<p>Brackets is an open source editor for web design and development on web technologies such as HTML, CSS and JavaScript. The project was created and is maintained by Adobe, and is released under an MIT license.</p>
<h4 class="wp-block-heading" id="h-notepad-et-sublime-text">Notepad++ and Sublime Text</h4>
<p>It is quite possible to code an HTML file from a text editor. Notepad++ for Windows and Sublime Text for Apple are both text editors with features that help with HTML development <em>(Tag colors, etc.)</em>. They are also free.</p>
<h3 class="wp-block-heading" id="h-testez-vos-templates-email-outils-et-methodologie">Test your email templates: tools and methodology</h3>
<p>The "Testing" part is undoubtedly one of the most important steps in HTML integration. Every HTML campaign must be tested before being sent to the client, in particular to ensure that it is rendered correctly. This step should never be neglected by the integrator. To confirm a correct rendering and validated by the client, several solutions are possible:</p>
<h4 class="wp-block-heading" id="h-support-physique">Physical support</h4>
<p>The preferred method is, of course, real-life testing on physical media. Few structures have the means to set this up. The panel of supports to test is large, and it requires consequent investments. However, let's keep in mind that any physical medium at immediate disposal should not be neglected. At least one test on a physical device should be essential: email preview platforms will probably never be able to cover the multiplicity of software versions, resolutions, particular connection parameters... They can only with difficulty give you an estimate of the time spent downloading and displaying the images, of the cuts or bugs that will sometimes be caused by the weight or height of the tested email...</p>
<h4 class="wp-block-heading" id="h-solutions-d-email-preview">Email preview solutions</h4>
<p>"Email rendering" or "email preview" are related: They refer to "the preview of the rendering of an email". The email preview makes it possible to test the email rendering of a campaign. The one does not go without the other. The email preview only precedes and confirms <em>(or correct if necessary)</em> email rendering. As a designer, project/campaign manager, integrator, we want to make sure that the HTML integration is rendered correctly, and the email preview is there for that.</p>
<blockquote class="wp-block-quote is-style-default">
<p>"Email rendering refers to the problem of visual rendering of email messages within the different tools and email services used by the recipients of a campaign. One of the characteristics of email marketing is the fact that the same message can give different visual renderings from one reading environment to another depending on the tool used and the email rendering engine, but also depending on the different configurations of the same solution. Email rendering tests prior to a campaign allow us to see how the code is interpreted by the different environments, to see what the message looks like depending on whether the image display option is activated or not, and to possibly see the previews in the preview window."</p>
<cite>marketing.com</cite></blockquote>
<p>Email preview platforms have become important allies <em>(see indispensable)</em> to ensure a consistent and correct rendering on the majority of mail clients and media. Some of these tools are more or less "advanced", and develop and offer interesting features, optimizing relentlessly their clients' campaigns: code optimization, graphic inspiration, reporting, spam and deliverability testing, loading time and image weight optimization, instant rendering, "mozified" images... It's all a question of ... means! The battle is also on the number of renderings delivered. Let's review the best-known and most important email preview platforms on the market:</p>
<h5 class="wp-block-heading" id="h-litmus">Litmus</h5>
<p>THE email preview platform par excellence. Litmus stands out by the whole of the functionalities which it proposes: Builder and tests in real time, tests of the links, email analytics, spam testing, resources, community and forums, innovations... Without any doubt, Litmus exceeded the threshold of the simple platform of email preview to become an actor impossible to circumvent of the email marketing. True reference, the brand organizes from now on " Litmus Live " to share on the email marketing: Design, ergonomics, code, innovations, optimization of campaigns... All <em>(or almost)</em> is discussed.</p>
<h5 class="wp-block-heading" id="h-emailonacid">EmailonAcid</h5>
<h3 class="wp-block-heading" id="h-hebergement">Hosting</h3>
<p>During the email preview phase, some platforms will automatically host the images attached to the HTML integration. Others, on the other hand, will require that the images are already hosted on a server and that the paths of these images within the HTML integration are absolute.</p>
<p>Filezilla, FTP software <em>(for File Transfer Protocol)</em> is undoubtedly the easiest to use to host images correctly. This software is available for Windows, Mac OS X, and GNU/Linux.</p>
<h3 class="wp-block-heading" id="h-livraison">Delivery</h3>
<p>Usually, the delivery method of the HTML integration is to send a ZIP file containing the HTML file, as well as the attached image folder. The most efficient solution for this is the "Compressed Folder" offered by Windows, or the possibility of compressing these elements directly via the Winrar or Winzip tools, Windows data compression utilities, which focus on the RAR and ZIP data compression formats.</p>
<h2 class="wp-block-heading" id="h-conclusion-de-la-difficulte-de-coder-un-email-html-de-nos-jours">Conclusion: how difficult it is to code HTML email these days</h2>
<p>In HTML, email integration is a delicate art, partly due to the number of email clients on the market that have very different behaviors. This disparity in the interpretation of HTML emails comes from several factors:</p>
<ul>
<li>Thick email clients <em>(Outlook, Thunderbird, Lotus Notes...)</em> have a radically different operation from webmails <em>(Gmail, Yahoo Mail, Hotmail, Outlook.com...)</em>.</li>
<li>These same webmails impose very strict rules on the HTML and CSS code contained in the emails because the messages themselves are displayed in a web page structure that has its own styles.</li>
<li>Some engines are very exotic, for example Outlook 2013 still uses Word's HTML interpretation engine, which virtually means that CSS support in Outlook has not changed between versions 2007, 2010 and 2013, where browsers have made giant leaps.</li>
</ul>
<p>Even more than the web, the realization of graphic emails in HTML to the pixel or almost on all platforms is a utopia199. Moreover, the interest is not really in this objective anymore, but in the mobile versions of these emails, and their accessibility.</p>
<h2 class="wp-block-heading" id="h-ressources">Resources</h2>
<p>Many of the texts in this white paper come from multiple blogs/websites dealing with the subject of email marketing. When the sources are good and verified and the texts are perfectly well written, why try to transcribe them otherwise? "Render to Caesar what belongs to Caesar, and to God what belongs to God. We can never thank them enough for their contribution and hope not to commit any omission by listing below the contributors concerned.</p>
<h3 class="wp-block-heading">Badsender</h3>
<ul>
<li>https://www.badsender.com/2009/08/03/can-spam-act-spam-loi-etats-unis-optin-optout/</li>
<li>http://test.badsender.com/krktr/</li>
<li>https://www.badsender.com/2017/11/09/email-css-position-absolute/</li>
<li>https://www.badsender.com/</li>
<li>http://agence.badsender.com</li>
</ul>
<h3 class="wp-block-heading">Campaign Monitor</h3>
<ul>
<li>https://www.campaignmonitor.com/blog/email-marketing/2010/11/the-trouble-with-anchor-links-in-email-newsletters/</li>
<li>https://www.campaignmonitor.com/resources/guides/web-fonts-in-email/</li>
<li>https://www.campaignmonitor.com/blog/email-marketing/2013/01/outlook-com-drops-margin-and-float-support-entirely/</li>
<li>https://buttons.cm/</li>
<li>https://www.campaignmonitor.com/blog/email-marketing/2012/08/outlook-2013-says-no-to-empty-table-cells/</li>
<li>https://backgrounds.cm/</li>
<li>https://www.campaignmonitor.com/resources/guides/video-in-email/</li>
<li>https://www.campaignmonitor.com/blog/email-marketing/2006/01/the-truth-about-flash/</li>
<li>https://www.campaignmonitor.com/blog/email-marketing/2016/07/10-things-need-know-web-fonts-email-right-now/</li>
<li>https://www.campaignmonitor.com/css/media-queries/media/</li>
<li>https://www.campaignmonitor.com/blog/email-marketing/2011/04/media-query-issues-in-yahoo-mail-mobile-email/</li>
<li>https://www.campaignmonitor.com/dev-resources/guides/mobile/</li>
<li>https://www.campaignmonitor.com/resources/guides/alt-text-in-email/</li>
<li>https://www.campaignmonitor.com/blog/email-marketing/2010/11/correct-doctype-to-use-in-html-email/</li>
<li>https://www.campaignmonitor.com/css/</li>
<li>Campaign Monitor, "Email Interaction across mobile and desktop</li>
</ul>
<h3 class="wp-block-heading">Chamaileon</h3>
<ul>
<li>https://blog.chamaileon.io/limitations-of-html-email-design-email-width-and-size/</li>
<li>https://blog.chamaileon.io/what-do-scalable-fluid-responsive-and-hybrid-email-design-mean/</li>
</ul>
<h3 class="wp-block-heading">EmailonAcid</h3>
<ul>
<li>https://www.emailonacid.com/</li>
<li>https://www.emailonacid.com/blog/article/email-development/gmail-ios-replacing-copyright-symbols-with-blue-emoji-and-how-to-fix-it</li>
<li>https://www.emailonacid.com/blog/article/email-development/mobile-optimization-retina-images-in-email/</li>
<li>https://www.emailonacid.com/blog/article/email-development/demystifying-meta-tags-in-email/</li>
<li>https://www.emailonacid.com/blog/article/email-development/doctype_-_the_black_sheep_of_html_email_design/ V1 - October 2018. p.100</li>
</ul>
<h3 class="wp-block-heading">Email Designer</h3>
<ul>
<li>http://email-designer.net/supprimer-modifier-couleur-liens-webmail-zimbra/</li>
</ul>
<h3 class="wp-block-heading">EmailMonday</h3>
<ul>
<li>https://www.emailmonday.com/google-amp-for-email-everything-you-wanted-to-know/</li>
</ul>
<h3 class="wp-block-heading">Google</h3>
<ul>
<li>https://blog.google/products/gmail/gmailify-best-of-gmail-without-gmail/</li>
<li>https://developers.google.com/gmail/design/reference/supported_css</li>
<li>https://www.blog.google/products/g-suite/bringing-power-amp-gmail/</li>
</ul>
<h3 class="wp-block-heading">Hteumeuleu</h3>
<ul>
<li>https://emails.hteumeuleu.fr/2016/05/est-ce-qu-un-e-mail-doit-avoir-le-meme-rendu-partout/</li>
<li>https://emails.hteumeuleu.com/outlook-coms-latest-bug-and-how-to-fix-gaps-under-images-ee1816671461</li>
<li>https://emails.hteumeuleu.fr/2016/10/quel-doctype-faut-il-utiliser-dans-un-email/</li>
<li>https://github.com/hteumeuleu/email-bugs/issues/10</li>
<li>https://emails.hteumeuleu.fr/2016/01/gmail-app-on-android-tries-to-shrink-your-email-with-munged-classes/</li>
<li>https://emails.hteumeuleu.com/trying-to-make-sense-of-gmail-css-support-after-the-2016-update-53c15151063a</li>
<li>https://emails.hteumeuleu.fr/2014/08/outlook-com-supporte-bien-css-float-margin/</li>
<li>https://emails.hteumeuleu.fr/2017/02/faut-il-arreter-d-ecrire-ses-styles-en-ligne-dans-des-e-mails/</li>
<li>https://emails.hteumeuleu.com/how-webmails-block-images-4cc2ba4d2d0e</li>
<li>https://www.hteumeuleu.fr/le-mantra-de-l-integrateur/</li>
</ul>
<h3 class="wp-block-heading">Litmus</h3>
<ul>
<li>https://litmus.com/ https://litmus.com/blog/the-pros-and-cons-of-video-in-email-video</li>
<li>https://litmus.com/blog/why-is-email-rendering-so-complex</li>
<li>https://litmus.com/community http://emailclientmarketshare.com/</li>
<li>https://litmus.com/community/discussions/4594-outlook-365-displays-tbd-on-empty-href-tags</li>
<li>https://litmus.com/community/discussions/1475-office-365-links</li>
<li>https://litmus.com/community/discussions/6509-html-semantic-elements-in-email</li>
<li>https://litmus.com/community/discussions/1524-do-you-care-about-semantics-in-html-emails</li>
<li>https://litmus.com/community/discussions/4624-fixed-gmail-app-not-respecting-100-width</li>
<li>https://litmus.com/community/discussions/4410-gmail-app-stacked-column-width-woes-no-media-queries</li>
<li>https://litmus.com/blog/the-tyranny-of-tables-why-web-and-email-design-are-so-different</li>
<li>https://litmus.com/blog/the-ultimate-guide-to-styled-alt-text-in-email</li>
<li>https://litmus.com/community/discussions/36-outlook-and-fallback-fonts</li>
<li>https://litmus.com/blog/the-ultimate-guide-to-web-fonts</li>
<li>https://litmus.com/blog/a-guide-to-bulletproof-buttons-in-email-design</li>
<li>https://litmus.com/community/discussions/960-outlook-2013-breaks-td-height</li>
<li>https://litmus.com/blog/ultimate-guide-accessible-emails</li>
<li>https://litmus.com/community/discussions/4931-using-retina-images-as-background-images</li>
<li>https://litmus.com/blog/understanding-retina-images-in-html-email https://litmus.com/blog/the-ultimate-guide-to-web-fonts</li>
<li>https://litmus.com/blog/the-ultimate-guide-to-background-images-in-email</li>
<li>https://litmus.com/blog/understanding-responsive-and-hybrid-email-design</li>
<li>https://litmus.com/help/email-clients/media-query-support/ V1 - October 2018. p.101</li>
<li>https://litmus.com/blog/understanding-media-queries-in-html-email</li>
<li>https://litmus.com/blog/top-email-design-trends</li>
<li>https://litmus.com/community/discussions/6116-here-s-why-litmus-didn-t-inline-css-for-its-first-newsletter-of-2017</li>
<li>https://litmus.com/community/discussions/261-td-display-block-not-working-on-android</li>
<li>https://litmus.com/blog/background-colors-html-email Litmus, "State of Email," March 2017</li>
</ul>
<h3 class="wp-block-heading">Mailchimp</h3>
<ul>
<li>https://mailchimp.com/fr/help/limitations-of-html-email/</li>
<li>https://templates.mailchimp.com/development/css/outlook-conditional-css/</li>
<li>https://templates.mailchimp.com/concepts/email-clients/</li>
</ul>
<h3 class="wp-block-heading">Mosaico</h3>
<ul>
<li>https://mosaico.io/email-client-tricks/gmail-android-tries-to-shrink-your-email/</li>
<li>https://mosaico.io/email-client-tricks/email-inliners/</li>
</ul>
<h3 class="wp-block-heading">Slideshare</h3>
<ul>
<li>https://fr.slideshare.net/M_J_Robbins/accessibility-in-email-eoainsights</li>
<li>https://fr.slideshare.net/paulairy/a-type-of-accessibility-65004974?next_slideshow=1</li>
</ul>
<h3 class="wp-block-heading">W3Schools</h3>
<ul>
<li>https://www.w3schools.com/tags/</li>
<li>https://www.w3schools.com/cssref/pr_pos_vertical-align.asp</li>
<li>https://www.w3schools.com/css/css_float.asp</li>
<li>https://www.w3schools.com/cssref/pr_class_display.asp</li>
<li>https://www.w3schools.com/css/css_positioning.asp</li>
<li>https://www.w3schools.com/cssref/pr_margin.asp</li>
<li>https://www.w3schools.com/tags/tag_html.asp</li>
<li>https://www.w3schools.com/cssref/pr_dim_line-height.asp</li>
<li>https://www.w3schools.com/tags/tag_doctype.asp </li>
<li>https://www.w3.org/QA/2002/04/valid-dtd-list.html</li>
<li>https://www.w3schools.com/cssref/pr_text_text-align.asp </li>
<li>https://www.w3schools.com/cssref/pr_font_weight.asp</li>
<li>https://www.w3schools.com/cssref/pr_padding.asp</li>
<li>https://www.w3schools.com/cssref/</li>
<li>https://www.w3schools.com/tags/tag_head.asp</li>
<li>https://www.w3schools.com/tags/tag_meta.asp</li>
<li>https://www.w3schools.com/cssref/pr_font_font-size.asp </li>
<li>https://www.w3schools.com/cssref/pr_font_font-family.asp</li>
<li>https://www.w3schools.com/html/html_css.asp</li>
<li>https://www.w3schools.com/tags/att_global_dir.asp</li>
<li>https://www.w3schools.com/tags/att_global_style.asp</li>
<li>https://www.w3schools.com/tags/att_global_id.asp</li>
<li>https://www.w3schools.com/tags/att_global_class.asp</li>
<li>https://www.w3schools.com/tags/att_a_target.asp</li>
<li>https://www.w3schools.com/tags/att_td_rowspan.asp</li>
<li>https://www.w3schools.com/tags/att_td_colspan.asp</li>
<li>https://www.w3schools.com/tags/att_td_valign.asp</li>
<li>https://www.w3schools.com/tags/att_table_cellpadding.asp</li>
<li>https://www.w3schools.com/tags/att_table_cellspacing.asp</li>
<li>https://www.w3schools.com/tags/att_img_border.asp V1 - October 2018. p.102</li>
<li>https://www.w3schools.com/tags/att_global_title.asp</li>
<li>https://www.w3schools.com/tags/att_width.asp</li>
<li>https://www.w3schools.com/tags/att_height.asp </li>
<li>https://www.w3schools.com/tags/att_img_src.asp</li>
<li>https://www.w3schools.com/tags/att_a_href.asp</li>
<li>https://www.w3schools.com/tags/att_img_alt.asp </li>
<li>https://www.w3schools.com/tags/tag_p.asp</li>
<li>https://www.w3schools.com/tags/tag_hn.asp</li>
<li>https://www.w3schools.com/tags/tag_comment.asp </li>
<li>https://www.w3schools.com/tags/tag_a.asp</li>
<li>https://www.w3schools.com/tags/tag_span.asp</li>
<li>https://www.w3schools.com/tags/tag_br.asp</li>
<li>https://www.w3schools.com/tags/tag_div.asp</li>
<li>https://www.w3schools.com/tags/tag_img.asp</li>
<li>https://www.w3schools.com/tags/tag_tr.asp </li>
<li>https://www.w3schools.com/tags/tag_td.asp</li>
<li>https://www.w3schools.com/tags/tag_th.asp</li>
<li>https://www.w3schools.com/tags/tag_body.asp </li>
<li>https://www.w3schools.com/tags/tag_table.asp</li>
<li>https://www.w3schools.com/tags/tag_style.asp</li>
<li>https://www.w3schools.com/html/html_blocks.asp</li>
<li>https://www.w3schools.com/html/html_basic.asp</li>
<li>https://www.w3schools.com/tags/ref_byfunc.asp</li>
<li>https://www.w3schools.com/html/html_elements.asp</li>
</ul>
<h3 class="wp-block-heading">Wikipedia</h3>
<ul>
<li>https://fr.wikipedia.org/wiki/Adobe_Dreamweaver</li>
<li>https://fr.wikipedia.org/wiki/Brackets</li>
<li>https://fr.wikipedia.org/wiki/WebKit </li>
<li>https://fr.wikipedia.org/wiki/Vector_Markup_Language </li>
<li>https://fr.wikipedia.org/wiki/Syst%C3%A8me_d%27exploitation</li>
<li>https://fr.wikipedia.org/wiki/Site_web_adaptatif https://fr.wikipedia.org/wiki/Indentation </li>
<li>https://fr.wikipedia.org/wiki/Feuilles_de_style_en_cascade </li>
<li>https://fr.wikipedia.org/wiki/World_Wide_Web_Consortium</li>
</ul>
<h3 class="wp-block-heading">Other</h3>
<ul>
<li>https://www.win-rar.com/start.html?L=10</li>
<li>https://www.winzip.com/win/fr/downwz.html </li>
<li>https://blog.gorebel.com/absolute-positioning-in-email/</li>
<li>https://www.lafabriquedunet.fr/email-marketing/guide/coder-email-html-css/</li>
<li>http://xhtml.le-developpeur-web.com/balise_autofermante-xhtml.php </li>
<li>https://www.whoishostingthis.com/blog/2014/12/06/jpeg-gif-png/ </li>
<li>https://css-tricks.com/snippets/css/comments-in-css/ </li>
<li>https://www.w3.org/TR/html401/present/graphics.html#h-15.1.2 </li>
<li>https://filezilla-project.org/</li>
<li>https://www.definitions-marketing.com/definition/integration-email-html/ </li>
<li>https://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries–cms-23919 </li>
<li>https://www.definitions-marketing.com/definition/email-rendering/ </li>
<li>https://github.com/FunWithEmail/HTML-Email-Hacks </li>
<li>https://helpx.adobe.com/dreamweaver/using/reuse-code-with-snippets.html V1 - October 2018. p.103</li>
<li>https://emmet.io/ </li>
<li>http://removebluelinks.com/ </li>
<li>http://www.comprendre-internet.com/Qu-est-ce-que-le-HTML.html </li>
<li>http://www.pompage.net/traduction/Bien-utiliser-le-texte-alternatif </li>
<li>http://blog.emailwizardry.co/2012/12/how-to-fix-superscript-characters/ </li>
<li>https://github.com/bago/android-gmail-emulator </li>
<li>http://xahlee.info/js/html5_non-closing_tag.html </li>
<li>https://www.pierre-giraud.com/html-css/cours-complet/block-inline-html-css.php</li>
<li>https://audreytips.com/gmail-emailing-tronque/ </li>
<li>http://www.courtneyfantinato.com/correcting-outlook-dpi-scaling-issues/</li>
<li>http://sebsauvage.net/comprendre/dpi/index.html </li>
<li>https://www.lesintegristes.net/2011/05/06/web-resolution-72dpi/ </li>
<li>http://freshinbox.com/blog/faux-video-video-in-email-using-sprites/</li>
<li>https://codepen.io/kristianrobinson/pen/EwERve </li>
<li>http://www.emailmarketingtipps.de/2018/02/19/amp-for-email-controversies/ </li>
<li>https://www.lafabriquedunet.fr/email-marketing/articles/google-amp-emails-interactifs/ </li>
<li>https://blog.internet-formation.fr/2018/02/google-introduit-amp-for-email-pour-gmail/ </li>
<li>https://www.presse-citron.net/amp-google-veut-rendre-e-mails-plus-interactifs/ </li>
<li>http://blog.agence-bmobile.com/2018/02/amp-email-ce-que-le-gmail-interactif-va-peut-etre-changer-pour-vous/ </li>
<li>https://www.youtube.com/watch?v=sj2KANF9o3k </li>
<li>https://ignitevisibility.com/amp-for-email/ </li>
<li>https://www.definitions-marketing.com/definition/flash/ </li>
<li>http://email-a-table.fr/le-javascript-dans-les-emails,495</li>
<li>http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html https://www.anthony-brard.com/les-fonts-web-safe </li>
<li>https://websitesetup.org/web-safe-fonts-html-css/ </li>
<li>https://www.cssfontstack.com/ </li>
<li>https://www.alsacreations.com/article/lire/930-css3-media-queries.html</li>
<li>https://compressjpeg.com/fr/ </li>
<li>https://www.jpegmini.com/</li>
<li>https://tinyjpg.com/ </li>
<li>https://tinypng.com/</li>
<li>https://ezgif.com/</li>
<li>https://www.emailmonday.com/mobile-email-usage-statistics/</li>
<li>http://formation.upyupy.fr/html-xhtml/caracteres-speciaux/</li>
<li>https://www.jchr.be/html/caracteres.htm</li>
<li>https://htmlcolorcodes.com/fr/noms-de-couleur/</li>
<li>https://unsplash.com </li>
<li>The Radicati Group, "Email Statistics Reports, 2014-2018." </li>
<li>Email in Motion: How Mobile is Leading the Email Revolution, Return Path, 2011</li>
</ul>
<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>
</div>
<div class="elementor-element elementor-element-c9b879c e-con-full e-flex e-con e-child" data-id="c9b879c" data-element_type="container" data-settings="{"content_width":"full","sticky":"top","sticky_on":["desktop"],"sticky_offset":24,"container_type":"flex","sticky_effects_offset":0}">
<div class="elementor-element elementor-element-b69e5f2 elementor-widget elementor-widget-heading" data-id="b69e5f2" data-element_type="widget" data-widget_type="heading.default">
<div class="elementor-widget-container">
<p class="elementor-heading-title elementor-size-default">Share</p> </div>
</div>
<div class="elementor-element elementor-element-81d12ff e-con-full e-flex e-con e-child" data-id="81d12ff" data-element_type="container" data-settings="{"content_width":"full","container_type":"flex"}">
<div class="elementor-element elementor-element-fa763d9 elementor-share-buttons--view-icon elementor-share-buttons--skin-minimal elementor-share-buttons--color-custom elementor-share-buttons--shape-circle elementor-grid-1 elementor-widget__width-auto elementor-grid-tablet-4 elementor-widget elementor-widget-share-buttons" data-id="fa763d9" data-element_type="widget" data-widget_type="share-buttons.default">
<div class="elementor-widget-container">
<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>
</div>
</div>
<div class="elementor-element elementor-element-a3ee55d e-flex e-con-boxed e-con e-parent" data-id="a3ee55d" data-element_type="container" data-settings="{"background_background":"classic","container_type":"flex","content_width":"boxed"}" data-core-v316-plus="true">
<div class="e-con-inner">
<div class="elementor-element elementor-element-a972175 elementor-widget elementor-widget-heading" data-id="a972175" data-element_type="widget" data-widget_type="heading.default">
<div class="elementor-widget-container">
<p class="elementor-heading-title elementor-size-default">The author</p> </div>
</div>
<div class="elementor-element elementor-element-b4908b7 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="b4908b7" 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">
<img src="https://secure.gravatar.com/avatar/eb280423f79142f83c14477fff1a8519?s=336&d=mm&r=g" alt="Thomas Defossez" loading="lazy">
</a>
<div class="elementor-author-box__text">
<a href="https://www.badsender.com/en/author/tde/">
<span class="elementor-author-box__name">
Thomas Defossez </span>
</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/">
All publications </a>
</div>
</div>
</div>
</div>
</div>
</div>
<section class="elementor-section elementor-top-section elementor-element elementor-element-f9ec7b3 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="f9ec7b3" 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-1b98930" data-id="1b98930" data-element_type="column">
<div class="elementor-widget-wrap elementor-element-populated">
<div class="elementor-element elementor-element-19cdd6c elementor-widget elementor-widget-post-navigation" data-id="19cdd6c" data-element_type="widget" data-widget_type="post-navigation.default">
<div class="elementor-widget-container">
<div class="elementor-post-navigation">
<div class="elementor-post-navigation__prev elementor-post-navigation__link">
<a href="https://www.badsender.com/en/guides/guide-organization-crm-2/" rel="prev"><span class="elementor-post-navigation__link__prev"><span class="post-navigation__prev--label">Previous</span><span class="post-navigation__prev--title">What is the ideal organization for CRM, Marketing and Data teams?</span></span></a> </div>
<div class="elementor-post-navigation__next elementor-post-navigation__link">
<a href="https://www.badsender.com/en/guides/checklist-campaigns-emailing-2/" rel="next"><span class="elementor-post-navigation__link__next"><span class="post-navigation__next--label">Next</span><span class="post-navigation__next--title">Checking your email campaigns: the pre-send checklist!</span></span></a> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</article>
<footer data-elementor-type="footer" data-elementor-id="14487" class="elementor elementor-14487 elementor-location-footer" data-elementor-post-type="elementor_library">
<div class="elementor-element elementor-element-24ba4e8 e-flex e-con-boxed e-con e-parent" data-id="24ba4e8" data-element_type="container" data-settings="{"background_background":"classic","container_type":"flex","content_width":"boxed"}" data-core-v316-plus="true">
<div class="e-con-inner">
<div class="elementor-element elementor-element-1144a85 e-con-full e-flex e-con e-child" data-id="1144a85" data-element_type="container" data-settings="{"content_width":"full","container_type":"flex"}">
<div class="elementor-element elementor-element-c3f1376 elementor-widget elementor-widget-image" data-id="c3f1376" data-element_type="widget" data-widget_type="image.default">
<div class="elementor-widget-container">
<a href="https://www.badsender.com/en/">
<img 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-3ed2e47 elementor-widget elementor-widget-text-editor" data-id="3ed2e47" data-element_type="widget" data-widget_type="text-editor.default">
<div class="elementor-widget-container">
<p>Disruptor of More Responsible Marketing.</p> </div>
</div>
<div class="elementor-element elementor-element-b91c24c e-con-full e-flex e-con e-child" data-id="b91c24c" data-element_type="container" data-settings="{"content_width":"full","container_type":"flex"}">
<div class="elementor-element elementor-element-c53a2e1 elementor-view-stacked elementor-widget-mobile__width-auto elementor-shape-circle elementor-widget elementor-widget-icon" data-id="c53a2e1" 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">
<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-5dd84d1 elementor-view-stacked elementor-widget-mobile__width-auto elementor-shape-circle elementor-widget elementor-widget-icon" data-id="5dd84d1" 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">
<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-element elementor-element-788e8cc e-con-full e-flex e-con e-child" data-id="788e8cc" data-element_type="container" data-settings="{"content_width":"full","container_type":"flex"}">
<div class="elementor-element elementor-element-8da28b5 elementor-widget elementor-widget-text-editor" data-id="8da28b5" data-element_type="widget" data-widget_type="text-editor.default">
<div class="elementor-widget-container">
<p>Follow us on <strong><a href="https://twitter.com/badsender" target="_blank" rel="noopener">Twitter</a></strong>, <strong><a href="https://www.linkedin.com/company/badsender/" target="_blank" rel="noopener">Linkedin</a></strong>, <strong><a href="https://www.pinterest.fr/badsender/" target="_blank" rel="noopener">Pinterest</a></strong> | © 2023 - Badsender</p> </div>
</div>
<div class="elementor-element elementor-element-a92a3c9 elementor-widget elementor-widget-text-editor" data-id="a92a3c9" data-element_type="widget" data-widget_type="text-editor.default">
<div class="elementor-widget-container">
<p>Website illustrations sourced from <a href="https://icones8.fr/illustrations/style--3d-flame" target="_blank" rel="noopener">Icons8 (Flame 3D library)</a> and thanks to <a href="https://dribbble.com/thierryfousse" target="_blank" rel="noopener">the wonderful work by Thierry Fousse</a> !</p> </div>
</div>
</div>
<div class="elementor-element elementor-element-f43e598 e-con-full e-flex e-con e-child" data-id="f43e598" data-element_type="container" data-settings="{"content_width":"full","container_type":"flex"}">
<div class="elementor-element elementor-element-7c5338b elementor-nav-menu--dropdown-none elementor-nav-menu__align-center elementor-widget elementor-widget-nav-menu" data-id="7c5338b" data-element_type="widget" data-settings="{"layout":"vertical","submenu_icon":{"value":"<i class=\"\"><\/i>","library":""}}" data-widget_type="nav-menu.default">
<div class="elementor-widget-container">
<nav class="elementor-nav-menu--main elementor-nav-menu__container elementor-nav-menu--layout-vertical e--pointer-none">
<ul id="menu-1-7c5338b" class="elementor-nav-menu sm-vertical"><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-523208"><a href="https://www.badsender.com/en/about-us/" class="elementor-item">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">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">Privacy Policy</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-508444"><a href="https://www.badsender.com/en/endorsements/" class="elementor-item">Legal information</a></li>
</ul> </nav>
<nav class="elementor-nav-menu--dropdown elementor-nav-menu__container" aria-hidden="true">
<ul id="menu-2-7c5338b" class="elementor-nav-menu sm-vertical"><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-523208"><a href="https://www.badsender.com/en/about-us/" class="elementor-item" tabindex="-1">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">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">Privacy Policy</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-508444"><a href="https://www.badsender.com/en/endorsements/" class="elementor-item" tabindex="-1">Legal information</a></li>
</ul> </nav>
</div>
</div>
</div>
</div>
</div>
</footer>
<template id="tp-language" data-tp-language="en_US"></template><!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
// Sélectionnez la div avec la classe elementor-nav-menu--dropdown et supprimez-la
//$(function () {
// $(".elementor-nav-menu--dropdown").remove();
//});
</script>-->
<!-- 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 technical storage or access is necessary for the legitimate purpose of storing 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">The technical storage or access that is used exclusively for anonymous statistical purposes. Without a subpoena, voluntary compliance on the part of your Internet Service Provider, or additional records from a third party, information stored or retrieved for this purpose alone cannot usually be used to identify you.</span>
</div>
</details>
<details class="cmplz-category cmplz-marketing" >
<summary>
<span class="cmplz-category-header">
<span class="cmplz-category-title">Marketing</span>
<span class="cmplz-banner-checkbox">
<input type="checkbox"
id="cmplz-marketing-optin"
data-category="cmplz_marketing"
class="cmplz-consent-checkbox cmplz-marketing"
size="40"
value="1"/>
<label class="cmplz-label" for="cmplz-marketing-optin" tabindex="0"><span class="screen-reader-text">Marketing</span></label>
</span>
<span class="cmplz-icon cmplz-open">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 448 512" height="18" ><path d="M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z"/></svg>
</span>
</span>
</summary>
<div class="cmplz-description">
<span class="cmplz-description-marketing">The storage or technical access is necessary to create user profiles to send advertisements, or to track the user across a website or multiple websites for similar marketing purposes.</span>
</div>
</details>
</div><!-- categories end -->
</div>
<div class="cmplz-links cmplz-information">
<a class="cmplz-link cmplz-manage-options cookie-statement" href="#" data-relative_url="#cmplz-manage-consent-container" data-no-translation="" data-trp-gettext="">Gérer les options</a>
<a class="cmplz-link cmplz-manage-third-parties cookie-statement" href="#" data-relative_url="#cmplz-cookies-overview" data-no-translation="" data-trp-gettext="">Gérer les services</a>
<a class="cmplz-link cmplz-manage-vendors tcf cookie-statement" href="#" data-relative_url="#cmplz-tcf-wrapper" data-no-translation="" data-trp-gettext="">Manage {vendor_count} vendors</a>
<a class="cmplz-link cmplz-external cmplz-read-more-purposes tcf" target="_blank" rel="noopener noreferrer nofollow" href="https://cookiedatabase.org/tcf/purposes/" data-no-translation="" data-trp-gettext="">En savoir plus sur ces finalités</a>
</div>
<div class="cmplz-divider cmplz-footer"></div>
<div class="cmplz-buttons">
<button class="cmplz-btn cmplz-accept">Accept</button>
<button class="cmplz-btn cmplz-deny">Refuse</button>
<button class="cmplz-btn cmplz-view-preferences">View preferences</button>
<button class="cmplz-btn cmplz-save-preferences">Save preferences</button>
<a class="cmplz-btn cmplz-manage-options tcf cookie-statement" href="#" data-relative_url="#cmplz-manage-consent-container">View preferences</a>
</div>
<div class="cmplz-links cmplz-documents">
<a class="cmplz-link cookie-statement" href="#" data-relative_url="">{title}</a>
<a class="cmplz-link privacy-statement" href="#" data-relative_url="">{title}</a>
<a class="cmplz-link impressum" href="#" data-relative_url="">{title}</a>
</div>
</div>
</div>
<div id="cmplz-manage-consent" data-nosnippet="true"><button class="cmplz-btn cmplz-hidden cmplz-manage-consent manage-consent-1">Hmmm, cookkiiieesss...</button>
</div> <script type='text/javascript'>
const lazyloadRunObserver = () => {
const dataAttribute = 'data-e-bg-lazyload';
const lazyloadBackgrounds = document.querySelectorAll( `[${ dataAttribute }]:not(.lazyloaded)` );
const lazyloadBackgroundObserver = new IntersectionObserver( ( entries ) => {
entries.forEach( ( entry ) => {
if ( entry.isIntersecting ) {
let lazyloadBackground = entry.target;
const lazyloadSelector = lazyloadBackground.getAttribute( dataAttribute );
if ( lazyloadSelector ) {
lazyloadBackground = entry.target.querySelector( lazyloadSelector );
}
if( lazyloadBackground ) {
lazyloadBackground.classList.add( 'lazyloaded' );
}
lazyloadBackgroundObserver.unobserve( entry.target );
}
});
}, { rootMargin: '100px 0px 100px 0px' } );
lazyloadBackgrounds.forEach( ( lazyloadBackground ) => {
lazyloadBackgroundObserver.observe( lazyloadBackground );
} );
};
const events = [
'DOMContentLoaded',
'elementor/lazyload/observe',
];
events.forEach( ( event ) => {
document.addEventListener( event, lazyloadRunObserver );
} );
</script>
<link rel='stylesheet' id='forminator-module-css-560354-css' href='https://www.badsender.com/wp-content/uploads/forminator/560354_227c8523fdc61eab23c17f236b22500d/css/style-560354.css?ver=1695749779' type='text/css' media='all' />
<link rel='stylesheet' id='forminator-icons-css' href='https://www.badsender.com/wp-content/plugins/forminator/assets/forminator-ui/css/forminator-icons.min.css?ver=1.26.0' type='text/css' media='all' />
<link rel='stylesheet' id='forminator-utilities-css' href='https://www.badsender.com/wp-content/plugins/forminator/assets/forminator-ui/css/src/forminator-utilities.min.css?ver=1.26.0' type='text/css' media='all' />
<link rel='stylesheet' id='forminator-grid-default-css' href='https://www.badsender.com/wp-content/plugins/forminator/assets/forminator-ui/css/src/grid/forminator-grid.open.min.css?ver=1.26.0' type='text/css' media='all' />
<link rel='stylesheet' id='buttons-css' href='https://www.badsender.com/wp-includes/css/buttons.min.css?ver=6.3.1' type='text/css' media='all' />
<link rel='stylesheet' id='elementor-post-549982-css' href='https://www.badsender.com/wp-content/uploads/elementor/css/post-549982.css?ver=1695631623' type='text/css' media='all' />
<link rel='stylesheet' id='forminator-module-css-564970-css' href='https://www.badsender.com/wp-content/uploads/forminator/564970_17b9f230ce1ec866801057c935db0b56/css/style-564970.css?ver=1695631539' type='text/css' media='all' />
<script type='text/javascript' id='trp-dynamic-translator-js-extra'>
/* <![CDATA[ */
var trp_data = {"trp_custom_ajax_url":"https:\/\/www.badsender.com\/wp-content\/plugins\/translatepress-multilingual\/includes\/trp-ajax.php","trp_wp_ajax_url":"https:\/\/www.badsender.com\/wp-admin\/admin-ajax.php","trp_language_to_query":"en_US","trp_original_language":"fr_FR","trp_current_language":"en_US","trp_skip_selectors":["[data-no-translation]","[data-no-dynamic-translation]","[data-trp-translate-id-innertext]","script","style","head","trp-span","translate-press","[data-trp-translate-id]","[data-trpgettextoriginal]","[data-trp-post-slug]"],"trp_base_selectors":["data-trp-translate-id","data-trpgettextoriginal","data-trp-post-slug"],"trp_attributes_selectors":{"text":{"accessor":"outertext","attribute":false},"block":{"accessor":"innertext","attribute":false},"image_src":{"selector":"img[src]","accessor":"src","attribute":true},"submit":{"selector":"input[type='submit'],input[type='button'], input[type='reset']","accessor":"value","attribute":true},"placeholder":{"selector":"input[placeholder],textarea[placeholder]","accessor":"placeholder","attribute":true},"title":{"selector":"[title]","accessor":"title","attribute":true},"a_href":{"selector":"a[href]","accessor":"href","attribute":true},"button":{"accessor":"outertext","attribute":false},"option":{"accessor":"innertext","attribute":false},"aria_label":{"selector":"[aria-label]","accessor":"aria-label","attribute":true},"image_alt":{"selector":"img[alt]","accessor":"alt","attribute":true},"meta_desc":{"selector":"meta[name=\"description\"],meta[property=\"og:title\"],meta[property=\"og:description\"],meta[property=\"og:site_name\"],meta[property=\"og:image:alt\"],meta[name=\"twitter:title\"],meta[name=\"twitter:description\"],meta[name=\"twitter:image:alt\"],meta[name=\"DC.Title\"],meta[name=\"DC.Description\"]","accessor":"content","attribute":true},"page_title":{"selector":"title","accessor":"innertext","attribute":false},"meta_desc_img":{"selector":"meta[property=\"og:image\"],meta[property=\"og:image:secure_url\"],meta[name=\"twitter:image\"]","accessor":"content","attribute":true}},"trp_attributes_accessors":["outertext","innertext","src","value","placeholder","title","href","aria-label","alt","content"],"gettranslationsnonceregular":"34f8a9bf26","showdynamiccontentbeforetranslation":"","skip_strings_from_dynamic_translation":[],"skip_strings_from_dynamic_translation_for_substrings":{"href":["amazon-adsystem","googleads","g.doubleclick"]},"duplicate_detections_allowed":"100","trp_translate_numerals_opt":"no","trp_no_auto_translation_selectors":["[data-no-auto-translation]"]};
/* ]]> */
</script>
<script type='text/javascript' src='https://www.badsender.com/wp-content/plugins/translatepress-multilingual/assets/js/trp-translate-dom-changes.js?ver=2.6.2' id='trp-dynamic-translator-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":"0","banner_version":"54","version":"6.5.4","store_consent":"","do_not_track_enabled":"1","consenttype":"optin","region":"eu","geoip":"","dismiss_timeout":"","disable_cookiebanner":"","soft_cookiewall":"","dismiss_on_scroll":"","cookie_expiry":"365","url":"https:\/\/www.badsender.com\/en\/wp-json\/complianz\/v1\/","locale":"lang=en&locale=en_US","set_cookies_on_root":"0","cookie_domain":"","current_policy_id":"21","cookie_path":"\/","categories":{"statistics":"statistics","marketing":"marketing"},"tcf_active":"","placeholdertext":"Cliquez pour accepter les cookies {category} et activer ce contenu","aria_label":"Cliquez pour accepter les cookies {category} et activer ce contenu","css_file":"https:\/\/www.badsender.com\/wp-content\/uploads\/complianz\/css\/banner-{banner_id}-{type}.css?v=54","page_links":{"eu":{"cookie-statement":{"title":"Politique de cookies ","url":"https:\/\/www.badsender.com\/en\/policy-of-cookies-eu\/"},"privacy-statement":{"title":"Vie priv\u00e9e","url":"https:\/\/www.badsender.com\/en\/privacy\/"}}},"tm_categories":"","forceEnableStats":"","preview":"","clean_cookies":""};
/* ]]> */
</script>
<script defer type='text/javascript' src='https://www.badsender.com/wp-content/plugins/complianz-gdpr/cookiebanner/js/complianz.min.js?ver=6.5.4' id='cmplz-cookiebanner-js'></script>
<script id="cmplz-cookiebanner-js-after" type="text/javascript">
document.addEventListener("cmplz_enable_category", function(consentData) {
var category = consentData.detail.category;
var services = consentData.detail.services;
var blockedContentContainers = [];
let selectorVideo = '.cmplz-elementor-widget-video-playlist[data-category="'+category+'"],.elementor-widget-video[data-category="'+category+'"]';
let selectorGeneric = '[data-cmplz-elementor-href][data-category="'+category+'"]';
for (var skey in services) {
if (services.hasOwnProperty(skey)) {
let service = skey;
selectorVideo +=',.cmplz-elementor-widget-video-playlist[data-service="'+service+'"],.elementor-widget-video[data-service="'+service+'"]';
selectorGeneric +=',[data-cmplz-elementor-href][data-service="'+service+'"]';
}
}
document.querySelectorAll(selectorVideo).forEach(obj => {
let elementService = obj.getAttribute('data-service');
if ( cmplz_is_service_denied(elementService) ) {
return;
}
if (obj.classList.contains('cmplz-elementor-activated')) return;
obj.classList.add('cmplz-elementor-activated');
if ( obj.hasAttribute('data-cmplz_elementor_widget_type') ){
let attr = obj.getAttribute('data-cmplz_elementor_widget_type');
obj.classList.removeAttribute('data-cmplz_elementor_widget_type');
obj.classList.setAttribute('data-widget_type', attr);
}
if (obj.classList.contains('cmplz-elementor-widget-video-playlist')) {
obj.classList.remove('cmplz-elementor-widget-video-playlist');
obj.classList.add('elementor-widget-video-playlist');
}
obj.setAttribute('data-settings', obj.getAttribute('data-cmplz-elementor-settings'));
blockedContentContainers.push(obj);
});
document.querySelectorAll(selectorGeneric).forEach(obj => {
let elementService = obj.getAttribute('data-service');
if ( cmplz_is_service_denied(elementService) ) {
return;
}
if (obj.classList.contains('cmplz-elementor-activated')) return;
if (obj.classList.contains('cmplz-fb-video')) {
obj.classList.remove('cmplz-fb-video');
obj.classList.add('fb-video');
}
obj.classList.add('cmplz-elementor-activated');
obj.setAttribute('data-href', obj.getAttribute('data-cmplz-elementor-href'));
blockedContentContainers.push(obj.closest('.elementor-widget'));
});
/**
* Trigger the widgets in Elementor
*/
for (var key in blockedContentContainers) {
if (blockedContentContainers.hasOwnProperty(key) && blockedContentContainers[key] !== undefined) {
let blockedContentContainer = blockedContentContainers[key];
if (elementorFrontend.elementsHandler) {
elementorFrontend.elementsHandler.runReadyTrigger(blockedContentContainer)
}
var cssIndex = blockedContentContainer.getAttribute('data-placeholder_class_index');
blockedContentContainer.classList.remove('cmplz-blocked-content-container');
blockedContentContainer.classList.remove('cmplz-placeholder-' + cssIndex);
}
}
});
</script>
<script type='text/javascript' src='https://www.badsender.com/wp-content/plugins/elementor-pro/assets/lib/smartmenus/jquery.smartmenus.min.js?ver=1.0.1' id='smartmenus-js'></script>
<script type='text/javascript' src='https://www.badsender.com/wp-content/plugins/forminator/assets/js/library/jquery.validate.min.js?ver=1.26.0' id='forminator-jquery-validate-js'></script>
<script type='text/javascript' src='https://www.badsender.com/wp-content/plugins/forminator/assets/forminator-ui/js/forminator-form.min.js?ver=1.26.0' id='forminator-form-js'></script>
<script type='text/javascript' id='forminator-front-scripts-js-extra'>
/* <![CDATA[ */
var ForminatorFront = {"ajaxUrl":"https:\/\/www.badsender.com\/wp-admin\/admin-ajax.php","cform":{"processing":"Submitting form, please wait","error":"An error occurred while processing the form. Please try again","upload_error":"An upload error occurred while processing the form. Please try again","pagination_prev":"Previous","pagination_next":"Next","pagination_go":"Submit","gateway":{"processing":"Processing payment, please wait","paid":"Success! Payment confirmed. Submitting form, please wait","error":"Error! Something went wrong when verifying the payment"},"captcha_error":"Invalid CAPTCHA","no_file_chosen":"No file chosen","intlTelInput_utils_script":"https:\/\/www.badsender.com\/wp-content\/plugins\/forminator\/assets\/js\/library\/intlTelInputUtils.js","process_error":"Please try again"},"poll":{"processing":"Submitting vote, please wait","error":"An error occurred saving the vote. Please try again"},"quiz":{"view_results":"View Results"},"select2":{"load_more":"Loading more results\u2026","no_result_found":"No results found","searching":"Searching\u2026","loaded_error":"The results could not be loaded."}};
var ForminatorFront = {"ajaxUrl":"https:\/\/www.badsender.com\/wp-admin\/admin-ajax.php","cform":{"processing":"Submitting form, please wait","error":"An error occurred while processing the form. Please try again","upload_error":"An upload error occurred while processing the form. Please try again","pagination_prev":"Previous","pagination_next":"Next","pagination_go":"Submit","gateway":{"processing":"Processing payment, please wait","paid":"Success! Payment confirmed. Submitting form, please wait","error":"Error! Something went wrong when verifying the payment"},"captcha_error":"Invalid CAPTCHA","no_file_chosen":"No file chosen","intlTelInput_utils_script":"https:\/\/www.badsender.com\/wp-content\/plugins\/forminator\/assets\/js\/library\/intlTelInputUtils.js","process_error":"Please try again"},"poll":{"processing":"Submitting vote, please wait","error":"An error occurred saving the vote. Please try again"},"quiz":{"view_results":"View Results"},"select2":{"load_more":"Loading more results\u2026","no_result_found":"No results found","searching":"Searching\u2026","loaded_error":"The results could not be loaded."}};
/* ]]> */
</script>
<script type='text/javascript' src='https://www.badsender.com/wp-content/plugins/forminator/build/front/front.multi.min.js?ver=1.26.0' id='forminator-front-scripts-js'></script>
<script id="forminator-front-scripts-js-after" type="text/javascript">
(function ($, document, window) {
"use strict";
(function () {
$(function () {
if (window.elementorFrontend) {
if (typeof elementorFrontend.hooks !== "undefined") {
elementorFrontend.hooks.addAction("frontend/element_ready/global", function ( $scope ) {
if ( $scope.find( "#forminator-module-560354" ).length > 0 ) {
if (typeof ($.fn.forminatorLoader) !== 'undefined') {
renderForminatorAjax( 560354, {"action":"forminator_load_form","type":"forminator_forms","id":560354,"render_id":0,"is_preview":false,"preview_data":[],"last_submit_data":[],"nonce":"d14a5974fc","extra":{"_wp_http_referer":"","page_id":562814,"referer_url":""}}, 0 );
}
}
});
}
// Elementor Popup
$( document ).on( 'elementor/popup/show', () => {
if (typeof ($.fn.forminatorLoader) !== 'undefined') {
renderForminatorAjax( 560354, {"action":"forminator_load_form","type":"forminator_forms","id":560354,"render_id":0,"is_preview":false,"preview_data":[],"last_submit_data":[],"nonce":"d14a5974fc","extra":{"_wp_http_referer":"","page_id":562814,"referer_url":""}}, 0 );
}
} );
}
if (typeof ($.fn.forminatorLoader) === 'undefined') {
console.log('forminator scripts not loaded');
} else {
renderForminatorAjax( 560354, {"action":"forminator_load_form","type":"forminator_forms","id":560354,"render_id":0,"is_preview":false,"preview_data":[],"last_submit_data":[],"nonce":"d14a5974fc","extra":{"_wp_http_referer":"","page_id":562814,"referer_url":""}}, 0 );
}
});
function renderForminatorAjax ( id, frontLoaderConfig, renderId ) {
var front_loader_config = frontLoaderConfig;
front_loader_config.extra.referer_url = document.referrer;
$('#forminator-module-' + id + '[data-forminator-render="' + renderId + '"]')
.forminatorLoader(front_loader_config);
}
})();
}(jQuery, document, window));
</script>
<script type='text/javascript' src='https://www.badsender.com/wp-content/plugins/elementor-pro/assets/js/webpack-pro.runtime.min.js?ver=3.16.2' id='elementor-pro-webpack-runtime-js'></script>
<script type='text/javascript' src='https://www.badsender.com/wp-content/plugins/elementor/assets/js/webpack.runtime.min.js?ver=3.16.4' id='elementor-webpack-runtime-js'></script>
<script type='text/javascript' src='https://www.badsender.com/wp-content/plugins/elementor/assets/js/frontend-modules.min.js?ver=3.16.4' id='elementor-frontend-modules-js'></script>
<script type='text/javascript' src='https://www.badsender.com/wp-includes/js/dist/vendor/wp-polyfill-inert.min.js?ver=3.1.2' id='wp-polyfill-inert-js'></script>
<script type='text/javascript' src='https://www.badsender.com/wp-includes/js/dist/vendor/regenerator-runtime.min.js?ver=0.13.11' id='regenerator-runtime-js'></script>
<script type='text/javascript' src='https://www.badsender.com/wp-includes/js/dist/vendor/wp-polyfill.min.js?ver=3.15.0' id='wp-polyfill-js'></script>
<script type='text/javascript' src='https://www.badsender.com/wp-includes/js/dist/hooks.min.js?ver=c6aec9a8d4e5a5d543a1' id='wp-hooks-js'></script>
<script type='text/javascript' src='https://www.badsender.com/wp-includes/js/dist/i18n.min.js?ver=7701b0c3857f914212ef' id='wp-i18n-js'></script>
<script id="wp-i18n-js-after" type="text/javascript">
wp.i18n.setLocaleData( { 'text direction\u0004ltr': [ 'ltr' ] } );
</script>
<script id="elementor-pro-frontend-js-before" type="text/javascript">
var ElementorProFrontendConfig = {"ajaxurl":"https:\/\/www.badsender.com\/wp-admin\/admin-ajax.php","nonce":"74d83c1258","urls":{"assets":"https:\/\/www.badsender.com\/wp-content\/plugins\/elementor-pro\/assets\/","rest":"https:\/\/www.badsender.com\/en\/wp-json\/"},"shareButtonsNetworks":{"facebook":{"title":"Facebook","has_counter":true},"twitter":{"title":"Twitter"},"linkedin":{"title":"LinkedIn","has_counter":true},"pinterest":{"title":"Pinterest","has_counter":true},"reddit":{"title":"Reddit","has_counter":true},"vk":{"title":"VK","has_counter":true},"odnoklassniki":{"title":"OK","has_counter":true},"tumblr":{"title":"Tumblr"},"digg":{"title":"Digg"},"skype":{"title":"Skype"},"stumbleupon":{"title":"StumbleUpon","has_counter":true},"mix":{"title":"Mix"},"telegram":{"title":"Telegram"},"pocket":{"title":"Pocket","has_counter":true},"xing":{"title":"XING","has_counter":true},"whatsapp":{"title":"WhatsApp"},"email":{"title":"Email"},"print":{"title":"Print"}},"facebook_sdk":{"lang":"en_US","app_id":""},"lottie":{"defaultAnimationUrl":"https:\/\/www.badsender.com\/wp-content\/plugins\/elementor-pro\/modules\/lottie\/assets\/animations\/default.json"}};
</script>
<script type='text/javascript' src='https://www.badsender.com/wp-content/plugins/elementor-pro/assets/js/frontend.min.js?ver=3.16.2' id='elementor-pro-frontend-js'></script>
<script type='text/javascript' src='https://www.badsender.com/wp-content/plugins/elementor/assets/lib/waypoints/waypoints.min.js?ver=4.0.2' id='elementor-waypoints-js'></script>
<script type='text/javascript' src='https://www.badsender.com/wp-includes/js/jquery/ui/core.min.js?ver=1.13.2' id='jquery-ui-core-js'></script>
<script id="elementor-frontend-js-before" type="text/javascript">
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","a11yCarouselWrapperAriaLabel":"Carousel | Horizontal scrolling: Arrow Left & Right","a11yCarouselPrevSlideMessage":"Previous slide","a11yCarouselNextSlideMessage":"Next slide","a11yCarouselFirstSlideMessage":"This is the first slide","a11yCarouselLastSlideMessage":"This is the last slide","a11yCarouselPaginationBulletMessage":"Go to slide"},"is_rtl":false,"breakpoints":{"xs":0,"sm":480,"md":769,"lg":1057,"xl":1440,"xxl":1600},"responsive":{"breakpoints":{"mobile":{"label":"Mobile Portrait","value":768,"default_value":767,"direction":"max","is_enabled":true},"mobile_extra":{"label":"Mobile Landscape","value":880,"default_value":880,"direction":"max","is_enabled":false},"tablet":{"label":"Tablet Portrait","value":1056,"default_value":1024,"direction":"max","is_enabled":true},"tablet_extra":{"label":"Tablet Landscape","value":1200,"default_value":1200,"direction":"max","is_enabled":false},"laptop":{"label":"Laptop","value":1366,"default_value":1366,"direction":"max","is_enabled":false},"widescreen":{"label":"Widescreen","value":2400,"default_value":2400,"direction":"min","is_enabled":false}}},"version":"3.16.4","is_static":false,"experimentalFeatures":{"e_dom_optimization":true,"e_optimized_assets_loading":true,"e_font_icon_svg":true,"container":true,"container_grid":true,"theme_builder_v2":true,"editor_v2":true,"e_lazyload":true,"form-submissions":true,"taxonomy-filter":true},"urls":{"assets":"https:\/\/www.badsender.com\/wp-content\/plugins\/elementor\/assets\/"},"swiperClass":"swiper-container","settings":{"page":[],"editorPreferences":[]},"kit":{"viewport_mobile":768,"viewport_tablet":1056,"active_breakpoints":["viewport_mobile","viewport_tablet"],"global_image_lightbox":"yes"},"post":{"id":562814,"title":"Apprendre%20%C3%A0%20coder%20un%20template%20email%20responsive%20en%20HTML%20%2F%20CSS","excerpt":"","featuredImage":"https:\/\/www.badsender.com\/wp-content\/uploads\/2023\/03\/valery-sysoev-p9OkL4yW3C8-unsplash-1024x683.jpg"}};
</script>
<script type='text/javascript' src='https://www.badsender.com/wp-content/plugins/elementor/assets/js/frontend.min.js?ver=3.16.4' id='elementor-frontend-js'></script>
<script type='text/javascript' src='https://www.badsender.com/wp-content/plugins/elementor-pro/assets/js/elements-handlers.min.js?ver=3.16.2' id='pro-elements-handlers-js'></script>
<script type='text/javascript' src='https://www.badsender.com/wp-content/plugins/elementor-pro/assets/lib/sticky/jquery.sticky.min.js?ver=3.16.2' id='e-sticky-js'></script>
<!-- Statistics script Complianz GDPR/CCPA -->
<script data-category="functional">var _paq = window._paq || [];
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
_paq.push(['requireCookieConsent']);
(function() {
var u="https://analytics.badsender.com/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '2']);
_paq.push(['setSecureCookie', window.location.protocol === "https:" ]);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.type='text/javascript'; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
document.addEventListener("cmplz_fire_categories", function (e) {
var consentedCategories = e.detail.categories;
if (!cmplz_in_array( 'statistics', consentedCategories )) {
_paq.push(['forgetCookieConsentGiven']);
} else {
_paq.push(['rememberCookieConsentGiven']);
}
});
</script><script type="text/javascript">jQuery(function() {jQuery.ajax({url: 'https://www.badsender.com/wp-admin/admin-ajax.php',type: "POST",data: {action: "forminator_get_nonce",},success: function (response) {jQuery('#forminator-module-564970 #forminator_nonce').val( response.data );}});})</script> <script type="text/javascript">
jQuery(function () {
window.Forminator_Cform_Paginations = window.Forminator_Cform_Paginations || [];
window.Forminator_Cform_Paginations[564970] =
{"has-pagination":false,"pagination-header-design":"show","pagination-header":"nav","last-steps":"Finish","last-previous":"Previous","pagination-labels":"default","has-paypal":false};
var runForminatorFront = function () {
jQuery('#forminator-module-564970[data-forminator-render="0"]')
.forminatorFront({"form_type":"custom-form","inline_validation":true,"print_value":false,"rules":"\"email-1\": {\n\"required\": true,\"emailWP\": true,},\n","messages":"\"email-1\": {\n\"required\": \"This field is required. Please input a valid email.\",\n\"emailWP\": \"Veuillez vérifier votre adresse email.\",\n\"email\": \"Veuillez vérifier votre adresse email.\",\n},\n","conditions":{"fields":[],"relations":{"email-1":[],"hidden-1":[],"submit":[]}},"calendar":"{\"days\":[\"Su\",\"Mo\",\"Tu\",\"We\",\"Th\",\"Fr\",\"Sa\"],\"months\":[\"Jan\",\"Feb\",\"Mar\",\"Apr\",\"May\",\"Jun\",\"Jul\",\"Aug\",\"Sep\",\"Oct\",\"Nov\",\"Dec\"]}","paypal_config":{"live_id":"","sandbox_id":"","redirect_url":"https:\/\/www.badsender.com\/en\/guides\/code-a-email","form_id":564970},"forminator_fields":["address","calculation","captcha","consent","currency","custom","date","email","gdprcheckbox","group","hidden","html","checkbox","name","number","page-break","password","paypal","phone","postdata","radio","section","select","stripe","text","textarea","time","upload","url"],"general_messages":{"calculation_error":"Failed to calculate field.","payment_require_ssl_error":"SSL required to submit this form, please check your URL.","payment_require_amount_error":"PayPal amount must be greater than 0.","form_has_error":"Please correct the errors before submission."},"payment_require_ssl":false,"has_loader":true,"loader_label":"Soumission en cours\u2026","calcs_memoize_time":300,"is_reset_enabled":true,"has_stripe":false,"has_paypal":false,"submit_button_class":""});
}
if (window.elementorFrontend) {
if (typeof elementorFrontend.hooks !== "undefined") {
elementorFrontend.hooks.addAction('frontend/element_ready/global', function () {
runForminatorFront();
});
}
} else {
runForminatorFront();
}
if (typeof ForminatorValidationErrors !== 'undefined') {
var forminatorFrontSubmit = jQuery(ForminatorValidationErrors.selector).data('forminatorFrontSubmit');
if (typeof forminatorFrontSubmit !== 'undefined') {
forminatorFrontSubmit.show_messages(ForminatorValidationErrors.errors);
}
}
if (typeof ForminatorFormHider !== 'undefined') {
var forminatorFront = jQuery(ForminatorFormHider.selector).data('forminatorFront');
if (typeof forminatorFront !== 'undefined') {
jQuery(forminatorFront.forminator_selector).find('.forminator-row').hide();
jQuery(forminatorFront.forminator_selector).find('.forminator-pagination-steps').hide();
jQuery(forminatorFront.forminator_selector).find('.forminator-pagination-footer').hide();
}
}
if (typeof ForminatorFormNewTabRedirect !== 'undefined') {
var forminatorFront = ForminatorFormNewTabRedirect.url;
if (typeof forminatorFront !== 'undefined') {
window.open(ForminatorFormNewTabRedirect.url, '_blank');
}
}
});
</script>
</body>
</html>
<!-- Cached by WP-Optimize (gzip) - https://getwpo.com - Last modified: 27/09/2023 15h27 (Europe/Paris UTC:2) -->
