badsender logo

Acceptable degradation by example: rounded corners and Outlook

05/01/2021

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 per year (yes, I know, we're a bit thick headed). We are currently doing theintegration of their emails, and Given the volume, and given that they have to hold up for a long time, you can't go wrong.

High volume html email integration

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:

Desired rendering of rounded corners in the email
Preview of the desired rendering: rounded corners on a large block

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?

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:

Preview of the rounded corners on Outlook
In Outlook, the rounded corners find their right angles

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 go back to the old techniques and make 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.

Rendering of email and rounded corners in dark mode
Slightly exaggerated artist's view

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.

rounded corners in email and dark mode images
Slightly exaggerated artist's view

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?

Photo by Paul Volkmer on Unsplash

Need a design system email ? Or an email design at all? Or an HTML integration for email ? Or an email builder ? We can also offer you :

Badsender also animates a training on the subject of HTML development of an email !

9 Responses

  1. Aaarrrggghhh!
    "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...

  2. @Gedeon: 😀 Thanks! We have this bad habit of proofreading articles in prod 😉 I'll make sure I don't get it wrong again.

  3. @Ben : Indeed, it is an option. However, for code maintenance and integration in an email builder I'm not sure it's the best option 😉

  4. Hello Jonathan,
    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?

  5. @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?

  6. @Mickael : And to complete, it will be complicated to integrate and maintain in the client's home-made email builder this kind of brico 🙂

  7. @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.

  8. @Jonathan: Exactly, their CIO could incorporate that 🙂

Leave a Reply

Your email address will not be published.