Solved

Wrong Display of Preview Mail in different Mailing Providers

  • 1 December 2021
  • 6 replies
  • 727 views
M
Rank
Badge +2

Hi together,

sending a preview Mail on different Mailing Providers, It does not display the Preview Mail correct.

I hope someone can help me or give me some ideas how to fix this. I’m working with the new Editor.

Thank you!

 

Please have a look on my Screenshot Comparisons:

  1.  It does not show all Elements in Footer

This is, how it should actually looks like:
 

 

  1. Some Elements i set one for Desktop and one for Mobile, in the preview Mail it shows both at the same time

 

This is how it should actually looks like:

 

icon

Best answer by Taylor Tarpley 3 December 2021, 00:17

View original

6 replies

Taylor Tarpley
Rank
Userlevel 7
Badge +59

Hi @MayaBrandUp. 

 

Welcome to the Community! We are so happy you’re here! 

 

Would love to help with this, sorry you're experiencing these display issues! Do you mind sharing one what specific email client or clients, you are using when you see these display issues? I would consider using tools for email preview services like Litmus or Email on Acid. These services help you see what your emails would look like on different platforms. For instance, certain email providers, such as Outlook, will display emails differently than they would in all other email clients. Unfortunately, this is an industry-wise issue with Outlook.

 

Additionally, these issues could stem from the particular client/device you're viewing not supporting media queries, meaning it won’t be able to tell which block to display in your email. 

 

However, we’ll be able to know more of what’s going on here when we identify the provider you’re using when seeing these display issues. 

 

Thank for being a part of our Community!

-Taylor 

Check out all our Black Friday / Cyber Monday resources on our BFCM tab! https://community.klaviyo.com/black-friday-cyber-monday-2023-76
M
Rank
Badge +2

Thanks Taylor for your help! I will try your advice using Litmus or Email Acid for preview.

Anyways, the display issues i had with Gmail.com and Web.de

 

Hope you can help me with that!

Taylor Tarpley
Rank
Userlevel 7
Badge +59

Hi @MayaBrandUp, 

 

Thanks for that additional info! This was needed info to pinpoint the issue here. 

 

If you can ensure you have mobile optimization turned on and there is no external inline code in your blocks, this can be done by navigating into the source code of your bocks, then it would seem that this an issue of Google Chrome Browser Version not supporting media queries. Media queries are CSS statements that render content in mobile screen sizes, so it tells mobile only/desktop only to show at the appropriate screen size. 

I checked these 3 resources and it looks like this environment (Web version Gmail) does not render media queries, since this environment does not render media queries, it cannot tell the desktop only content not to show:


So, unfortunately this cannot be controlled in Klaviyo it is dependent on the email client. All of the listed environments that do render media queries will show the correct blocks. 

 

Additionally, it appears your first message is experiencing Gmail Clipping. To avoid clipping, the template will have to become smaller. 

 

Thank you for your participation in the Community! 

-Taylor

Check out all our Black Friday / Cyber Monday resources on our BFCM tab! https://community.klaviyo.com/black-friday-cyber-monday-2023-76
M
Rank
Badge +2

Now i reduced the size of my Mail to 36KB all Elements are now for desktop and mobile and the mail is still clipped. I still don’t understand why that continues to happen as i reduced the size of the Mail to a minimum (only Header, Footer and some Text).

M
Rank
Badge +2

Any help for this problem please?

alex.hong
Userlevel 7
Badge +58

Hey @MayaBrandUp,

I found this article externally that could explain why you messages are being clipped and how to avoid it. 

Templates with over 75 KB of HTML can be clipped by Gmail.
Some techniques for to avoid clipping include, using 'desktop & mobile' blocks rather than one for desktop one for mobile, using just 1 product block, limiting how many header and table blocks are used, using the 'paste as plain text' button when pasting content from another source to remove any inline styles, and ensuring your images are under 5 MB, around 600px wide and compressed properly (more information on image size can be found here). 

If your issue seems to persist after checking all documentation, please show us screenshot previews of what it looks like when sending to a test email and previewing it within Klaviyo’s editor. Thank you!
Alex

Reply


Most helpful members this week

Terms & ConditionsCookie settings

Links & Resources

Platforms

Partners

Useful Things

About

  • Terms and Privacy
    © 2022 Klaviyo All rights reserved. Klaviyo and the Klaviyo logo are trademarks or registered trademarks of Klaviyo, Inc. or its affiliates.