Responsive HTML Email: Code, CSS & Mobile Layouts

Introduction

To create a responsive HTML email, start with a fluid, table-based layout, make images scale to the available width, and add mobile CSS only where it improves the reading experience. Then test the finished email in the email clients your audience actually uses.

A webpage is generally rendered by a browser using relatively consistent web standards. An email is different. Individual email clients can support, ignore or modify different parts of your HTML and CSS.

In this guide, you will find a practical responsive HTML email code example, a two-column layout pattern that can stack on mobile, and troubleshooting tips for common issues such as horizontal scrolling, images overflowing their containers and columns failing to stack. I also cover Outlook and Gmail compatibility, dark mode, accessibility and cross-client testing.

Related guides: See the Outlook HTML Email Development guide, Dark Mode Email Development guide, and HTML Email Accessibility guide.

What Is Responsive HTML Email?

Responsive HTML email is an email designed to adapt its layout and content to the recipient's screen size and email client. A good responsive email remains readable on a phone without horizontal scrolling while preserving a clear hierarchy on desktop. The most reliable starting point is usually a fluid outer table, a constrained content container, scalable images and carefully tested mobile styles.

A desktop email may use a centered container around 600–700 pixels wide, while the same email on a phone should use the available screen width without creating horizontal scrolling.

<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td align="center">
      <table role="presentation"
             width="600"
             cellpadding="0"
             cellspacing="0"
             border="0"
             style="width:100%;max-width:600px;">
        <tr>
          <td style="padding:24px;">
            Email content
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Responsive development is not simply about making an email smaller. Images, typography, spacing, buttons and columns must remain usable on smaller screens.

Why Email Development Is Different From Web Development

If you come from traditional frontend development, HTML email can feel unnecessarily restrictive. On a website you might naturally use Flexbox, CSS Grid, JavaScript, external stylesheets and advanced CSS.

Email development requires a much more conservative approach because different clients use different rendering engines and support different portions of HTML and CSS. If you want a direct comparison, see HTML email vs web HTML.

My approach is to design for the most restrictive important client first, then progressively enhance where better support exists.

Email Client Compatibility

Before writing the HTML, I consider the target email clients. Common targets include Outlook, Gmail, Apple Mail, Yahoo Mail and mobile email applications.

There is no universal “perfect HTML email.” The right question is: which email clients do my recipients actually use, and what level of rendering consistency do I need?

Table-Based Email Structure

Tables are still an important part of professional HTML email development. I regularly use nested tables for layout because they provide predictable behavior across email clients, particularly when Outlook compatibility is required.

<table role="presentation" width="100%">
  <tr>
    <td align="center">

      <table role="presentation" width="600">
        <tr>
          <td>Header</td>
        </tr>
        <tr>
          <td>Content</td>
        </tr>
        <tr>
          <td>Footer</td>
        </tr>
      </table>

    </td>
  </tr>
</table>

For layout tables, I prefer role="presentation" so assistive technologies do not interpret the layout structure as meaningful data.

Responsive CSS

Media queries can help an email adapt to smaller screens, but I do not depend entirely on them. I first build a strong fluid foundation using percentage-based containers, responsive images and sensible spacing.

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

  .mobile-padding {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .mobile-stack {
    display: block !important;
    width: 100% !important;
  }

  .mobile-center {
    text-align: center !important;
  }
}

Media queries are useful, but email-client behavior still needs to be validated. The goal is graceful degradation rather than assuming every client behaves like a modern browser.

Responsive HTML Email Troubleshooting

When a responsive HTML email breaks on mobile, identify the symptom before changing the whole layout. These are useful first checks; always confirm the fix in the email clients and devices supported by your campaign.

Next step: Use the HTML email testing workflow to reproduce the issue and verify the fix across relevant clients.

Responsive HTML Email Code Example

A reliable responsive HTML email usually combines a fluid outer wrapper, a constrained content container, responsive images and mobile-specific CSS. If you are looking for a practical responsive HTML email code example, the structure below is a useful starting point for a production email layout.

<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td align="center" style="padding:0 16px;">
      <table role="presentation"
             width="600"
             cellpadding="0"
             cellspacing="0"
             border="0"
             style="width:100%;max-width:600px;">
        <tr>
          <td style="padding:24px;">
            <img src="hero.jpg"
                 width="552"
                 alt="Responsive email example"
                 style="display:block;width:100%;max-width:552px;height:auto;border:0;">

            <h1>Responsive HTML Email</h1>

            <p>Build the layout for desktop and make it
            comfortable to read on smaller screens.</p>

            <a href="https://example.com"
               style="display:inline-block;padding:14px 24px;">
              Read the guide
            </a>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

<style>
@media screen and (max-width:600px) {
  .mobile-full-width {
    width:100% !important;
  }

  .mobile-padding {
    padding-left:20px !important;
    padding-right:20px !important;
  }
}
</style>

Why this approach works

• Use a fluid outer table so the email can adapt to available width.
• Keep the main content container constrained for comfortable desktop reading.
• Make images responsive and prevent unexpected overflow.
• Use media queries for mobile-specific adjustments where supported.
• Keep fallbacks simple because not every email client supports modern CSS equally.
• Test the final HTML in the actual clients used by the campaign audience.

Two-Column Responsive HTML Email Example

A common request is an HTML email with two columns on desktop and a single column on mobile. Use presentation tables for the structure, then apply a mobile class to each column. The side-by-side layout is the base; the media query stacks the columns in clients that support it.

<style>
@media screen and (max-width:600px) {
  .email-container { width:100% !important; }
  .column { display:block !important; width:100% !important; }
  .column-content { padding:16px !important; }
}
</style>

<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td align="center">
      <table role="presentation" class="email-container" width="600"
             cellpadding="0" cellspacing="0" border="0"
             style="width:100%;max-width:600px;">
        <tr>
          <td class="column" width="300" valign="top" style="width:50%;">
            <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
              <tr><td class="column-content" style="padding:20px;">
                <img src="https://example.com/image.jpg" width="260" alt="Product preview"
                     style="display:block;width:100%;max-width:260px;height:auto;border:0;">
              </td></tr>
            </table>
          </td>
          <td class="column" width="300" valign="top" style="width:50%;">
            <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
              <tr><td class="column-content" style="padding:20px;">
                <h2 style="margin:0 0 12px;font-size:22px;line-height:1.3;">Your heading</h2>
                <p style="margin:0;font-size:16px;line-height:1.5;">Your supporting copy goes here.</p>
              </td></tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Implementation notes: replace the example image URL and copy with real campaign content. The CSS shown is a starting pattern, not a guarantee that every client will stack columns. Some Outlook versions may ignore media queries, so keep the desktop fallback acceptable and test the delivered email in your target clients before sending.

For production email development, this code is a foundation rather than a universal template. Outlook, Gmail, Apple Mail and mobile clients can interpret HTML and CSS differently, so responsive email code should always be followed by rendering and accessibility testing.

Developer resource: Explore the HTML Email & Developer Toolkit for practical browser-based email development and QA tools.

Mobile Email

Mobile email is not simply a smaller desktop email. I pay particular attention to readable font sizes, button dimensions, image scaling, stacking, horizontal spacing, line height and long headlines.

A two-column desktop section may need to become a single-column section on mobile:

Desktop:
[ Image ] [ Content ]

Mobile:
[ Image ]
[ Content ]

The objective is to make the content easier to consume, not merely make everything smaller.

Outlook Compatibility

Outlook is one of the areas where practical email-development experience matters most. Some Outlook environments have historically used Microsoft Word-based HTML rendering, which can produce results very different from a browser.

Common Outlook issues include unexpected spacing, padding differences, background-image problems, button rendering, white lines and unusual handling of dimensions.

VML for Outlook

When legacy Outlook requirements justify it, I use VML conditional code for elements such as buttons and background images. For a deeper look at common Outlook-specific problems, see my guide to Outlook HTML email rendering issues. A production button may contain a standard HTML fallback plus an Outlook-specific VML version.

More Outlook help: See the Outlook HTML Email Development guide for detailed rendering fixes.

Gmail Compatibility

Gmail supports many modern CSS features, but it should still be tested independently. I pay particular attention to CSS placement, mobile rendering, image scaling, typography, dark mode, link styling and long-email behavior.

One of the most important lessons from production email development is: never assume that because an email looks correct in Chrome, it will look identical in Gmail.

Related testing guide: See How I Test HTML Emails Before Production for practical cross-client testing guidance.

Apple Mail

Apple Mail generally provides strong support for modern HTML and CSS compared with more restrictive email clients. This makes it possible to create sophisticated responsive treatments.

However, a design that looks excellent in Apple Mail can still break in Outlook. I therefore treat Apple Mail as an important rendering target, not as the benchmark for every client.

Dark Mode

Dark mode is now an important part of modern email development. An email that looks perfect in light mode can become difficult to read when the client or operating system changes its appearance.

@media (prefers-color-scheme: dark) {
  .dark-bg {
    background-color: #111111 !important;
  }

  .dark-text {
    color: #ffffff !important;
  }
}

For a deeper practical guide to dark-mode rendering, see my HTML email dark mode guide. This is only a starting point. Dark-mode support varies by email client, so the final email must be tested in the clients that matter to the audience.

Accessibility

Accessibility should be part of email development from the beginning, not something added during final QA.

• Use meaningful alt text.
• Maintain sufficient color contrast.
• Use readable typography and logical spacing.
• Write descriptive link text.
• Do not communicate important information through color alone.
• Use appropriate table roles.
• Test the experience with assistive technologies when required.

Accessibility guide: See HTML Email Accessibility for WCAG, alt text, screen readers and testing techniques.

Testing

Testing is one of the most important parts of professional email development. My workflow is not “Code → Send → Done.”

I use a process closer to: Design → Develop → Validate → Render test → Fix → Accessibility test → Final QA → Send.

I have used Litmus and BrowserStack as part of email QA and rendering validation. For a more detailed workflow, see how I test HTML emails before production. The exact test matrix should always reflect the audience and supported clients.

Email QA resources: See How I Test HTML Emails Before Production and the Email Campaign QA Checklist.

Common Mistakes

1. Treating email like a website: modern web techniques do not automatically translate to email.
2. Testing only in a browser: Chrome is not an email client.
3. Ignoring Outlook: important B2B audiences often require careful Outlook testing.
4. Forgetting mobile: desktop layouts can become unusable on narrow screens.
5. Ignoring dark mode: colors and backgrounds can change unexpectedly.
6. Using images for everything: important messaging should not depend entirely on images.
7. Poor alt text: important visual information should have meaningful alternatives.
8. Overcomplicating tables: use tables deliberately and keep the structure maintainable.
9. Skipping final QA: a content or image change can introduce a new rendering issue.

Best Practices

After years of working with production email campaigns, these are the principles I follow most consistently:

• Build with email-client compatibility in mind from the beginning.
• Use table-based layouts when broad client compatibility requires them.
• Use inline CSS where appropriate.
• Keep the main email container reasonably constrained.
• Make images responsive.
• Use reliable fallback fonts.
• Build mobile behavior deliberately.
• Use VML when legacy Outlook requirements justify it.
• Test dark mode.
• Test accessibility.
• Add meaningful alt text.
• Test actual links and tracking.
• Validate the final HTML, not just the development version.
• Use rendering tools such as Litmus or BrowserStack where appropriate.
• Test after every major content or structural change.

FAQ

Responsive Email Validation Matrix

Use a small, consistent matrix to verify that responsive behaviour survives real email-client rendering. Choose the exact clients and devices based on audience data and project requirements.

For each test, record the template version, client/device, pass or fail, screenshot, defect owner and retest result. Repeat the relevant checks after changing shared modules or responsive CSS.