Back to Tools

Email Responsive Preview

Preview your email HTML at different screen sizes to see how it renders on mobile, tablet, and desktop. Compare side by side at 320px, 375px, 480px, 600px, and 768px widths.

About this tool

Over 60% of emails are now opened on mobile devices, but most email developers build and test primarily on desktop. This responsive preview tool lets you see exactly how your email HTML renders at different viewport widths, from the smallest mobile phone (320px) to the standard email width (600px) to tablet landscape (768px). Catch layout issues before your subscribers do.

Why responsive testing matters for email

Email clients handle responsive design differently from web browsers. Not all email clients support media queries, and some have unique rendering quirks. Outlook uses the Word rendering engine which ignores most CSS. Gmail strips some media queries but supports inline styles. By previewing your email at different widths, you can see if your fallback styles work when media queries are ignored.

What to look for

Check that text remains readable at all widths without horizontal scrolling. Make sure buttons are large enough to tap on mobile (at least 44px tall). Verify that multi-column layouts stack properly on narrow screens. Check that images scale down without breaking the layout. Ensure your email footer remains readable and the unsubscribe link is easy to find on mobile.

Pair with other testing tools

After checking responsive behavior, run your HTML through the CSS inliner if you are using embedded styles. Check the email word counter since images and inline styles add up quickly. Use the accessibility checker to verify your email is usable for all subscribers. Finally, test your subject line length across the same devices to ensure the full experience is optimized.

For the best deliverability, make sure your email authentication is configured correctly. Check your SPF, DKIM, and DMARC records before sending to large lists.

Frequently Asked Questions

What viewport widths should I test at?

The most important widths are 320px (iPhone SE/small Android), 375px (iPhone standard), 480px (common breakpoint for email media queries), and 600px (standard email width). Testing at 768px is also useful for tablet readers. The 480px breakpoint is particularly important because many email frameworks use it as their mobile breakpoint.

Does this tool simulate actual email clients?

This tool previews your HTML in a browser iframe at different widths, which is useful for testing responsive layouts and media queries. However, it does not replicate the rendering engine of specific email clients like Outlook (which uses Word) or Gmail (which strips certain CSS). For client-specific testing, use a dedicated email testing service alongside this responsive preview.

Why does my email look different in Outlook?

Outlook desktop (2007 and later) uses Microsoft Word's rendering engine instead of a browser engine. This means it does not support many CSS properties including flexbox, grid, max-width, background images in divs, and some padding/margin behaviors. To ensure Outlook compatibility, use table-based layouts, VML for background images, and MSO conditional comments for Outlook-specific fixes.

What is the standard email width?

The standard email width is 600 pixels. This width fits comfortably in most email client preview panes without horizontal scrolling. Some modern emails go up to 640px or 700px, but 600px is the safest choice for maximum compatibility across desktop and webmail clients.

Do media queries work in all email clients?

No. Media queries are supported in Apple Mail, iOS Mail, Outlook apps (iOS/Android), Thunderbird, and some webmail clients. Gmail strips media queries in many cases. Outlook desktop ignores them entirely. This is why a mobile-first approach with inline styles as the baseline is recommended. Media queries should enhance the experience for clients that support them, not be required for readability.

How should I handle images in responsive emails?

Use the CSS property max-width: 100% on images so they scale down on smaller screens. Set actual width and height attributes on img tags for email clients that need them. For retina displays, use images that are 2x the display size. Keep file sizes small by compressing images since slow loading on mobile networks hurts engagement.

What is the best approach for responsive email design?

Start with a single-column, mobile-first layout. Use max-width instead of fixed width on your wrapper. Add media queries for enhanced layouts on wider screens. Use fluid tables (width: 100%) as the base and constrain with max-width. Inline your critical styles and keep media queries in a style block for progressive enhancement. Always test with this tool before sending.

Should I use div-based or table-based layouts for email?

Table-based layouts are still the most reliable for email. While modern email clients support div-based layouts well, Outlook desktop requires tables for reliable multi-column layouts. A hybrid approach works well: use tables for the outer structure and layout, then use divs and semantic HTML within table cells for content. This gives you the best compatibility with the cleanest possible code.

More Free Tools

View all tools

Email Name Generator

Generate professional email address ideas based on your name. Create variations for Gmail, Outlook, Yahoo, and more with our free email username generator.

Email Signature Generator

Create professional HTML email signatures for Gmail, Outlook, and Apple Mail. Choose from multiple styles and customize with your contact info and social links.

HTML Email Button Generator

Create bulletproof HTML email buttons that work in Gmail, Outlook, Apple Mail, and all major email clients. Includes VML fallback for perfect Outlook rendering.

Email Preheader Generator

Generate compelling email preheader text that complements your subject line. The preheader is the preview text shown after the subject line in most email clients.