Because I like the sender and the subjects of this newsletter, mainly : Biowaste, renewable energies, sorting, responsible consumption... All themes that are close to my heart, and in line with Badsender's values!
However, I'm going to take the liberty of spending a little time here on a sentence mentioned at the very bottom of the newsletter: "This newsletter has been designed and developed with eco-design in mind. It seems logical in view of the sender. But when you make a statement like that, you can also expect a curious, petty eye to check it out. Pof! Here I am 🙂
Eco-design in emailing is characterized by a set of criteria to be respectedwhich pass through : mailing frequency, mailing list maintenance, design, code... And it's precisely on this last point that I intend to focus. I'll just mention the weight of the email first: 105ko, once the code has been indented. That's quite a lot. And if you analyze the code, you'll soon see why:
- The email seems to have been designed from the mjml framework, which, like all frameworks, adds
classand HTML structure elements that are not "necessary" or essential in the end. These includeclassin the html attribute<style>or the presence of attributesclassin the<body>. - It uses a non-web-safe typography, Ubuntu : it's a shame not to be satisfied with websafe fonts, isn't it? Why add another resource?
- I note the use of both the CSS property
widthand the html attributewidthin certain pieces of code: what's the point? Especially when you know that, to correct email rendering problems on Outlook in 120DPI, it's preferable to use only the CSS property. - Always due to the use of the framework: the presence of
<table>every time you want to create a new block. I think we could reduce the number slightly. - One thing I don't quite understand: the presence of the shortened CSS property
paddingwith the value10px 25pxand, next to it, the addition of CSS propertiespadding-rightandpadding-left. Why? - CSS properties such as
vertical-alignon cells (<td>) that have no sister cells. I don't get it either... - I see the CSS property
cursorattribute with the value presentation to allautoon items such as<td>used to create calls to action: is there any particular reason for this? Are there opening environments where the mouse's behavior when hovering over a link is different? - Tables nested within tables for a simple title or image... As much as I like the Hybrid/Fluid coding technique, I also like to see it used correctly and without overloading the code!
- For some texts/tags, the CSS property
text-transformis called with the valueuppercase... But the text is already in uppercase! Now that's wasted code... - I'm really not a fan of empty cells being used to generate borders. Especially since the border itself is correctly defined with the CSS property
border-left. So why add a cell for this? Why not apply the CSS property directly to the cell containing the text?
On the other hand, I note that some accessibility optimization points have not been integrated, such as the use of semantic tags, the addition of text in the <title> email, the absence of the <div role="article" [...]> just after the opening of the <body>.... It's all very well to want to produce an eco-designed newsletter, but it's just as well for a government agency to think about the accessibility of its communication media, isn't it?
I'll stop here: this is a sample email, not a full article! 😉