Creating an HTML email instead of a plain text email offers numerous advantages, including enhanced visual appeal and design flexibility, allowing for brand consistency through colors, images, and layouts. HTML emails engage users more effectively with clickable buttons and organized content, making them more digestible. They also enable performance tracking and A/B testing for optimization, while providing a professional appearance that differentiates your brand in crowded inboxes. Overall, HTML emails can significantly improve engagement and effectiveness in achieving marketing goals.
To create your responsive email template which you will be able to use for all your upcoming emails you need to create the required HTML first. So let’s dive into that!
Coding the HTML for your responsive email template
Key Features:
- Two-Column Layout: The content is split into two columns, making it visually appealing and easier to digest.
- Image Placeholders: Each column includes an image placeholder that you can replace with relevant images.
- Responsive Design: The layout adjusts to a single column on smaller screens for better readability.
- Table Structure: The email layout uses
<table>elements for the main structure and the two-column layout, which is more reliable for email clients. - Styling Consistency: The colors and styles are consistent with your theme, ensuring a cohesive look. Make sure you change colors to better reflect your branding.
Let’s code your responsive email template
- Like usual HTML files you will need to start with the tags like the following:
<!DOCTYPE html>
<html lang="en">NOTE: Depending on the language you will be writing, set the lang value to anything you want.
2. Next, you will have to create your <head> tags. You need to include your CSS inside the “style” tag located inside your <head> as email clients do NOT support external CSS. Your <head> should look something like this:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
.container {
width: 100%;
max-width: 600px;
margin: 0 auto;
background-color: #ffffff;
border-radius: 8px;
overflow: hidden;
}
.header {
background-color: #007bff;
color: #ffffff;
padding: 20px;
text-align: center;
}
.content {
display: flex;
flex-direction: row;
padding: 20px;
}
.column {
flex: 1;
padding: 10px;
box-sizing: border-box;
}
.footer {
background-color: #f1f1f1;
text-align: center;
padding: 10px;
font-size: 12px;
}
.button {
display: inline-block;
padding: 10px 20px;
background-color: #28a745;
color: #ffffff;
text-decoration: none;
border-radius: 5px;
margin-top: 10px;
}
img {
max-width: 100%;
height: auto;
border-radius: 5px;
}
@media screen and (max-width: 600px) {
.container {
width: 100%;
border-radius: 0;
}
.content {
flex-direction: column;
}
.header, .footer {
padding: 15px;
}
}
</style>
</head>3. Now that you have concluded your <head> tag, it’s time to move on the <body> where you will post your content:
<body>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<div class="container">
<div class="header">
<h1>Welcome to Our Newsletter!</h1>
</div>
<div class="content">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="50%" style="padding: 10px; vertical-align: top;">
<h2 style="color: #9e005d;">Latest Updates</h2>
<img src="https://via.placeholder.com/250" alt="Update Image">
<p>Stay informed with the latest news and updates from our community. We’re sharing insights that can help you succeed!</p>
<a href="#" class="button">Read More</a>
</td>
<td width="50%" style="padding: 10px; vertical-align: top;">
<h2 style="color: #9e005d;">Exclusive Offers</h2>
<img src="https://via.placeholder.com/250" alt="Offer Image">
<p>Don't miss out on exclusive offers available only to our subscribers. Check them out and save!</p>
<a href="#" class="button">Shop Now</a>
</td>
</tr>
</table>
</div>
<div class="footer">
<p>© 2024 Your Company. All rights reserved.</p>
<p><a href="#" style="color: #9e005d;">Unsubscribe</a></p>
</div>
</div>
</td>
</tr>
</table>
</body>Now that you have concluded your <body> tag, it’s time to close down your html tag also. So:
</html>Please refrain from inputting JS code inside your email html. Inputting JavaScript code inside HTML emails is generally not allowed and is considered a bad practice. Most email clients (like Gmail, Outlook, etc.) block JavaScript for security reasons. They do this to prevent malicious activities, such as phishing and the spread of malware.
When creating HTML emails, it’s best to stick to basic HTML and inline CSS for styling. Focus on ensuring compatibility across different email clients while keeping your content simple and accessible. The above HTML code will give you a nice clean two-column responsive email. Each column will have an image you need to provide links for, and the email has the required “unsubscribe” button which you will need to specify the link for. If you have any questions, please write to me on the comments section below.
Complete HTML Code for your responsive Email template
Here is the complete HTML for you to copy and paste to your editor:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
.container {
width: 100%;
max-width: 600px;
margin: 0 auto;
background-color: #ffffff;
border-radius: 8px;
overflow: hidden;
}
.header {
background-color: #007bff;
color: #ffffff;
padding: 20px;
text-align: center;
}
.content {
display: flex;
flex-direction: row;
padding: 20px;
}
.column {
flex: 1;
padding: 10px;
box-sizing: border-box;
}
.footer {
background-color: #f1f1f1;
text-align: center;
padding: 10px;
font-size: 12px;
}
.button {
display: inline-block;
padding: 10px 20px;
background-color: #28a745;
color: #ffffff;
text-decoration: none;
border-radius: 5px;
margin-top: 10px;
}
img {
max-width: 100%;
height: auto;
border-radius: 5px;
}
@media screen and (max-width: 600px) {
.container {
width: 100%;
border-radius: 0;
}
.content {
flex-direction: column;
}
.header, .footer {
padding: 15px;
}
}
</style>
</head>
<body>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<div class="container">
<div class="header">
<h1>Welcome to Our Newsletter!</h1>
</div>
<div class="content">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="50%" style="padding: 10px; vertical-align: top;">
<h2 style="color: #9e005d;">Latest Updates</h2>
<img src="https://via.placeholder.com/250" alt="Update Image">
<p>Stay informed with the latest news and updates from our community. We’re sharing insights that can help you succeed!</p>
<a href="#" class="button">Read More</a>
</td>
<td width="50%" style="padding: 10px; vertical-align: top;">
<h2 style="color: #9e005d;">Exclusive Offers</h2>
<img src="https://via.placeholder.com/250" alt="Offer Image">
<p>Don't miss out on exclusive offers available only to our subscribers. Check them out and save!</p>
<a href="#" class="button">Shop Now</a>
</td>
</tr>
</table>
</div>
<div class="footer">
<p>© 2024 Your Company. All rights reserved.</p>
<p><a href="#" style="color: #9e005d;">Unsubscribe</a></p>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>Have time for another blog on web development? Try reading Coding Tutorial: Simple Referral System Development For Your Own Website!
Leave a Reply