How to Compare Email Desktop and Mobile Previews

More than half of all emails are opened on a mobile device, yet most email design tools show you a single desktop preview by default. A layout that looks polished on a widescreen monitor can have broken columns, overflowing images, and unreadable font sizes on a phone.Email Viewer lets youpreview HTML email on desktop and mobileside by side, in the same tab, across multiple client profiles — without sending a single message.

Why desktop and mobile previews are different

HTML email layouts are typically built with tables and inline CSS — the standard approach for cross-client compatibility. But table-based layouts that specify fixed pixel widths do not adjust to fit small screens unless you have written explicit mobile responsive rules.

The result is that a well-designed desktop email can look completely broken on a phone: two-column layouts become single-column but still try to show at 600px width (wider than the screen), images overflow their containers, and call-to-action buttons are too small to tap.

Checking both desktop and mobile before sending is the only way to catch these issues without sending a test message to a real device.

How to compare desktop and mobile in Email Viewer

1. OpenEmail Viewer on ToolsViewer.
2. Paste your email HTML, import a file, or select a template from the gallery.
3. In the preview toolbar, switch betweenDesktopandMobileto see the layout at each screen area size.
4. To compare both at the same time, clickAdd device. A second preview panel opens alongside the first.
5. Select different client profiles for each panel — for example, Gmail Desktop for the first and Apple Mail — iOS Mobile for the second — to compare both client and device at once.
6. Scroll both previews, toggle dark mode on each, and check the QA panel for any issues specific to mobile showing.

What to look for on mobile

When reviewing your email in the mobile preview, check for these common issues:

• Fixed-width tables forcing horizontal scroll.If your outer table is set towidth="600"without a responsive override, mobile clients will either shrink the entire email to fit (making text tiny) or show a horizontal scrollbar.
• Images without fluid sizing.Images with a fixed pixel width wider than the screen will overflow. Addmax-width: 100%as inline style on every image.
• Multi-column layouts that do not stack.Two- or three-column table layouts need a responsive rule or MSO conditional comment to stack into a single column on mobile. Without it, columns are showed side-by-side at sizes too narrow to read.
• Font sizes too small to read.Body text under 14px and headings under 18px are hard to read on a phone. Some clients (especially iOS Mail) auto-scale small text up, which can break your layout.
• Buttons too small to tap.Touch targets should be at least 44px tall. Small link-based buttons that work on desktop become difficult to tap on mobile.
• Preview text not showing.Mobile clients often show preview text (the snippet after the subject line) more prominently than desktop clients. Make sure yours is set and meaningful.

Comparing client profiles, not just screen sizes

Desktop vs mobile is one dimension. Client showing is another. The same email can look very different in Gmail Mobile vs Apple Mail iOS, even at the same screen size. Gmail Mobile may strip certain CSS; Apple Mail applies dark mode overrides. Use the client profile selector in each preview panel to check both dimensions together.

For dark mode specifically, seetesting email dark mode. Toggle the light/dark switch in each preview panel independently to check your design in both modes on both desktop and mobile.

After fixing mobile issues

Once your layout looks correct on both desktop and mobile:

• RunInline CSS to ensure your styles survive clients that strip the head.
• Work through thepre-send QA checklist to catch remaining issues before sending.
• Export the final HTML for your email platform once all previews look correct.