Top Related Projects
Rock-solid transactional email templates for applications.
A free simple responsive HTML email template
A few simple, but solid patterns for responsive HTML email templates and newsletters. Even in Outlook and Gmail.
MJML: the only framework that makes responsive-email easy
Email Blueprints is a collection of HTML email templates that can serve as a solid foundation and starting point for the design of emails
Sendwithus Open Source Email Templates
Quick Overview
The ActiveCampaign/postmark-templates repository is a collection of open-source transactional email templates designed for use with the Postmark email service. These templates are responsive, tested across various email clients, and can be easily customized to fit different branding needs.
Pros
- Ready-to-use, professionally designed email templates
- Responsive design, ensuring compatibility across various devices and email clients
- Easily customizable to match brand identity
- Includes both HTML and plain text versions for maximum compatibility
Cons
- Limited to transactional email types (e.g., welcome emails, password resets)
- Requires knowledge of HTML and CSS for extensive customization
- May not be suitable for complex, highly-customized email designs
- Specific to Postmark, potentially limiting use with other email services
Code Examples
This repository primarily contains HTML and CSS templates rather than a code library. However, here are a few examples of how you might use or customize these templates:
- Customizing the logo in a template:
<td class="email-masthead">
<a href="{{product_url}}" class="f-fallback email-masthead_name">
<img src="path/to/your/logo.png" alt="Your Company Name" width="200">
</a>
</td>
- Modifying the color scheme:
<style>
:root {
--bg-color: #f2f4f6;
--text-color: #51545e;
--button-color: #22bc66;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}
.button {
background-color: var(--button-color);
}
</style>
- Adding a custom footer:
<tr>
<td>
<table class="email-footer" align="center" width="570" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td class="content-cell" align="center">
<p class="f-fallback sub align-center">
© 2023 Your Company Name. All rights reserved.
</p>
<p class="f-fallback sub align-center">
Your Company, Inc.
<br>1234 Street Rd.
<br>Suite 1234
</p>
</td>
</tr>
</table>
</td>
</tr>
Getting Started
To use these templates:
- Clone the repository:
git clone https://github.com/ActiveCampaign/postmark-templates.git
- Choose the desired template from the
templates
directory - Copy the HTML and modify it to fit your needs
- Use the modified HTML with Postmark's API or dashboard to send emails
Note: Ensure you have a Postmark account and are familiar with their API or dashboard for sending emails.
Competitor Comparisons
Rock-solid transactional email templates for applications.
Pros of postmark-templates
- Identical repository names suggest they might be the same project or closely related
- Both likely contain email templates for use with Postmark
Cons of postmark-templates
- Potential confusion due to identical repository names
- Possible duplication of efforts if they are separate projects
Code comparison
As the repositories have identical names, it's not possible to provide a meaningful code comparison without additional information. The code structure and content might be similar or identical if they are the same project or forks of each other.
Additional notes
- The identical repository names (postmark-templates) under the same owner (ActiveCampaign) suggest that this might be a duplicate listing or an error in the repository information.
- To provide a more accurate comparison, it would be necessary to have access to the actual contents of both repositories or to clarify if they are indeed separate projects.
- If these are separate projects, it would be advisable for ActiveCampaign to differentiate the repository names to avoid confusion and clearly indicate their purposes.
A free simple responsive HTML email template
Pros of responsive-html-email-template
- Simpler and more lightweight, focusing on a single, versatile template
- Extensive inline documentation and comments for easy customization
- Includes a plain-text version of the email for better accessibility
Cons of responsive-html-email-template
- Limited variety of templates compared to postmark-templates
- Less comprehensive coverage of different email types and use cases
- Fewer pre-built components and design elements
Code Comparison
responsive-html-email-template:
<table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body">
<tr>
<td> </td>
<td class="container">
<div class="content">
<!-- START CENTERED WHITE CONTAINER -->
<table role="presentation" class="main">
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">
<tr>
<td class="email-masthead">
The code comparison shows that both repositories use table-based layouts for email compatibility. responsive-html-email-template uses a simpler structure with fewer nested tables, while postmark-templates employs a more complex structure with additional classes and attributes for enhanced styling and responsiveness.
A few simple, but solid patterns for responsive HTML email templates and newsletters. Even in Outlook and Gmail.
Pros of Cerberus
- More comprehensive set of responsive email templates
- Includes both hybrid and fluid layouts for better compatibility
- Regularly updated with community contributions
Cons of Cerberus
- Less focused on transactional emails
- Fewer pre-designed templates for specific use cases
- May require more customization for specific branding needs
Code Comparison
Cerberus (hybrid approach):
<div class="container">
<!--[if mso]>
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="600" align="center">
<tr>
<td>
<![endif]-->
<div class="content">
<!-- Content here -->
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</div>
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">
<!-- Content here -->
</table>
</td>
</tr>
</table>
The code comparison shows that Cerberus uses a hybrid approach with conditional comments for Outlook compatibility, while Postmark Templates relies on nested tables for layout structure. Cerberus offers more flexibility for different email clients, while Postmark Templates focuses on simplicity and consistency across platforms.
MJML: the only framework that makes responsive-email easy
Pros of MJML
- More flexible and customizable, allowing for complex email designs
- Responsive by default, ensuring emails look good on various devices
- Larger community and more frequent updates
Cons of MJML
- Steeper learning curve due to its custom syntax
- Requires compilation to generate HTML, adding an extra step to the workflow
Code Comparison
MJML:
<mjml>
<mj-body>
<mj-section>
<mj-column>
<mj-text>Hello World</mj-text>
</mj-column>
</mj-section>
</mj-body>
</mjml>
Postmark Templates:
<table>
<tr>
<td>
<p>Hello World</p>
</td>
</tr>
</table>
MJML uses a custom XML-like syntax that abstracts away complex HTML and CSS, while Postmark Templates use standard HTML with inline styles. MJML requires compilation to generate the final HTML, whereas Postmark Templates can be used directly. MJML offers more flexibility and responsiveness out of the box, but Postmark Templates are simpler to understand and implement for those familiar with HTML.
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
- Includes responsive designs for various email clients
- Offers a wider range of template styles and layouts
Cons of email-blueprints
- Less frequently updated compared to postmark-templates
- May require more customization for specific use cases
- Larger file size due to the extensive template collection
Code Comparison
postmark-templates:
<table class="email-content" width="100%" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td class="email-masthead">
<a href="{{product_url}}" class="f-fallback email-masthead_name">
{{product_name}}
</a>
</td>
</tr>
<!-- Email Body -->
<tr>
<td class="email-body" width="570" cellpadding="0" cellspacing="0">
email-blueprints:
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateContainer">
<tr>
<td align="center" valign="top">
<!-- Header -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateHeader">
<tr>
<td valign="top" class="headerContent">
<img src="http://gallery.mailchimp.com/653153ae841fd11de66ad181a/images/placeholder_600.gif" style="max-width:600px;" id="headerImage" mc:label="header_image" mc:edit="header_image" mc:allowdesigner mc:allowtext />
</td>
</tr>
</table>
<!-- End Header -->
Both repositories provide HTML email templates, but their structure and approach differ. postmark-templates focuses on simplicity and ease of customization, while email-blueprints offers more complex layouts with additional features like image placeholders and MailChimp-specific attributes.
Sendwithus Open Source Email Templates
Pros of sendwithus/templates
- Larger variety of templates, including transactional and marketing emails
- More comprehensive documentation and usage guidelines
- Includes templates for multiple email service providers (ESPs)
Cons of sendwithus/templates
- Less frequent updates and maintenance
- Some templates may be outdated or not follow the latest email design best practices
- Lacks specific focus on a single ESP, which may result in less optimized templates
Code Comparison
postmark-templates:
<table class="email-content" width="100%" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td class="email-body" width="100%" cellpadding="0" cellspacing="0">
<table class="email-body_inner" align="center" width="570" cellpadding="0" cellspacing="0" role="presentation">
<!-- Email Body Content -->
</table>
</td>
</tr>
</table>
sendwithus/templates:
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="600" class="flexibleContainer">
<!-- Email Body Content -->
</table>
</td>
</tr>
</table>
Both repositories offer email templates, but sendwithus/templates provides a broader range of options for various ESPs. postmark-templates focuses specifically on Postmark and may offer more optimized templates for that platform. The code comparison shows similar structure, with minor differences in class names and attributes used for layout.
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 CopilotREADME
Postmark Transactional Email Templates
Content ready, mobile friendly, and beautiful across all major email clients.
What's this for?
Postmark Transactional Email Templates are rock-solid email templates that render beautifully in tons of email clients. They provide the foundation of our Postmark Templates feature, and we're glad to provide them as Open Source to the wider community.
These templates are built and maintained using MailMason, a grunt-based framework to help streamline the process of developing, testing, and maintaining a set of related transactional email templates. If you want to create or customize your own set of email templates, you can use MailMason to extend the existing emails or start from scratch to build an entirely new set.
CSS & Inlining
There are two sets of templates here. The first set is in the /templates
folder and contains the base templates with the CSS all contained in a style block. In this state, they're easier to edit, but they'll have limited compatibility with email clients. The other set in /templates-inlined
has the same templates but with the CSS already inlined. They'll be a bit more tedious to make changes to, but you won't need to use anything to inline the CSS.
Inline the CSS
For client compatibility, HTML emails should always be inlined before sending. Here are a couple of tools for doing that:
If you choose to send your emails with Postmark, each time you send we will automagically inline the CSS for you.
The Templates
Each template comes in three different generic layout variations: Basic, Basic full, and Plain. This gives you a starting point so that you can customize your templates to match your brand.
Welcome
Send a welcome email to users after they sign up.
- ð Preview with layout: Basic, Basic full, Plain
- ð Welcome email best practices guide
Reset Password
Send users a link to reset their password.
- ð Preview with layout: Basic, Basic full, Plain
- ð Reset password best practices guide
Reset Password Help
Help users reset their password if they canât remember their email.
- ð Preview with layout: Basic, Basic full, Plain
- ð Reset password best practices guide
Receipt
Send a receipt to users after they made a purchase.
- ð Preview with layout: Basic, Basic full, Plain
- ð Receipt and invoices best practices guide
Invoice
Request payment from a user.
- ð Preview with layout: Basic, Basic full, Plain
- ð Receipt and invoices best practices guide
Dunning
Let users know about a failed payment
- ð Preview with layout: Basic, Basic full, Plain
- ð Dunning best practices guide
Comment notification
Notify users of new comments by other users.
Note: Comment notification isn't the prettiest preview because it's just Mustachio. Since almost all content in this email is dynamic, it won't look good without real content. Don't worry though, that's how it's supposed to look.
- ð Preview with layout: Basic, Basic full, Plain
- ð Comment notification best practices guide
Trial Expiring
Let users know when their trial is about to expire.
- ð Preview with layout: Basic, Basic full, Plain
- ð Trial expiration email best practices
Trial Expired
Let users know when their expired trial.
- ð Preview with layout: Basic, Basic full, Plain
- ð Trial expiration email best practices
User Invitation
Help users invite others to use your software.
- ð Preview with layout: Basic, Basic full, Plain
- ð User invitation email best practices
We've also made sure that these have been tested for consistency in the following email clients:
- Desktop
- Apple Mail 9, 10, 11
- Outlook 2007, 2010, 2011, 2013, 2016
- Windows 10 Mail
- Mobile
- Gmail App (Android)
- iPhones 6, 7, 8, SE, X
- iPad (Retina)
- iPad Mini
- iPad Pro
- Web
- AOL
- Gmail
- Outlook.com
- Yahoo
Top Related Projects
Rock-solid transactional email templates for applications.
A free simple responsive HTML email template
A few simple, but solid patterns for responsive HTML email templates and newsletters. Even in Outlook and Gmail.
MJML: the only framework that makes responsive-email easy
Email Blueprints is a collection of HTML email templates that can serve as a solid foundation and starting point for the design of emails
Sendwithus Open Source Email Templates
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