Responsive Email Template: Free HTML Code That Works

What makes an email layout responsive?

A responsive email template is an HTML email layout that adapts to the screen it is read on: a 600-pixel two-column design on desktop becomes a single full-width column on a phone, with larger text and tap-friendly buttons. It is harder than responsive web design because email clients support far less CSS than browsers. Apple Mail on macOS and iOS supports media queries fully; Gmail's desktop webmail and apps support them only partially (no height-based queries, and the mobile apps ignore them for non-Google accounts); Gmail's mobile webmail ignores them; and classic Outlook for Windows 2007 to 2019, which renders with Microsoft Word, ignores them entirely, according to caniemail.com's test data. A template that relies only on @media therefore breaks in some of the biggest clients. The robust approach, called fluid-hybrid, makes the layout work without media queries by using percentage widths capped with max-width, then uses media queries only as enhancement where they are supported.

Fixed, fluid, hybrid, or adaptive: which approach fits?

Choose between five layout approaches by how much control you need and which clients you must support. A fixed layout uses a set width such as 600px; it is simple but forces mobile readers to pinch and zoom, so avoid it. A fluid layout uses percentage widths, so it always fills the screen, but lines get too long on wide monitors. A hybrid (fluid-hybrid) layout uses percentage widths capped with max-width: 600px, plus inline-block columns that stack naturally when the screen is narrower than their combined width; it works without media queries and is the safest default. An adaptive layout swaps fixed widths at breakpoints such as 480px using media queries. A fully responsive layout combines fluid widths with media queries to change font sizes, hide elements, or reorder content. For transactional email such as receipts, password resets, and notifications, a single-column fluid-hybrid layout covers every client with the least code; two columns are worth the extra complexity only for product grids and newsletters.

How do you build a responsive email template? Full HTML

The template below is a complete, single-column fluid-hybrid layout with an optional two-column row, tested patterns drawn from Email on Acid and Lee Munroe's open-source template. Key techniques: a wrapper table with role="presentation" so screen readers do not announce layout tables; a container with width: 100% and max-width: 600px; Outlook-only 'ghost tables' inside <!--[if mso]> conditional comments, because classic Outlook ignores max-width and needs a fixed 600px table; two columns as inline-block divs with max-width: 300px, which sit side by side above 600px and stack below it without any media query; and a single media query that only enlarges text and the button on small screens where supported. The button is a bulletproof table-cell link, so it is clickable in Outlook without images. Inline the CSS before sending, as Lee Munroe's template recommends for API-based sending, because some clients strip <style> blocks.

<!DOCTYPE html>
<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="x-apple-disable-message-reformatting">
<title>Your receipt</title>
<style>
  @media screen and (max-width: 480px) {
    .body-text { font-size: 17px !important; line-height: 26px !important; }
    .btn a { display: block !important; }
  }
</style>
</head>
<body style="margin:0;padding:0;background:#f4f5f7;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background:#f4f5f7;">
<tr><td align="center" style="padding:24px 12px;">
  <!--[if mso]><table role="presentation" width="600" cellpadding="0" cellspacing="0"><tr><td><![endif]-->
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0"
         style="max-width:600px;background:#ffffff;border-radius:6px;">
    <tr><td style="padding:32px 24px;font-family:Arial,Helvetica,sans-serif;color:#1f2933;">
      <h1 style="margin:0 0 16px;font-size:22px;">Payment received</h1>
      <p class="body-text" style="margin:0 0 24px;font-size:16px;line-height:24px;">
        We charged $49.00 to Visa ending 4242 for your October plan.
      </p>
      <table role="presentation" cellpadding="0" cellspacing="0" class="btn"><tr>
        <td style="background:#1a56db;border-radius:4px;">
          <a href="https://example.com/billing" style="display:inline-block;padding:14px 24px;
             font-size:16px;color:#ffffff;text-decoration:none;font-weight:bold;">View invoice</a>
        </td></tr></table>
    </td></tr>
    <!-- Two columns that stack below 600px without media queries -->
    <tr><td style="padding:0 12px 24px;font-size:0;text-align:center;">
      <!--[if mso]><table role="presentation" width="100%"><tr><td width="300" valign="top"><![endif]-->
      <div style="display:inline-block;width:100%;max-width:288px;vertical-align:top;font-size:14px;
                  font-family:Arial,Helvetica,sans-serif;text-align:left;padding:12px;">
        <strong>Plan</strong><br>Pro, monthly</div>
      <!--[if mso]></td><td width="300" valign="top"><![endif]-->
      <div style="display:inline-block;width:100%;max-width:288px;vertical-align:top;font-size:14px;
                  font-family:Arial,Helvetica,sans-serif;text-align:left;padding:12px;">
        <strong>Next charge</strong><br>November 1</div>
      <!--[if mso]></td></tr></table><![endif]-->
    </td></tr>
  </table>
  <!--[if mso]></td></tr></table><![endif]-->
</td></tr>
</table>
</body>
</html>

Why do responsive emails break in Outlook and Gmail?

Responsive emails break in Outlook and Gmail for different reasons, and each has a known fix. Classic Outlook for Windows renders HTML with the Microsoft Word engine, so it ignores max-width, media queries, inline-block layout, background images set in CSS, and many padding rules on non-table elements; the fix is conditional-comment ghost tables with fixed widths, and padding on <td> cells rather than on divs or links. The newer Outlook for Windows and Outlook.com use a browser engine and behave much better, but Outlook.com still drops nested media queries. Gmail strips <style> blocks it cannot parse, rewrites class names, ignores height-based media queries, and in its apps ignores media queries for non-Google accounts such as an Outlook address added to the Gmail app. The fix is to keep critical styles inline so the layout survives even when the <style> block is removed. Apple Mail is the most capable client, but its message reformatting can enlarge text unexpectedly; the x-apple-disable-message-reformatting meta tag in the template stops it.

What are the best practices for responsive email design?

Responsive email design comes down to a short list of rules that hold across clients. Keep the content width at 600 pixels maximum, the de facto standard that fits desktop preview panes. Use a single column for transactional email. Set body text to at least 16px on mobile, since iOS Mail enlarges smaller text, and line height around 1.5. Make buttons large enough to tap: WCAG 2.2 sets 24 by 24 CSS pixels as the minimum target size and 44 by 44 as the enhanced level, and a 14px by 24px padded button exceeds both. Give every image width and height attributes, alt text, and max-width: 100% so it scales down. Use system fonts such as Arial or Helvetica as fallbacks for any web font. Never put essential text only inside images, because many clients block images by default. Include a plain-text version of every email. And test in real clients before sending: Litmus and Email on Acid render your HTML across 100+ clients and devices, which catches Outlook and Gmail breakage that a browser preview never shows.

Where can you download free starting points?

Free responsive email templates come from three kinds of sources, each with trade-offs. Open-source code templates are best for developers sending through an API: Lee Munroe's responsive-html-email-template on GitHub is a widely used single-column transactional template, and Foundation for Emails from ZURB ships responsive templates built with its Inky markup and a build step that inlines CSS. Template galleries from email platforms, such as Stripo with more than 1,650 templates, Campaign Monitor, and Mailchimp, offer polished marketing designs, but they are built for those platforms' editors and often need cleanup before you can send them through your own code. Framework tools such as MJML and React Email let you write components that compile to tested table-based HTML, which is the most maintainable option for product teams. Whatever you start from, check that the template uses role="presentation" tables, includes Outlook conditional comments, stays readable with images off, and has its CSS inlined in the final HTML.

How do you send a responsive template through an API?

To send a responsive template through an email API, inline the CSS, keep the <style> block for media queries, and send the HTML together with a plain-text version in one request. With SendHQ, you can either pass the full HTML on each POST /emails request or store it as a hosted template with typed variables, publish a version, and send by template ID so content changes do not need a code deploy. If you send HTML without text, SendHQ generates a text alternative, but writing your own is more reliable for receipts and codes. Use one message object per recipient in POST /emails/batch (up to 100 per call) when template data is personalized. Before switching all traffic to a new template, send a test to your own Gmail, Outlook, and Apple Mail inboxes, then check the email's status move from sent to delivered in the event log; a layout that renders perfectly but fails authentication still lands in spam.

پرسش‌هایی که تیم‌ها می‌پرسند

منابع اصلی

• @media support in email clients — Can I email
• Code a Responsive HTML Email Template — Email on Acid
• Responsive HTML email template — Lee Munroe
• Web Content Accessibility Guidelines (WCAG) 2.2 — W3C
• Responsive Email Design tutorial — Mailtrap
• Hosted templates — SendHQ