Solved

Email Template Formatting issues

M
Rank
Badge +2

Hi Guys, I am having some issues with the formatting of an email. It is an issue I have not encountered before and I am hoping you may be able to help. The email has a Typeform survey embedded, which we have not done before and so I am wondering if this is causing the issue. 

 

When I send an email preview to myself (on a Mac) it is showing absolutely fine, but my colleagues (on a PC) have issues viewing the content. The phone previews are absolutely fine, it is desktop that seems to be the issue. It is showing these black squares and the positioning of the blocks is completely off. The following image is what can be seen by them, and this is after pressing the download content button.

 

p.s. if you. are based in the UK and you do fancy winning a year’s supply (we’ve changed from a month to a year!), feel free to subscribe to FUEL10Ks emails.

Thanks in advance for your help!

Megan

icon

Best answer by Omar 9 May 2022, 17:45

View original

5 replies

stephen.trumble
Rank
Userlevel 7
Badge +60

Hey @Megan Surman 

Welcome to the Klaviyo Community!

What email service provider are you viewing this email on? Outlook sometimes skews HTML emails because all versions since Outlook 2007 use Microsoft Word to render HTML/CSS. Because of this, an email display may look slightly off in newer versions of Outlook from what you initially design and preview in Klaviyo. If it’s not Outlook, do you have different desktop and mobile settings on the template?

 

-Stephen
M
Rank
Badge +2

Hi @stephen.trumble thanks so much for replying!

Yes, they are being viewed on Outlook, both from my Mac and also my colleagues laptop (which is the one showing these black blocks when I send a test preview). Is there a way to ensure that this doesn’t happen? We’ve never had this issue with previous emails, so I am not sure if it is the integrated Typeform causing it. Thanks, Megan

Omar
Rank
Userlevel 7
Badge +44

:-) Outlook sometimes skews HTML :-)…

Make that it Always skews HTML ;-)

Outlook on Ios is the worse!

 

@Megan Surman the best way to go about this is to add height and width as static html code. I shared information about solving this in this post

 

I'll repost it here, hope it helps:

The way Klaviyo renders the image block at the moment (with the old editor) uses styles to size the image. Outlook does not look at css styles and completely disregard these and blows up the images.

In order to make sure the image is a fixed size I would recommend using a text block and adding that image in the text block. Then click the code button (Switch to HTML view) and add width= and height= to that specific image section (see example below).

 

Helping E-commerce brands maximize Lifetime Value & Profits with Klaviyo, CRO & CVO - Get your free Audit - https://link.polarisgrowth.com/free-audit
M
Rank
Badge +2

HI @Omar thanks so much! I shall give this a go :) 

stephen.trumble
Rank
Userlevel 7
Badge +60

Hey @Megan Surman 

Let @Omar and myself know how it goes! Please share any learning you may have, I know it will help some others in the community!

-Stephen

Reply


Most helpful members this week

Terms & ConditionsCookie settings

Links & Resources

Platforms

Partners

Useful Things

About

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