Responsive Email Template for Newsletters

What Makes an Email Template "Responsive"?

A responsive email template adapts its layout based on the screen size. On desktop, you might have a two- or three-column layout. On mobile, those columns stack vertically so everything remains readable. This principle is central to our email width best practices guide.

The key techniques are:

• Fluid tables — Table widths set as percentages with max-width
• Media queries — Adjust layout at mobile breakpoints (480px)
• Scalable images — Images set to max-width: 100%
• Stacking columns — Multi-column to single-column on small screens
• Larger touch targets — Buttons at least 44×44px on mobile. For more, see our HTML email best practices guide

Basic Responsive Newsletter Structure

<!-- Outer wrapper: 600px on desktop, 100% on mobile -->
<table role="presentation" width="600"
  style="max-width: 600px; width: 100%; margin: 0 auto;">
  
  <!-- Header with logo -->
  <tr>
    <td style="padding: 20px; text-align: center;">
      <img src="logo.png" alt="Logo" 
        style="max-width: 200px; height: auto;" />
    </td>
  </tr>
  
  <!-- Content block -->
  <tr>
    <td style="padding: 20px;">
      <h1 style="font-size: 24px; margin: 0 0 16px;">
        Your newsletter headline
      </h1>
      <p style="font-size: 16px; line-height: 1.5;">
        Newsletter content...
      </p>
    </td>
  </tr>
  
  <!-- CTA button -->
  <tr>
    <td style="padding: 20px; text-align: center;">
      <a href="#" style="background: #3b82f6; color: #fff;
        padding: 14px 28px; text-decoration: none;
        border-radius: 6px; font-weight: 600;">
        Read More
      </a>
    </td>
  </tr>
</table>

Responsive Columns That Stack on Mobile

The most common newsletter pattern is a multi-column layout that stacks on mobile. Here's the technique using inline-block display:

<!--[if mso]>
<table role="presentation" width="600"><tr>
<td width="300" valign="top">
<![endif]-->
<div style="display: inline-block; width: 100%;
  max-width: 300px; vertical-align: top;">
  <!-- Column 1 content -->
</div>
<!--[if mso]>
</td><td width="300" valign="top">
<![endif]-->
<div style="display: inline-block; width: 100%;
  max-width: 300px; vertical-align: top;">
  <!-- Column 2 content -->
</div>
<!--[if mso]></td></tr></table><![endif]-->

Can I Build This Without Writing Code?

Yes! MailViewr's free drag-and-drop email builder lets you create responsive newsletter templates visually. Drag columns, images, buttons, and text blocks onto the canvas. The builder generates email-safe HTML with responsive breakpoints built in.

You can export the HTML to use in any email platform — Mailchimp, Brevo, SendGrid, or your own sending infrastructure.

Free Drag-and-Drop Email Builder with HTML Export

If you're searching for a "free drag and drop email builder with HTML export," MailViewr is built for exactly that. Build your template visually, preview it across Gmail, Outlook, and mobile, then export clean HTML — all free, no signup required.

Build Your Newsletter Template