HTML Email Template Development: Consistency and Maintainability

HTML Email Template Development: Consistency and Maintainability

HTML email development is significantly harder than regular HTML. You're writing for rendering engines that are decades behind the web, with no modern CSS and no JavaScript.

Why email HTML is so difficult

• Table layouts: Outlook used Word's rendering engine as recently as 2016; only table-based layouts are reliably compatible
• Inline styles: Most email clients strip styles from <head> — inline style attributes are the only safe approach
• Images blocked by default: Outlook and Gmail block external images unless the user opts in
• No JavaScript: Scripts don't run in email clients

Basic template structure

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="margin:0;padding:0;background:#f4f4f4;">
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0">
    <tr>
      <td align="center" style="padding:20px 0;">
        <table role="presentation" width="600" cellpadding="0" cellspacing="0"
               style="background:#ffffff;border-radius:8px;">
          <tr>
            <td style="padding:40px;">
              <!-- Content goes here -->
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</body>
</html>

React Email or MJML

Hand-writing inline styles is ugly and hard to maintain. React Email (JSX for email components) and MJML (an HTML-like DSL) both compile to safe, compatible HTML:

// React Email example
import { Button, Html, Text } from '@react-email/components';

export function OrderEmail({ orderId }) {
  return (
    <Html>
      <Text>Your order #{orderId} is confirmed.</Text>
      <Button href={`https://yourapp.com/orders/${orderId}`}>
        View order
      </Button>
    </Html>
  );
}

Sending the rendered template with Rovela

const { render } = require('@react-email/render');
const html = render(<OrderEmail orderId="12345" />);

await rovela.emails.send({
  from: 'orders@yourdomain.com',
  to: user.email,
  subject: 'Order confirmed',
  html,
});

Testing tools

• Email on Acid / Litmus: Preview rendering across real clients
• Mail Tester: Check spam score
• Rovela sending logs: Inspect actual delivery status

Don't rely on browser rendering — Gmail and Outlook behave very differently from Chrome.