Skip to content

Commit

Permalink
Update readme.md
Browse files Browse the repository at this point in the history
  • Loading branch information
leemunroe authored Jun 22, 2019
1 parent 0fb17b6 commit 44ffa18
Showing 1 changed file with 11 additions and 7 deletions.
18 changes: 11 additions & 7 deletions readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,29 +2,33 @@

# Free Responsive Simple HTML Email Template

Sometimes all you want is a really simple responsive HTML email template. Here it is.
Sometimes all you want is a really simple responsive HTML email template with a clear call-to-action button. Here it is.

[See live preview](http://leemunroe.github.io/responsive-html-email-template/email.html).

<img src="https://user-images.githubusercontent.com/15963/29055956-8dcca38e-7bb4-11e7-8a86-7b056ebf673d.png" alt="Simple HTML Email" width="500">

## Sending emails directly from your codebase or using a developer service?
## Inline your CSS before sending

For an API service (like Mailgun) **you need to inline the CSS before sending**. See `email-inlined.html` for an example.
Email is notorious for inconsistent CSS support. Therefore you should always inline your CSS before sending.

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.
### Sending emails directly from your codebase or using a developer service?

For an API service (like Mailgun, SendGrid, Postmark) **you need to inline the CSS before sending**. See `email-inlined.html` for an example.

You can use this [Email CSS Inliner](https://htmlemail.io/inline/) or a module like [Juice](https://github.com/Automattic/juice) to do this automatically.

* Copy all of email.html
* Paste the HTML as the source into the inliner
* Copy the HTML output and use this as the email template you send

## Sending emails using a marketing service like Mailchimp?
### Sending emails using a marketing service like Mailchimp?

Use the template `email.html` as is. They'll put the CSS inline for you when you put together your campaign.

## Images in email

When inserting images remember to include the following attrinbutes or risk them breaking in different clients:
When inserting images remember to include the following attributes or risk them breaking in different clients:

* `src`
* `alt`
Expand All @@ -48,7 +52,7 @@ Tested on mobile, desktop and web.

## More HTML email resources

* [10 Designed HTML Email Templates for Developers](http://htmlemail.io)
* [10 HTML Email Templates for Developers](https://htmlemail.io)
* [An Introduction To Building And Sending HTML Email](https://www.smashingmagazine.com/2017/01/introduction-building-sending-html-email-for-web-developers/)
* [Grunt Email Design Workflow](https://github.com/leemunroe/grunt-email-design)
* [Everything Web Developers Need To Know About Transactional Email](https://webdesign.tutsplus.com/articles/everything-developers-need-to-know-about-sending-transactional-email--cms-31759)
Expand Down

0 comments on commit 44ffa18

Please sign in to comment.