Email Templates and HTML Design Creating Professional Emails for Node.js

Learn how to design and create professional HTML email templates for your Node.js application responsive design, inline CSS, and email-safe HTML.

Email Templates and HTML Design

Designing emails that look good across all email clients (Gmail, Outlook, Apple Mail) is challenging. This guide covers email-safe HTML and responsive design.

Email HTML vs Web HTML

Email HTML is very different from web HTML:

Feature	Web HTML	Email HTML
CSS	External or <style>	Inline only
Layout	Flexbox, Grid	Tables
Fonts	Custom web fonts	System fonts only
JavaScript	Yes	No (stripped by all clients)
Images	Any format	Hosted URLs, alt text
Video	<video> tag	Animated GIF or link
Forms	<form> tags	Link to a web page

Basic Email Template

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Email</title>
</head>
<body style="margin:0;padding:0;background:#f4f4f4;font-family:Arial,Helvetica,sans-serif;">
  <table width="100%" cellpadding="0" cellspacing="0" style="background:#f4f4f4;">
    <tr>
      <td align="center" style="padding:20px;">
        <table width="600" cellpadding="0" cellspacing="0" style="background:#ffffff;border-radius:8px;overflow:hidden;">
          
          <!-- Header -->
          <tr>
            <td style="background:#fd267d;padding:20px;text-align:center;">
              <h1 style="color:#ffffff;margin:0;font-size:24px;">DevTinder</h1>
            </td>
          </tr>
          
          <!-- Content -->
          <tr>
            <td style="padding:30px;">
              <h2 style="color:#333;margin:0 0 15px 0;">Hi {{firstName}}!</h2>
              <p style="color:#666;line-height:1.6;margin:0 0 20px 0;">
                Welcome to DevTinder. Your account has been created successfully.
              </p>
              
              <!-- Button -->
              <table cellpadding="0" cellspacing="0">
                <tr>
                  <td style="background:#fd267d;border-radius:5px;">
                    <a href="https://app.yourdomain.com/profile" 
                       style="display:inline-block;padding:12px 30px;color:#ffffff;text-decoration:none;font-weight:bold;">
                      Complete Your Profile
                    </a>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
          
          <!-- Footer -->
          <tr>
            <td style="padding:20px 30px;background:#f9f9f9;border-top:1px solid #eee;">
              <p style="color:#999;font-size:12px;margin:0;text-align:center;">
                © 2026 DevTinder. All rights reserved.<br>
                You received this email because you signed up at devtinder.com
              </p>
            </td>
          </tr>
          
        </table>
      </td>
    </tr>
  </table>
</body>
</html>

Key Principles

Use tables for layout Most email clients don't support flexbox or grid
Inline CSS <style> tags are stripped by Gmail and Outlook
System fonts Arial, Helvetica, sans-serif (custom fonts don't work in most clients)
Width 600px Standard email width (fits most preview panes)
Alt text for images Many clients block images by default
No JavaScript All JS is stripped
Host images on CDN Don't embed images, use URLs
Test everywhere Gmail, Outlook, Apple Mail, mobile

Responsive Email Design

<style>
  @media only screen and (max-width: 600px) {
    .container { width: 100% !important; }
    .content { padding: 15px !important; }
    .button { width: 100% !important; }
  }
</style>

Note: Some clients strip <style> tags. For maximum compatibility, use inline CSS and fluid layouts (percentage widths).

Using Email Template Engines

For complex templates, use a template engine:

Handlebars:

npm install handlebars

const Handlebars = require("handlebars");
const fs = require("fs");

// Load template
const templateSource = fs.readFileSync("templates/welcome.html", "utf-8");
const template = Handlebars.compile(templateSource);

// Render with data
const html = template({
  firstName: "John",
  profileUrl: "https://app.yourdomain.com/profile"
});

MJML (email-specific markup):

npm install mjml

<!-- welcome.mjml -->
<mjml>
  <mj-body>
    <mj-section background-color="#fd267d">
      <mj-column>
        <mj-text color="white" align="center">DevTinder</mj-text>
      </mj-column>
    </mj-section>
    <mj-section>
      <mj-column>
        <mj-text>Hi {{firstName}}! Welcome to DevTinder.</mj-text>
        <mj-button href="https://app.yourdomain.com/profile">Complete Profile</mj-button>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

const mjml2html = require("mjml");
const fs = require("fs");

const mjmlContent = fs.readFileSync("templates/welcome.mjml", "utf-8");
const { html } = mjml2html(mjmlContent);

MJML compiles to responsive email HTML automatically.

Testing Emails

mail-tester.com Send an email and get a spam score (aim for 9-10/10) Litmus Test across 90+ email clients (paid) Email on Acid Similar to Litmus (paid) Gmail, Outlook, Apple Mail Manual testing on the most common clients

The Takeaway

Email HTML is very different from web HTML: use tables for layout, inline CSS, system fonts, 600px width, and no JavaScript. Create reusable templates with Handlebars or MJML. Always test across Gmail, Outlook, and Apple Mail. Use mail-tester.com to check your spam score before sending to users.

Email clients (Gmail, Outlook) strip <style> tags, don't support flexbox/grid, block JavaScript, and may not load external fonts or images. You must use inline CSS, tables for layout, system fonts, and hosted image URLs. Email HTML is very different from web HTML.

Know More

600px is the standard email width. This fits most email client preview panes (Gmail, Outlook, Apple Mail). For responsive design, use percentage widths and media queries (though some clients strip <style> tags, so test carefully).

Know More

MJML is a markup language specifically for emails. You write simple MJML XML, and it compiles to responsive email HTML that works across all clients. It handles tables, inline CSS, and responsive design automatically, saving hours of manual HTML work.

Know More

Use mail-tester.com to send a test email and get a spam score (aim for 9-10/10). Use Litmus or Email on Acid (paid) to test across 90+ email clients. Also manually test in Gmail, Outlook, and Apple Mail on desktop and mobile.

Know More

Yes. Use Handlebars for variable substitution ({{firstName}}) in HTML templates. Use MJML for responsive email design that compiles to email-safe HTML. Both save time and ensure consistency across your transactional emails.

Know More

Ready to master Node.js completely?

Want to upskill yourself, crack your next interview, and get your dream job? Join our comprehensive course to dive deeper with high-quality video tutorials, solve interview questions, and a premium community.

On-Demand Access to All Videos
Detailed Notes & Practice Platform
Certificate on Completion

Namaste Node.js

Learn Node.js internals, backend architecture, and building scalable APIs.

Enroll Now

Master Node.js

Want to upskill yourself, crack your next interview, and get your dream job? Join our comprehensive course.

Namaste Node.js

Learn Node.js internals, backend architecture, and building scalable APIs.

Enroll Now