Portal active

Search Knowledge Base Articles

Find answers, guides, and documentation

Knowledge Base › Using the HTML Email Editor

Using the HTML Email Editor

The MigoSMTP HTML editor allows you to write or paste raw HTML for your email templates directly in the dashboard. This gives developers and designers complete control over every pixel of the email design. This article covers how to use the editor effectively, the technical requirements of HTML email, and common pitfalls to avoid.

Accessing the HTML Editor

  1. Go to Templates → Create Template (or open an existing template).
  2. In the content editor section, select the HTML tab or Code Editor mode.
  3. The editor opens with a split view: code on the left, live preview on the right.
  4. The preview updates as you type.

HTML Email vs Web HTML — Key Differences

HTML email does not behave like a web page. Email clients have inconsistent and often outdated HTML/CSS support. Understanding these differences is essential:

Feature Web Browser Email Client
CSS support Full CSS3 support Varies widely — inline CSS is most reliable; many CSS3 properties not supported in Outlook
External stylesheets Fully supported via <link> Stripped by most email clients — all CSS must be inline
JavaScript Fully supported Blocked by all email clients — do not use
Layout system CSS Grid, Flexbox, modern layout Table-based layouts are most reliable across all clients
Fonts Web fonts via @font-face / Google Fonts Limited — use web-safe fallback fonts; Google Fonts work in some clients only
Images Displayed automatically Blocked by default in many clients — always use alt text
Max width Full browser width 600px is the email standard; content should be constrained to this width

HTML Email Template Skeleton

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Email Title</title>
  <style>
    /* Reset styles */
    body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
    table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
    img { -ms-interpolation-mode: bicubic; }
    body { margin: 0; padding: 0; background-color: #f4f4f4; }
    /* Mobile styles */
    @media screen and (max-width: 600px) {
      .email-container { width: 100% !important; }
      .mobile-padding  { padding: 20px !important; }
      .mobile-full     { width: 100% !important; display: block !important; }
    }
  </style>
</head>
<body>
  <!-- Preheader text (hidden, shows as preview in inbox) -->
  <div style="display:none;max-height:0;overflow:hidden;mso-hide:all;">
    Your preview text here — keep under 100 characters
    &nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
  </div>

  <!-- Outer wrapper -->
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
    <tr><td align="center" style="padding: 20px 0;">

      <!-- Email container -->
      <table class="email-container" role="presentation" width="600"
             cellpadding="0" cellspacing="0" border="0"
             style="background-color: #ffffff; border-radius: 8px;">

        <!-- Header -->
        <tr><td style="padding: 30px 40px; background-color: #1a1a2e; border-radius: 8px 8px 0 0;">
          <img src="https://yourcompany.com/logo.png" alt="Your Company" width="150" style="display: block;">
        </td></tr>

        <!-- Body -->
        <tr><td class="mobile-padding" style="padding: 40px;">
          <h1 style="font-family: Arial, sans-serif; font-size: 24px; color: #333333; margin: 0 0 16px;">
            Hi {{first_name}},
          </h1>
          <p style="font-family: Arial, sans-serif; font-size: 16px; color: #555555; line-height: 1.6;">
            {{email_body}}
          </p>
          <!-- CTA Button -->
          <table role="presentation" cellpadding="0" cellspacing="0" border="0" style="margin: 24px 0;">
            <tr><td style="background-color: #10B981; border-radius: 6px; padding: 14px 28px;">
              <a href="{{cta_url}}" style="color: #ffffff; font-family: Arial, sans-serif; font-size: 16px;
                 font-weight: bold; text-decoration: none; display: block;">
                {{cta_text}}
              </a>
            </td></tr>
          </table>
          <p style="font-family: Arial, sans-serif; font-size: 14px; color: #999999;">
            If the button does not work, copy this link: <a href="{{cta_url}}">{{cta_url}}</a>
          </p>
        </td></tr>

        <!-- Footer -->
        <tr><td style="padding: 20px 40px; background-color: #f9f9f9; border-radius: 0 0 8px 8px;
                    border-top: 1px solid #eeeeee;">
          <p style="font-family: Arial, sans-serif; font-size: 12px; color: #999999; margin: 0;">
            © 2026 Your Company, 123 Business Street, Jaipur, Rajasthan 302001, India<br>
            <a href="{{unsubscribe_url}}" style="color: #999999;">Unsubscribe</a> |
            <a href="https://yourcompany.com/privacy" style="color: #999999;">Privacy Policy</a>
          </p>
        </td></tr>

      </table>
    </td></tr>
  </table>
</body>
</html>

Critical Rules for HTML Email

  • Use tables for layout — not CSS Grid or Flexbox. Microsoft Outlook uses the Word rendering engine which does not support modern CSS layout. Table-based layouts work universally.
  • Inline your CSS — before sending, run your HTML through a CSS inliner tool (like Juice or Premailer) to move all styles inline. MigoSMTP can do this automatically if you enable the CSS inlining option.
  • Max width 600px — constrain your email content to 600px. This is the de facto email standard that works in all clients.
  • Use absolute image URLs — images must be hosted on a public URL (CDN or your server). Relative paths and embedded base64 images cause issues in many clients.
  • Always include alt text on images — when images are blocked, alt text ensures the email is still intelligible.
  • Include a preheader — the hidden text above the visible content that appears as the preview in the inbox list. It should complement the subject line.
  • Test in multiple clients — use a tool like Litmus or Email on Acid to preview your template in Gmail, Outlook 2016/2019/365, Apple Mail, and mobile clients before going live.

CSS Properties Supported Across All Major Email Clients

Property Support
color, background-color Universal
font-family, font-size, font-weight Universal — use web-safe fonts as fallback
padding, margin Universal — prefer padding on table cells
width, height on table cells Universal
border, border-radius Widely supported; Outlook 2007–2019 ignores border-radius
display: flex, CSS Grid Do not use — broken in Outlook
position: absolute/relative Do not use — inconsistent across clients

Next Steps

Did you find this article useful?
Related Articles