855299 - Need base template for HTML emails

Status: RESOLVED FIXED

(support.mozilla.org :: General, defect, P2)

Description

[Kadir Topal [:atopal]]

We need a base template for HTML emails that we'll be sending out to contributors and users of the site. It should be minimal but convey that the email is coming from a trusted source: SUMO (by using the same design language as the page). It should be adaptable, since we'll be sending out very different kinds of emails. At the very least:

* account activation
* forum replies
* article updates
* article updates with diffs
* private messages

Bram, is this enough information?

Comment 1

[Ricky Rosario [:rrosario, :r1cky]]

Bram, it would be great if the template is just a header and footer and we pluck our content in the middle. The simpler the better since styling HTML for emails is painful.

Comment 2

[Ricky Rosario [:rrosario, :r1cky]]

HTML for email is new to us and it a pain to style, or so I've heard. Making this a 3pter given we don't even know what the template will look like. We can adjust or spinoff or whatever when we learn more.

Bram, when will you have something ready for us?

Comment 3

[Will Kahn-Greene [:willkg] ET needinfo? me]

Tagging Bram with a needsinfo for an ETA on when we could get an HTML email template.

Comment 4

[Bram Pitoyo [:bram]]

Just returned from the Easter holiday. I expect to be able to finish this project this week, before traveling to London!

Comment 5

[Bram Pitoyo [:bram]]

Attachment: email template - private message - 01

Comment 6

[Bram Pitoyo [:bram]]

Attachment: email template - send username - 01

Comment 7

[Bram Pitoyo [:bram]]

I spent the day looking into and designing variations of the SUMO email template and settled on the first (and the simplest) of the bunch. It consists of a ‘floating’ SUMO logo, plus a content set inside a white box. Both are sitting on the same light-blue background we have on the site today.

It’s designed to be implemented as a 500px wide (so it fits various webmail clients), table-based layout, with SUMO logo occupying the 1st row, white content box the 2nd, and the update subscription link occupying the 3rd.

To avoid burdening user’s mailbox with copies of the same image, I think that the SUMO logo ought to be sourced from our CDN (it’s actually the same logo, to make our job simpler), rather than attached to every email we send.

The white content box has a margin of 30px on all sides. The body font stack is Helvetica Neue, Arial, Helvetica, sans-serif, because HTML emails don’t work with webfonts. Other CSS settings: font-size: 15px; line-height: 1.5; color: #333;

The link color is exactly the same as SUMO at #0095dd, and the link to change email preference is sized at 13px.

Lastly, the background color also uses the same value we’re using: #eaeff2. To further simplify the template, there’s no grain in the background image.

I think that this template shouldn’t be very complex to code, and should get us started with something we can expand and make fancy later. What do you think?

Comment 8

[Ricky Rosario [:rrosario, :r1cky]]

Thanks Bram!

Reassigning to Rehan for implementation. Any concerns?

Comment 9

[Michael Cooper [:mythmon]]

First, I like how this looks!

tl;dr: It should work on a phone, and I think we shouldn't use the CDN.

This reminds me of some emails I get that I hate because they don't flow properly on small screens like my phone, so I have to scroll left and right to read the text. Maybe it is an implementation detail, but I wanted to add my two cents here. I think that:

a) We have fewer tools in email to make sites responsive, since we can't detect user agents and I doubt we can use responsive design.
b) Email is probably viewed on a phone more often than the desktop site is viewed on a phone.

I don't think we should serve the logo from the CDN, because then most people will not see it (most email clients default to not showing images). The logo is less than 2KB. For comparison, the HTML email that Bugzilla sent me for comment 8 was almost 6K (including headers), and it didn't have any images.

Comment 10

[Bram Pitoyo [:bram]]

(In reply to Mike Cooper [:mythmon] from comment #9)
> It should work on a phone

Great point. I don’t mind if we do away with the 500 px box size and instead create a 100% widthed box with equal-sized top and side paddings, so it’ll look good on any screen size. What do you think?


> I don't think we should serve the logo from the CDN

This is also a good point. The point to counter that is, can’t we have an alt tag on the image so that a caption would show in place of it even when it’s blocked? Otherwise, if the image size is small enough, I don’t object attaching it to the email.

Comment 11

[Kadir Topal [:atopal]]

Thanks, Bram. I love the simple, but clear design.

(In reply to Bram Pitoyo [:bram] from comment #10)
> (In reply to Mike Cooper [:mythmon] from comment #9)
> > It should work on a phone
> 
> Great point. I don’t mind if we do away with the 500 px box size and instead
> create a 100% widthed box with equal-sized top and side paddings, so it’ll
> look good on any screen size. What do you think?

Let's go with that!

 
> > I don't think we should serve the logo from the CDN
> 
> This is also a good point. The point to counter that is, can’t we have an
> alt tag on the image so that a caption would show in place of it even when
> it’s blocked? Otherwise, if the image size is small enough, I don’t object
> attaching it to the email.

Most users will receive less than 5 emails from us. With the logo being <2kb that's 10kb in image data being downloaded. Since one of the design goals is to assure people that this is an email from a trusted source and the logo creates that familiarity, I don't think that's unreasonable. Let's do this.

Comment 12

[Rehan Dalal (Inactive)]

Landed:
https://github.com/mozilla/kitsune/commit/46da836f5da4e4e92879279268f0e62553a75cd1