Help CenterEditor and TemplatesBest Practices and FAQsWhy do I see discrepancies between Mailmodo editor preview and actual email client display?

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:

  1. Most modern clients support media queries, but older ones don't, causing design issues. For e.g. unwanted content will be displayed.
  2. 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.
  3. 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.

Was this article helpful?