Definition
Email client preview is the visual appearance of an email when viewed in a specific email client or on a specific device. Because email clients use different rendering engines, the same email can look significantly different in Gmail, Apple Mail, Outlook, and other clients.
Understanding email client preview differences is essential for professional email marketing. An email that looks perfect in your test environment may break in a clients used by a significant portion of your subscribers.
Major Email Client Rendering Engines
| Client | Rendering Engine | CSS Support Level |
|---|---|---|
| Apple Mail | WebKit | Excellent |
| Gmail (web) | Custom (strips many CSS) | Limited |
| Gmail (mobile app) | WebKit | Good |
| Outlook (Windows) | Microsoft Word | Poor |
| Outlook (Mac) | WebKit | Good |
| Outlook (mobile) | WebKit | Good |
| Samsung Mail | WebKit | Good |
| Yahoo Mail | WebKit | Moderate |
Common Rendering Differences
| Element | Gmail | Apple Mail | Outlook (Windows) |
|---|---|---|---|
| CSS media queries | Supported | Supported | Not supported |
| Background images | Limited | Supported | Not supported |
| Custom fonts | Not supported | Supported | Not supported |
| CSS padding | Supported | Supported | Inconsistent |
| Bulletproof buttons | VML not supported | VML not supported | VML supported |
How to Test Email Client Preview
- Use testing tools: Litmus and Email on Acid provide previews across 100+ email clients.
- Test top 10 clients: Cover the 10 most used clients by your audience. This typically covers 90%+ of your opens.
- Test on real devices: Preview tools are good, but testing on actual phones and computers catches issues that simulators miss.
- Test both loading and image-blocked states: Many clients block images by default. Test how your email looks with and without images.
- Establish a QA checklist: Create a standardised checklist for email testing that covers critical rendering elements.
Common Preview Issues
- Broken layout in Outlook: Outlooks Word-based rendering breaks modern email CSS.
- Gmail CSS stripping: Gmail removes or ignores certain CSS properties.
- Mobile font too small: Text that looks fine on desktop is unreadable on mobile.
- Image overflow: Images wider than the email container break layouts on narrow screens.
- CTA button not rendering: Button codes that work in most clients break in specific clients.
Was this useful?
Related Glossary Terms
A/B Testing
A/B testing in email marketing is the practice of sending two variations of an email to a small sample of your list to determine which version performs better before sending the winner to the remaining subscribers.
Abandoned Cart Email
An abandoned cart email is an automated message sent to customers who added items to their online shopping cart but left without completing the purchase. It is one of the highest-converting email types in ecommerce.
Above the Fold in Email
Above the fold in email refers to the content visible to a recipient before they scroll, a critical area for first impressions and primary calls to action.
Accessible CTA (Email)
An accessible CTA is a button or link coded with sufficient colour contrast, visible focus states, descriptive screen-reader text, and a minimum touch target of 44×44 pixels.
Adaptive Design
Adaptive design in email uses predefined layouts that adjust to specific device or client widths, rather than fluidly resizing to every possible screen.
AI Email Summary
An AI email summary is a short, machine-generated overview of an email's key points, shown by Gmail, Outlook and Apple Mail before a recipient opens the message. It is reshaping how email marketers think about subject lines, preview text and open rates.
Frequently Asked Questions
Test the top 10 clients used by your audience. Most ESPs provide client usage data. If you do not have this data, a standard test set includes Gmail (web + app), Apple Mail (iOS + macOS), Outlook (2019, Microsoft 365, mobile), and Samsung Mail.
Outlook for Windows is consistently the most challenging client because it uses Microsoft Words rendering engine, which does not support modern email CSS. Conditional code (VML and `2026 Email Calculator. All rights reserved.