This guide was created after having issues while working at Green Invoice to refactor our transaction email system.
This guide was built upon my experiences and others and comes to help solving most of the issues of email templating.
Contributions are welcomed, we will merge any pull request happily.
If you add a note please try to follow the way shown in here such as: before, after pictures, code examples.
Some general email guidelines:
-
Consider yourself as a programmer in year 1999
-
There is no standart to email templating
-
Use email testing applications to resolve issues
Some Pre-made Templates Sources:
- General
- Responsive Design
- Images
- RTL (Right to Left)
- Fonts
- CSS Styling
- CSS Support
- Tables
- Hrefs / Anchors / Links
- Paragraphs
- Other
- Litmus https://www.litmus.com/, Live example for Litmus rendering: https://litmus.com/previews/public/d6d8342
- Email on Acid https://www.emailonacid.com/
- BrowserStack
Litmus:
- Currently the best tool for testing emails
- Sometimes have problems with rendering, see example (when this happens you might need to retry the render):
- Use compiled sources or send emails directly - do not forward emails
- Inlining CSS tools:
- Online Tools
- Code Tools
- Litmus has a great blog with information on fixing problems: https://litmus.com/blog/
- https://stackoverflow.com/questions/127498/what-guidelines-for-html-email-design-are-there
- https://www.pinpointe.com/blog/email-campaign-html-and-css-support
- https://www.sitepoint.com/how-to-code-html-email-newsletters/
- https://www.emailonacid.com/blog/article/email-development/12_things_you_must_know_when_developing_for_gmail_and_gmail_mobile_apps#gmail_tip1
- https://www.campaignmonitor.com/resources/guides/