Building Beautiful Transactional Email Templates

Well-designed transactional email templates enhance your brand and improve user experience. Here's how to create templates that work everywhere:

HTML Email Constraints

Email clients have limited CSS support. Use these techniques:

Inline Styles

Always inline your CSS. External stylesheets are often ignored:

<div style="font-family: Arial, sans-serif; color: #333;">
  Your content here
</div>

Table-Based Layouts

Use tables for layout instead of modern CSS Grid or Flexbox:

<table width="600" cellpadding="0" cellspacing="0">
  <tr>
    <td>Content</td>
  </tr>
</table>

Responsive Design

Use media queries for mobile optimization:

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

Template Structure

Header

Include your logo and brand colors. Keep it simple and recognizable.

Body Content

• Use clear hierarchy with headings
• Keep paragraphs short and scannable
• Use buttons for CTAs (not just links)
• Include white space for readability

Footer

Always include:

• Company information
• Unsubscribe link (if applicable)
• Physical address (required by law in many regions)
• Social media links (optional)

Common Template Types

Order Confirmations

Include order details, shipping information, and tracking numbers. Make it easy for customers to find what they need.

Password Resets

Keep these simple and secure. Include clear expiration information and security tips.

Welcome Emails

Set expectations and guide new users. Include next steps and helpful resources.

Notifications

Keep notifications concise. Use clear icons and action buttons.

Testing Your Templates

Test across multiple email clients:

• Gmail (web and mobile)
• Outlook (Windows and Mac)
• Apple Mail
• Mobile clients (iOS Mail, Android)

OnePush provides template previews and testing tools to ensure your emails look great everywhere.