Sample email: Time To Sign Off

Rolala, for so many reasons... But first, a quick aside: I've just dealt with the subject of summaries and internal anchors in newslettersI concluded that well-written texts, a well-structured and well-designed newsletter should be enough to dispense with this type of functionality (i.e. summary and internal anchors). The Time To Sign Off newsletter is, in my opinion, a very good example of this.

• I'm instinctively a a real journey through the textswith links between the various chapters: real editorial work behind each newsletter, and not "just" a succession of articles one below the other! This textual cohesion takes the reader by the hand to accompany them through the entire email, right to the end.
• The graphic hierarchy of the importance of the elements is really present: major differences between the sizes of the texts, emphasis thanks to bold or italic, underlining worked on the hypertext links: the text lives!
• The discreet pictos at the end of each chapter for easy sharing on social networks, what a kif! And the little surprise of the whatsapp picto: very judicious! Incidentally, I don't think enough thought is given to mobile email apps.
• I really appreciate theuse of semantic tags Beacons <p> tags (for paragraphs), and even <h1> or <h2> (It's really rare to see them!). This is great, because in terms of accessibility, it means that screen readers will be able to specify to their users that these are paragraphs, titles, etc... And that's great, it's one of the best practices to apply!
• The addition of the role attribute with the value presentation to all presentation on the boards <table> HTML to make it clear to screen readers that these are formatting tables, not data tables - perfect!
• The use of internal margins padding rather than empty cells to create the spacing between "blocks" is great! It reduces the weight of the HTML code!
• In the code, I find a graphic formatting of the alternative texts of the images: we're having an internal debate about this usefulness at Badsender, but personally I'm always admiring when the work is done to the end! I'm a bit of a... perfectionist.
• Everything that can be in text IS in text and formatted with CSS. I love it! This newsletter is a demonstration that it's possible to create "beautiful" graphics and aesthetics, using pure text in HTML and graphic formatting in CSS.

And then I find a few technical points that are a little more surprising:

• The use of tags <picture> and <source> for the images: this shows just how well the technique has been mastered, for the logo management in dark mode. Bravo ! Personally, I'm not sure I'd have risked it...
• Assuming a degraded rendering on certain opening environments: clearly, the email rendering isn't ideal on BtoB opening environments like Outlook desktop software for Windows, but I don't get the impression that this bothers the brand: as if the integration and development method (use of <div>CSS property max-widthCSS property display attribute with the value presentation to all inline-block) had been chosen in correlation with the consultation habits of the recipients, mainly BtoC I imagine!
• The play on the underlining thickness of hyperlinks with a thickness of 2px using the CSS property text-decoration-thickness and the specific color assigned to underlining with the CSS property text-decoration-colorI find it subtle and magical!
• Hover effects on hyperlinks and pictograms: I love it when little effects like these are integrated. It doesn't cost much, and the little wow effect is there.
• Management of the yellow border of "comments" elements: the border isn't actually managed as a border, but as the background color of the table including the cell with internal margin where the text is located... In short, it's quite an original way of doing things! And even if I don't understand why, I imagine it must have something to do with dark mode rendering... Right?
• The mirror page link is placed at the bottom of the page, in the footer: no doubt to maximise the newsletter content.
• 3 colors, all in all. 3! Orange, blue and white. Can you believe it? And of course, limiting the number of colors also improves the newsletter's readability.

In short, a job well done, efficient and thoughtful, just the way I like them.