Reading Time: 15 Minutes
Skill Level: Beginner to Intermediate
Topics: HTML Email Development, Tables, Inline CSS, Responsive Design
Creating an HTML email template might seem daunting—especially if you’ve heard horror stories about Outlook rendering issues or Gmail stripping CSS. But here’s the truth: once you understand the rules of email development, building beautiful, functional email templates becomes a repeatable process.
In this tutorial, I’ll walk you through creating a professional HTML email template from scratch. By the end, you’ll have a responsive template that works across every major email client, including Gmail, Outlook, Apple Mail, and mobile devices.
Why Email Development Is Different
Before we write a single line of code, let’s understand what makes email development unique:
Email clients are stuck in the past. While modern browsers support flexbox, grid, and CSS variables, many email clients still render HTML like it’s 1999. Outlook uses Microsoft Word’s rendering engine. Gmail strips <style> tags. Apple Mail supports modern CSS but has its quirks .
The rules of email HTML:
- Use tables for layout (yes, tables!)
- Inline your CSS
- Write bulletproof buttons with VML for Outlook
- Test, test, and test again
Resource Alert: Can I Email is the email equivalent of “Can I Use”—it shows which CSS features work across email clients.
Prerequisites
To follow this tutorial, you’ll need:
- A code editor (VS Code, Sublime Text, or even Notepad)
- Basic HTML knowledge
- An email address for testing
- Optional: Litmus or Email on Acid account for comprehensive testing (free trials available)
Step 1: Set Up Your Email Document Structure
Every HTML email starts with a doctype and proper structure. Let’s build the foundation:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Your Email Subject Line</title>
<style type="text/css">
/* Email Client Resets */
body {
margin: 0;
padding: 0;
background-color: #f4f4f4;
font-family: Arial, Helvetica, sans-serif;
}
table {
border-collapse: collapse;
mso-table-lspace: 0;
mso-table-rspace: 0;
}
/* Outlook.com fixes */
.ExternalClass {
width: 100%;
}
.ExternalClass, .ExternalClass p, .ExternalClass span,
.ExternalClass font, .ExternalClass td, .ExternalClass div {
line-height: 100%;
}
</style>
</head>
<body>
<!-- Email content will go here -->
</body>
</html>
Key points:
- The
mso-properties target Microsoft Outlook specifically .ExternalClassfixes Outlook.com rendering issues- We set a neutral background color that will show if the email content doesn’t fill the viewport
Step 2: Create the Outer Container
All email content needs to be wrapped in a centered container with a white background:
html
<body style="margin: 0; padding: 0; background-color: #f4f4f4;">
<!-- Centered container -->
<table width="100%" cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#f4f4f4">
<tr>
<td align="center" style="padding: 20px 10px;">
<!-- Main content table -->
<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#ffffff" style="max-width: 600px; width: 100%; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);">
<tr>
<td style="padding: 30px;">
<!-- All email content goes inside here -->
</td>
</tr>
</table>
<!-- End main content table -->
</td>
</tr>
</table>
<!-- End centered container -->
</body>
What’s happening:
- We use nested tables to create a centered container
- The outer table has a gray background (
bgcolor="#f4f4f4") - The inner table has a white background and max-width of 600px (standard for email)
- Cellpadding and cellspacing are set to 0 for consistent spacing (we’ll add padding separately)
Pro Tip: Always set explicit widths and use
align="center"rather thanmargin: 0 autofor better Outlook compatibility.
Step 3: Add a Logo/Header Section
Now let’s add the header with your logo:
html
<!-- Header Section -->
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center" style="padding-bottom: 20px; border-bottom: 1px solid #eeeeee;">
<img src="https://via.placeholder.com/200x80/2c3e50/ffffff?text=YOUR+LOGO"
alt="Your Company Name"
width="200"
height="80"
style="display: block; width: 100%; max-width: 200px; height: auto; border: 0;"
class="fluid">
</td>
</tr>
</table>
<!-- End Header Section -->
Key considerations:
- Always set explicit
widthandheightattributes (helps with layout before images load) - Use
display: blockto prevent extra spacing below images - Add
border: 0to remove borders in some email clients - Include descriptive
alttext for accessibility and when images are blocked - The
fluidclass will be used in media queries for mobile responsiveness
Step 4: Build the Hero Section
The hero section is your email’s headline and primary call-to-action:
html
<!-- Hero Section -->
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="padding: 30px 0 20px 0;">
<h1 style="font-size: 32px; font-weight: bold; margin: 0 0 15px 0; color: #333333; text-align: center;">
Your Main Headline Here
</h1>
<p style="font-size: 18px; line-height: 1.6; margin: 0 0 25px 0; color: #666666; text-align: center;">
This is your engaging subheadline or introduction text that draws readers in and makes them want to learn more.
</p>
</td>
</tr>
</table>
<!-- End Hero Section -->
<!-- Call to Action Button -->
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center" style="padding: 0 0 30px 0;">
<!-- Bulletproof Button (works in Outlook) -->
<table cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td align="center" bgcolor="#3498db" style="background-color: #3498db; padding: 12px 30px; border-radius: 50px;">
<a href="https://yourwebsite.com" target="_blank" style="font-size: 16px; font-weight: bold; color: #ffffff; text-decoration: none; display: inline-block;">
Call to Action →
</a>
</td>
</tr>
</table>
<!-- End Bulletproof Button -->
</td>
</tr>
</table>
<!-- End Hero Section -->
Why this button is “bulletproof”:
- Uses nested tables instead of fancy CSS
- Background color is set with both
bgcolor(for Outlook) and inlinebackground-color - The link has no text decoration and a specific color
- Works in every email client, including Outlook
Step 5: Create Content Columns
For the main content, let’s create a two-column layout that stacks on mobile:
html
<!-- Content Columns Section -->
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="padding: 30px 0;">
<h2 style="font-size: 24px; font-weight: bold; margin: 0 0 20px 0; color: #333333; text-align: left;">
Featured Content
</h2>
</td>
</tr>
<tr>
<td>
<!-- Two-column layout using nested tables -->
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<!-- Left Column -->
<td width="47%" style="padding-right: 6%;" class="stack">
<img src="https://via.placeholder.com/400x250/e74c3c/ffffff?text=Image+1"
alt="Description"
width="100%"
height="auto"
style="display: block; width: 100%; height: auto; border-radius: 4px; margin-bottom: 15px;"
class="fluid">
<h3 style="font-size: 20px; font-weight: bold; margin: 0 0 10px 0; color: #333333;">
Feature One
</h3>
<p style="font-size: 16px; line-height: 1.5; margin: 0 0 15px 0; color: #666666;">
Description of this feature or content piece. Keep it concise but compelling.
</p>
<a href="#" style="font-size: 16px; color: #3498db; text-decoration: underline; font-weight: normal;">
Learn more →
</a>
</td>
<!-- Right Column -->
<td width="47%" class="stack">
<img src="https://via.placeholder.com/400x250/27ae60/ffffff?text=Image+2"
alt="Description"
width="100%"
height="auto"
style="display: block; width: 100%; height: auto; border-radius: 4px; margin-bottom: 15px;"
class="fluid">
<h3 style="font-size: 20px; font-weight: bold; margin: 0 0 10px 0; color: #333333;">
Feature Two
</h3>
<p style="font-size: 16px; line-height: 1.5; margin: 0 0 15px 0; color: #666666;">
Description of this feature or content piece. Keep it concise but compelling.
</p>
<a href="#" style="font-size: 16px; color: #3498db; text-decoration: underline; font-weight: normal;">
Learn more →
</a>
</td>
</tr>
</table>
<!-- End Two-column layout -->
</td>
</tr>
</table>
<!-- End Content Columns Section -->
Column layout strategy:
- Each column is 47% wide with 6% gutter (using
padding-righton the left column) - The
stackclass will make columns full-width on mobile - Images use percentage widths to scale with their containers
Step 6: Add a Full-Width Promo Section
A promotional section with background color adds visual interest:
html
<!-- Promo Section -->
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="padding: 30px 0;">
<table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#f8f9fa" style="background-color: #f8f9fa; border-radius: 8px;">
<tr>
<td style="padding: 30px;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="65%" style="padding-right: 30px;" class="stack">
<h3 style="font-size: 22px; font-weight: bold; margin: 0 0 15px 0; color: #333333;">
Special Offer Just for You
</h3>
<p style="font-size: 16px; line-height: 1.5; margin: 0 0 20px 0; color: #666666;">
Get 20% off your next purchase when you order within the next 48 hours. This exclusive offer won't last long!
</p>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center" bgcolor="#27ae60" style="background-color: #27ae60; padding: 10px 25px; border-radius: 50px;">
<a href="#" style="font-size: 16px; font-weight: bold; color: #ffffff; text-decoration: none; display: inline-block;">
Claim Offer
</a>
</td>
</tr>
</table>
</td>
<td width="35%" align="center" class="stack">
<img src="https://via.placeholder.com/200x200/f39c12/ffffff?text=20%25+OFF"
alt="20% Off"
width="100%"
style="max-width: 150px; display: block; border: 0;"
class="fluid">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- End Promo Section -->
Step 7: Build the Footer
Every email needs a footer with unsubscribe links and company information:
html
<!-- Footer Section -->
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="padding: 30px 0 0 0;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="padding: 20px 0 0 0; border-top: 1px solid #eeeeee; text-align: center;">
<p style="font-size: 14px; line-height: 1.5; margin: 0 0 10px 0; color: #999999;">
© 2026 Your Company Name. All rights reserved.
</p>
<p style="font-size: 14px; line-height: 1.5; margin: 0 0 15px 0; color: #999999;">
123 Main Street, Suite 100<br>
City, State 12345
</p>
<!-- Social Media Links -->
<table cellpadding="0" cellspacing="0" border="0" align="center" style="margin: 0 auto 20px auto;">
<tr>
<td style="padding: 0 10px;">
<a href="#">
<img src="https://via.placeholder.com/32x32/3b5998/ffffff?text=f"
alt="Facebook"
width="32"
height="32"
style="display: block; border: 0; border-radius: 50%;">
</a>
</td>
<td style="padding: 0 10px;">
<a href="#">
<img src="https://via.placeholder.com/32x32/00acee/ffffff?text=t"
alt="Twitter"
width="32"
height="32"
style="display: block; border: 0; border-radius: 50%;">
</a>
</td>
<td style="padding: 0 10px;">
<a href="#">
<img src="https://via.placeholder.com/32x32/0077b5/ffffff?text=in"
alt="LinkedIn"
width="32"
height="32"
style="display: block; border: 0; border-radius: 50%;">
</a>
</td>
<td style="padding: 0 10px;">
<a href="#">
<img src="https://via.placeholder.com/32x32/e4405f/ffffff?text=ig"
alt="Instagram"
width="32"
height="32"
style="display: block; border: 0; border-radius: 50%;">
</a>
</td>
</tr>
</table>
<!-- Utility Links -->
<p style="font-size: 13px; line-height: 1.5; margin: 0 0 5px 0; color: #999999;">
<a href="#" style="color: #999999; text-decoration: underline;">Unsubscribe</a> |
<a href="#" style="color: #999999; text-decoration: underline;">Privacy Policy</a> |
<a href="#" style="color: #999999; text-decoration: underline;">View in Browser</a>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- End Footer Section -->
Step 8: Add Mobile Responsiveness
Now let’s add the media queries that will make our template responsive:
html
<style type="text/css">
/* ... previous styles remain ... */
/* Responsive styles for mobile */
@media only screen and (max-width: 600px) {
/* Make the container full width */
table[class="container"] {
width: 100% !important;
}
/* Stack columns vertically */
td[class="stack"] {
display: block !important;
width: 100% !important;
padding-right: 0 !important;
padding-bottom: 30px !important;
}
/* Remove bottom padding from last stacked item */
td[class="stack"]:last-child {
padding-bottom: 0 !important;
}
/* Make images fluid */
img[class="fluid"] {
width: 100% !important;
height: auto !important;
}
/* Adjust font sizes */
h1 {
font-size: 28px !important;
}
h2 {
font-size: 22px !important;
}
/* Increase padding on mobile */
td[style*="padding: 30px;"] {
padding: 20px !important;
}
}
</style>
How mobile stacking works:
- The
stackclass targets column cells - On mobile, they become
display: blockand take full width - Padding is adjusted and removed from the last item
- Images become fluid with
width: 100%
Resource Alert: Litmus Email Client Market Share shows which email clients to prioritize in your testing.
Step 9: Complete Template Assembly
Here’s the complete template with all sections combined:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Professional Email Template</title>
<style type="text/css">
/* Email Client Resets */
body {
margin: 0;
padding: 0;
background-color: #f4f4f4;
font-family: Arial, Helvetica, sans-serif;
}
table {
border-collapse: collapse;
mso-table-lspace: 0;
mso-table-rspace: 0;
}
.ExternalClass {
width: 100%;
}
.ExternalClass, .ExternalClass p, .ExternalClass span,
.ExternalClass font, .ExternalClass td, .ExternalClass div {
line-height: 100%;
}
/* Responsive styles for mobile */
@media only screen and (max-width: 600px) {
table[class="container"] {
width: 100% !important;
}
td[class="stack"] {
display: block !important;
width: 100% !important;
padding-right: 0 !important;
padding-bottom: 30px !important;
}
td[class="stack"]:last-child {
padding-bottom: 0 !important;
}
img[class="fluid"] {
width: 100% !important;
height: auto !important;
}
h1 {
font-size: 28px !important;
}
h2 {
font-size: 22px !important;
}
td[style*="padding: 30px;"] {
padding: 20px !important;
}
}
</style>
</head>
<body style="margin: 0; padding: 0; background-color: #f4f4f4;">
<!-- Centered container -->
<table width="100%" cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#f4f4f4">
<tr>
<td align="center" style="padding: 20px 10px;">
<!-- Main content table -->
<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#ffffff" style="max-width: 600px; width: 100%; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);" class="container">
<tr>
<td style="padding: 30px;">
<!-- Header Section -->
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center" style="padding-bottom: 20px; border-bottom: 1px solid #eeeeee;">
<img src="https://via.placeholder.com/200x80/2c3e50/ffffff?text=YOUR+LOGO"
alt="Your Company Name"
width="200"
height="80"
style="display: block; width: 100%; max-width: 200px; height: auto; border: 0;"
class="fluid">
</td>
</tr>
</table>
<!-- End Header Section -->
<!-- Hero Section -->
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="padding: 30px 0 20px 0;">
<h1 style="font-size: 32px; font-weight: bold; margin: 0 0 15px 0; color: #333333; text-align: center;">
Your Main Headline Here
</h1>
<p style="font-size: 18px; line-height: 1.6; margin: 0 0 25px 0; color: #666666; text-align: center;">
This is your engaging subheadline or introduction text that draws readers in and makes them want to learn more.
</p>
</td>
</tr>
</table>
<!-- End Hero Section -->
<!-- Call to Action Button -->
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center" style="padding: 0 0 30px 0;">
<!-- Bulletproof Button -->
<table cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td align="center" bgcolor="#3498db" style="background-color: #3498db; padding: 12px 30px; border-radius: 50px;">
<a href="https://yourwebsite.com" target="_blank" style="font-size: 16px; font-weight: bold; color: #ffffff; text-decoration: none; display: inline-block;">
Call to Action →
</a>
</td>
</tr>
</table>
<!-- End Bulletproof Button -->
</td>
</tr>
</table>
<!-- End Hero Section -->
<!-- Content Columns Section -->
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="padding: 30px 0;">
<h2 style="font-size: 24px; font-weight: bold; margin: 0 0 20px 0; color: #333333; text-align: left;">
Featured Content
</h2>
</td>
</tr>
<tr>
<td>
<!-- Two-column layout -->
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<!-- Left Column -->
<td width="47%" style="padding-right: 6%;" class="stack">
<img src="https://via.placeholder.com/400x250/e74c3c/ffffff?text=Image+1"
alt="Description"
width="100%"
height="auto"
style="display: block; width: 100%; height: auto; border-radius: 4px; margin-bottom: 15px;"
class="fluid">
<h3 style="font-size: 20px; font-weight: bold; margin: 0 0 10px 0; color: #333333;">
Feature One
</h3>
<p style="font-size: 16px; line-height: 1.5; margin: 0 0 15px 0; color: #666666;">
Description of this feature or content piece. Keep it concise but compelling.
</p>
<a href="#" style="font-size: 16px; color: #3498db; text-decoration: underline; font-weight: normal;">
Learn more →
</a>
</td>
<!-- Right Column -->
<td width="47%" class="stack">
<img src="https://via.placeholder.com/400x250/27ae60/ffffff?text=Image+2"
alt="Description"
width="100%"
height="auto"
style="display: block; width: 100%; height: auto; border-radius: 4px; margin-bottom: 15px;"
class="fluid">
<h3 style="font-size: 20px; font-weight: bold; margin: 0 0 10px 0; color: #333333;">
Feature Two
</h3>
<p style="font-size: 16px; line-height: 1.5; margin: 0 0 15px 0; color: #666666;">
Description of this feature or content piece. Keep it concise but compelling.
</p>
<a href="#" style="font-size: 16px; color: #3498db; text-decoration: underline; font-weight: normal;">
Learn more →
</a>
</td>
</tr>
</table>
<!-- End Two-column layout -->
</td>
</tr>
</table>
<!-- End Content Columns Section -->
<!-- Promo Section -->
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="padding: 30px 0;">
<table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#f8f9fa" style="background-color: #f8f9fa; border-radius: 8px;">
<tr>
<td style="padding: 30px;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="65%" style="padding-right: 30px;" class="stack">
<h3 style="font-size: 22px; font-weight: bold; margin: 0 0 15px 0; color: #333333;">
Special Offer Just for You
</h3>
<p style="font-size: 16px; line-height: 1.5; margin: 0 0 20px 0; color: #666666;">
Get 20% off your next purchase when you order within the next 48 hours. This exclusive offer won't last long!
</p>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center" bgcolor="#27ae60" style="background-color: #27ae60; padding: 10px 25px; border-radius: 50px;">
<a href="#" style="font-size: 16px; font-weight: bold; color: #ffffff; text-decoration: none; display: inline-block;">
Claim Offer
</a>
</td>
</tr>
</table>
</td>
<td width="35%" align="center" class="stack">
<img src="https://via.placeholder.com/200x200/f39c12/ffffff?text=20%25+OFF"
alt="20% Off"
width="100%"
style="max-width: 150px; display: block; border: 0;"
class="fluid">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- End Promo Section -->
<!-- Footer Section -->
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="padding: 30px 0 0 0;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="padding: 20px 0 0 0; border-top: 1px solid #eeeeee; text-align: center;">
<p style="font-size: 14px; line-height: 1.5; margin: 0 0 10px 0; color: #999999;">
© 2026 Your Company Name. All rights reserved.
</p>
<p style="font-size: 14px; line-height: 1.5; margin: 0 0 15px 0; color: #999999;">
123 Main Street, Suite 100<br>
City, State 12345
</p>
<!-- Social Media Links -->
<table cellpadding="0" cellspacing="0" border="0" align="center" style="margin: 0 auto 20px auto;">
<tr>
<td style="padding: 0 10px;">
<a href="#">
<img src="https://via.placeholder.com/32x32/3b5998/ffffff?text=f"
alt="Facebook"
width="32"
height="32"
style="display: block; border: 0; border-radius: 50%;">
</a>
</td>
<td style="padding: 0 10px;">
<a href="#">
<img src="https://via.placeholder.com/32x32/00acee/ffffff?text=t"
alt="Twitter"
width="32"
height="32"
style="display: block; border: 0; border-radius: 50%;">
</a>
</td>
<td style="padding: 0 10px;">
<a href="#">
<img src="https://via.placeholder.com/32x32/0077b5/ffffff?text=in"
alt="LinkedIn"
width="32"
height="32"
style="display: block; border: 0; border-radius: 50%;">
</a>
</td>
<td style="padding: 0 10px;">
<a href="#">
<img src="https://via.placeholder.com/32x32/e4405f/ffffff?text=ig"
alt="Instagram"
width="32"
height="32"
style="display: block; border: 0; border-radius: 50%;">
</a>
</td>
</tr>
</table>
<!-- Utility Links -->
<p style="font-size: 13px; line-height: 1.5; margin: 0 0 5px 0; color: #999999;">
<a href="#" style="color: #999999; text-decoration: underline;">Unsubscribe</a> |
<a href="#" style="color: #999999; text-decoration: underline;">Privacy Policy</a> |
<a href="#" style="color: #999999; text-decoration: underline;">View in Browser</a>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- End Footer Section -->
</td>
</tr>
</table>
<!-- End Main content table -->
</td>
</tr>
</table>
<!-- End Centered container -->
</body>
</html>
Step 10: Testing Your Template
Before sending to real subscribers, test thoroughly:
Manual Testing Checklist
- Preview in multiple email clients — Send test emails to Gmail, Outlook.com, Yahoo, and Apple Mail
- Check on mobile devices — View on iPhone and Android
- Toggle images off — Ensure alt text is visible and layout holds
- Click all links — Verify they go where expected
- Check spam score — Use tools like Mail-tester.com
Automated Testing Tools
Resource Alert: Putsmail is a free tool for testing HTML emails. Just paste your code and send tests instantly.
Resource Alert: Acid tests by Email on Acid offers comprehensive previews across 90+ email clients.
Best Practices Recap
- Always use tables for layout — Flexbox and grid aren’t reliable in email
- Inline your CSS — Many clients strip
<style>tags - Test bulletproof buttons — Outlook needs VML or nested tables
- Keep width under 600px — Standard for email clients
- Use web-safe fonts — Arial, Helvetica, Georgia, Times New Roman
- Include plain text version — Required for deliverability
- Add alt text to all images — For accessibility and when images are blocked
- Test, test, test — Never assume it works everywhere
Next Steps
Now that you’ve built your template, you can:
- Customize colors and content — Match your brand
- Add to your email service provider — Import into Mailchimp, Constant Contact, etc.
- Create variations — Build templates for different purposes
- Set up automated testing — Use Litmus or Email on Acid for ongoing quality assurance
Resource Alert: Really Good Emails is an inspiration gallery showing how top brands design their emails.
Conclusion
Creating an HTML email template from scratch isn’t as scary as it seems. By following these tried-and-true techniques—tables for layout, inline CSS, bulletproof buttons, and mobile responsiveness—you can build emails that look great everywhere.
The template we built together is just the beginning. Use it as a foundation, experiment with different layouts, and always test before sending. Your subscribers will thank you for emails that are beautiful, functional, and readable on every device.
Have questions about email development? Drop them in the comments below!
