Responsive Email Tester

Key takeaways

• Device width presets + custom
• Media-query estimated support flags
• Hybrid table patterns encouraged
• Not a real-device screenshot lab

What is a responsive email tester?

A responsive email tester shows campaign HTML at common mobile and desktop widths and flags media-query usage against estimated client support.

Most emails still ship a ~600px hybrid layout. This intent centers width presets (including custom) and mobile-oriented findings while reminding you that many clients partially support or ignore media queries.

Features

• Width presets

  Desktop, 600, 480, 375, 360, 320, plus custom pixel width.

• Zoom control

  Inspect dense layouts without leaving the workspace.

• Mobile score slice

  Health breakdown includes a mobile-oriented component.

• Client estimates

  See which clients partially support media queries.

How it works

1. 1

   Paste responsive HTML

   Include your media queries and fluid image styles.

2. 2

   Step through widths

   Switch presets or enter a custom width to spot overflow.

3. 3

   Fix stacking, then device-proof

   Adjust tables/CSS, then verify on real phones and tablets.

Example walkthroughs

• Fluid image

  max-width fluid images are the baseline for hybrid responsive emails.

  <img src="https://images.unsplash.com/photo-1557804506-669a67965ba0?auto=format&fit=crop&w=600&h=240&q=80" width="600" alt="Wide hero" style="display:block;width:100%;max-width:600px;height:auto;border:0;" />

• Stacked mobile CTA block

  Stacked full-width buttons beat side-by-side CTAs on narrow widths.

  <table role="presentation" width="100%" cellpadding="0" cellspacing="0">
    <tr><td style="padding:8px;font-family:Arial,sans-serif;">
      <a href="https://example.com/a" style="display:block;padding:14px;background:#0B5FFF;color:#fff;text-align:center;text-decoration:none;">Primary</a>
    </td></tr>
    <tr><td style="padding:8px;font-family:Arial,sans-serif;">
      <a href="https://example.com/b" style="display:block;padding:14px;background:#111111;color:#fff;text-align:center;text-decoration:none;">Secondary</a>
    </td></tr>
  </table>

Use cases

• Mobile-first newsletters

  Confirm heroes and CTAs before a Friday send.

• Hybrid template audits

  Check that layouts still work when media queries are ignored.

Code snippets

• Simple max-width media query

  css

  Common hybrid pattern - still verify clients that strip or limit queries.

  @media only screen and (max-width: 600px) {
    .wrapper { width: 100% !important; }
    .stack { display: block !important; width: 100% !important; }
  }

Common errors

• Horizontal scroll on phones

  Cause: Fixed-width tables or images wider than the viewport.

  Fix: Use fluid images and width=100% wrappers; test at 320–375.

• Media query ignored

  Cause: Client removes or limits style blocks / queries.

  Fix: Ensure the no-query fallback still stacks acceptably.

About Responsive Email Tester

Responsive Email Tester is for teams debugging “it looked fine on desktop.” Paste HTML, step through 600 → 320 widths, and watch how fluid images and stacked columns behave in the sandboxed iframe while the analyzer notes media-query usage against estimated client support across Gmail, Outlook, Apple Mail, and others.

Unlike the parent overview page, this landing speaks mobile and responsive search intent with width-centric examples and FAQs. You still get the shared client matrix and health score from HTML Email Preview, so layout fixes transfer directly into your ESP without switching tools mid-QA.

Processing stays private in the browser. Width simulation is CSS viewport sizing inside an iframe - not BrowserStack device farms - so always confirm on real phones after you fix stacking bugs here. Treat media-query support as estimated; many clients still ignore or partially apply queries.

Best practice: design hybrid layouts that degrade without media queries, keep tap targets large, validate fluid images at 320px, and combine this pass with Gmail Email Preview when mobile Gmail is your top open client before a campaign goes live.

Frequently asked questions

Explore more

• HTML Email Preview

  Open the full HTML Email Preview workspace.

• All developer tools

  Browse formatters, converters, encoders, and more.

• Developer tools

  JWT decode, UUID, regex, timestamps, Markdown preview, and everyday helpers.

• Privacy

  How client-side tools handle your data.

• Gmail Email Preview

  Related intent page in the HTML Email Preview cluster.

• Outlook Email Preview

  Related intent page in the HTML Email Preview cluster.

• Email Dark Mode Tester

  Related intent page in the HTML Email Preview cluster.