How to Preview HTML Email on Mobile, Tablet, and Desktop

Preview the Final, Realistic Source

Use the actual email document and realistic content. Short placeholder copy can hide wrapping problems; a temporary image URL can make a design appear complete while a production asset fails. If a sending platform transforms the source, inspect both before and after import.

A secure live preview should remove active scripting and render the document in isolated frames. That protects the application while keeping normal HTML and CSS available for visual inspection.

Inspect Mobile Widths from 320 to 430 Pixels

Begin at 320 pixels because a design that works at a generous phone width can still fail in a smaller viewport or embedded pane. Move through 375, 390, and 430 pixels and note the exact point where behavior changes.

Look for horizontal table overflow, images that do not shrink, text trapped beside a fixed asset, cramped links, incorrect column order, and long destinations or translated words that break the layout. Test meaningful content rather than only a short demo.

Use Tablet Widths to Find Breakpoint Gaps

At 768 and 820 pixels, an email may sit near a conditional rule or inside a split application view. Tablet testing reveals queries that activate too early, empty space after stacking, and layouts that stretch because a maximum width is missing.

Check portrait and landscape only when orientation changes a query or available width. Orientation control swaps browser dimensions; it is not a tablet-email-client emulator.

Confirm Email Width and Desktop Containment

Inspect the intended email canvas—often around 600 pixels—separately from the outer desktop viewport. At 1024 and 1440 pixels, the message should normally remain centered and constrained rather than turning paragraphs into long lines.

Verify the outer background, padding, maximum width, and full-bleed sections. Desktop preview can expose fixed-height containers that crop once personalization or localization adds another line.

Compare Two Viewports Side by Side

Pair 375 pixels with 1024 pixels for a fast mobile/desktop comparison. Pair 390 with 430 pixels when debugging a fragile nearby breakpoint. Independent width, orientation, zoom, and fit controls help isolate the variable causing a change.

Both frames should receive the same sanitized source. Refresh reconstructs them together, fullscreen helps detailed inspection, and fit mode gives an overview of a canvas larger than its panel.

Know What Browser Preview Cannot Validate

A browser preview shows browser rendering. Email clients can remove markup, ignore CSS, block remote images, rewrite links, and apply appearance or user settings. Gmail’s CSS reference describes Gmail behavior; it is not a universal email specification.

After preview, run a source analyzer for markup, resources, accessibility, size, tracking, and security. Then send through the real production path to the environments important to the project. Only that complete workflow includes transport and receiving-client processing.

Record the viewport and source version when reporting a defect. A precise note such as horizontal overflow at 320 pixels after import is actionable; a vague statement that the email is not responsive makes diagnosis and regression testing harder.