As you know, in email integrationHowever, we can't do everything, and some email customers have a habit of putting obstacles in our way. That's why, on a daily basis, Badsender's teams must educate their customers on the principle of acceptable degradation (also called graceful degradation). But what exactly is this? And what are the most emblematic cases of this issue? We try to explain in this live.
The replay on Youtube
The podcast replay
Don't hesitate to subscribe to our podcast on the different platforms: Spotify / Deezer / Apple Podcast / Google Podcast / ... others
Our preparatory notes for this live
Definition
JLO Can you explain in a few words what is acceptable or graceful degradation?
TDE : Graceful Degradation is a philosophy of design focused on creating a modern website or web application that will work in the latest browsers, but will be replaced by essential content and functionality in older, even less capable browsers. https://developer.mozilla.org/fr/docs/Glossaire/
That's for a site, or an application. For the email it's the same principle, and we will start if you want dear colleague on the literal meaning of the words "degradation" and "graceful".
Degradation: the fact of being damaged, altered. Sometimes in a progressive way. Graceful : Who has grace, charm. So, finally, it is an alteration of an effect, of a style, of a component, but which keeps its charm... Doesn't that make you dream? Concretely: I am a sofa designer. Call me Centre Cuir. I design a range of sofas that turn into a ball when exposed to the sun. But in the living room of one of my clients, there is no window; well, it's still a sofa, I can still sit on it, and that's its primary function.
Support
JLO In email, which email clients support the most html/css features?
TDE : According to https://www.caniemail.com/scoreboard/It seems that Apple Mail is at the top of the ranking, followed by Samsung Email, Outlook for MacOS, then SFR (the desktop webmail). The fact that Apple Mail is in pole position is not surprising when you know that the rendering engine used is Webkit and that it offers the best support for HTML tags and attributes and CSS properties. Thus, we will be able to use, for example, CSS properties such as display:flex, CSS selectors :first-child for example, or the
Where it's important to think about it
JLO What are the great features that won't work but will remain graceful?
TDE The most common and, finally, those that do not "break" anything when not supported:
- border radius for rounded corners: is it a crime if rounded corners designed in CSS with the border-radius property don't show up everywhere, and instead we have right-angled corners? This isn't Ikea, and I don't have kids playing around the button, so everything's fine...
- hover effects (the :hover on a button for example)to change the background color on hover): as long as the call to action is displayed correctly, and that it is designed in HTML/CSS for immediate display, I feel like saying that the job is done.
- special or non-websafe fonts (google font) : If roboto is replaced by Arial, it's not a big deal. Well, on the other hand, when a sans serif typeface is replaced by a serif typeface (like on Outlook for example), it becomes a bit more annoying. But fortunately, there are solutions for this kind of bug.
- animated gifs (because finally, even if the animated gif is blocked on its first state on Outlook, nothing prevents us from getting around the problem by providing a 0ms state with all the information essential to the understanding of the visual)
- letter-spacing...
JLO And to go further, how do we define the limit? On what criteria can we base ourselves to say that we go too far? And when do we think about it? Before the design ? At the time of integration?
Need help?
Reading content isn't everything. The best way is to talk to us.
TDE What good questions! The limit is the one we are not ready to go beyond, and I feel like saying that it depends on each case. When a simple rounded corner does not seem to us to be a design imperative in itself, it can nevertheless be an integral part of the graphic charter of a brand; it is then necessary to know how to detect and analyze upstream the statistics of consultation of the recipients in order to judge at best the coding technique. VML or not VML? Rounded corners only with the border-radius property or rounded corners in image? What about the Dark Mode trick? What to do when this button with rounded corners is above a background image generated in VML (and knowing that VML cannot be embedded in another VML code).
You have to make concessions. Two solutions: accept to make concessions during the design phase with all these constraints known beforehand. The other solution: don't limit yourself on the design, and involve a good dose of R&D, manipulation and testing during the HTML integration phase to meet the validated design.
To go further!
JLO In this case, shouldn't we go as far as creating an email charter that takes into account what is acceptable and what is not?
TDE : Very good suggestion! This is what is sometimes done (and what we had the opportunity to see at Badsender). After that, do we always have to constrain and frame everything at the risk of limiting creativity? Because constraints lead to creativity, and this in both directions: if the designer knows the constraints of the integration, he will be able to challenge himself and propose very particular designs but adapted to the emailing. In the same way, the integrator, faced with the validated design (constraint) will have the creativity in his way of coding, and that's what's exciting! In any case, it excites me sometimes.
JLO How do you do it when the management uses an old version of Outlook?
TDE You definitely can't ask the impossible of designers and integrators when the final target is not on this software. Especially when you know the constraints imposed by Outlook and its older versions on Windows... You have to know how to question yourself.
Imagine: I create sofas. Again. My neighbor orders me one, 16 meters long. Well, it's his choice somewhere, and he has the living room that goes with it. If, to see what it looks like, I want to put it in my living room, which is only 7 meters long, somewhere there will be a problem. But I'm not going to ask my team to change the configuration or the length of the sofa... See what I mean?
JLO : What about the elements of innovation in email? Caroussel / sliders / hovers / ...
TDE As long as the fallback version is graceful and does not hinder the understanding of the message, why not? Of course, this type of innovation must take into consideration the percentage of final recipients who will have access to it. Is it worth it to make a carousel for only 1% of the recipients? If so, at the expense of others? In any case, be careful with the backup version: we have seen US carousel generators fail miserably in rendering on Orange.com and propose only an empty space: the content and the ergonomics of the email take a hit! Mantra of the integrator (no pixel near)? Responsive, accessible, delivered. A good communication between campaign manager and email designer/integrator to understand the behavior of recipients in front of their emails.
Suggest topics!
This live was born under the impulse of a case met during the accompaniment of our customers. And as we are generous, if you have any questions on a subject, send us a message and we'll be happy to discuss the subject in a future live broadcast.
And if you want to be coached on this subject (or any other subject for that matter), don't hesitate to send us a little message
