Email HTML Engine

Email HTML is NOT web HTML. Outlook uses Microsoft Word's rendering engine. Gmail strips styles. This skill ensures every email renders correctly everywhere.

Architecture: Table-Based Layout

ALL layout must use tables. No exceptions.

<!-- Master container -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="min-width: 100%;">
  <tr>
    <td align="center" style="padding: 0;">

      <!-- Content wrapper (600px max) -->
      <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="600" style="max-width: 600px; width: 100%;">
        <tr>
          <td style="padding: 40px 20px;">
            <!-- Content here -->
          </td>
        </tr>
      </table>

    </td>
  </tr>
</table>

Required Attributes

Every table MUST have:

<table role="presentation" cellspacing="0" cellpadding="0" border="0">

Every image MUST have:

<img src="..." alt="Descriptive text" width="300" height="200" style="display: block; border: 0; max-width: 100%; height: auto;">

Safe CSS Properties

ONLY use these—everything else is unreliable:

| Property | Notes | |----------|-------| | background-color | Use hex codes | | color | Use hex codes | | font-family | Always include fallback stack | | font-size | Use px, not rem/em | | font-weight | 400, 700 most reliable | | font-style | normal, italic | | text-align | left, center, right | | text-decoration | none, underline | | line-height | Use px or unitless number | | letter-spacing | Mostly works, use sparingly | | padding | All forms, use on <td> | | border | All forms | | width | Use both attribute and style | | height | Unreliable, prefer natural height | | vertical-align | top, middle, bottom | | display | Only block, inline, none |

NEVER Use These CSS Properties

| Property | Why | |----------|-----| | margin | Outlook ignores or breaks | | float | Broken in most clients | | position | Completely unsupported | | flexbox | Not supported in email | | CSS Grid | Not supported in email | | border-radius | Outlook ignores completely | | box-shadow | Most clients ignore | | max-width | Outlook 2007-2016 ignores | | calc() | Limited support | | CSS variables | Not supported |

Outlook-Specific Fixes (MSO Conditionals)

Outlook requires explicit widths. Wrap fluid content:

<!--[if mso]>
<table role="presentation" width="600" align="center" cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="300">
<![endif]-->

<div style="display: inline-block; max-width: 300px; width: 100%; vertical-align: top;">
  <!-- Fluid column content -->
</div>

<!--[if mso]>
</td>
<td width="300">
<![endif]-->

<div style="display: inline-block; max-width: 300px; width: 100%; vertical-align: top;">
  <!-- Fluid column content -->
</div>

<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->

Responsive Technique: Fluid Hybrid

Works WITHOUT media queries (Gmail app strips them):

<!-- Two-column that stacks on mobile -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
  <tr>
    <td align="center">
      <!--[if mso]>
      <table role="presentation" width="600" cellspacing="0" cellpadding="0" border="0">
      <tr>
      <td width="290" valign="top">
      <![endif]-->

      <div style="display: inline-block; max-width: 290px; width: 100%; vertical-align: top;">
        <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
          <tr>
            <td style="padding: 10px;">
              <!-- Column 1 content -->
            </td>
          </tr>
        </table>
      </div>

      <!--[if mso]>
      </td>
      <td width="290" valign="top">
      <![endif]-->

      <div style="display: inline-block; max-width: 290px; width: 100%; vertical-align: top;">
        <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
          <tr>
            <td style="padding: 10px;">
              <!-- Column 2 content -->
            </td>
          </tr>
        </table>
      </div>

      <!--[if mso]>
      </td>
      </tr>
      </table>
      <![endif]-->
    </td>
  </tr>
</table>

Email-Safe Font Stacks

/* Elegant/Serif */
font-family: Georgia, 'Times New Roman', serif;

/* Modern/Clean */
font-family: 'Trebuchet MS', 'Lucida Sans', Arial, sans-serif;

/* Professional */
font-family: Verdana, Geneva, sans-serif;

/* Fallback-safe */
font-family: Arial, Helvetica, sans-serif;

/* Monospace (for codes/receipts) */
font-family: 'Courier New', Courier, monospace;

Button Pattern (Bulletproof)

Works in ALL clients including Outlook:

<table role="presentation" cellspacing="0" cellpadding="0" border="0">
  <tr>
    <td style="background-color: #2563eb; padding: 14px 28px; text-align: center;">
      <a href="{{cta_url}}" style="color: #ffffff; font-family: 'Trebuchet MS', Arial, sans-serif; font-size: 16px; font-weight: bold; text-decoration: none; display: inline-block;">
        Call to Action
      </a>
    </td>
  </tr>
</table>

Size Limits

| Limit | Value | Consequence | |-------|-------|-------------| | Total HTML size | < 102 KB | Gmail clips email with "View entire message" link | | <style> block | < 8 KB | Gmail strips entire block if exceeded | | Content width | 600px | Standard for Outlook 3-column view | | Image width | 100% max | For responsive scaling | | Touch target | 44x44px min | Mobile accessibility | | Body font | 14px min | Mobile readability |

ICON + FEATURE LAYOUTS (CRITICAL)

IMPORTANT: Never use emojis as icons - they hurt email deliverability.

🚫 BANNED: Icon-Left, Text-Right Layout

This pattern wastes horizontal space and looks dated:

❌ DO NOT USE:
| [icon] | Title here          |
|        | Description text... |

✅ PREFERRED: Centered Icon Above Text

<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="text-align: center; margin-bottom: 32px;">
  <tr>
    <td align="center" style="padding-bottom: 16px;">
      <table role="presentation" cellspacing="0" cellpadding="0" border="0">
        <tr>
          <td width="56" height="56" style="background-color: #6366f1; border-radius: 12px; text-align: center; vertical-align: middle;">
            <img src="https://cdn-icons-png.flaticon.com/128/2989/2989988.png" width="28" height="28" alt="" style="display: block; margin: 0 auto;">
          </td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td align="center">
      <h3 style="margin: 0 0 8px 0; font-size: 20px; font-weight: 600;">Feature Title</h3>
      <p style="margin: 0; font-size: 15px; color: #666;">Description text here</p>
    </td>
  </tr>
</table>

✅ PREFERRED: Full-Width Feature Card with Image

<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="margin-bottom: 32px;">
  <tr>
    <td style="padding: 0;">
      <img src="[FEATURE_IMAGE_URL]" width="600" height="250" alt="Feature" style="display: block; width: 100%; height: auto; border-radius: 8px;">
    </td>
  </tr>
  <tr>
    <td style="padding: 24px 0 0 0;">
      <h3 style="margin: 0 0 12px 0; font-size: 24px; font-weight: 700;">Feature Title</h3>
      <p style="margin: 0; font-size: 16px; line-height: 1.6; color: #4a4a4a;">Description here...</p>
    </td>
  </tr>
</table>

VERIFIED WORKING ICON URLS (Flaticon CDN)

Use Flaticon CDN - these URLs are tested and working:

Checkmark: https://cdn-icons-png.flaticon.com/128/2989/2989988.png
Star: https://cdn-icons-png.flaticon.com/128/1828/1828884.png
Lightning: https://cdn-icons-png.flaticon.com/128/3313/3313031.png
Shield: https://cdn-icons-png.flaticon.com/128/2889/2889676.png
Chart: https://cdn-icons-png.flaticon.com/128/3135/3135706.png
Rocket: https://cdn-icons-png.flaticon.com/128/3135/3135715.png
Target: https://cdn-icons-png.flaticon.com/128/3207/3207586.png
Clock: https://cdn-icons-png.flaticon.com/128/2784/2784459.png
Gift: https://cdn-icons-png.flaticon.com/128/3131/3131978.png
Heart: https://cdn-icons-png.flaticon.com/128/833/833472.png
Settings: https://cdn-icons-png.flaticon.com/128/3524/3524659.png
User: https://cdn-icons-png.flaticon.com/128/1077/1077114.png
Mail: https://cdn-icons-png.flaticon.com/128/561/561127.png

Social Media Icons:

Twitter/X: https://cdn-icons-png.flaticon.com/128/5968/5968830.png
LinkedIn: https://cdn-icons-png.flaticon.com/128/3536/3536505.png
Facebook: https://cdn-icons-png.flaticon.com/128/733/733547.png
Instagram: https://cdn-icons-png.flaticon.com/128/2111/2111463.png

KEY RULES:

Use CENTERED icon-above-text OR full-width feature images
NEVER use icon-left/text-right side-by-side layout
NEVER use emojis (🏆❤️🏠) - use Flaticon PNG URLs instead
Use Flaticon CDN URLs (verified working)
Icons in colored backgrounds: wrap in table with background-color

Pre-Flight Checklist

Before outputting email HTML:

All tables have role="presentation" cellspacing="0" cellpadding="0" border="0"
All images have alt, width, height, style="display:block;"
All styles are inline (no external stylesheets)
No margin, float, position, flexbox, or grid
MSO conditionals wrap multi-column layouts
Font stacks include web-safe fallbacks
Total HTML < 102KB
<style> block < 8KB (if present)
All links have full URLs (not relative)
Buttons use table-based bulletproof pattern
NO icon-left/text-right layouts (use centered icon-above-text instead)
Icons use Flaticon CDN URLs (NOT Icons8 - they don't load reliably)
Icons use table cells with background-color, NOT display:flex
NO emojis anywhere in the email (🏆❤️🏠 etc. hurt deliverability)
Tasty mode: Each feature has its own full-width image (not just icons)