Disclaimer: This article is absolutely non-technical, there is only one exotic acronym.
Sometimes you make a nice explanation for a client, and you think it would be nice to edit it in a few minutes and make it into an article. And then I don't post much on this blog for a few months... And even less in the categories Design and Code !
So, today, I was doing project management (which at Badsender is mostly like coachingThis is a bit of our coaching thing at the moment) for a client that sends several hundred million transactional emails a year (yes, I know, we're a bit thick headed). We are currently doing the integration of their emailsand Given the volume, and given that they have to hold up for a long time, you can't go wrong.
Besides, I won't tell you who it is, and there will never be a logo in our refs ???? Well, so be it. So, this is not the client's email, so these are just (slightly exaggerated) examples.
Back to the acceptable degradation
In email designthere is an important principle to keep in mind which is that of the acceptable degradation. It is very complicated to have a similar rendering on all email environments, so we are forced to make concessions. There is an old article on our blog that is still relevant on acceptable degradation (or graceful as you like). You might want to go read it before continuing your journey here.
Update 01/30/2021: From the blow, we even made a live on the subject after the publication of this article, the replay is here.
The thing we want to do for our great client who sends lots of transac emails: rounded corners, even on Outlook.
What we want to do for our client is a big block with rounded corners that displays correctly on Outlook. And now you're thinking that we're not going to do an ENTIRE ARTICLE on rounded corners in 2021. Well, yes! We'll do it! So here is a simulation of the thing we want to do:
It seems simple, doesn't it? Well, it could be, but not this time. Because given the constraints, we take the liberty of thinking about the long term, taking into account the brand image, but also the user experience. And the truth... is inevitably in between!
What are our choices for getting rounded corners on Outlook?
Option 1: From simple to effective
In general, on the web and in emails, rounded corners are handled directly in HTML.
- Impact Outlook Outlook does not handle "standard" rounded corners, it turns them into right angles.
- Solution in general in Outlook To overcome this defect, we use VML" code specific to Outlook which allows you to apply rounding to it.
- The problem here The "VML" solution works well for buttons, because it forces you to define precisely the size of the block on which you want to apply the rounding. Unfortunately, on large blocks (as in these emails) and even more when the content is editable in a email builderThe size cannot be defined in hard terms.
Here is what it looks like in Outlook without VML:
And for the sake of consistency, this is not what the customer wants. Just like everybody else, he would like a similar design in all email clients.
Option 2: We take the old techniques and make rounded corners in pictures
To get around this problem, we apply an old technique which consists in using small rounded images at each corner of the block. This works very well with Outlook (and others). The problem? The Dark Mode!
Unfortunately, the Dark Mode behavior is not uniform on background colors and image colors. In Dark Mode, the HTML colors are darkened... but not the images. So our little round images stand out.
The solution to limit the damage Use partially transparent images so that only the hard color is a problem... but it's not very graceful.
And now what do we do?
A choice is made, and that choice must be between:
- X % of Outlook users who will see right angle corners... OR...
- X % of Dark Mode users who will see unsightly corners
For me, the most acceptable degradation is clearly in the right angles in OutlookThis is because users of this email client probably won't even notice that they don't have exactly the same display as others. While Dark Mode users will clearly see that there is a problem.
In addition, the 2ème solution makes the code more complex to maintain.
Finally, there is probably a 3ème way which is to use Dark Mode bypass techniques by forcing the normal display. But we have little experience with these techniquesThis is a risk to see bugs appear in a few months when email clients will be updated.
While waiting for a decision from the client, we will continue to do monitoring and R&D.
"To overcome this defect
Double unforgivable error!
Well, a little bit, because of the interest of the article.
1. Do not confuse the landing of the floor with the verb pallier (which has two wings).
2. We never say "to compensate for something" but "to compensate for something".
Okay. That's it. I've vented my anger.
I'm not sure I'm better off.
But they say that you have to love well to get well...
An additional solution:
To add to your article ;)
@Gédéon : :-D Thanks! We have this bad habit of proofreading articles in production ;-) I'll make sure I don't make any more mistakes.
@Ben : Indeed, it is an option. However, for the maintenance of the code and the integration in an email builder I'm not sure that it is the best option ;-)
Another solution would be to have a single row table with a fixed height (height:20px for example) above the main table (the one with the content) and another one below.
The goal would be to put rounded edges in top-left and top-right with VML code on the top panel and bottom-left and bottom-right on the bottom panel with VML code.
Having fixed heights the VML code would work on these tables.
We can even imagine to display only these 2 tables on Outlook and to put border-radius styles on the main table for the other ISPs.
What do you think?
@Mickael : I'm not sure if you can put rounded corners only on the top left and top right with VML, because it seems to me that you have to use the arcsize attribute in VML which only accepts one percentage value, right?
@Mickael : And to complete, it will be complicated to integrate and maintain in the client's home-made email builder this kind of DIY :-)
@Thomas : The VML language allows you to draw shapes. There are preconceived shapes like the rectangle, the rounded rectangle (used for the buttons in the news for outlook with the arcsize attribute), the oval, the round, the arrow or the star. But, there is also the possibility to draw free shapes. This works like svg images by coordinates.
It is therefore possible to draw a rectangle with rounded edges at the top and right angles at the bottom.
@Jonathan : Exactly, their CIO could integrate this :)