Skip to content

Newsletter buttons are not displaying correctly in Outlook #6892

@ahukkanen

Description

@ahukkanen

Describe the bug
When sending a newsletter with a long button text, it will not display correctly on Outlook devices. Some text can be cut from the button and therefore barely readable.

It may seem like a non-issue to many but the real issue here is that many people use Outlook, whether we want it or not.

To Reproduce
Steps to reproduce the behavior:

  1. Go to admin panel to send a newsletter
  2. Send a new newsletter with a button, apply a long button text
  3. Send the newsletter to an email box using Outlook
  4. See the problematic rendering

Expected behavior
I would expect the button to display correctly in Outlook.

Screenshots
Here is a screenshot of the original case:
decidim-newsletter-button-bug

I suspect this has something to do with the 0-borders as this is a test I did at testi.at service with the button border color swapped to black:
decidim-newsletter-button-border

It appears Outlook renders the border on all lines of the hyperlinks.

Stacktrace
There's no stacktrace, this is a visual bug.

Extra data (please complete the following information):

  • Device: Desktop
  • Device OS: Windows 10
  • Email client: Outlook (applies to all Outlook version 2007+, apparently their rendering engine is very similar)
  • Decidim Version: 0.23
  • Decidim installation: OmaStadi

Additional context
I believe this could be fixed by getting rid of the 0-borders. The problem is that this method is apparently the only way to apply padding in the button in Outlook based on some research about Outlook rendering.

Here's a related conversation at the foundation-email repository:
foundation/foundation-emails#416

Here is how to implement bulletproof email buttons (linked in that issue):
https://buttons.cm/

Here is some information about Outlook's HTML rendering:
https://www.avantiproducts.com/manual/wp_outlook.pdf

Alternative methods to the current 0-width border would be:

  • Just getting rid of the 0-width borders and "hoping for the best". This will cause the button padding to disappear from Outlook but maybe it would help displaying the text properly (?).
  • Providing a VML based alternative only displayed in Outlook as shown in the bulletproof buttons resource (closest to what you want to display)
  • Applying a higher line height in the button (would break multiline buttons in other rendering engines too)
  • Some resources report that adding a p-element inside the link element might help but I tried this at testi.at and could not get rid of the extra top padding in the button what this solution caused
  • Adding transparent images on both sides of the button will help rendering padding according to some internet resources but this is probably very annoying to manage technically

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    Projects

    Status

    No status

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions