HTML Preview for Email Templates
Why Email Templates Need Special Previewing
Email HTML is not web HTML. Gmail strips <style> blocks. Outlook uses Word's rendering engine. Mobile apps resize tables unpredictably. A template that looks perfect in Chrome might fall apart in an inbox.
Previewing email templates in a browser is step one — but you also need to understand which CSS properties survive the journey from your code to the recipient's screen.
The Constraints of Email HTML
Email clients vary wildly in CSS support. Here is what you are up against:
| Technique | Web Pages | Gmail | Outlook | Apple Mail |
|---|---|---|---|---|
<style> in <head> | Full support | Stripped | Partial | Full |
| Media queries | Full | Stripped | No | Full |
| Flexbox | Full | No | No | Full |
| CSS Grid | Full | No | No | Full |
border-radius | Full | Yes | Partial | Full |
background-image | Full | Partial | No | Full |
padding on <div> | Full | Stripped | Yes | Full |
The practical consequence: you write email HTML like it is 2004. Tables for layout. Inline styles for everything. No flexbox, no grid, no <style> blocks as your primary styling method.
Writing Email-Safe HTML
Use Tables for Layout
<table width="600" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="200" bgcolor="#f5f5f5">
Sidebar content
</td>
<td width="400">
Main content
</td>
</tr>
</table>
Tables are the only layout method that works everywhere. Nest them for complex structures — a two-column row is a table inside a <td>.
Inline All Styles
Gmail keeps inline style attributes but removes <style> blocks in the <head>. Tools like Premailer or Juice automate inlining:
<!-- Before inlining -->
<p class="headline">Welcome</p>
<style>.headline { font-size: 24px; color: #333; }</style>
<!-- After inlining -->
<p style="font-size: 24px; color: #333;">Welcome</p>
Always inline before sending. Writing CSS in <style> during development is fine — just inline it before your final test.
Use Absolute URLs for Images
<!-- Wrong — will not load in email -->
<img src="images/logo.png" alt="Logo">
<!-- Correct — full URL -->
<img src="https://example.com/images/logo.png" alt="Logo">
Email clients download images from servers. Relative paths resolve to nothing.
Preview Workflow for Email Templates
A solid workflow catches rendering problems before they reach inboxes.
Step 1: Write and Preview in Browser
Use an HTML preview tool to write and iterate on your template. At this stage, you are checking structure, content, and basic styling.
Try our HTML Preview tool — paste your email template code and see the rendered output instantly.
Step 2: Inline CSS
Run your template through an CSS inliner. This merges your <style> rules into inline style attributes on each element.
Step 3: Test in Multiple Clients
Do not rely on a single browser view. Use these testing options:
| Tool | What It Does | Cost |
|---|---|---|
| Litmus | Screenshots across 50+ email clients | Paid |
| Email on Acid | Pre-send testing with screenshots | Paid |
| Outlook Test Mode | Preview in Outlook desktop | Free (if you have Outlook) |
| Gmail Web | Send to yourself, check web client | Free |
At minimum, test in Gmail (web), Outlook (desktop), and Apple Mail (iOS).
Step 4: Check Without Images
Many email clients block images by default. Preview your template with images disabled:
- Does the alt text make sense?
- Is the layout still understandable?
- Do background colors fill the space where images would be?
Step 5: Test on Mobile
Send the email to your phone. Open it in the Gmail app, Apple Mail app, and any other client your audience uses. Check that:
- Text is readable without zooming
- Buttons are large enough to tap
- Single-column layout does not break
Common Email Template Bugs
| Bug | Cause | Fix |
|---|---|---|
| Extra spacing between table cells | Default cellspacing | Set cellspacing="0" on <table> |
| Blue links on addresses/dates | Gmail auto-linking | Use <span> with inline color inside the link Gmail creates |
| Broken layout in Outlook | Outlook uses Word renderer | Use mso- conditional comments for Outlook-specific fixes |
| Images not loading | Relative URLs | Use absolute URLs |
| Font falls back to Times | Web fonts stripped | Specify a safe fallback stack: font-family: 'Roboto', Arial, sans-serif |
| 1px gaps in Outlook | Image display behavior | Add style="display:block;" to <img> tags |
Key Takeaways
- Email HTML requires tables for layout and inline styles for compatibility
- Gmail strips
<style>blocks; Outlook uses Word's rendering engine - Always inline your CSS before sending — tools like Premailer automate this
- Preview in a browser for structure, then test across real email clients
- Test with images disabled and on mobile devices before sending
- Use absolute URLs for all images and assets
Try It Yourself
Write and preview your email templates in real time with our HTML Preview tool. Paste your table-based layout, add inline styles, and see exactly how it renders — no setup required.