rss-bridge 2024-08-20T19:04:44+00:00

Building Custom Email Templates with HTML and CSS in Python

An HTML email utilizes HTML code for presentation. Its design is heavy and looks like a modern web page, rich with visual elements like images, videos, etc., to emphasize different parts of an email's content.
Building email templates tailored to your brand is useful for various email marketing purposes such

Building Custom Email Templates with HTML and CSS in Python

Ivan Djuric

Building email templates tailored to your brand is useful for various email marketing purposes such as welcoming new customers, order confirmation, and so on. Email template customization allows you to save time by not having to create emails from scratch each time. You can also include an email link in HTML to automatically compose emails in your email client.

In this step-by-step guide, you'll learn how to build an HTML email template, add a CSS email design to it, and send it to your target audience.

Setting Up Your Template Directory and Jinja2

Follow the steps below to set up your HTML email template directory and Jinja2 for Python email automation:

Create a Template Directory: To hold your HTML email templates, you will need to set up a template directory inside your project module. Let's name this directory - html_emailtemp.

Install Jinja2: Jinja is a popular templating engine for Python that developers use to create configuration files, HTML documents, etc. Jinja2 is its latest version. It lets you create dynamic content via loops, blocks, variables, etc. It's used in various Python projects, like building websites and microservices, automating emails with Python, and more.

Use this command to install Jinja2 on your computer:

pip install jinja2

Creating an HTML Email Template

To create an HTML email template, let's understand how to code your email step by step. If you want to modify your templates, you can do it easily by following the steps below:

Step 1: Structure HTML

A basic email will have a proper structure - a header, a body, and a footer.

Header: Used for branding purposes (in emails, at least)

Body: It will house the main text or content of the email

Footer: It's at the end of the email if you want to add more links, information, or call-to-actions (CTA)

Begin by creating your HTML structure, keeping it simple since email clients are less compatible than web browsers. For example, using tables is preferable for custom email layouts.

Here's how you can create a basic HTML mail with a defined structure:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML Email Template</title>
<style type="text/css">
/* Add your CSS here */
</style>
</head>
<body>
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<table width="600" cellpadding="0" cellspacing="0">
<!-- Header -->
<tr>
<td style="background-color: #1c3f60; color: #ffffff; text-align: center; padding: 20px;">
<h1>Your order is confirmed</h1>
</td>
</tr>
<!-- Body -->
<tr>
<td style="padding: 20px; font-size: 16px; line-height: 1.6; color:#ffffff;">
<p>The estimated delivery date is 22nd August 2024.</p>
</td>
</tr>
<!-- Footer -->
<tr>
<td style="background-color: #ff6100; color: #000000; text-align: center; padding: 20px;">
<p>For additional help, contact us at [email protected]</p>
</td>
</tr>
</table>
</td>
</tr>

Explanation:

<!DOCTYPE html>: This declares HTML as your document type.

<html>: This is an HTML page's root element.

<head>: This stores the document's metadata, like CSS styles.

<style>: CSS styles are defined here.

<body>: This stores your email's main content.

<table>: This tag defines the email layout, giving it a tabular structure with cells and rows, which makes rendering easier for email clients.

<tr>: This tag defines the table's row, allowing vertical content stacking.

<td>: This tag is used to define a cell inside a row. It contains content like images, text, buttons, etc.

Step 2: Structure Your Email

Now, let's create the structure of your HTML email. To ensure it's compatible with different email clients, use tables to generate a custom email layout, instead of CSS.

<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<table width="600" cellpadding="0" cellspacing="0" style="border: 1px solid #1c3f60; padding: 20px;">
<tr>
<td align="center">
<h1 style="color: #7ed957;">Hi, Jon!</h1>
<p style="font-size: 16px; color: #ffde59;">Thank you for being our valuable customer!</p>
</td>
</tr>
</table>
</td>
</tr>

Styling the Email with CSS

Once you've defined your email structure, let's start designing emails with HTML and CSS:

Inline CSS

Use inline CSS to ensure different email clients render CSS accurately and preserve the intended aesthetics of your email style.

<p style="font-size: 16px; color: blue;">Styled paragraph.</p>

Adjusting Style

Users might use different devices and screen sizes to view your email. Therefore, it's necessary to adapt the style to suit various screen sizes. In this case, we'll use media queries to achieve this goal and facilitate responsive email design.

<style type="text/css">
@media screen and (max-width: 600px) {
.container {
width: 100% !important;
padding: 10px !important;
</style>

<table class="container" width="600">
<!-- Content -->
</table>

Explanation:

@media screen and (max-width: 600px) {....}: This is a media query that targets device screens of up to 600 pixels, ensuring the style applies only to these devices, such as tablets and smartphones.

width: 100% !important;: This style changes the width of the table - .container. The code instructs that the table width be set to full screen, not 600px.

!important: This rule overrides other styles that may conflict with it.

padding: 10px !important;: Inside the .container table, a padding of 10px is added to the table.

Adding CTA Button and Links

Here, we are adding a call to action (CTA) link at the button - "Get a 30-day free trial" that points to this page - https://www.mydomain.com.

<table cellpadding="0" cellspacing="0" style="margin: auto;">
<tr>
<td align="center" style="background-color: #8c52ff; padding: 10px 20px; border-radius: 5px;">
<a href="https://www.mydomain.com" target="_blank" style="color: #ffffff; text-decoration: none; font-weight: bold;">Get a 30-day free trial</a>
</td>
</tr>
</table>

Let's Now Look at the Complete HTML Email Template:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>HTML Email Template</title>

<style type="text/css">
/* Adding the CSS */

body {
margin: 0;
padding: 0;
background-color: #f4f4f4;
font-family: Arial, sans-serif;

table {
border-collapse: collapse;

.mailcontainer {
width: 100%;
max-width: 600px;
margin: auto;
background-color: #ffffff;

.header {
background-color: #1c3f60;
color: #ffffff;
text-align: center;
padding: 20px;

.body {
padding: 20px;
font-size: 16px;
line-height: 1.6;
background-color: #1c3f60;
color: #7ed957;

.footer {
background-color: #ff6100;
color: #000000;
text-align: center;
padding: 20px;

.cta {
background-color: #8c52ff;
padding: 10px 20px;
border-radius: 5px;
color: #ffffff;
text-decoration: none;
font-weight: bold;

@media screen and (max-width: 600px) {
.container {
width: 100% !important;
padding: 10px !important;
</style>
</head>

<body>
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<table class="container" width="600" cellpadding="0" cellspacing="0">

<!-- Header -->
<tr>
<td class="header">
<h1>Your order is confirmed</h1>
</td>
</tr>

[...]

---

*[Original source](https://stackabuse.com/building-custom-email-templates-with-html-and-css-in-python/)*