Newsletter/Email template

[hunvreus]

We intend to send emails to our users:

1. The newsletter; will be sent once in a while (monthly?) with updates about new features, blog posts etc.
2. Transactional emails; will be sent automatically by our service (password reset, account confirmation, alerts...).

The newsletter will obviously have a stronger/more obvious branding (larger logo maybe) with a more appealing design.

Transactional emails should be efficient: they need to have a limited branding (just the logotype part of our logo without the name "devo.ps") and a simpler layout (no color, almost raw text).

I think Dropbox does a good job at this with minimal branding:

For implementing this, I recommend we stick to the simplest layout we can get away with. I've used successfully various approaches in the past:

• https://github.com/leemunroe/html-email-template
• http://zurb.com/ink/

@erqiudao has access to all the assets needed here. The simpler the better. I'd like to see two prototypes (no need to overdo it on the design side of things) for:

1. A transactional email informing the user that his password has been reset, along with a link to click.
2. A newsletter featuring an announcements of new features released this month, followed by a couple blog posts teasers.

More than a prototype for these two things, I'd like to see as well a series of recommendations/explanations as to why and how we build these. We'll likely standardize this across all our products.

[hunvreus]

Just a couple examples of newsletter (rather than just the transactional email for Dropbox):

• Tiny letter has a very simple and clean email for features announcement

  

• Mapbox send updates about recent blog posts:

  

[hunvreus]

@1272729223 Go ahead!

@erqiudao Help if you can/want.

[hunvreus]

Looked into this further yesterday. I would like to start working on this; maybe use Ink as a starting point but strip it of everything we don't need (we don't need grids basically since we have always only one column).

I'd like this to be some kind of gulp based tool, having the style as SCSS and a build step to inline it in the page, rather than the approach of Ink.

[hunvreus]

@quentinberder to clarify what he things is possible w/ Intercom. I went through some of their documentation and what I understand is the following:

Type	Description	Platform
Transactional	System information delivered to the user (account creation, new repository, alerts...). Purely informational and potentially even legally required.	Direct email/Mandrill
Notification	User-centric email triggered on certain events; information filled in, inactivity on account, account renewal...	Intercom
Marketing	Regular, bulk campaigns (new features, new releases, ...)	Mailchimp + Intercom

A couple things:

• Mandrill is optional for now, we can send email directly from our box (@zbal how much for Mandrill?). Mandrill merely helps us NOT be in charge maintaining a Postfix server that could easily get blacklisted or break (it doesn't do much beyond that but it's nice enough that it can integrate with Mailchimp).
• Intercom doesn't seem to be designed for bulk email, at least not in the sense of a newsletter. We're gonna be able to do things like RSS to email with Mailchimp , Intercom would be more a tool we use to target specific segments and design an automated process for keeping them in the loop (discounts, activity ...), but I may be wrong.

@quentinberder thoughts? We're likely gonna use the same on SweepBoard, so I'd like us to agree.

[quentinberder]

That looks like a sound approach to me, I agree with the breakdown. I will look into Mandrill as I am not familiar at all with it. I will move this to the wiki.

[erqiudao]

Transactional

[quentinberder]

I do not really like it. We should display more branding for devo.ps and have more actionables in the email such as Twitter, website and such. @erqiudao

[erqiudao]

It's Transactional not newsletter "Transactional emails should be efficient: they need to have a limited branding (just the logotype part of our logo without the name "devo.ps") and a simpler layout (no color, almost raw text)." - Ronan

"Twitter, website and such." is in the newsletter which i'm working on.

[quentinberder]

I do not agree with it, perhaps we can leave out the actionables but branding should still be prominent. Users forget and will remember seeing name, logo and colors. @hunvreus

[erqiudao]

newsletter

[hunvreus]

No need for a separate repo when this is related to the content and marketing that is developed here. I moved things in a subfolder: https://github.com/devo-ps/devo-ps.github.io/tree/master/email

My feedback;

1. We should have three templates (maybe less if you decide to use the same template for various use cases) for transactional, notifications and marketing (newsletter). See my comment at https://github.com/devo-ps/devo-ps.github.io/issues/48#issuecomment-50722022
2. These should be actual templates: there are conventions that allow you to define areas as editable on Intercom and mailchimp.

3. I don't think the current layout/style is working:

   1. Keep the layout dead simple: no thumbnail + left and right layout for listing things. I'd rather have pure text (title + teaser) apart from the 1 story we feature that may have a banner/thumbnail that takes the whole width.
   2. Careful with styles; things like Open Sans may not work.
   3. Style-wise, I'd design something that is in between Dropbox and Digital Ocean:

   

   

   Code at https://gist.github.com/hunvreus/8aa8e6d756075df19f60

   1. You can use images for the logo at the top and the links at the bottom if need there is.
   2. Put nothing in the card (white background section) other than the content. Links like the "View in browser" are usually in the header or footer, in small. In our case, most likely in the footer.
   3. You could try a border on the box, not sure about that.
4. Keep things semantically well structured: for each email we'll need to provider

You can do another round of design with @erqiudao if you want; I'd focus on getting the notification/transactional template done and then "maybe" tweak a tiny little bit the design to make it work for the newsletter (basically supporting a list of announcements/blog posts or something).

[erqiudao]

ok =＾● ⋏ ●＾=

[hunvreus]

Doodle time:

1. Header has simply a picture of the logo of devo.ps
2. Body is the card (white background) and has a simple rounded border (2px) a line and a padding (gutter is 20px).
3. Card footer includes important links to social (twitter, blog, etc) as well as docs and front page.
4. Footer of the email should have unsubscribe link, copyright and "View in your browser" links (optional).

[hunvreus]

Also, use the colors defined on the website: $line, $light, body has a color too (I think tint($black, 25%)), $blue, etc.

[hunvreus]

Mailgun just published some of their own templates: http://blog.mailgun.com/transactional-html-email-templates/

May be worth checking their approach and see if we should steal of their ideas. Their templates seem simpler/cleaner than the other ones we had seen.