Why do I see discrepancies between Mailmodo editor preview and actual email client display?
Last updated September 17, 2024
When designing email templates in the Mailmodo editor, you might notice that the preview shown in the editor sometimes differs from the final appearance in an email client. This is a common occurrence due to several factors related to how different email clients render HTML and CSS.
In this article, we try to highlight different categories of issues and the specific points under each that can cause these discrepancies.
Reasons for discrepancies between Editor Preview and Email Client
Email Client Rendering Engines
Different email clients use various rendering engines, causing email templates to display differently.
Web-based clients like Gmail, Outlook.com, and Yahoo Mail, desktop clients like Outlook, Apple Mail, and Thunderbird, and mobile clients like mobile Gmail, Apple Mail, and Outlook all interpret HTML and CSS uniquely, leading to these variations.
HTML and CSS Support
CSS and HTML support varies across email clients, causing inconsistencies in email styling and layout. Here are some examples for the same:
- Most modern clients support media queries, but older ones don't, causing design issues. For e.g. unwanted content will be displayed.
- Older Outlook versions don't support modern CSS like flexbox and grid and need inline CSS. Also, nested table and HTML5 tags are not fully supported.
- Text rendering varies across clients, with web fonts not universally supported and differences in font sizes and line heights affecting text appearance.
Here is the list of HTML and CSS capabilities supported across all the email clients.
Images and Media
The handling of images and other media can vary widely across email clients.
- Image Blocking: Some clients (especially in the enterprise setup) block images by default, requiring users to manually enable them.
- Alt Text: Variations in how alt text for images is displayed can impact the visual layout.
- GIFs and Videos: Not all clients support animated GIFs or embedded videos, which can lead to broken or static content.
Interactive Elements
Interactive elements like forms are not supported across all the email clients. So, the fallback experience will differ a lot across different client. For e.g. since Outlook doesn't support form elements, the fallback experience for simple form is very different from what we display in the editor preview.
Frequently seen rendering issues between Mailmodo Editor Preview and actual Email Clients
AMP not rendering
AMP emails may not render on the email client for multiple reasons like sender domain isn't approved, unsupported email client, email size exceeds 200kb, and so on. See the guide for detailed reasons for AMP not rendering.
Emails are getting clipped on Gmail
Your recipient say they only got part of your email. This happens when Gmail clips the email because it exceeds the size limit, hiding part of the content. See the detailed guide on why Gmail clips your email and how to avoid it.
Jump scrolling issue with AMP email on Gmail iOS
In an AMP email in Gmail on iOS, the email content jumps or shifts unexpectedly when a user interacts with an AMP component like a form or a widget. This is an Gmail iOS specific bugs and there is no workaround for this issue. To learn, check out the detailed guide .
Formatting break when emails are forwarded
When emails are forwarded, email client removes existing CSS formatting which breaks the layout and emails are not displayed properly on the forwarded email recipient inbox.
Show / hide block not working on email client
Due to lack of media query functionality, show / hide block functionality doesn't work on Yahoo and some version of Outlook.
Gmail on Android inverting colors of images below a certain size
Gmail on Android can sometimes invert smaller-sized images when the device is in dark mode which can make them look odd or distorted. To fix issues related to Dark mode, checkout Mailmodo's tool kit on Dark Mode for Email . For e.g. it is recommended to add white outline to your logo for it to render properly in Dark mode.
Rendering issue on Outlook
Given the lack of CSS support on Outlook clients, lot of times email won't be rendered properly. For e.g. table border won't be displayed, rounded corners not honored for button, widgets are always center aligned, and many more.
If Outlook comprises majority of your recipient base than try to keep your email template simple and not use advance CSS capabilities.
Best Practices to follow to avoid issues
To minimize discrepancies and ensure the best possible display across different email clients:
- Test Extensively: Use email testing tools to preview your templates in various clients and devices.
- Simplify Design: Stick to simple, universally supported HTML and CSS features. For e.g. use background color instead of background image for blocks, use filled instead of outlined button.
- Responsive Design: Ensure your email is responsive and looks good on all screen sizes.