Email notifications: not all email clients format the email templates the same

[Robertght]

Quick summary

We heard from a user who noticed that on the email templates not getting the same formatting(especially side margins/padding)

The user reported the issues appearing more on the email apps on mobile(especially Apple Email).

Steps to reproduce

The most obvious for me was Titan Email so you can test a new post notification email there.

What you expected to happen

Quoting the user:

Take a look at the screenshots I have below. The first ones are WordPress. The second ones are from a different company.

The first one is the WordPress email notification to my subscribers. There is no margin around the email at all. Including around the title of the post, and even the "continue reading" button (which you cannot control in the editor).

I know from a web design perspective, you never put text from edge to edge like this with no margin.

Now, below is a screenshot from another company, whose emails have margins. This is how it should look.

The reason why most people you talk to won't be able to see this is because, certain email apps put a margin around the email itself.

The problem is most evident when using Apple Mail on an iPhone, using dark mode, but the problem exists on any email app.

I have tested on:

-multiple iPhones -using both Apple Mail and Outlook

it's clear that there are no margins on any titles, text, images, or buttons.

Here is a screenshot from Outlook on iPhone. It's harder to tell because Outlook puts margins around your email itself. But if you take a close look, you'll see that there's no margin on the WordPress email itself. Only the margins that the outlook app is putting in itself.

---

My findings were obvious only when using the Titan Email inbox on desktop:

What actually happened

To work the same regardless of the email environment.

Impact

Some (< 50%)

Available workarounds?

No but the platform is still usable

Platform (Simple and/or Atomic)

Simple, Atomic

Logs or notes

8246574-zen

I asked the user to share their iOS and model of iPhone so we can continue to try and replicate this.

cc @Automattic/apex

[github-actions[bot]]

Support References

This comment is automatically generated. Please do not edit it.

• [ ] 8246574-zen
• [ ] 8466263-zen

[suyogyashukla]

The user followed up and shared:

Hi, yes I am using an iPhone 14 Pro Max, but I have also tested it on an iPhone 14 Plus.

I am running iOS 17.4.1.

[liviopv]

📌 REPRODUCTION RESULTS

• Tested on Simple – Uncertain

📌 FINDINGS/SCREENSHOTS/VIDEO Titan Email, Desktop:

Titan, Android App

Gmail, desktop

Gmail, Android app

📌 ACTIONS

• Requested author feedback

📌 Message to Author @Robertght @suyogyashukla if there is an issue, it's likely specific to iOS. Do any of you have iPhones where you can test this on?

Also cc @mrfoxtalbot @inaikem and @rickmgithub in case you have iPhones to test this

[simison]

More debugging welcome! We'll try to replicate & fix this with Zap.

[Robertght]

I couldn't see the issue on my iPhone 13 Pro using the Mail app.

[simison]

Similar internal feedback in peKye1-RV-p2 with SuperHuman email client

[pkuliga]

I wasn't able to replicate this on Apple Mail on mobile. Newsletter email looks ok there for me:

On a desktop though when you shrink the preview window width I noticed the issue and fixed it (D151899-code).

Before	After

I'll continue investigating the issue with the Titan Email on desktop.

[candy02058912]

I don't see an issue with my normal settings.

Sharing what the email looks like in Gmail in Arc Browser desktop (Version 1.49.1 (51495) Chromium Engine Version 126.0.6478.127)

Gmail App in iOS 17 on iPhone 11

Hi @Automattic/zap @simison @pkuliga, checking in on the status/priority of the issue? As part of pb5gDS-3YO-p2, we’re trying to ensure that every blocker/high priority issue on The One Board is being actively worked on (has updates to it within 2 weeks) to reflect the priority of the issue.

1. If prioritization isn't possible, please close the issue with the label "Won't Fix" and comment with the reason for future reference.
2. If the issue is fixed, let's close the issue until future reports come in.

Thanks 🙏

[rickmgithub]

I have a very similar case.

The emails sent to subscribers do not reflect the color scheme or layout of the actual post.

The example is https://anlilmusic.com/2024/07/01/forbidden-captured-by-koko/

When viewed in the email client, there is a white background and formatting is lost (8466263-zd-a8c)

The same issue occurs with the reader version too - https://wordpress.com/read/blogs/207150541/posts/1427

The user also has Titan email attached to their account.

I tested on a separate test site and replicated it using the same theme, Assembler by Automattic and Hevor. The same problem occurred.

The colour had been set manually in the global styles by the look of it rather than picking a specific palette.

On the simplest level you can see my post has a black background

While the email does not

[lsl]

Closing per @candy02058912 not being able to reproduce after the fix from @pkuliga mentioned here D151899-code.

I have a very similar case.

@rickmgithub this should be covered by the new Jetpack issue: https://github.com/Automattic/jetpack/issues/38372