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.
- Clone the repo
git clone https://github.com/rewdy/email-maker.git - Using Terminal.app (or other shell), run
npm installin the directory to download dependencies. - 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
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. :)