code-corps/design

Email Design Templates

Closed this issue ยท 15 comments

Figuring out some email templates we can use just for transactional emails
right now we have nothing for email verification, or password reset, etc
or receipts for payments

For reference http://foundation.zurb.com/emails.html

We can make these pretty basic, too. They definitely don't need to be too fancy or complex. Just something that mirrors the exiting UI in #1.

@joshsmith Here are some options. I find that simple is better so I kept these clean and somewhat neutral in color so when you add elements like buttons they will stand out better with the brighter colors. Let me know what you think!

Option 1
option 1

Option 2
option 2

Looks great @samserif!

I think I prefer Option 1, but might want to just altogether remove the social links for now in favor of whatever action might be expected in the email. What do you think?

@samserif Are those emails already coded in foundation, or are they sketch designs?

@joshsmith Sounds good. I can remove the social links but I think any action (buttons, links etc.) should be in the white content box so it doesn't get lost.

@green-arrow They are just sketch designs but I planned to code them tonight or tomorrow.

@samserif sounds good!

How do we want to manage the templates @joshsmith? Put the compiled templates into the API project? Or put the source files in the API and compile them on build?

@green-arrow we're going to use https://github.com/thoughtbot/bamboo for sending. It would be nice to be able to have a CSS inliner. I don't know if that exists in Elixir-land.

@joshsmith - The foundation framework handles inlining as part of its build process.

Our current process at work is this:

  • Foundation email source code lives in application repository
  • Before app build, the foundation emails are compiled into HTML files with inline CSS
  • Application uses compiled HTML files to send emails (we currently use velocity templates to provide the HTML with data)

๐Ÿ‘

I was thinking we could compile the foundation templates on build and rename the file to have the proper .eex extension, then just use it in Bamboo like they do in their docs.

We would still be able to use merge variables in them though, right @green-arrow?

Right. It would mean that whoever codes the emails would need to know a little bit of the phoenix / elixir syntax for using variables provided by the application.

Adding this here for now..https://github.com/samserif/codecorp_emails. I'm not sure how to update the phoenix/elixir portion.

But src/pages/index.html contains the styled template.

@green-arrow would you be able to spend any time pointing @samserif in the right direction here?

Implemented now in an email! ๐Ÿ™Œ thanks @samserif.