Email redesign

aerozol · June 18, 2024, 4:46am

Kia ora koutou,

Thanks to @JadedBlueEyes’ GSoC Project, Email service with internationalisation and MJML-based markup, we have the opportunity to update our email templates.

I am working on some simple designs, with the focus on visually de-cluttering.

I would love your feedback on the early mockups:

This is what a subscriptions email currently looks like:

There is also the related ticket ‘Utilise our emails for good: friendly, encouraging, community’, which pushes the boat out further (e.g. adding imagery, stats, facts etc to emails), but is out of scope for this particular project.
I welcome your more ‘ambitious’ email ideas there!

jesus2099 · June 18, 2024, 6:29am

Could you link the 0 open and 1 applied texts instead of the entity?

Don’t forget the Entity was merged and Entity was removed edit links.

chaban · June 18, 2024, 7:35pm

What’s the expected file sizes compared to plain text only mails?

It would be bad if they increased much.

aerozol · June 18, 2024, 8:22pm

I will check with @JadedBlueEyes first - For your project, can we make changes like this? Or are we only touching the look of the emails?

Formatting new links for something like open/applied should (?) be pretty straightforward.

The small logo I have used in this case can be compressed to 814 bytes, everything else should be possible in html.

@JadedBlueEyes might also decide to link to the logo instead, meaning you could choose not to load it (note: embedding and linking images in emails both have their serious pros and cons, Jade may already have decided on one, I haven’t asked).

If we ever add more graphics (maybe with MBS-12678) managing size will be something to take into serious consideration, agreed.

jesus2099 · June 18, 2024, 8:51pm

edits have been added

I’ve always wondered in what timeframe?
Maybe the email should say something like:

edits have been added in the last xx days

JadedBlueEyes · June 19, 2024, 2:25am

I’m working from the original emails, so I should have all the links included there.
I’m not sure about new links - it could be a thing? It just needs to be sent along from the main server - but reshuffling the existing links is absolutely fine.

I’m looking at ~9kb per email right now, including both HTML and plain text in the email compared to ~4kb plain text only. This is obviously subject to a bit of variation - the email is modified by both MetaBrainz and your mail service once it is sent.

Email clients tend not to have great support for embedding assets directly into the email - for best results this stuff needs to be permalinked. That does have the issue of needing to host the graphics, but hopefully that shouldn’t be too much of a problem.

This should be since the last subscription email was sent, as configured in your settings? That could be something nice and straightforward to add.
Unless you mean since the earliest edit was applied - that could require some SQL on the server?

jesus2099 · June 19, 2024, 5:44am

Ah yes, so it’s either Daily or Weekly!
So, for me, it’s edits added within the last 7 days.
I can remember that, now, thanks!

chaban · November 21, 2024, 6:18pm

I just received the first message in the new design. The plain text variant looks quite different: It’s longer, harder to read IMO and apparently breaks URLs due forced line breaks. It also seems to fill each line with extra spaces which can further distort the text.

Old

MusicBrainz user '<User>' has sent you the following message:

------------------------------------------------------------------------

<Message>

------------------------------------------------------------------------

If you would like to respond, please reply to this message or visit

https://musicbrainz.org/user/<User>/contact to send '<User>' an email.

-- The MusicBrainz Team

New

Hello chaban,                                     
                                                  
MusicBrainz user '<User>' has sent you the        
following message:                                
**<Subject>**             
                                                  
<Message>
[To reply, click here to send <User> an email.][1]
                                                  
Alternatively, please reply to this message.      
                                                  
*— The MetaBrainz community*                      
Do not reply to this message. For assistance      
please contact the team or the community.         

[1]: https://musicbrainz.org/user/<User>/contact

I also noticed some other changes, like the From header always saying “MusicBrainz Server” rather than the username. And not using Sender anymore.

Now one will have to search the entire subject to find and sort messages by a certain user.

BTW, it’s first telling that I may reply (the user has actually shared their email address) and then that I should not reply to this message

JadedBlueEyes · November 22, 2024, 8:16pm

Hi @chaban,

Thank you for the thoughtful feedback! You’ve raised some excellent points, and I’ve incorporated them into the latest version.

The From header using the sender’s name, along with setting the Sender header, are template-specific features that I missed initially. I’ve now added support for these in the mail service; it will just require a minor update in MB-server. Regarding the conflicting footer instruction, I noticed that inconsistency last week but had only fixed it in the reporting template. This has now been corrected in the editor message template as well.

Your comment on the plain text variant also led to some improvements: the extra whitespace has been removed, and the formatting (newlines and spacing) is now better preserved in both the HTML and plain text versions. While I couldn’t find an easy way to separate URLs from the editor’s message to exempt them from line-wrapping in the plain text version, the URLs should no longer have any stray whitespace inserted.

New plain text version

Hello [Me],

MusicBrainz user '[User]' has sent you the
following message:
**[User]: [Subject]**

This is an email!
bada bada bada bada bada bada bada bada bada bada
bada bada
this is a long
message with interesting
     spacing. and
 URLs: 
http://localhost:3000/swagger-ui/#/crate%3A%3Asend
/send_mail_route
[To reply, click here to send [User] an email.][1]

Alternatively, please reply to this message.

*— The MetaBrainz community*

[1]: https://musicbrainz.org/user/[User]/contact

Tiske_Tisja · November 25, 2024, 2:26pm

May I make a comment?

I have just seen the new e-mail. Why are the letters so small? Cant you make them bigger. Also I’m having trouble with copying the URL’s in the mail. Everytime I try to copy something it’s copy’s the whole mail

Tiske

IvanDobsky · November 25, 2024, 5:57pm

I’ll second what @Tiske_Tisja has said - the text is tiny now. I guess it was designed for a phone and not a PC screen? The new email is tiny text in the middle of a big empty page.

Is there going to be an option to send as plain text in our Profiles? Currently these emails go to a secondary account of mine being read via webmail. The old emails were clear large readable text. I’d like to revert to something like that if possible instead of having to find a new mail client.

Also previously emails came from “username” and had the subject of the message as sent from the contact page. Now it is coming from the server. Making it hard to track down the conversation.

Note I have only seen this the first time today when I tried to reply to some messages from November and “Send a copy to my own email address” when sending it from the contact page.

chaban · November 25, 2024, 6:15pm

About the HTML part (which I’d prefer not to use but begrudgingly still need to have enabled thanks to other emails being sent without or bad plain text variants):

Fonts are loaded from Google (fonts.googleapis.com). I thought this shouldn’t be done anymore?
I’d also like a preference to choose between plain text only emails and HTML. Other software used by Metabrainz supports this:

IvanDobsky · November 25, 2024, 6:24pm

Sorry, these emails are a little weird. I now swapped to a different email program so I can force plain text email, but they seem to be truncated at a small 46 characters per line.

Can that line length limit be removed, or go back to the standard 80 char per line.

I’d also second Chaban’s comment about Google Fonts. You should allow the mail client to sort out fonts.

The raw code of these emails is way over complicated for an email.

Snipping out just the RAW MIME text of an email, a before and after comparison of emails:

MIME-Version: 1.0

--F8kqe2YK1K4dHtuBDlncdPzUMx1JK9x5FO2QIxSJ
Content-Type: text/plain; charset=utf-8
Content-Transfer-Encoding: quoted-printable

You sent this message to jesus2099               =20
Hello jesus2099,                                 =20
                                                 =20
MusicBrainz user 'IvanDobsky' has sent you the   =20
following message:                               =20
**IvanDobsky: Hello Jesus**                      =20
                                                 =20
This is a test message to see how small the text =20
gets from the new message system.                =20
Helloooooooooooooooooooooooo                     =20
[To reply, click here to send IvanDobsky an      =20
email.][1]                                       =20
                                                 =20
*=E2=80=94 The MetaBrainz community*                     =20
Do not reply to this message. For assistance     =20
please contact the team or the community.        =20

[1]: https://musicbrainz.org/user/IvanDobsky/contact

--F8kqe2YK1K4dHtuBDlncdPzUMx1JK9x5FO2QIxSJ
Content-Type: text/html; charset=utf-8
Content-Transfer-Encoding: quoted-printable

<!doctype html><html xmlns=3D"http://www.w3.org/1999/xhtml" xmlns:v=3D"urn:=
schemas-microsoft-com:vml" xmlns:o=3D"urn:schemas-microsoft-com:office:offi=
ce"><head>
<meta http-equiv=3D"Content-Type" content=3D"text/html; charset=3Dutf-8"><t=
itle>MusicBrainz message from IvanDobsky: Hello Jesus</title><!--[if !mso]>=
<!--><meta http-equiv=3D"X-UA-Compatible" content=3D"IE=3Dedge"><!--<![endi=
f]--><meta name=3D"viewport" content=3D"width=3Ddevice-width, initial-scale=
=3D1">
<style type=3D"text/css">
#outlook a { padding: 0; }
body { margin: 0; padding: 0; -webkit-text-size-adjust: 100%; -ms-text-size=
-adjust: 100%; }
table, td { border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rsp=
ace: 0pt; }
img { border: 0; height: auto; line-height: 100%; outline: none; text-decor=
ation: none; -ms-interpolation-mode: bicubic; }
p { display: block; margin: 13px 0; }
</style>
<!--[if mso]>
<noscript>
<xml>
<o:OfficeDocumentSettings>
  <o:AllowPNG/>
  <o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</noscript>
<![endif]-->
<!--[if lte mso 11]>
<style type=3D"text/css">
.mj-outlook-group-fix { width:100% !important; }
</style>
<![endif]-->
<!--[if !mso]><!--><link href=3D"https://fonts.googleapis.com/css?family=3D=
Inter" rel=3D"stylesheet" type=3D"text/css"><style type=3D"text/css">@impor=
t url(https://fonts.googleapis.com/css?family=3DInter);</style><!--<![endif=
]--><style type=3D"text/css">@media only screen and (min-width:480px) { .mj=
-column-per-100 { width:100% !important; max-width:100%; }  }</style><style=
 media=3D"screen and (min-width:480px)">.moz-text-html .mj-column-per-100 {=
 width:100% !important; max-width:100%; } </style><style type=3D"text/css">=
@media only screen and (max-width:479px) {
                table.mj-full-width-mobile { width: 100% !important; }
                td.mj-full-width-mobile { width: auto !important; }
            }
            </style><style type=3D"text/css">h2 {
                    font-size: 12px;
                    font-weight: 700;
                }
                p {
                    margin: 6px 0;
                }
                ul {
                    padding-left: 20px;
                }div.speech {
                    position: relative;
                }
                div .speech::after {
                    display: block;
                    width: 0;
                    content: "";
                    border: 15px solid transparent;
                    border-left-color: #F5F5F5;
                    position: absolute;
                    bottom: -15px;
                    left: 15px;
                    z-index: -1;
                }</style></head><body style=3D"word-spacing:normal;"><div><=
!--[if mso | IE]><table border=3D"0" cellpadding=3D"0" cellspacing=3D"0" ro=
le=3D"presentation" align=3D"center" width=3D"500" style=3D"width:500px;"><=
tr><td style=3D"line-height:0px;font-size:0px;mso-line-height-rule:exactly;=
"><![endif]--><div style=3D"margin:0px auto;max-width:500px;"><table border=
=3D"0" cellpadding=3D"0" cellspacing=3D"0" role=3D"presentation" align=3D"c=
enter" style=3D"width:100%;"><tbody><tr><td style=3D"direction:ltr;font-siz=
e:0px;padding:20px 0;text-align:center;"><!--[if mso | IE]><table border=3D=
"0" cellpadding=3D"0" cellspacing=3D"0" role=3D"presentation"><tr><td style=
=3D"vertical-align:top;width:500px;"><![endif]--><div class=3D"mj-outlook-g=
roup-fix mj-column-per-100" style=3D"font-size:0px;text-align:left;directio=
n:ltr;display:inline-block;vertical-align:top;width:100%;"><table border=3D=
"0" cellpadding=3D"0" cellspacing=3D"0" role=3D"presentation" width=3D"100%=
"><tbody><tr><td style=3D"vertical-align:top;padding:0;"><table border=3D"0=
" cellpadding=3D"0" cellspacing=3D"0" role=3D"presentation" width=3D"100%">=
<tbody><tr><td align=3D"left" style=3D"font-size:0px;padding:10px 15px 0px;=
word-break:break-word;"><table border=3D"0" cellpadding=3D"0" cellspacing=
=3D"0" role=3D"presentation" style=3D"border-collapse:collapse;border-spaci=
ng:0px;"><tbody><tr><td style=3D"width:120px;"><img alt=3D"MusicBrainz" hei=
ght=3D"auto" src=3D"https://static.metabrainz.org/logos/MusicBrainz_logo_mi=
ni.png" width=3D"120" style=3D"border:0;display:block;outline:none;text-dec=
oration:none;height:auto;width:100%;font-size:13px;"></td></tr></tbody></ta=
ble></td></tr><tr><td align=3D"center" style=3D"font-size:0px;padding:10px =
15px;word-break:break-word;"><p style=3D"border-top:solid 3px #BA478F;font-=
size:1px;margin:0px auto;width:100%;"></p><!--[if mso | IE]><table border=
=3D"0" cellpadding=3D"0" cellspacing=3D"0" role=3D"presentation" align=3D"c=
enter" width=3D"470px" style=3D"border-top:solid 3px #BA478F;font-size:1px;=
margin:0px auto;width:470px;"><tr><td style=3D"height:0;line-height:0;">&nb=
sp;</td></tr></table><![endif]--></td></tr><tr><td style=3D"font-size:0px;p=
adding:5px 15px;word-break:break-word;"><!--[if mso | IE]><table border=3D"=
0" cellpadding=3D"0" cellspacing=3D"0" role=3D"presentation" bgcolor=3D"#f4=
ebcb" align=3D"center" width=3D"500" style=3D"width:500px;"><tr><td style=
=3D"line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-=
-><div style=3D"background:#f4ebcb;background-color:#f4ebcb;margin:0px auto=
;max-width:500px;"><table border=3D"0" cellpadding=3D"0" cellspacing=3D"0" =
role=3D"presentation" align=3D"center" style=3D"background:#f4ebcb;backgrou=
nd-color:#f4ebcb;width:100%;"><tbody><tr><td style=3D"border:1px solid #e2c=
e85;direction:ltr;font-size:0px;padding:5px 15px;text-align:center;"><!--[i=
f mso | IE]><table border=3D"0" cellpadding=3D"0" cellspacing=3D"0" role=3D=
"presentation"><tr><td align=3D"left" width=3D"500px"><![endif]--><div styl=
e=3D"font-family:Inter;font-size:12px;font-weight:400;line-height:14.52px;t=
ext-align:left;color:#000000;"><p>You sent this message to jesus2099</p></d=
iv><!--[if mso | IE]></td></tr></table><![endif]--></td></tr></tbody></tabl=
e></div><!--[if mso | IE]></td></tr></table><![endif]--></td></tr><tr><td a=
lign=3D"left" style=3D"font-size:0px;padding:10px 30px;word-break:break-wor=
d;"><div style=3D"font-family:Inter;font-size:12px;font-weight:400;line-hei=
ght:14.52px;text-align:left;color:#000000;"><p>Hello jesus2099,</p><p>Music=
Brainz user 'IvanDobsky' has sent you the following message:</p></div></td>=
</tr><tr><td class=3D"speech" style=3D"font-size:0px;padding:10px 15px;word=
-break:break-word;"><!--[if mso | IE]><table border=3D"0" cellpadding=3D"0"=
 cellspacing=3D"0" role=3D"presentation" bgcolor=3D"#F5F5F5" align=3D"cente=
r" width=3D"500" class=3D"speech-outlook" style=3D"width:500px;"><tr><td st=
yle=3D"line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endi=
f]--><div class=3D"speech" style=3D"background:#F5F5F5;background-color:#F5=
F5F5;margin:0px auto;border-radius:8px;max-width:500px;"><table border=3D"0=
" cellpadding=3D"0" cellspacing=3D"0" role=3D"presentation" align=3D"center=
" style=3D"background:#F5F5F5;background-color:#F5F5F5;width:100%;border-ra=
dius:8px;"><tbody><tr><td style=3D"direction:ltr;font-size:0px;padding:10px=
 15px;text-align:center;"><!--[if mso | IE]><table border=3D"0" cellpadding=
=3D"0" cellspacing=3D"0" role=3D"presentation"><tr><td align=3D"left" width=
=3D"500px"><![endif]--><div style=3D"font-family:Inter;font-size:12px;font-=
weight:400;line-height:14.52px;text-align:left;color:#000000;"><p><strong>I=
vanDobsky: Hello Jesus</strong></p><p>This is a test message to see how sma=
ll the text gets from the new message system.

Helloooooooooooooooooooooooo</p></div><!--[if mso | IE]></td></tr></table><=
![endif]--></td></tr></tbody></table></div><!--[if mso | IE]></td></tr></ta=
ble><![endif]--></td></tr><tr><td align=3D"left" style=3D"font-size:0px;pad=
ding:10px 30px;word-break:break-word;"><div style=3D"font-family:Inter;font=
-size:12px;font-weight:400;line-height:14.52px;text-align:left;color:#00000=
0;"><p><a href=3D"https://musicbrainz.org/user/IvanDobsky/contact">To reply=
, click here to send IvanDobsky an email.</a></p><p><em>=E2=80=94  The Meta=
Brainz community</em></p></div></td></tr><tr><td align=3D"center" style=3D"=
font-size:0px;padding:10px 15px;word-break:break-word;"><p style=3D"border-=
top:solid 3px #F5F5F5;font-size:1px;margin:0px auto;width:100%;"></p><!--[i=
f mso | IE]><table border=3D"0" cellpadding=3D"0" cellspacing=3D"0" role=3D=
"presentation" align=3D"center" width=3D"470px" style=3D"border-top:solid 3=
px #F5F5F5;font-size:1px;margin:0px auto;width:470px;"><tr><td style=3D"hei=
ght:0;line-height:0;">&nbsp;</td></tr></table><![endif]--></td></tr><tr><td=
 align=3D"left" style=3D"font-size:0px;padding:10px 30px;word-break:break-w=
ord;"><div style=3D"font-family:Inter;font-size:12px;font-weight:400;line-h=
eight:14.52px;text-align:left;color:#8D8D8D;"><p>Do not reply to this messa=
ge. For assistance please contact the team or the community.</p></div></td>=
</tr></tbody></table></td></tr></tbody></table></div><!--[if mso | IE]></td=
></tr></table><![endif]--></td></tr></tbody></table></div><!--[if mso | IE]=
></td></tr></table><![endif]--></div></body></html>=

An standard email in plain text:

MIME-Version: 1.0

'aerozol' has added the following note to edit #118300095:
------------------------------------------------------------------------
I think there's definitely a case to be made for it. I just don't see it in=
 these edits/edit notes =F0=9F=A4=94

Shame there's no scans for any of these.
------------------------------------------------------------------------
If you would like to reply to this note, please add your note at:
https://musicbrainz.org/edit/118300095
Please do not respond to this email.

-- The MusicBrainz Team

This is why some of us would like simple text emails as that is gonna gobble up space fast.

Also notice in the TEXT part of the new emails, the new ones have artificial =20 added to it to truncate the line too early. These are not needed and it is better to leave those off like in the standard emails. Let the mail app receiving format plain text.

Sorry… this geek has been hacking around with raw email code since the 80s. Far too used to looking at this stuff raw style… which is why issues like this stand out a bit to me.

JadedBlueEyes · November 29, 2024, 10:51pm

Thanks all for the feedback again.
I’ve released a new version that increases the font size from 12px to 14px - this seems to be within the normal range of font sizes for emails in my inbox. (It was at least developed entirely on a PC, haha)
The line wrapping length has also been increased from 50 to 65. We do have to wrap text for technical and readability reasons.
I’ve opened tickets for self-hosting the fonts and adding a profile option to send only in plain text. In the meantime, your mail client should be able to disable downloading external media and viewing the plain-text version of the email. From my local testing, Thunderbird allows persisting the email version preference by sender, and you can even choose specific media hosts to allow/block.

This is mostly automatically generated to ensure the email displays correctly across as many clients as possible.

It also takes only about twice the space of just the plain text email - by my napkin maths Gmail’s free allowance could hold over a million of these emails, uncompressed.

This will be in the next beta!

kellnerd · December 7, 2024, 11:32am

The new notifications seem to be in production now, but without the proposed improvements which were already implemented by @JadedBlueEyes AFAICT?

I’ve just sent a long PM to another editor (and a copy to myself) and all paragraphs and citation paragraphs have been combined into one, making the message almost impossible to read

JadedBlueEyes · December 7, 2024, 5:05pm

It’s likely that the new version needs to be deployed in production - I’m not sure exactly how that works, I think @Bitmap would be the most knowledgeable about that.

Bitmap · December 7, 2024, 5:31pm

The next production release is on Monday. I didn’t see any reports of paragraphs being merged together until now, though – was that fixed on beta already?

The new notifications seem to be in production now, but without the proposed improvements which were already implemented by @JadedBlueEyes AFAICT?

It was in production since 2024-11-18 already; all the feedback here is from after it was released.

Bitmap · December 7, 2024, 6:56pm

Okay, I confirmed that the paragraph merging was fixed on beta, and that it’s safe to update the mb-mail-service containers in production already, so I did that now. Sorry for the lingering formatting issues.

The only thing that won’t be fixed until Monday is the missing “Sender” header, since that requires musicbrainz-server code changes to be deployed.

JadedBlueEyes · December 7, 2024, 8:51pm

It was fixed in v0.4.0 / 4feb0ef. It wasn’t reported here before then - it was something I noticed when testing the other improvements!

The versioning scheme should be semver-compatible, so 0.x.y should be entirely compatible with 0.x.z, where y comes after z (so, in this case, I didn’t need to bump to 0.4 ). Let me know if having tags like that (so v0.4 as well as v0.4.1) would be helpful!

For those emails sent with the wrong formatting, the HTML should still have the original formatting - so if you’re determined with DevTools / inspect element, you can dig out the original message.

Bitmap · December 7, 2024, 9:18pm

Thanks for confirming! I can never be too sure with 0.x releases since technically they’re allowed by semver to break at any time. We’ll probably pin to specific patch versions in our server configs though, so no need for major version branches at this point.