01 A field guide to email development
Web pages can rely on modern layout tools. Emails travel through dozens of inboxes, so dependable code uses tables, inline styles, and careful fallbacks.
02 The anatomy
An email is a document shell containing one full-width wrapper, one centered container, and a stack of modular rows.
Doctype, language, character set, viewport, title, and email-client fixes live here.
<head>
A short inbox preview appears after the subject line, but stays hidden in the opened email.
display:none; max-height:0; overflow:hidden; mso-hide:all;
A 100%-wide presentation table supplies the page background and centers the email.
width="100%"
A fluid table with a 600px maximum keeps the message readable on desktop and mobile.
max-width:600px
Header, hero, copy, buttons, dividers, and footer become separate table rows.
<tr><td>
03 Code lab
Switch between four core pieces. The examples are intentionally small so the structure is easy to reuse.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<title>Email title</title>
<style>
@media screen and (max-width: 620px) {
.container { width: 100% !important; }
}
</style>
</head>
<body style="margin:0; background:#f3f3f3;">
<div style="display:none; max-height:0; overflow:hidden; mso-hide:all;">
Inbox preview text goes here.
</div>
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center">
<table role="presentation" width="600"
cellpadding="0" cellspacing="0" border="0" class="container"
style="width:600px; max-width:100%;">
<tr>
<td style="padding:32px;">Email content</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html><table role="presentation" cellspacing="0" cellpadding="0" border="0">
<tr>
<td bgcolor="#173f35" style="padding:14px 24px; border-radius:4px;">
<a href="https://example.com"
style="display:block; color:#ffffff;
font:bold 16px Arial, sans-serif;
text-decoration:none; border-radius:4px;">
Read the guide
</a>
</td>
</tr>
</table>@media screen and (max-width: 620px) {
.container {
width: 100% !important;
}
.mobile-padding {
padding-left: 20px !important;
padding-right: 20px !important;
}
.stack-column {
display: block !important;
width: 100% !important;
}
.fluid-image {
width: 100% !important;
height: auto !important;
}
}<!--[if mso]>
<table role="presentation" width="600" cellpadding="0"
cellspacing="0" border="0" align="center">
<tr>
<td>
<![endif]-->
<table role="presentation" width="100%" cellpadding="0"
cellspacing="0" border="0" class="container"
style="width:100%; max-width:600px;">
<tr><td>Email content</td></tr>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
<!--[if mso]>
<xml xmlns:o="urn:schemas-microsoft-com:office:office">
<o:OfficeDocumentSettings>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->04 CSS rules of thumb
Inbox engines disagree. Protect the message first, then add enhancements for clients that support them.
Do this
Use carefully
The goal
Apple Mail, Gmail, and Outlook can interpret the same code differently. A good build stays understandable everywhere—even when visual details change.
05 The workflow
Define the single goal, content hierarchy, and primary CTA.
Create modules with tables and add essential inline styles.
Add fluid widths, stacking classes, and mobile spacing.
Check real clients, dark mode, images off, and live links.
Review the plain-text version, tracking, and final audience.
06 Before you send
Reliable email development is mostly disciplined checking. Walk through this list before every launch.
ContentSubject, preheader, dates, prices, and names are accurate.
AccessHeadings are logical, alt text is useful, and contrast is strong.
LayoutThe email works at 320px and still reads with images blocked.
LinksEvery CTA, logo, social link, and unsubscribe URL works.
FallbacksPlain text is present and the design degrades gracefully.
File sizeKeep the HTML under roughly 102KB so Gmail does not clip content or hide the unsubscribe link.