Responsive Email Design: Layouts Without Media Queries

Three approaches to responsive email

There are three main strategies, each with different tradeoffs in compatibility and control:

Media query support across clients

Before choosing an approach, check which clients your audience uses. Here's the current media query support landscape:

Fluid layout example

The fluid approach is the safest default. It uses percentage widths with max-width, wrapped in MSO conditionals for Outlook's fixed-width requirement:

<!-- Fluid two-column layout -->
<table role="presentation" width="100%" cellpadding="0" cellspacing="0">
  <tr>
    <td style="padding: 0 20px;">

      <!--[if mso]><table role="presentation" width="600" align="center"
        cellpadding="0" cellspacing="0"><tr><td><![endif]-->

      <div style="max-width: 600px; margin: 0 auto;">
        <table role="presentation" width="100%" cellpadding="0" cellspacing="0">
          <tr>
            <!-- Left column: fluid 50% -->
            <td style="width: 50%; padding-right: 10px; vertical-align: top;">
              <img src="image.png" alt="Feature"
                style="max-width: 100%; height: auto;" />
            </td>
            <!-- Right column: fluid 50% -->
            <td style="width: 50%; padding-left: 10px; vertical-align: top;">
              <p style="margin: 0; font-family: Arial, sans-serif;
                font-size: 14px; line-height: 1.6; color: #333;">
                Your content here.
              </p>
            </td>
          </tr>
        </table>
      </div>

      <!--[if mso]></td></tr></table><![endif]-->

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

Where Outlook Classic fits

Outlook Classic on Windows ignores max-width, which is why the fluid example wraps its container in a 600px table inside <!--[if mso]> comments that only Outlook reads. How those conditional comments work is in Outlook email templates; for columns that stay side by side in Outlook and stack everywhere else, see Outlook ghost tables or the ghost table generator.

Mobile-first vs desktop-first for email

On the web, mobile-first is standard. For email, it depends on your audience:

• B2C (consumer): mobile-first. Litmus's client data calls mobile the primary reading environment for most subscribers, and Apple clients alone took 76.56% of the opens it tracked in September 2026. Start with a single-column layout that stacks naturally.
• B2B (enterprise): desktop-first. Outlook on Windows dominates enterprise email, and it doesn't support media queries at all.

Dark mode is a separate job

A layout that adapts to every screen can still break when the reader switches to dark mode: some clients recolour the email themselves, others apply your own prefers-color-scheme styles. That is covered in the dark mode email guide. For the rest of the build, from the skeleton to sending, start at the HTML email guide.