|
1 | 1 | # Really Simple Responsive HTML Email Template |
2 | 2 |
|
3 | | -Sometimes all you want is a really simple responsive HTML email template. Here it is. |
| 3 | +Sometimes all you want is a really simple responsive HTML email template. Here it is. |
4 | 4 |
|
5 | 5 | [See live preview](http://leemunroe.github.io/responsive-html-email-template/email.html). |
6 | 6 |
|
7 | 7 | <img src="https://cloud.githubusercontent.com/assets/15963/26765586/c6484a96-4933-11e7-80e0-2f7509d24280.png" alt="Simple HTML Email" width="500"> |
8 | 8 |
|
9 | 9 |
|
10 | | -## Sending emails using a marketing service like Campaign Monitor or Mailchimp? |
| 10 | +## Sending emails directly from your codebase or using a developer service? |
11 | 11 |
|
12 | | -Use the template `email.html` as is. They'll put the CSS inline for you when you put together your campaign. |
| 12 | +For an API service (like Mailgun) **you need to inline the CSS before sending**. See `email-inlined.html` for an example. |
13 | 13 |
|
| 14 | +You can use CSS inliner tools like [Responsive CSS Inliner](https://htmlemail.io/inline/) or [Juice](https://github.com/Automattic/juice) to do this automatically. |
14 | 15 |
|
15 | | -## Sending emails directly from your app or using a developer service? |
| 16 | +* Copy all of email.html |
| 17 | +* Paste the HTML as the source into the inliner |
| 18 | +* Copy the HTML output and use this as the email template you send |
16 | 19 |
|
17 | | -For an API like [Mailgun](http://www.mailgun.com) **you need to inline the CSS before sending**. See `email-inlined.html` for an example. |
18 | 20 |
|
19 | | -You can use inliner tools like [Responsive CSS Inliner](https://htmlemail.io/inline/) or [Juice](https://github.com/Automattic/juice) to do this automatically. |
| 21 | +## Sending emails using a marketing service like Mailchimp? |
20 | 22 |
|
21 | | -* Copy all of email.html |
22 | | -* Paste the HTML as the source into Putsmail |
23 | | -* Copy the HTML results and use them in your email template |
| 23 | +Use the template `email.html` as is. They'll put the CSS inline for you when you put together your campaign. |
24 | 24 |
|
25 | 25 | ## Tried and tested on all major email clients |
26 | 26 |
|
27 | | -Tested on mobile, desktop and web. |
| 27 | +Tested on mobile, desktop and web. |
28 | 28 |
|
29 | 29 |  |
30 | 30 |
|
31 | 31 |
|
32 | | -[See the Litmus test results](https://litmus.com/checklist/emails/public/d432046). |
| 32 | +[See the Litmus test results](https://litmus.com/checklist/emails/public/cc3e30f). |
33 | 33 |
|
34 | 34 | ## More HTML email resources |
35 | 35 |
|
36 | 36 | * [More Responsive HTML Email Templates](http://htmlemail.io) |
37 | | -* [Things I've Learned About Building HTML Emails](http://www.leemunroe.com/building-html-email/) |
| 37 | +* [An Introduction To Building And Sending HTML Email For Web Developers](https://www.smashingmagazine.com/2017/01/introduction-building-sending-html-email-for-web-developers/) |
38 | 38 | * [Grunt Email Design Workflow](https://github.com/leemunroe/grunt-email-design) |
0 commit comments