Wednesday, June 3, 2020, 10:41 AM. I'm convinced of that now. I love the emailing integrator's job. Every day brings its share of surprises and astonishments. Sometimes also, rage. In the middle of this week, I noticed that, not content with making our task more complex by imposing their own interpretation of CSS styles and HTML tags within an email, some email clients apply CSS styles, automatic formatting properties on HTML elements on which the emailing integrator would not have seen fit to assign "CSS reset".
I decide to look at the Laposte.net case. Indeed, the French webmails (Orange.fr or Laposte.net) are more ignored by email preview platforms like Litmus or EmailonAcid. So I have to deal with the problem head on.
Wednesday, June 3, 2020, 10:46 AM. I develop a basic code, with a minimum of content, if only to detect the most simple pitfalls to avoid. My proof is made of a simple <table>without tag <doctype>, <html>, <head> or <body>. In this table, I insert each level of a title tag (<h1>,<h2>,<h3>,<h4>,<h5>,<h6>) and a simple paragraph <p>. No graphic formatting, just HTML and plain text.
Wednesday, June 3, 2020, 10:56 AM. And then no, I decide to go a little further: if I have to take risks, I might as well go all the way. I extend to tags, semantic or not, the safest ones in use in email marketing: <div>, <hr>, , <b>, <strong>, , <span>, <a>, , , <img> and even comments, I feel like an adventurer.
<!-- start test -->
<table style="width:300px; margin:0px auto;" border="0" cellspacing="0" cellpadding="0">
<tr>
<th><div>
<h1>h1 tag : lorem ipsum dolor sit amet</h1>
<h2>h2 tag : lorem ipsum dolor sit amet</h2>
<h3>h3 tag : lorem ipsum dolor sit amet</h3>
<h4>h4 tag : lorem ipsum dolor sit amet</h4>
<h5>h5 tag : lorem ipsum dolor sit amet</h5>
<h6>h6 tag : lorem ipsum dolor sit amet</h6>
<hr>
<p>p tag: lorem <a href="#toreplace">ipsum dolor</a> sit amet <i>i tag lorem ipsum dolor</i> sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum <strong>strong tag dolor sit amet lorem</strong> ipsum dolor sit amet lorem <b>b tag ipsum dolor sit</b> amet lorem ipsum <em>em tag dolor sit amet</em> lorem ipsum dolor sit amet lorem ipsum dolor sit amet</p>
<blockquote>lorem ipsum dolor sit amet lorem <span>span tag ipsum dolor sit</span> amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet </blockquote>
<ul>
<li>lorem ipsum dolor sit amet</li>
<li>lorem ipsum dolor sit amet</li>
<li>lorem ipsum dolor sit amet</li>
</ul>
<img src="https://via.placeholder.com/300x300">
</div>
</th>
</tr>
</table>
<!-- end test -->Wednesday, June 03, 2020, 11:00 am. I send the proof, the result is clear. Laposte.net considerably modifies the rendering of this "very simple" email by executing graphic formatting on several of the tested subjects:
Wednesday 03 June 2020, 11:15. Let's start with the "title" elements and what is visible: My tag <h2> has a bright blue background color. Laposte.net assigns the hexadecimal code #0907F7 to the bottom of all <h2>. In addition, by default, the color assigned to the text (if no color is specified in the style) is a dark grey #354963. Finally, margins at the top and bottom of the .83em are automatically inserted. It's less visible, but it's there. Like the border at the bottom of the tag, which is 1 pixel thick and a very light gray #EDEDED. All these formatting is applied via the main.css style sheet, specific to webmail. I conclude that it is necessary to reset the <h2> with CSS properties border:none; background-color:transparent; margin:0;
Wednesday 03 June 2020, 11:26. I continue on the "title" elements and on what is visible. I notice that the h3 element is also accompanied by a border at the bottom. Even worse, it suffers from an internal right margin of 150 pixels (at least, this is the value that comes up when I go through the code inspector)an internal margin of 1rem at the bottom, and an internal left margin of 0.5rem. So in the future, I'll have to embellish my tags <h3> CSS properties padding:0px; border:none;
Wednesday 03 June 2020, 13:07 (I have eaten in the meantime, I need to regain my strength to face these hostile countries). Let's move on, if only for the tags seen previously, to what is not "immediately" visible: My element <h1> seems to have disappeared for good. It is not so. This element, in addition to suffering from automatic top and bottom external margins, inherits a white text color #FFFFFF. Since no background color is specified in the email, the text is white on white background.
It should also be noted, and this is the beginning of my investigation, that the <th> including all the textual content of my email supports a white background color by default. Therefore, even if I assign a background color to the body (<body>) of the email, the content of the current email will remain on a white background. And be careful: it will not only be a matter of pasting a bgcolor on the <th>, but the CSS property background-color : Laposte.net uses the CSS property background-color and not the attribute bgcolor to administer the white at the bottom of the <th>.
Wednesday, June 03, 2020, 13:21. I continue my inspection, and I am now certain thatit is necessary to apply a margin:0px to all my tags containing text. Most of them are indeed suffering from an outside margin at the bottom and at the top.
So I move on to the <hr>which does not seem to suffer any damage. Good, at least one soldier was spared. The same seems to be true for the <p>.
Wednesday, June 03, 2020, 13:31. Inside the element <p>I realize with horror that my hyperlink <a> is undergoing a significant change: a background color is applied, as well as an inner margin on the right. The text is now white, underlined, on a gray background. My console tells me that the elements <a> visited or not visited, present in a tag <th>s, inherit the CSS properties color:#FFF, background:#808080 and padding-right:20px. So much violence. Why, Laposte.net... Why? From now on, I must also think about applying a padding:0px; and a background:transparent to the elements <a> present in an element <th>.
Wednesday, June 03, 2020, 13:37. The last elements to be explored are not known to enjoy the same rendering on the majority of mail clients, but I'm working on them anyway. The tag adopts here an outer margin on the right and left of 40 pixels, and an outer margin on the top and bottom of 1.33em. Same result for the element <img> does not seem to undergo any automatic change.
Wednesday, June 03, 2020, 16:00. Is it still necessary to fight... I think I surrender when I see that some elements suffer by default from a text-align:left; and others, not (If the majority of my elements are centered, it is in particular due to the element <th>. But why do some title elements have the right to be automatically shod to the left?) and that my elements <h1>,<h2>and <h3> automatically adopt the Roboto font, but not the rest. But I won't be defeated so easily. In the future, it will be enough to systematically think about the CSS reset to be applied to overcome the problem of legacy CSS styles on email clients. Yes. Simply. Methodically. And the battle will be won.
My battlefield colleague, Rémi Parmentier, warns me that there are several webmails for Laposte.net. The old one, the new one, and the mobile one. I succumb.
If you want us to go on an adventure for you, into the hostile and distant lands of HTML code for email, we can do it. We are equipped to. Send us a telegram.
