Design System

Responsive email templates with multi-client compatibility

HTMLHTML Email Structure

HTML structure optimized for email compatibility

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Email Template</title>
  <!--[if mso]>
  <noscript>
    <xml>
      <o:OfficeDocumentSettings>
        <o:PixelsPerInch>96</o:PixelsPerInch>
      </o:OfficeDocumentSettings>
    </xml>
  </noscript>
  <![endif]-->
</head>
<body style="margin:0;padding:0;background-color:#f4f4f4;">
  <table width="100%" cellpadding="0" cellspacing="0">
    <tr>
      <td align="center">
        <!-- Email Content -->
      </td>
    </tr>
  </table>
</body>
</html>

TYPESEmail Template Types

Templates adapted to different use cases

📰 Newsletter Template

NEWSLETTER

Weekly Update #42

Article Title

Brief description of the article content...

Another Article

💳 Transactional Template

Order Confirmation

#ORD-2024-001

Product Name$29.99

Shipping$4.99

Tax$2.80

Total$37.78

• Clear transaction information
• Purchase summary
• Main tracking action
• Support contact information

RWDResponsive Techniques

Approaches to make emails responsive

📱 Media Queries

@media only screen and (max-width: 600px) {
  .container {
    width: 100% !important;
    max-width: 100% !important;
  }

  .column {
    width: 100% !important;
    display: block !important;
  }

  .mobile-hide {
    display: none !important;
  }

  .mobile-text-center {
    text-align: center !important;
  }
}

📊 Fluid Tables

<table width="100%" cellpadding="0" cellspacing="0">
  <tr>
    <td class="container" style="max-width:600px;">
      <table width="100%" cellpadding="0" cellspacing="0">
        <tr>
          <td class="column" width="50%" valign="top">
            Column 1
          </td>
          <td class="column" width="50%" valign="top">
            Column 2
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

CLIENTSClient Compatibility

Feature support by email client

Feature	Gmail	Outlook	Apple Mail	Yahoo
CSS3	✓	✗	✓	~
Media Queries	✓	✗	✓	✓
Background Images	✓	✗	✓	~
Flexbox	~	✗	✓	✗
Web Fonts	✓	~	✓	✓

✓ Full support~ Partial support✗ No support

TIPSEmail Best Practices

Tips to optimize deliverability and engagement

✅ DO

• Use tables for layout
• Inline styles for compatibility
• Alt text for all images
• Test on all major clients
• Short and clear preview text
• Visible unsubscribe link
• Optimize images (< 1MB total)
• Fallback for disabled images

❌ AVOID

• External CSS or in <head>
• JavaScript (not supported)
• Unsupported CSS3 properties
• Spam trigger words
• Unbalanced image/text ratios
• Complex forms
• Non-standard web fonts
• Links without http/https protocol

TOOLSEmail Testing Tools

Recommended tools for testing and optimizing emails

🧪 Email on Acid

Complete multi-client testing with screenshots

📧 Litmus

Preview and engagement analytics

🎯 Mail Tester

Deliverability score and spam detection

📧 Email Templates