responsive-html-email-template

A free simple responsive HTML email template

13,218

4,403

13,218

View on GitHub

Top Related Projects

email-blueprints

6,985

Email Blueprints is a collection of HTML email templates that can serve as a solid foundation and starting point for the design of emails

Cerberus

4,987

A few simple, but solid patterns for responsive HTML email templates and newsletters. Even in Outlook and Gmail.

mjml

16,905

MJML: the only framework that makes responsive-email easy

foundation-emails

7,761

Quickly create responsive HTML emails that work on any device and client. Even Outlook.

postmark-templates

3,069

Rock-solid transactional email templates for applications.

Quick Overview

The leemunroe/responsive-html-email-template is a simple, responsive HTML email template designed to work across various email clients and devices. It provides a basic structure for creating email newsletters that look good on desktop, mobile, and web-based email clients.

Pros

Easy to use and customize
Responsive design that works on multiple devices and email clients
Well-documented with inline comments
Regularly maintained and updated

Cons

Limited design options out of the box
May require additional styling for more complex layouts
Some email clients may still have rendering issues with certain CSS properties
Lacks advanced features like dynamic content or personalization

Code Examples

Basic structure of the email template:

<!doctype html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Simple Transactional Email</title>
    <style>
      /* CSS styles go here */
    </style>
  </head>
  <body>
    <table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body">
      <!-- Email content goes here -->
    </table>
  </body>
</html>

Example of a responsive content block:

<tr>
  <td class="wrapper">
    <table role="presentation" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td>
          <p>Hi there,</p>
          <p>Sometimes you just want to send a simple HTML email with a simple design and clear call to action. This is it.</p>
          <table role="presentation" border="0" cellpadding="0" cellspacing="0" class="btn btn-primary">
            <tbody>
              <tr>
                <td align="left">
                  <table role="presentation" border="0" cellpadding="0" cellspacing="0">
                    <tbody>
                      <tr>
                        <td> <a href="http://htmlemail.io" target="_blank">Call To Action</a> </td>
                      </tr>
                    </tbody>
                  </table>
                </td>
              </tr>
            </tbody>
          </table>
          <p>This is a really simple email template. Its sole purpose is to get the recipient to click the button with no distractions.</p>
          <p>Good luck! Hope it works.</p>
        </td>
      </tr>
    </table>
  </td>
</tr>

Responsive CSS for mobile devices:

@media only screen and (max-width: 620px) {
  table.body h1 {
    font-size: 28px !important;
    margin-bottom: 10px !important;
  }
  table.body p,
  table.body ul,
  table.body ol,
  table.body td,
  table.body span,
  table.body a {
    font-size: 16px !important;
  }
  table.body .wrapper,
  table.body .article {
    padding: 10px !important;
  }
  table.body .content {
    padding: 0 !important;
  }
  table.body .container {
    padding: 0 !important;
    width: 100% !important;
  }
  table.body .main {
    border-left-width: 0 !important;
    border-radius: 0 !important;
    border-right-width: 0 !important;
  }
  table.body .btn table {
    width: 100% !important;
  }
  table.body .btn a {
    width: 100% !important;
  }
  table.body .img-responsive {
    height: auto !important;
    max-width: 100% !important;
    width: auto !important;
  }
}

Getting Started

Competitor Comparisons

email-blueprints

6,985

Email Blueprints is a collection of HTML email templates that can serve as a solid foundation and starting point for the design of emails

Pros of email-blueprints

More comprehensive collection of email templates for various use cases
Includes both responsive and non-responsive designs
Offers templates optimized for different email clients

Cons of email-blueprints

Less frequently updated compared to responsive-html-email-template
May require more customization for specific needs
Larger codebase to navigate and understand

Code Comparison

responsive-html-email-template:

<table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin: auto;">
  <tr>
    <td style="padding: 20px 0; text-align: center">
      <h1 style="margin: 0;">Simple Email Template</h1>
    </td>
  </tr>
</table>

email-blueprints:

<table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateContainer">
  <tr>
    <td align="center" valign="top">
      <table border="0" cellpadding="0" cellspacing="0" width="600" id="templateBody">
        <tr>
          <td valign="top" class="bodyContent">
            <h1>Your Email Template</h1>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Both repositories provide HTML email templates, but email-blueprints offers a wider variety of options. responsive-html-email-template focuses on a single, lightweight template that's easy to customize. email-blueprints provides more structure and options but may require more effort to adapt to specific needs.

Cerberus

4,987

A few simple, but solid patterns for responsive HTML email templates and newsletters. Even in Outlook and Gmail.

Pros of Cerberus

Offers multiple template versions (hybrid, fluid, and responsive) for different email client support levels
Includes more extensive documentation and explanations within the template files
Provides a wider range of layout options and components

Cons of Cerberus

More complex structure, which may be harder for beginners to understand and customize
Larger file size due to additional features and options
Less frequently updated compared to responsive-html-email-template

Code Comparison

Cerberus (hybrid version):

<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="600" style="margin: auto;" class="email-container">
    <tr>
        <td style="padding: 20px 0; text-align: center">
            <img src="https://via.placeholder.com/200x50" width="200" height="50" alt="alt_text" border="0" style="height: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555;">
        </td>
    </tr>
</table>

responsive-html-email-template:

<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">

Both templates provide a solid foundation for creating responsive HTML emails, but Cerberus offers more flexibility and options at the cost of increased complexity.

mjml

16,905

MJML: the only framework that makes responsive-email easy

Pros of mjml

More comprehensive framework with a wider range of components
Easier to create complex, responsive email layouts
Actively maintained with regular updates and improvements

Cons of mjml

Steeper learning curve due to its custom syntax
Requires compilation step to generate final HTML
Larger file size for the framework itself

Code Comparison

responsive-html-email-template:

<table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin: auto;">
  <tr>
    <td style="padding: 20px 0; text-align: center">
      <h1 style="font-size: 24px; font-weight: bold;">Heading</h1>
    </td>
  </tr>
</table>

mjml:

<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-text font-size="24px" font-weight="bold" align="center">
          Heading
        </mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

The responsive-html-email-template uses standard HTML tables for layout, while mjml employs a custom XML-like syntax that compiles to responsive HTML. mjml's approach is more abstracted and can be easier to read and maintain for complex layouts, but requires learning its specific components and attributes.

foundation-emails

7,761

Quickly create responsive HTML emails that work on any device and client. Even Outlook.

Pros of Foundation for Emails

More comprehensive framework with a wider range of components and layouts
Includes a build system for easier development and customization
Better documentation and community support

Cons of Foundation for Emails

Steeper learning curve due to its complexity
Larger file size, which may impact email load times
Requires more setup and configuration

Code Comparison

Foundation for Emails:

<container>
  <row>
    <columns small="12" large="6">
      <h1>Hello, world!</h1>
      <p>This is a responsive email template.</p>
    </columns>
    <columns small="12" large="6">
      <img src="image.jpg" alt="Image">
    </columns>
  </row>
</container>

Responsive HTML Email Template:

<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
  <tr>
    <td style="padding: 20px 0 30px 0;">
      <h1>Hello, world!</h1>
      <p>This is a responsive email template.</p>
    </td>
  </tr>
</table>

The code comparison shows that Foundation for Emails uses a more semantic structure with custom elements, while Responsive HTML Email Template relies on traditional table-based layouts for compatibility across email clients.

postmark-templates

3,069

Rock-solid transactional email templates for applications.

Pros of postmark-templates

More comprehensive collection of email templates, including transactional and marketing emails
Templates are designed with a focus on deliverability and best practices for various email clients
Includes both HTML and plain text versions for better accessibility and compatibility

Cons of postmark-templates

Less frequently updated compared to responsive-html-email-template
May require more customization to fit specific branding needs
Larger codebase, which could be overwhelming for beginners

Code Comparison

responsive-html-email-template:

<table align="center" border="0" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse;">
  <tr>
    <td align="center" bgcolor="#70bbd9" style="padding: 40px 0 30px 0;">
      <img src="images/h1.gif" alt="Creating Email Magic" width="300" height="230" style="display: block;" />
    </td>
  </tr>
</table>

postmark-templates:

<table class="email-wrapper" width="100%" cellpadding="0" cellspacing="0" role="presentation">
  <tr>
    <td align="center">
      <table class="email-content" width="100%" cellpadding="0" cellspacing="0" role="presentation">
        <!-- Email Body -->
        <tr>
          <td class="email-body" width="100%" cellpadding="0" cellspacing="0">

Both repositories offer responsive HTML email templates, but postmark-templates provides a more extensive collection with a focus on deliverability. responsive-html-email-template is simpler and more frequently updated, making it easier for beginners to understand and customize.

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

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.

More HTML email resources

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

Top Related Projects

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot