HTML Email Templates
In this page:
Table Layout Basics
Modern CSS layouts like Flexbox or Grid do not work reliably in email clients. To build a robust email structure that does not break, you must use nested HTML tables to arrange your content columns and rows.
Note: Use a master table container set to a maximum width of 600 pixels to ensure your emails are highly readable on desktop and mobile screens.
Warning: Failing to zero out margins, padding, and borders on your email tables can cause unexpected spacing alignment gaps.
Example: Table Layout Basics
<table width="600" style="margin: 0 auto;">
<tr>
<td>Email content</td>
</tr>
</table>Inline CSS Styling
Many email clients strip out head style tags and completely ignore external stylesheets to protect user privacy. To make sure your designs load correctly, you must write all your CSS styles inline inside every tag.
Note: Write your styles inside your tags locally, or use an automatic CSS inliner tool before sending.
Warning: Never use CSS shorthand properties like 'margin: 10px 20px;' because older email clients will ignore them.
Example: Inline CSS Styling
<p style="color: #333333; font-size: 16px;">Inline styled email text</p>Responsive Emails
Email layouts must scale down smoothly to fit smartphones without squeezing text or forcing horizontal scrolling. Use relative percentage widths and CSS max-width rules to build fluid, responsive email containers.
Note: Set your table widths to 100% and limit them using CSS max-width to keep them readable on all screens.
Warning: Avoid using absolute pixel widths on large containers to prevent layout cutoff issues on smaller screens.
Example: Responsive Emails
<table style="width: 100%; max-width: 600px;">
<tr>
<td>Responsive content</td>
</tr>
</table>Using Safe System Fonts
Custom web fonts (like Google Fonts) are not supported by most email clients, which will fall back to default serif options if they fail to load. To keep your branding clean, always use widely supported system fonts.
Note: Specify standard web-safe fonts like Arial, Helvetica, Georgia, or Times New Roman in your font-family fallback chains.
Warning: If you do not specify standard font fallbacks, email clients will render your text in the user's default system font, which can ruin your design.
Example: Using Safe System Fonts
<p style="font-family: Arial, Helvetica, sans-serif;">Safe font text</p>Alternate Text and Image Blockers
Many email clients disable image loading by default to save mobile data and prevent user tracking. This means your visitors will see blank boxes instead of your logos. Writing descriptive alt text is essential for guiding users when images are blocked.
Note: Style your alt text using inline CSS to keep your blocked image boxes looking professional and readable.
Warning: Never put critical call-to-action text inside images, as users will miss it if image loading is disabled.
Example: Alternate Text and Image Blockers
<img src="logo.png" alt="Company Logo" style="display: block;">Email Client Compatibility Issues
Email clients like Outlook, Gmail, and Apple Mail each use wildly different rendering engines, some even reusing Microsoft Word's old rendering code, which means modern CSS features like flexbox or grid are often completely unsupported. This is exactly why email HTML still relies on old-fashioned table layouts and inline styles that were considered outdated for regular websites over a decade ago.
Note: Always test real email templates using an actual email testing service before sending, since browser preview alone will not reveal Outlook-specific rendering bugs.
Warning: A template that looks perfect in Gmail can look completely broken in Outlook, since Outlook's rendering engine ignores many modern CSS properties entirely.
Example: Email Client Compatibility Issues
<table cellpadding="0" cellspacing="0" style="width: 600px;">
<tr>
<td>Works across Outlook, Gmail, and Apple Mail</td>
</tr>
</table>- Using modern CSS Grid or Flexbox, which are ignored by older email clients like Outlook.
- Linking to external CSS files inside your head section instead of writing all styles inline.
- Failing to write descriptive, styled alt text on image elements, leaving empty blank boxes on load.
- HTML email layouts must be constructed using old-school tables for reliable alignment.
- Always write your CSS rules inline directly inside each tag to prevent them from being stripped out.
- Use safe system fonts like Arial, specify explicit image dimensions, and write styled alt text to handle image blockers.
HTML email templates are supported by all web browsers, but rendering consistency depends heavily on the destination email client application.
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: