A free simple responsive HTML email template

Last update: Dec 30, 2022

Overview

Free Responsive HTML Email Template

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.

Inline your CSS before sending

Email is notorious for inconsistent CSS support. Therefore you should always inline your CSS and send a test to yourself before sending.

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 and then send a test email to yourself to verify it works as expected.

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?

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 attributes or risk them breaking in different clients:

src
alt
width
height
border

Example:

<img src="https://absolute-path-to-image.jpg" alt="Useful alt text" width="500" height="300" border="0" style="border:0; outline:none; text-decoration:none; display:block;">

More information here

Tried and tested on all major email clients

Tested on mobile, desktop and web.

See the Litmus test results.

More HTML email resources

This free template is part of a pack of responsive email templates for developers and startups available on HTML Email.

Comments

Width at Outllook 2016

Hello I'm testing the template in different mail clients. In all programs it looks good, but not with Outlook 2016. Shown in a narrow column and with the buttons unformatted

I do not know how to correct this Thanks.

opened by inpq 22
Content not centered on Mac OS Mail

Hello! First of all, thanks for your amazing work. I am having some issues with centering on Mail on Mac (High Sierra, 10.13.4). I'm sending the HTML inlined version, copy & paste, and the content is not centered. I have checked the source and it's the same as the original:

Any ideas?

opened by idiazroncero 12
Gmail Webclient problem with provided email-inlined.html

Using your provided email-inlined.html (unmodified!) I can't get a satisfying result for Gmail Webclient. See the following screenshot. Is this a known limitation? Things not working: Not centered container, missing background color.

opened by mgraupner 9
Content not centered mac os Mail when attachement

Hi there, First of all thanks for this awesome template.

I have got a weird behaviour on mac os Mail app.

If I'm attaching an ICS file to the email, the content of the email isn't centred anymore (only the main block part).

I'm using Amazon SES to send emails from a NodeJS app using NodeMailer. Also, the css is inlined.

Any idea on this one?

Thanks!

opened by Rieranthony 7
`table[class=body]` causes responsive mobile version not working in iOS Gmail

It seems that Gmail for iOS ignore the table[class=body] properties for mobile-friendly styles.

By removing the atribute selector, the mobile styles work perfectly in this app.

What is this hack used for?

opened by danielblazquez 6
does not render properly in Outlook 2013.

i just did a test and it does not render properly in outlook 2013. the entire column appears to the right when open in email test. It is not in the center of the screen when you open an email. It does look good in yahoo mail, iOS and so on. How can I fix it?

opened by shawnpj 6
Fix button problem with Windows Mail-Outlook 2019
Added .btn-td. The child selector .btn > tbody > tr > td does not work

.btn-primary is not working

width: auto; not working for the button. Removed width: 100%; from table and added some extra css for the footer table.
opened by danielblazquez 5
Separating HTML and styles, converting CSS to SCSS, adding more tooling
now HTML source file resides in a separate folder (./src)

SCSS is compiled to CSS and injected into email.html file

then CSS is in-lined in email-inlined.html file
opened by salaros 5

Pre header text indent in Outlook 2016

Hello,

I ran across a minor formatting issue in Outlook 2016 where the preheader text was indented in the outlook message preview.

I fixed it by simply moving the pre header span above the table.

Before:

<body class="">
    <table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body">
      <tr>
        <td>&nbsp;</td>
        <td class="container">
          <div class="content">

            <!-- START CENTERED WHITE CONTAINER -->
            <span class="preheader">This is preheader text. Some clients will show this text as a preview.</span>
            <table role="presentation" class="main">

After:

<body class="">
<span class="preheader">This is preheader text. Some clients will show this text as a preview.</span>
    <table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body">
      <tr>
        <td>&nbsp;</td>
        <td class="container">
          <div class="content">

            <!-- START CENTERED WHITE CONTAINER -->
            <table role="presentation" class="main">

opened by mjmgooch 4

Fixed broken display of mail in Google Mail web client

Becaue of #37 I created a working solution for Google Mail web client. This was not thoroughly tested with all E-Mail providers out there so please do your own testing!

Environment: Google Mail web client with Firefox 45 and Google Chrome Version 50.0.2661.18 dev (64-bit) both on OSX 10.11.3.

opened by mgraupner 4
Best practice images 100%?

sorry for being a bit lazy, when adding images, what style needs to be added to the img?

<img src="" width="100%; height="auto" />

?

btw, nice template thx for sharing

opened by fourroses666 4
Template Not Displaying with Nodemailer

I'm trying to use this template with Nodemailer but for some reason the body doesnt display at all. But when i channge it some something simpler like <b> Message here </b>, it displays perfectly.

opened by thierryntoh24 0

If placeholder keys are used rather than text, the template is easier to use as-is

For example, the footer part of the template looks like this...

<td>
  Powered by <a href="http://htmlemail.io" style="color: #999999; font-size: 12px; text-align: center; text-decoration: none;">HTMLemail</a>.
 </td>

If this were changed to use a key for regexp-replace

<td>__template_footer_text__</td>

then we could do something like this...

const inputTpl = fs.readFileSync( './path/to/template.html' ), { encoding: 'utf8' });
const input = inputTpl.replace(
  /__template_footer_text__/, 
  'Powered by <a href="http://htmlemail.io" style="color: #999999; font-size: 12px; text-align: center; text-decoration: none;">HTMLemail</a>.' );

console.log({ myCustomEmail: input });

It would also be awesome if this template could be packaged to npm, so that it could be included as a dependency for C# and javascript applications.

Thank you!

opened by iambumblehead 11

Releases(v1.0.1)

v1.0.1(Aug 8, 2017)
Minor spacing bug fixes, mainly for Outlook

Added class for .content-block which was missing from v1

Tested in more clients including Gmail apps, Comcast, Mail.ru, Office 365

Litmus test results

Source code(tar.gz)
Source code(zip)
v1.0.0(Aug 4, 2016)
Better support across email clients

Particularly better support for Gmail and responsive mobile views

Improved bullet proof buttons

Added support for iOS links, addresses and numbers

Added support for preheader text

All the above while still trying to keep the markup as simple and easy to implement as possible

Litmus test results

Preview

Source code(tar.gz)
Source code(zip)

Owner

Lee Munroe

Designer Developer from Northern Ireland, leading design and development teams in San Francisco.

GitHub http://leemunroe.github.io/responsive-html-email-template/email.html

Practice Task of HTML - Mache Free Template (PSD to HTML) - Home Task (CTG)

Practice Task of HTML - Mache Free Template (PSD to HTML) - Home Task (CTG) This Assignment is mainly on PSD TO HTML along with HTML,CSS As a Basic HT

1 Jan 29, 2022

Free Next.js responsive landing page template for SaaS products made using JAMStack architecture.

✨ Free Next.js marketing website template for SaaS startups ✨ Everything you need to build a great landing page / marketing website for your startup.

6 Nov 5, 2022

Ctg-exam-2 - Exam Task of HTML , Responsive Page - PSD to HTML - (CTG)

Exam Task of HTML - PSD to HTML - (CTG) This Exam is mainly on PSD TO HTML along

1 Feb 16, 2022

Responsive Tabs is a jQuery plugin that provides responsive tab functionality.

Responsive Tabs is a jQuery plugin that provides responsive tab functionality. The tabs transform to an accordion when it reaches a CSS breakpoint. You can use this plugin as a solution for displaying tabs elegantly on desktop, tablet and mobile.

537 Dec 8, 2022

💌 A simple contact form that helps people send you a message. 📩 to your email. - built with JavaScript/Nodemailer 📃

Implementation using async/await: app.js const contactForm = document.querySelector(".contact-form"); let name = document.getElementById("name"); let

8 Aug 17, 2022

A simple easy to use vanilla JavaScript library for creating input fields that accept multiple email addresses

MeiMei - Multiple Email Input MeiMei: A simple easy to use vanilla JavaScript library for creating input fields that accept multiple email addresses.

1 Apr 13, 2022

Simple email automation library for Node.js

Dakiya Simple email automation for Node.js made easy. Features Zero config management: Use simple, chainable code to create email sequences. Email pla

12 Sep 22, 2022

A plugin for Strapi Headless CMS that provides ability to sign-in/sign-up to an application by link had sent to email.

Strapi PasswordLess Plugin A plugin for Strapi Headless CMS that provides ability to sign-in/sign-up to an application by link had sent to email. A pl

51 Dec 12, 2022

📧 Layanan pengirim pesan elektronik (email) dengan API.

?? Fimail Fimail, layanan pengirim pesan elektronik dengan API. Dibuat dengan ❤ dan NodeJs oleh Feri Irawan pada 31/12/2021 06.27 ⚡ Memulai Cepat Beri

4 Dec 22, 2022

Demodal is a browser extension that automatically removes content blocking modals including paywalls, discount offers, promts to sign up or enter your email address and more.

Demodal Demodal is a browser extension that automatically removes content blocking modals including paywalls, discount offers, promts to sign up or en

225 Jan 4, 2023

This is an unofficial front end for Hacker News, reminiscent of the Windows XP era Outlook email client on a Windows XP default desktop

Hacker XP Hacker News styled as the Windows XP Outlook email client. Try out Hacker XP here! Description This is an unofficial front end for Hacker Ne

19 Jul 12, 2022

LucaMail - an Open Source,Cross Platform Email Client

LucaMail v0.0.1-beta An Awesome Cross Platform Email Client! Note : This Project Is Still in Beta Version Website . Report Bug . Request Feature . Dis

210 Dec 28, 2022

Plugin for Obsidian.md to send markdown notes to Buttondown.email

Obsidian Buttondown Plugin Buttondown is a tool for producing email newsletters. It likes emails written in Markdown, and has an API. This plugin allo

4 Nov 15, 2022

This is email scheduler made using MERN. This repo contains server code, client repo is linked in readme.

Email Scheduler Client This is an email scheduler server (client in different repository). It is made using node.js/express.js. Overview User can sign

2 Dec 3, 2022

This is an email scheduler made using MERN stack. This repo contains client, server side is linked in readme

Email Scheduler Client This is an email scheduler client (server in different repository). It is made using react. Overview User can sign-up/sign-in,

3 Dec 3, 2022

📬 A quick comparison of private and / or secure email providers

?? Email Comparison A comparison table of private and / or secure email providers Live App The app can be accessed at: lissy93.github.io/email-compari

47 Dec 15, 2022

Reduce misspelled email addresses in your web apps.

mailcheck.js The Javascript library and jQuery plugin that suggests a right domain when your users misspell it in an email address. mailcheck.js is pa

7.9k Dec 28, 2022

This is just a script I put together to check and notify me via email (MailGun) when there's an earlier date before my initial appointment date. It doesn't handle rescheduling.

US-visa-appointment-notifier This is just a script I put together to check and notify me via email (MailGun) when there's an earlier date before my in

13 Jan 4, 2023

Mute email noise from people you don't know.

All the love to supporters ❤️ You are fantastic if you're using emailgurus.xyz. Thank you so much for your support. Welcome to Emailgurus! Hi! Here is

16 Oct 28, 2022