Acceptable degradation by example: rounded corners and Outlook

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.

Want to go further on the subject?

• Download our white paper on HTML integration for email
• Discover our email coaching services
• Otherwise we can take care of the design of your email templates