/email-maker

Simple setup for generating HTML emails.

Primary LanguageHTML

Email Maker

This is my little tool to help create html emails.

HTML email is literally writing HTML from the pre-CSS days. There are no divs, spans, classes, and IDs here. All layout must be done with tables and all styles must be added inline.

This tool allows you to use CSS, classes, and IDs to define and apply styles, but "inlines" them for the email markup. Additionally, it is built using Nunjucks for templating to save time if you're creating multiple emails.

How to use this

  1. Clone the repo git clone https://github.com/rewdy/email-maker.git
  2. Using Terminal.app (or other shell), run npm install in the directory to download dependencies.
  3. From the command line, gun grunt. This will start everything up so editing the sass files, layouts, and emails will result in the pages getting rendered.

Additional help if you needed: installing git, installing node, installing grunt globally, Nunjucks templating docs

Resources

I like to test my emails using a service called PutsMail. This site lets you enter addresses and paste in some HTML to test an email. Be sure to verify how it looks in Gmail (web and via the mobile apps), Outlook for Windows, and Outlook for Mac (and others, but those at minimum).

MailChimp has put together a really great Design Guide. I have referenced it often.

If you're sending out marketing email, it's critical to understand and comply with the CAN-SPAM act: FTC's Compliance Gude, CAN-SPAM on Wikipedia.

Finally, MailChimp also has a great article on avoiding being marked as SPAM, which I encourage reading.


Finally, if you're looking for design ideas, Really Good Emails is an excellent source of inspiration. :)