├── email-inlined.html ├── email.html ├── license.txt └── readme.md /email-inlined.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Simple Transactional Email 7 | 89 | 90 | 91 | 92 | 93 | 94 | 150 | 151 | 152 | 153 | 154 | 155 | -------------------------------------------------------------------------------- /email.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Simple Transactional Email 7 | 298 | 299 | 300 | 301 | 302 | 303 | 359 | 360 | 361 | 362 | 363 | 364 | -------------------------------------------------------------------------------- /license.txt: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) [2013] [Lee Munroe] 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # Free Responsive HTML Email Template 2 | 3 | Sometimes all you want is a really simple responsive HTML email template with a clear call-to-action button. Here it is. 4 | 5 | [See live preview](http://leemunroe.github.io/responsive-html-email-template/email.html). 6 | 7 | Simple HTML Email Template 8 | 9 | ## Inline your CSS before sending 10 | 11 | Email is notorious for inconsistent CSS support. Therefore you should always inline your CSS and send a test to yourself before sending. 12 | 13 | ### Sending emails directly from your codebase or using a developer service? 14 | 15 | For an API service (like Mailgun, SendGrid, Postmark) **you need to inline the CSS before sending**. See `email-inlined.html` for an example. 16 | 17 | You can use this [Email CSS Inliner](https://htmlemail.io/inline/) and then [send a test email to yourself](https://postdrop.io) to verify it works as expected. 18 | 19 | * Copy all of email.html 20 | * Paste the HTML as the source into the inliner 21 | * Copy the HTML output and use this as the email template you send 22 | 23 | ### Sending emails using a marketing service like Mailchimp? 24 | 25 | Use the template `email.html` as is. They'll put the CSS inline for you when you put together your campaign. 26 | 27 | ## Images in email 28 | 29 | When inserting images remember to include the following attributes or risk them breaking in different clients: 30 | 31 | * `src` 32 | * `alt` 33 | * `width` 34 | * `height` 35 | * `border` 36 | 37 | Example: 38 | 39 | `Useful alt text` 40 | 41 | [More information here](https://www.smashingmagazine.com/2017/01/introduction-building-sending-html-email-for-web-developers/) 42 | 43 | ## Tried and tested on all major email clients 44 | 45 | Tested on mobile, desktop and web. 46 | 47 | Tested on Email Clients 48 | 49 | ## More HTML email resources 50 | 51 | * [10 Premium HTML Email Templates for Developers](https://htmlemail.io) 52 | * [Free Figma Email Template Design System](https://htmlemail.io/design-system) 53 | * [An Introduction To Building And Sending HTML Email](https://www.smashingmagazine.com/2017/01/introduction-building-sending-html-email-for-web-developers/) 54 | * [Grunt Email Design Workflow](https://github.com/leemunroe/grunt-email-design) 55 | * [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) 56 | * [Manage and Send Email Templates To Yourself](https://postdrop.io) 57 | * [Accessible Email Evaluation Tool](https://www.accessible-email.org/) 58 | 59 | This free template is part of a pack of responsive email templates for developers and startups available on [HTML Email](https://htmlemail.io). 60 | [![image](https://github.com/leemunroe/responsive-html-email-template/assets/15963/61d4a6d7-bd0e-4241-b4e5-d766162df192)](https://htmlemail.io) 61 | 62 | --------------------------------------------------------------------------------