Showcase more, scroll less. This responsive two-column email template is built to present content side-by-side—perfect for highlighting features, offers, or categories in a compact, visually engaging layout.
Ideal for product updates, educational content, or comparison-style messaging, this layout helps users absorb more at a glance without overwhelming the inbox.
What’s Included
- 🖼 Hero Image Section
A bold hero block to grab attention and communicate immediate value. - 📰 Catchy H1 + Supporting Copy
Establish trust and purpose with a headline and body content designed to educate or persuade. - 🟦 Two Equal Columns
Responsive, side-by-side layout for features, links, services, or blog previews. Collapses gracefully on mobile. - 🔘 CTA Buttons
Modular and “bulletproof” for maximum compatibility across clients like Outlook, Gmail, and Apple Mail. - 🧩 Modular Content Blocks
Customize column text, icons, links, and CTAs to match your brand and goals. - 📱 Mobile-Optimized
Each column stacks vertically on small screens for readability and tap-friendly access. - 📬 Footer with Brand + Compliance
Includes logo, unsubscribe link, company info, and copyright.
Responsive Two-Column Email Template Preview
Responsive Two-Column Email Template Preview
<!--
📧 2-Column Email Template
▸ Source: EmailTechnica.com
▸ Version: 06.30.2025
-->
<!DOCTYPE html>
<!-- Set the language and text direction for the email -->
<html lang="en" dir="ltr" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<!-- Essential meta tags for email responsiveness and compatibility -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="x-apple-disable-message-reformatting">
<!-- Prevent iOS from automatically linking phone numbers -->
<meta name="format-detection" content="telephone=no">
<!-- Set email client compatibility modes -->
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<!-- Set title for preview and accessibility -->
<title>Email Technica</title>
<!-- Outlook-specific settings -->
<!--[if mso]>
<style type="text/css">
table {border-collapse: collapse;}
td {padding: 0;}
div, td {font-family: Arial, sans-serif;}
</style>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<!-- Global styles and resets -->
<style>
/* Reset box sizing for consistency */
*, *::before, *::after {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
width: 100% !important;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
/* Prevent extra spacing in Outlook */
table, td {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
/* Responsive styles: only active when screen is 600px or less */
@media only screen and (max-width: 600px) {
.m-hide {
display: none !important; line-height: 0px !important;}
.m-w-100p {
width: 100% !important;
}
.m-stack {
width: 100% !important; display: block !important; min-width: 0px !important; max-width: 100% !important; clear: both !important;}
.m-text-center {
text-align: center !important;
}
.m-pad-t-20 {
padding-top: 20px !important;
}
.m-pad-t-60 {
padding-top: 60px !important;
}
.m-pad-lr-20 {
padding-left: 40px !important;
padding-right: 40px !important;
}
.m-pad-lr-40 {
padding-left: 40px !important;
padding-right: 40px !important;
}
.m-float-center {
float: none !important;
margin: 0 auto !important;
}
}
</style>
</head>
<body lang="en" role="article" aria-roledescription="email" aria-label="Email Title Goes Here" style="width: 100%; margin: 0; padding: 0; background-color: #ffffff;">
<!-- START: Preheader Text (visible in inbox preview but hidden in body) -->
<!--[if !mso]><!-->
<div style="display: none; max-height: 0; overflow: hidden;" aria-hidden="true">
Master HTML email coding with Emailtechnica.com!
</div>
<!--<![endif]-->
<div style="display: none; max-height: 0px; overflow: hidden;" aria-hidden="true">
‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌<wbr> ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌<wbr> ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌<wbr> ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌<wbr> ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌<wbr> ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌<wbr> ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌<wbr> ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌<wbr> ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌</div>
<!-- END: Preheader Text -->
<!-- START: Outer Wrapper Table: centers content, ensures full width background -->
<table class="m-w-100p" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" role="presentation" style="width: 100%;">
<tr>
<td width="100%" border="0" align="center" style="width: 100%; ">
<!-- START: Primary email container (max-width: 600px) -->
<table class="m-w-100p" width="600" cellpadding="0" cellspacing="0" border="0" align="center" role="presentation" style="width: 600px; max-width: 600px; background-color: #FCF5E5;">
<!-- START: Header -->
<tr>
<td width="100%" border="0" align="center" style="width: 100%; ">
<table class="m-w-100p" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" role="presentation" style="width: 100%;">
<!-- START: Logo Section -->
<tr>
<!-- START: Vertical Spacing -->
<td width="100%" border="0" align="center" style="width: 100%; padding: 40px 20px 0;">
<table class="m-w-100p" width="100%" border="0" align="center" cellpadding="0" cellspacing="0" role="presentation" style="width: 100%;">
<!-- START: Logo Image -->
<tr>
<td width="100%" border="0" align="center" style="width: 100%;"><a href="https://emailtechnica.com/" target="_blank"><img class="m-w-100p" src="https://www.emailtechnica.com/wp-content/uploads/2025/05/EmailTechnica_logo.png" border="0" style="display: block; max-width: 150px;" width="150" height="auto" alt="Alt text describing image."></a>
</td>
</tr>
<!-- END: Logo Image -->
</table>
</td>
<!-- END: Vertical Spacing -->
</tr>
<!-- END: Logo Section -->
</table>
</td>
</tr>
<!-- END: Header -->
<!-- START: Body Content -->
<tr>
<td width="100%" border="0" align="center" style="width: 100%; padding-top: 40px;">
<table class="m-w-100p" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" role="presentation" style="width: 100%;">
<!-- START: Hero Image Section -->
<tr>
<!-- START: Vertical Spacing -->
<td width="100%" border="0" align="center" style="width: 100%;">
<table class="m-w-100p" width="100%" border="0" align="center" cellpadding="0" cellspacing="0" role="presentation" style="width: 100%;">
<tr>
<!-- START: Horizontal Spacing -->
<td width="100%" border="0" align="center" style="width: 100%;">
<table class="m-w-100p" width="100%" border="0" align="center" cellpadding="0" cellspacing="0" role="presentation" style="width: 100%;">
<!-- START: Hero Image -->
<tr>
<td width="100%" border="0" align="center" style="width: 100%;"><a href="https://emailtechnica.com/" target="_blank"><img class="m-w-100p" src="https://placehold.co/1200x800/teal/white?text=HERO%20IMAGE&font=roboto" border="0" style="display: block; max-width: 600px;" width="600" height="400" alt="Alt text describing image."></a>
</td>
</tr>
<!-- END: Hero Image -->
</table>
</td>
<!-- END: Horizontal Spacing -->
</tr>
</table>
</td>
<!-- END: Vertical Spacing -->
</tr>
<!-- END: Hero Image Section -->
<!-- START: Intro Text Block with Heading and Description -->
<tr>
<!-- START: Spacing -->
<td class="m-pad-t-20 m-pad-lr-40" width="100%" border="0" align="center" style="width: 100%; padding: 20px 40px 0px;">
<table class="m-w-100p m-float-center" width="100%" border="0" align="center" cellpadding="0" cellspacing="0" role="presentation" style="width: 100%; margin: 0px auto; float: none;">
<tr>
<td width="100%" border="0" align="center" style="width: 100%;">
<!-- heading -->
<h1 style="font-family: Arial, sans-serif; font-size: 42px; font-weight: bold; font-weight: 800; color: #002b5c; line-height: 1.2; text-align: center;">Catchy H1 Headline</h1>
<!-- paragraph -->
<p class="m-text-center" style="margin-top: 20px; font-family: Arial, sans-serif; font-size: 16px; font-weight: 400; color: #222222; line-height: 1.5; text-align: left;">Emailtechnica.com offers comprehensive tutorials, practical examples, and expert tips that cover everything from basic email structure to advanced responsive design techniques. Whether you're a beginner struggling with inline CSS or an experienced developer aiming to optimize for various email clients, <a href="https://emailtechnica.com/" target="_blank" style="color: #002b5c; text-decoration: underline; font-weight: 600;">Emailtechnica.com</a> provides clear, step-by-step guidance. Its lessons on troubleshooting common rendering issues and ensuring cross-client compatibility are particularly helpful, making it a go-to destination for crafting professional, pixel-perfect emails. By following their well-structured content, you can confidently create emails that look great and perform flawlessly across all platforms.
</p>
</td>
</tr>
</table>
</td>
<!-- END: Spacing -->
</tr>
<!-- END: Intro Text Block with Heading and Description -->
<!-- START: Button block – includes CTA with center alignment -->
<tr>
<!-- START: Vertical Spacing -->
<td width="100%" border="0" align="center" style="width: 100%; padding-top: 50px;">
<table class="m-w-100p" width="100%" border="0" align="center" cellpadding="0" cellspacing="0" role="presentation" style="width: 100%; margin: 0px auto; float: none;">
<tr>
<td width="100%" border="0" align="center" style="width: 100%;">
<table width="" cellpadding="0" cellspacing="0" border="0" align="center" role="presentation" style="margin: 0px auto; float: none;">
<tr>
<td width="100%" border="0" align="center" style="width: 100%;"><a href="https://emailtechnica.com/" target="_blank"
style="display: inline-block; padding: 16px 40px; background: #002b5c; font-family: Arial, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.2; color: #ffffff; text-decoration: none; border-radius: 5px;">GET STARTED</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<!-- END: Vertical Spacing -->
</tr>
<!-- END: Button block – includes CTA with center alignment -->
<!-- START: 2-Column -->
<tr>
<!-- Spacing -->
<td width="100%" border="0" align="center" style="width: 100%; padding: 60px 40px 40px;">
<table class="m-w-100p m-float-center" width="100%" border="0" align="center" cellpadding="0" cellspacing="0" role="presentation" style="width: 100%; margin: 0px auto; float: none;">
<!-- row 1 -->
<tr>
<!-- Column 1 -->
<td class="m-stack" width="250" border="0" align="center" style="width: 250px; padding: 0px; vertical-align: top;">
<table class="m-w-100p m-float-center" width="100%" border="0" align="center" cellpadding="0" cellspacing="0" role="presentation" style="width: 100%; margin: 0px auto; float: none;">
<!-- image -->
<tr>
<td width="100%" border="0" align="center" style="width: 100%; padding: 0px;"><a href="#" target="_blank"><img class="m-w-100p" src="https://placehold.co/1200x800/teal/white?text=1&font=roboto" style="display: block; margin: 0px auto; max-width: 480px;" width="240" height="auto" alt="Descriptive Alt Text Goes Here"></a>
</td>
</tr>
<!-- text block -->
<tr>
<td class="m-pad-lr-20" width="100%" border="0" align="center" style="width: 100%; padding: 0px; padding-top: 20px;">
<!-- h3/paragraph -->
<h3 class="m-text-center" style="padding: 0px; margin: 0px; font-family: Arial, sans-serif; font-size: 16px; font-weight: 700; color: #041727; mso-line-height-alt: 23px; line-height: 1.4; letter-spacing: normal; text-align: left;">Column 1</h3>
<p class="m-text-center" style="padding: 0px; margin: 0px; margin-top: 10px; font-family: Arial, sans-serif; font-size: 14px; font-weight: 400; color: #041727; mso-line-height-alt: 20px; line-height: 1.4; letter-spacing: normal; text-align: left;">Whether you're a beginner struggling or an experienced developer aiming to optimize for various email clients, Emailtechnica.com provides guidance.</p>
</td>
</tr>
<!-- CTA link -->
<tr>
<td class="m-pad-lr-20" width="100%" border="0" align="center" style="width: 100%; padding: 0px; padding-top: 20px;">
<!-- horizontal alignment -->
<table class="m-float-center" width="" align="left" border="0" cellpadding="0" cellspacing="0" role="presentation" style="margin: 0px auto; float: left;">
<tr>
<td width="100%" border="0" align="center" style="width: 100%; padding: 0px; font-family: Arial, sans-serif; font-size: 14px; font-weight: 700; color: #002b5c; mso-line-height-alt: 21px; line-height: 1.5; letter-spacing: normal; text-align: center; border-bottom: 2px solid #002b5c;"><a href="https://emailtechnica.com/" target="_blank" style="font-family: Arial, sans-serif; color: #002b5c; text-decoration: none;">CALL TO ACTION</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<!-- Empty Space Divider -->
<td class="m-hide" width="40" border="0" align="center" style="width: 40px; padding: 0px 0px 0px; text-align: center; vertical-align: top;"> </td>
<!-- Column 2 -->
<td class="m-stack m-pad-t-60" width="250" border="0" align="center" style="width: 250px; padding: 0px; vertical-align: top;">
<table class="m-w-100p m-float-center" width="100%" border="0" align="center" cellpadding="0" cellspacing="0" role="presentation" style="width: 100%; margin: 0px auto; float: none;">
<!-- image 2 -->
<tr>
<td width="100%" border="0" align="center" style="width: 100%; padding: 0px;"><a href="https://emailtechnica.com/" target="_blank"><img class="m-w-100p" src="https://placehold.co/1200x800/teal/white?text=2&font=roboto" style="display: block; margin: 0px auto; max-width: 480px;" width="240" height="auto" alt="Descriptive Alt Text Goes Here"></a>
</td>
</tr>
<!-- text block -->
<tr>
<td class="m-pad-lr-20" width="100%" border="0" align="center" style="width: 100%; padding: 0px; padding-top: 20px;">
<!-- h3/paragraph -->
<h3 class="m-text-center" style="padding: 0px; margin: 0px; font-family: Arial, sans-serif; font-size: 16px; font-weight: 700; color: #041727; mso-line-height-alt: 23px; line-height: 1.4; letter-spacing: normal; text-align: left;">Column 2</h3>
<p class="m-text-center" style="padding: 0px; margin: 0px; margin-top: 10px; font-family: Arial, sans-serif; font-size: 14px; font-weight: 400; color: #041727; mso-line-height-alt: 20px; line-height: 1.4; letter-spacing: normal; text-align: left;">Its lessons on troubleshooting common rendering issues and ensuring cross-client compatibility are particularly helpful, for crafting professional emails.</p>
</td>
</tr>
<!-- CTA link -->
<tr>
<td class="m-pad-lr-20" width="100%" border="0" align="center" style="width: 100%; padding: 0px; padding-top: 20px;"> <table class="m-float-center" align="left" border="0" cellpadding="0" cellspacing="0" role="presentation" style="margin: 0px auto; float: left;">
<tr>
<td width="100%" border="0" align="center" style="width: 100%; padding: 0px; font-family: Arial, sans-serif; font-size: 14px; font-weight: 700; color: #002b5c; mso-line-height-alt: 21px; line-height: 1.5; letter-spacing: normal; text-align: center; border-bottom: 2px solid #002b5c;"><a href="#" target="_blank" style="font-family: Arial, sans-serif; color: #002b5c; text-decoration: none;">CALL TO ACTION</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- END: 2-Column -->
</table>
</td>
</tr>
<!-- END: Body Content -->
<!-- START: Footer -->
<tr>
<td width="100%" border="0" align="center" style="width: 100%; padding-top: 40px;">
<table class="m-w-100p" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" role="presentation" style="width: 100%;">
<!-- START: Footer Logo -->
<tr>
<!-- START: Spacing -->
<td width="100%" border="0" align="center" style="width: 100%; padding: 0px 30px; padding-top: 40px; border-top: 2px solid #999999;">
<table class="m-w-100p" width="100%" border="0" align="center" cellpadding="0" cellspacing="0" role="presentation" style="width: 100%;">
<!-- START: Logo Image -->
<tr>
<td width="100%" border="0" align="center" style="width: 100%;"><a href="https://emailtechnica.com/" target="_blank"><img class="m-w-100p" src="https://placehold.co/100x50/purple/white?text=LOGO&font=roboto" border="0" style="display: block; max-width: 100px;" width="100" height="auto" alt="Descriptive Alt Text Goes Here"></a>
</td>
</tr>
<!-- END: Logo Image -->
</table>
</td>
<!-- END: Spacing -->
</tr>
<!-- END: Footer Logo -->
<!-- START: Footer Text -->
<tr>
<td width="100%" border="0" align="center" style="width: 100%; padding: 20px 30px;">
<table class="m-w-100p" width="100%" border="0" align="center" cellpadding="0" cellspacing="0" role="presentation" style="width: 100%;">
<!-- START: Company Address and Copyright -->
<tr>
<td width="100%" border="0" align="center" style="width: 100%; ">
<p style="padding-top: 20px; font-family: Arial, sans-serif; font-size: 12px; font-weight: 600; color: #444444; mso-line-height-alt: 16px; line-height: 1.4; text-align: center;"><a href="https://emailtechnica.com/">Unsubscribe</a></p>
<p style="padding-top: 20px; font-family: Arial, sans-serif; font-size: 16px; font-weight: 600; color: #444444; mso-line-height-alt: 20px; text-align: center;">EMAIL TECHNICA<br>
<span style="padding-top: 0px; font-family: Arial, sans-serif; font-size: 12px; font-weight: 400; color: #444444; mso-line-height-alt: 16px; text-align: center;">1234 Company Address, City, State 12345</span></p>
<p style="margin-top: 10px; font-family: Arial, sans-serif; font-size: 12px; font-weight: 400; color: #444444; mso-line-height-alt: 16px; line-height: 1.4; text-align: center;">© 2025. All rights reserved.</p>
</td>
</tr>
<!-- END: Company Address and Copyright -->
</table>
</td>
</tr>
<!-- END: Footer Text -->
</table>
</td>
</tr>
<!-- END: Footer -->
</table>
<!-- END: Primary email container -->
</td>
</tr>
</table>
<!-- END: Outer Wrapper Table -->
</body>
</html>Expand
How to Use the Responsive Two-Column Email Template
- Copy the Code: Start with the template code.
- Customize the Content: Update the logo, links, text, and imagery to match your brand.
- Test the Layout: Use tools like Litmus or Email on Acid to preview your email across devices and clients—or at the very least, send it to a few different email addresses and check how it appears on multiple devices.
- Send Confidently: Deploy it via your ESP knowing it’s built for compatibility and engagement.
Why It’s a Must-Have
The Responsive Two Column Email Template is ideal for platforms or newsletters with multiple offerings, categories, or destinations. It sets the tone and guides users right where you want them to go—all in one professional, responsive email.