HTML Email Design: Complete Guide for 2026

Q: Do I have to use inline CSS in HTML emails?

Yes, inline CSS is strongly recommended for HTML emails. Many email clients strip out or ignore styles defined in the head section or in external stylesheets. Gmail, for example, historically stripped style tags from the head (though it now supports some embedded styles). Inline CSS applied directly to each HTML element is the most reliable way to ensure your styles render consistently. You can write your styles in a style block during development and then use an inlining tool to convert them to inline styles before sending.

Q: How do I make an HTML email responsive?

Use a combination of fluid widths and media queries. Set your email container to a max-width of 600px with width at 100 percent so it scales down on smaller screens. Use percentage-based widths for columns inside tables. Add a media query that stacks columns vertically on screens narrower than 600px by setting each column to display block and width 100 percent. Apple Mail, Gmail app on iOS, and many modern clients support media queries. For clients that ignore media queries, the fluid width approach ensures the email still looks acceptable.

Q: How do I support dark mode in HTML emails?

Support dark mode by using the prefers-color-scheme media query in your email styles and by choosing colors that work in both light and dark contexts. Avoid pure white backgrounds; use off-white like #f7f7f7 which inverts more gracefully. Use transparent PNGs for logos so the background adapts. Add a meta tag with color-scheme light dark in the head and a corresponding CSS declaration. Test in Apple Mail, Outlook, and Gmail dark mode since each handles color inversion differently. Some clients invert colors automatically, so always test with dark backgrounds.

Q: What is the best way to test HTML emails across clients?

The best approach is to use a testing service like Litmus or Email on Acid, which render your email across dozens of clients and devices simultaneously. For free testing, send your email to personal accounts on Gmail, Outlook, Yahoo Mail, and Apple Mail. Test on both desktop and mobile. Use NexTool Email Template Builder to preview your HTML structure before sending. Always test with images disabled, since some recipients block images by default, and verify that your alt text and background colors provide a usable fallback.

Email HTML vs Web HTML: Why Everything You Know Is Wrong

If you have ever built a website, you might assume building an HTML email is the same process with a smaller canvas. It is not. Email HTML is a completely different discipline with its own rules, its own rendering engines, and its own set of frustrations. Understanding the difference is the first step toward emails that actually look right in every inbox.

On the modern web, you write semantic HTML5 with external CSS files, flexbox layouts, grid systems, CSS variables, and media queries. Browsers follow the same rendering standards with minor differences. You can use <div>, <section>, and <article> freely. CSS classes in a stylesheet control everything.

Email clients do not work this way. There are over 90 different email clients in active use, and they render HTML differently. Microsoft Outlook (still used by over 400 million people) uses the Microsoft Word rendering engine to display HTML emails. That means your carefully crafted CSS grid layout is interpreted by a word processor, not a web browser. Gmail strips your <style> tags under certain conditions. Yahoo Mail has its own quirks with background images. Samsung Mail, the default on hundreds of millions of Android devices, has rendering bugs that no other client shares.

The practical consequence is stark: email HTML is frozen somewhere around 2003 in terms of what you can reliably use. No flexbox. No grid. No CSS variables. No position: absolute. No calc(). No <video> embeds in most clients. The foundation of every reliable HTML email is the <table> element, inline styles, and defensive coding practices that anticipate every client stripping or mangling your code.

Key Principle

Design for the worst email client first. If your email looks correct in Outlook 2019 on Windows, it will look correct almost everywhere. Build the structure with tables, apply styles inline, and treat every modern CSS feature as a progressive enhancement rather than a requirement.

Table-Based Layouts: The Foundation of Email HTML

Tables are the backbone of HTML email design. Every column, every section, and every alignment in a production email is built with <table>, <tr>, and <td> elements. This feels archaic if you are accustomed to modern web development, but it is the only layout method that renders consistently across all email clients.

The Basic Email Skeleton

Every HTML email starts with a wrapper table that centers the content and constrains it to a maximum width. Here is the foundational structure that works everywhere.

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:v="urn:schemas-microsoft-com:vml"
      xmlns:o="urn:schemas-microsoft-com:office:office">
<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>Your Email Subject</title>
  <!--[if mso]>
  <xml>
    <o:OfficeDocumentSettings>
      <o:PixelsPerInch>96</o:PixelsPerInch>
    </o:OfficeDocumentSettings>
  </xml>
  <![endif]-->
</head>
<body style="margin:0; padding:0; background-color:#f4f4f4;">
  <!-- Outer wrapper: full-width background -->
  <table role="presentation" width="100%" cellpadding="0"
         cellspacing="0" border="0"
         style="background-color:#f4f4f4;">
    <tr>
      <td align="center" style="padding: 20px 0;">
        <!-- Inner container: max 600px -->
        <table role="presentation" width="600" cellpadding="0"
               cellspacing="0" border="0"
               style="max-width:600px; width:100%;
                      background-color:#ffffff;">
          <tr>
            <td style="padding: 40px 30px;">
              <!-- Your email content here -->
              <h1 style="margin:0; font-size:24px;
                         color:#333333;">Hello!</h1>
              <p style="margin:16px 0 0; font-size:16px;
                        line-height:1.5; color:#555555;">
                Your email body text goes here.
              </p>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</body>
</html>

Notice several critical details: role="presentation" tells screen readers to ignore the table structure and focus on the content. The cellpadding="0" cellspacing="0" border="0" attributes reset default table spacing. The outer table provides the full-width background color, and the inner table constrains content to 600 pixels, the standard maximum width for email.

Multi-Column Layouts

To create columns in email, you nest tables inside table cells. Here is a two-column layout for a product showcase or feature comparison.

<table role="presentation" width="100%" cellpadding="0"
       cellspacing="0" border="0">
  <tr>
    <!-- Left column -->
    <td width="50%" valign="top"
        style="padding: 0 10px 0 0;">
      <img src="https://example.com/product-a.jpg"
           alt="Product A" width="270"
           style="display:block; max-width:100%;">
      <p style="font-size:14px; color:#555;">
        Product A description
      </p>
    </td>
    <!-- Right column -->
    <td width="50%" valign="top"
        style="padding: 0 0 0 10px;">
      <img src="https://example.com/product-b.jpg"
           alt="Product B" width="270"
           style="display:block; max-width:100%;">
      <p style="font-size:14px; color:#555;">
        Product B description
      </p>
    </td>
  </tr>
</table>

Use valign="top" to align content to the top of each column. Without it, shorter columns will vertically center their content against taller siblings. Always set explicit width attributes on images and add style="display:block;" to eliminate the gap that some clients add below images.

Need to prototype your table structure quickly? Use the NexTool Email Template Builder to generate a production-ready skeleton in seconds.

Bulletproof Buttons

Links styled as buttons are critical for email CTAs. The simplest approach that works in every client, including Outlook, is a table-based button.

<table role="presentation" cellpadding="0"
       cellspacing="0" border="0">
  <tr>
    <td align="center" bgcolor="#6366f1"
        style="border-radius:8px;">
      <a href="https://example.com/cta"
         target="_blank"
         style="display:inline-block; padding:14px 32px;
                font-size:16px; font-weight:bold;
                color:#ffffff; text-decoration:none;
                border-radius:8px;">
        Get Started
      </a>
    </td>
  </tr>
</table>

The bgcolor attribute on the <td> ensures the background color appears in Outlook, which ignores CSS background-color on anchor tags. The padding on the <a> tag makes the entire button area clickable, not just the text.

Inline CSS: Why It Matters and How to Do It Right

Email clients handle CSS in three fundamentally different ways. Some support <style> blocks in the <head>. Some strip the <head> entirely. Some support inline styles only. The only method that works in every client is inline CSS, where styles are applied directly to each element via the style attribute.

What Gets Stripped

External stylesheets (<link rel="stylesheet">) are stripped by almost every email client
Style blocks in <head> are stripped by some Gmail rendering contexts and older clients
CSS shorthand properties like font: 16px/1.5 Arial are unreliable in Outlook
Advanced selectors like :nth-child, ::before, and :hover are unsupported in most clients
CSS variables (var(--color)) are not supported in any email client

Supported CSS Properties

The following CSS properties are reliably supported inline across all major email clients:

color, background-color, font-size, font-family, font-weight
line-height, text-align, text-decoration, text-transform
padding (use longhand: padding-top, padding-right, etc. for Outlook)
margin (limited support; prefer padding on table cells instead)
border, border-radius (border-radius is ignored by Outlook)
width, max-width, height
display: block, display: inline-block, display: none

The Development Workflow

Writing inline styles by hand for every element is tedious and unmaintainable. The standard workflow is to write your styles in a <style> block during development, then use a CSS inliner tool to convert them to inline styles before sending. This lets you use classes during development and produce inline styles for production.

<!-- DEVELOPMENT: use classes -->
<style>
  .headline { font-size:24px; color:#333; font-weight:bold; }
  .body-text { font-size:16px; line-height:1.5; color:#555; }
</style>
<h1 class="headline">Welcome</h1>
<p class="body-text">Thanks for signing up.</p>

<!-- PRODUCTION: after CSS inlining -->
<h1 style="font-size:24px; color:#333333;
           font-weight:bold;">Welcome</h1>
<p style="font-size:16px; line-height:1.5;
          color:#555555;">Thanks for signing up.</p>

You can build and preview your email HTML structure with the NexTool HTML Email Builder, then run the output through an inliner before deploying to your email service provider.

Best Practice

Keep a <style> block in the <head> even after inlining. Clients that support embedded styles (Apple Mail, iOS Mail, Gmail app) will use them. Clients that strip the head will fall back to inline styles. This dual approach gives you the best rendering everywhere.

Responsive Email Design: From Desktop to Mobile

More than 60% of emails are now opened on mobile devices. An email that looks perfect at 600 pixels wide but breaks on a 375-pixel phone screen will lose the majority of its audience before they read the first sentence. Responsive email design ensures your message adapts to every screen size.

The Fluid-Hybrid Approach

The most reliable responsive technique combines fluid widths (percentage-based sizing) with a max-width constraint. This works even in clients that strip media queries.

<!-- Container that's fluid but capped at 600px -->
<div style="max-width:600px; margin:0 auto;">
  <!--[if mso]>
  <table role="presentation" width="600" cellpadding="0"
         cellspacing="0" border="0">
  <tr><td>
  <![endif]-->
  <table role="presentation" width="100%" cellpadding="0"
         cellspacing="0" border="0">
    <tr>
      <td style="padding: 20px;">
        Your content here
      </td>
    </tr>
  </table>
  <!--[if mso]>
  </td></tr>
  </table>
  <![endif]-->
</div>

The <div> with max-width: 600px handles modern clients. The Outlook conditional comment (<!--[if mso]>) wraps the content in a fixed-width table for Outlook, which does not support max-width on divs.

Media Queries for Stacking Columns

For clients that support media queries (Apple Mail, iOS Mail, Gmail app, most Android clients), you can stack columns on small screens.

<style>
  @media only screen and (max-width: 600px) {
    .stack-column {
      display: block !important;
      width: 100% !important;
      max-width: 100% !important;
    }
    .stack-column img {
      width: 100% !important;
      height: auto !important;
    }
    .mobile-padding {
      padding-left: 16px !important;
      padding-right: 16px !important;
    }
    .mobile-hide {
      display: none !important;
    }
    .mobile-text-center {
      text-align: center !important;
    }
  }
</style>

Apply the stack-column class to your <td> elements that form columns. On screens under 600 pixels, they switch from side-by-side table cells to stacked blocks. The !important declarations are necessary because they need to override inline styles.

Images That Scale

Always set a fixed width attribute on <img> tags for Outlook, and use style="max-width:100%; height:auto;" so images scale down on smaller screens. Include meaningful alt text because many users have images disabled by default.

<img src="https://example.com/hero.jpg"
     alt="Spring collection: 30% off all items"
     width="600"
     style="display:block; max-width:100%; height:auto;
            border:0; outline:none;">

Dark Mode Support in Email

Dark mode is no longer optional. Apple Mail, Outlook, Gmail, and Yahoo Mail all offer dark mode, and each handles email color inversion differently. Without explicit dark mode support, your email might render with unreadable text, invisible logos, or clashing colors.

How Email Clients Handle Dark Mode

No color change: Some clients display your email exactly as coded, even in dark mode (webmail in a dark-themed browser)
Partial inversion: The client changes the background color but preserves text and image colors (Apple Mail)
Full inversion: The client inverts all light colors to dark equivalents and dark colors to light ones (Outlook on Windows in some configurations)

Coding for Dark Mode

Add the color-scheme meta tag and CSS declaration to signal dark mode support.

<!-- In the <head> -->
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<style>
  :root { color-scheme: light dark; }

  @media (prefers-color-scheme: dark) {
    .email-body {
      background-color: #1a1a2e !important;
    }
    .email-container {
      background-color: #16213e !important;
    }
    .text-dark {
      color: #e0e0e0 !important;
    }
    .text-heading {
      color: #ffffff !important;
    }
    .logo-dark {
      display: none !important;
    }
    .logo-light {
      display: block !important;
    }
  }
</style>

Practical Dark Mode Tips

Avoid pure white (#ffffff) backgrounds. Use off-white like #f7f7f7 or #fafafa, which invert more gracefully
Use transparent PNGs for logos. A logo on a white rectangle will show an ugly white box in dark mode
Test logo visibility. Keep two versions: one for light backgrounds, one for dark. Swap with the media query above
Ensure contrast. Use the NexTool Color Contrast Checker to verify your text is readable on both light and dark backgrounds
Add a faint border around white images. A subtle 1px solid #e0e0e0 border prevents white images from blending into white email backgrounds and remains unobtrusive in dark mode

Email Accessibility: Reaching Every Subscriber

Accessibility in email is not a niche concern. Approximately 15% of the global population has some form of disability. Screen readers, high-contrast modes, and keyboard navigation are real tools used by real subscribers who receive your emails. Accessible emails also tend to have better structure, clearer copy, and higher engagement across all subscribers.

Semantic Structure

Set role="presentation" on all layout tables so screen readers skip the table structure and read the content linearly
Use actual heading tags (<h1> through <h6>) for headings, not just bold paragraphs
Use <p> tags for paragraphs, not <br><br> to create spacing
Set lang="en" (or the appropriate language) on the <html> tag

Images and Alt Text

Every image must have an alt attribute. Decorative images should have alt="" (empty, not missing). Informational images need descriptive alt text that conveys the same information the image does. If an image contains text (like a promotional banner), the alt text should include that text.

<!-- Informational image: describe the content -->
<img src="banner.jpg"
     alt="Summer sale: 40% off all shoes through June 30"
     width="600" style="display:block; max-width:100%;
                        height:auto;">

<!-- Decorative image: empty alt -->
<img src="divider.png" alt="" width="600"
     style="display:block; max-width:100%; height:auto;">

Color Contrast

Text must have a contrast ratio of at least 4.5:1 against its background (WCAG AA standard). This is especially important for body text, links, and button labels. Light gray text on a white background may look elegant but can be unreadable for users with low vision. Use the NexTool Color Contrast Checker to verify every text-background combination in your email.

Link Clarity

Avoid using "click here" as link text. Screen readers often navigate by links, reading them out of context. "Click here" tells the user nothing. Instead, use descriptive link text: "View your order status" or "Download the 2026 annual report."

Testing HTML Emails Across Clients

You cannot ship an HTML email without testing it. The gap between what your code editor shows and what a subscriber sees in Outlook 2019 on Windows, Gmail on Android, or Apple Mail on macOS can be enormous. Testing is not optional; it is the single most important step in the email production workflow.

Priority Testing Matrix

You do not need to test in every client ever made. Focus on the clients your subscribers actually use. Check your email analytics for client distribution, but if you do not have that data, prioritize these clients:

Apple Mail / iOS Mail -- typically 35-50% of opens for consumer audiences
Gmail (web and app) -- 25-35% of opens
Outlook (desktop and web) -- 5-15%, but critical for B2B audiences
Yahoo Mail -- 3-8% of opens
Samsung Mail -- 2-5%, default on Samsung Android devices

Free Testing Methods

Send to yourself. Create free accounts on Gmail, Outlook.com, and Yahoo Mail. Send your test email and check rendering on desktop and mobile
Use browser developer tools. Resize your browser to 375px wide to simulate mobile rendering (this only tests the HTML, not how email clients modify it)
Preview your HTML. Use the NexTool HTML Email Builder to preview your email structure and catch layout issues before sending

Paid Testing Services

For professional email teams, services like Litmus and Email on Acid render your email across 90+ clients and devices simultaneously. They show screenshots of how your email looks in every environment and flag rendering issues. The time savings over manual testing justify the cost for anyone sending emails regularly.

Pre-Send Checklist

Does the email render correctly with images disabled? (Check alt text and background colors)
Are all links working and pointing to the correct URLs?
Is the subject line and preheader text correct?
Does the email pass spam filter checks? (Avoid ALL CAPS, excessive exclamation marks, and spam-trigger words)
Is the unsubscribe link present and functional? (Required by CAN-SPAM, GDPR, and most email regulations)
Does the email display correctly in dark mode?
Is the total email file size under 100 KB? (Gmail clips emails larger than 102 KB)

HTML Email Best Practices Checklist

Here is a consolidated checklist of best practices that separates emails that render correctly from emails that break. Reference this every time you build or review an HTML email template.

Structure

Use <table> elements for all layout. Do not rely on <div> positioning
Set role="presentation" on all layout tables
Keep the email container at 600px maximum width
Always include the XHTML doctype and xmlns attributes for Outlook
Use Outlook conditional comments (<!--[if mso]>) for Outlook-specific fixes

Styles

Inline all CSS for production. Keep a <style> block as a supplement
Use longhand CSS properties (padding-top, padding-right, etc.) instead of shorthand for Outlook compatibility
Avoid CSS shorthand for font and background properties
Use web-safe font stacks: Arial, Helvetica, sans-serif or Georgia, Times New Roman, serif
Specify font sizes in pixels, not em or rem

Images

Set explicit width and height attributes on every <img>
Add style="display:block;" to prevent gaps below images
Include descriptive alt text on every image
Host images on a reliable CDN with HTTPS URLs
Optimize images for file size. Total email size should stay under 100 KB

Content

Use a single-column layout when possible. It is more reliable and mobile-friendly
Keep the most important content and CTA above the fold (within the first 300-400px)
Include a plain-text version of every HTML email as a fallback
Add preheader text that supplements the subject line
Include a working unsubscribe link in the footer

Build Your Email Template Now

No sign-up required. Generate production-ready HTML email code with proper table structure, inline styles, and responsive breakpoints.

Open Email Template Builder

Frequently Asked Questions

Why do HTML emails use tables instead of divs?

HTML emails use tables because many email clients, especially Microsoft Outlook, use rendering engines that do not support modern CSS layout. Outlook uses the Microsoft Word rendering engine, which only reliably renders table-based layouts. Tables are the only layout method that works consistently across Gmail, Yahoo Mail, Apple Mail, Outlook, and Samsung Mail. While some modern email clients support divs with CSS, tables remain the universal standard.

Do I have to use inline CSS in HTML emails?

Yes. Many email clients strip <style> tags from the head section or ignore external stylesheets. Inline CSS applied directly to each element via the style attribute is the most reliable method. Write your styles in a <style> block during development for maintainability, then use a CSS inliner tool to convert everything to inline styles before sending. You can build your email structure with the NexTool HTML Email Builder and inline the CSS afterward.

How do I make an HTML email responsive?

Use the fluid-hybrid approach: set your container to max-width: 600px with width: 100% so it scales naturally. Use percentage-based widths for columns. Add media queries that stack columns vertically on screens under 600px by switching table cells to display: block; width: 100%;. For Outlook (which ignores max-width and media queries), wrap your content in conditional comment tables with a fixed 600px width.

How do I support dark mode in HTML emails?

Add <meta name="color-scheme" content="light dark"> in the head and use the @media (prefers-color-scheme: dark) media query to define dark mode overrides. Avoid pure white backgrounds (use #f7f7f7 instead). Use transparent PNGs for logos. Test in Apple Mail and Outlook dark mode since each client handles inversion differently. Check color contrast in both modes with the NexTool Color Contrast Checker.

What is the best way to test HTML emails across clients?

For free testing, send your email to personal Gmail, Outlook.com, and Yahoo Mail accounts and check on both desktop and mobile. Use the NexTool Email Template Builder to preview your HTML structure before sending. For professional testing, services like Litmus and Email on Acid render your email across 90+ clients simultaneously, saving hours of manual testing. Always test with images disabled to verify your alt text and background color fallbacks work correctly.

Explore 150+ Free Developer Tools

Email Template Builder is just the start. NexTool has free tools for HTML, CSS, colors, accessibility, encoding, and much more.

Browse All Free Tools

NexTool Team

We build free, privacy-first developer tools. Our mission is to make the tools you reach for every day faster, cleaner, and more respectful of your data.