Mjml: Suggestion : mj-preview tag

[Uelb]

It would be cool if there was a tag that could handle preview texts displayed in some email clients.
There is a nice article about it here :
https://litmus.com/blog/the-ultimate-guide-to-preview-text-support

Although I'm not sure this suggestion from the article works for every browser.

<div style="display:none;font-size:1px;color:#333333;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">
  Insert preview text here.            
</div>

[iRyusa]

Hi @Uelb !

Looks like a really good idea for me ! Maybe an mj-head tag to add ?

[Uelb]

It could be an mj-head tag. Right now, my workaround is to use an mj-raw tag as the first tag in my mj-container. I can start a pull request with a new tag in the mj-head section called mj-preview if you're open to the idea.

[Uelb]

I just add another idea actually. Sometimes, when you are building an email, you want the preview text to be something that is inside your email but not at the top of your email.

For instance

Awesome logo with alt text

This awesome product is cool

Hello, have you tried blablabla ?

(You may want the preview to be hello, have you tried blablabla).

In this case, a tag is not appropriate as you need the content of an existing tag to be the preview of your email.

Conclusion :

• An mj-preview tag would still be necesary if you need your preview text to be something that is not in your email
• An mj-preview attribute would be a good way to handle that second case

[silence-mayday]

Is there a chance that Gmail start to dislike senders that hide content in their emails, just like they moderately like web sites that hide content as well? The idea is great, I'm a fan of preheaders but I don't want our sender reputation to take a hit because of this.

[Uelb]

Well, it would be a shame as it's a common practice to change preview text, and they just released that so I'm not sure they are heading that way :
https://www.emailonacid.com/blog/article/email-development/gmail-now-supports-display-none
https://litmus.com/blog/gmail-now-supports-display-none-what-it-means-for-your-email-designs

Nothing seems that way for now but unless asking the Gmail team, we won't know for sure.

[silence-mayday]

Right I tested the display none last week in Gmail and it was working so I was surprised to read that it wasn't supported in the Litmus blog post. You're right I don't know why they would support this and then punish people using it :)

[iRyusa]

So if I understand correctly, it use by default the first "text" that appear in the email even if it's not visible ?

So if we add a mj-preview attribute we'll have to duplicate the text to a new div just after the body tag ?

[Uelb]

Exactly

[iRyusa]

Maybe a global postRender can search mj-preview class or something like that and do the duplicate div.

[cmnstmntmn]

found this

https://litmus.com/blog/make-the-best-first-impression-with-subject-line-checker-in-litmus

if you find it usefull

[mklemme]

@iRyusa I might be mistaken on this, but I think the preview would need to be in the body. It's supposed to be the first text of the email. Email clients automatically do this anyway, which is why the preview text is usually "Not looking right? View in your browser" which is the first text in the email.

@uscsnostromo We use it and have sent a lot of email without a hit to our reputation.

[iRyusa]

@mklemme Yes that's what I meant by we'll have to duplicate the text to a new div just after the body tag ? :+1:

[mattez]

Hi, I thing we want both "preview text" and "preheader text".
From LITMUS:The Ultimate Guide to Preview Text Support

ISN’T IT CALLED PREHEADER TEXT?

The phrases “preview text” and “preheader text” are often used interchangeably. However, they are in fact slightly different elements of an email.

The preheader text is what is used to control the preview text that appears in the inbox, usually below the subject line. Preheader text appears visually above the header in the email body itself.

The preview text is what is seen in the message envelope of the email in the inbox.

[iRyusa]

Small update here, it should be available in next MJML beta, feel free to test it 👍

[ngarnier]

Thanks for the feature suggestion @Uelb, it's now available in MJML 3.3.3: https://github.com/mjmlio/mjml/releases/tag/3.3.3!