Last updated
Responsive Mobile Styles
The generator includes media queries for mobile rendering:
<style>
@media only screen and (max-width: 600px) {
.email-container { width: 100% !important; }
.two-col td { display: block !important; width: 100% !important; }
.hide-mobile { display: none !important; }
.full-width-mobile { width: 100% !important; }
}
</style>
Template Types Available
- Welcome email — onboarding new users with next steps and CTA
- Newsletter — multi-article layout with featured content and sidebar
- Order confirmation — itemized receipt with shipping details
- Shipping notification — tracking link and estimated delivery
- Password reset — secure single-use link with expiry notice
- Promotional campaign — hero image, offer details, and CTA button
- Event invitation — date, location, RSVP button
- Re-engagement — win-back email for inactive subscribers
The Email Template Generator on TechConverter.me produces production-ready HTML that is tested across all major email clients, includes responsive mobile styles, and supports merge tags for all major ESPs including Mailchimp, Klaviyo, and SendGrid.
Examples
Example 1: Welcome Email Template
A welcome email for a SaaS product, generated with a single-column layout, brand colors, and a clear call to action:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome to [Product Name]</title>
</head>
<body style="margin:0; padding:0; background-color:#f4f4f4; font-family:Arial,sans-serif;">
<!-- Preheader -->
<div style="display:none; max-height:0; overflow:hidden;">
Your account is ready. Here's how to get started in 3 steps.‌
</div>
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td align="center" style="padding:20px 0;">
<table width="600" cellpadding="0" cellspacing="0"
style="background:#ffffff; border-radius:8px; overflow:hidden;">
<!-- Header -->
<tr>
<td style="background:#0066cc; padding:32px; text-align:center;">
<img src="{{logo_url}}" alt="[Company Name]" height="40">
</td>
</tr>
<!-- Body -->
<tr>
<td style="padding:40px 32px;">
<h1 style="color:#111111; font-size:24px; margin:0 0 16px;">
Welcome, {{first_name}}!
</h1>
<p style="color:#555555; font-size:16px; line-height:1.6; margin:0 0 24px;">
Your account is ready. Here's how to get started:
</p>
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td style="padding:12px 0; border-bottom:1px solid #eeeeee;">
<strong style="color:#0066cc;">Step 1:</strong>
Complete your profile
</td>
</tr>
<tr>
<td style="padding:12px 0; border-bottom:1px solid #eeeeee;">
<strong style="color:#0066cc;">Step 2:</strong>
Connect your first integration
</td>
</tr>
<tr>
<td style="padding:12px 0;">
<strong style="color:#0066cc;">Step 3:</strong>
Invite your team
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" style="margin-top:32px;">
<tr>
<td style="background:#0066cc; border-radius:4px;">
<a href="{{dashboard_url}}"
style="display:block; padding:14px 28px; color:#ffffff;
text-decoration:none; font-weight:bold;">
Go to Dashboard
</a>
</td>
</tr>
</table>
</td>
</tr>
<!-- Footer -->
<tr>
<td style="background:#f8f8f8; padding:24px 32px; text-align:center;
font-size:12px; color:#999999;">
<a href="{{unsubscribe_url}}" style="color:#999999;">Unsubscribe</a> |
<a href="{{preferences_url}}" style="color:#999999;">Email preferences</a><br>
[Company Name], [Address]
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Example 2: Newsletter Template Structure
A two-column newsletter layout with a featured article and sidebar:
<!-- Two-column layout using nested tables -->
<table width="600" cellpadding="0" cellspacing="0">
<tr>
<!-- Main content: 400px -->
<td width="400" valign="top" style="padding-right:20px;">
<h2 style="color:#111111; font-size:20px;">{{article_title}}</h2>
<img src="{{article_image}}" width="380" alt="{{article_alt}}"
style="display:block; margin-bottom:16px;">
<p style="color:#555555; font-size:15px; line-height:1.6;">{{article_excerpt}}</p>
<a href="{{article_url}}" style="color:#0066cc;">Read more →</a>
</td>
<!-- Sidebar: 180px -->
<td width="180" valign="top" style="background:#f8f8f8; padding:16px;">
<h3 style="font-size:14px; color:#333333; margin:0 0 12px;">Quick Links</h3>
<ul style="margin:0; padding:0; list-style:none;">
<li style="margin-bottom:8px;">
<a href="#" style="color:#0066cc; font-size:13px;">Link 1</a>
</li>
<li style="margin-bottom:8px;">
<a href="#" style="color:#0066cc; font-size:13px;">Link 2</a>
</li>
</ul>
</td>
</tr>
</table>
Example 3: Transactional Order Confirmation
An order confirmation template with an itemized order summary:
<!-- Order summary table -->
<table width="100%" cellpadding="0" cellspacing="0"
style="border:1px solid #eeeeee; border-radius:4px;">
<tr style="background:#f8f8f8;">
<th style="padding:12px; text-align:left; font-size:13px; color:#555555;">Item</th>
<th style="padding:12px; text-align:right; font-size:13px; color:#555555;">Price</th>
</tr>
{{#each items}}
<tr>
<td style="padding:12px; border-top:1px solid #eeeeee;">{{name}} x{{qty}}</td>
<td style="padding:12px; border-top:1px solid #eeeeee; text-align:right;">{{price}}</td>
</tr>
{{/each}}
<tr style="background:#f8f8f8;">
<td style="padding:12px; font-weight:bold;">Total</td>
<td style="padding:12px; font-weight:bold; text-align:right;">{{total}}</td>
</tr>
</table>