Outlook distorts design and header image

Highlighted
Anonymous
Not applicable

Outlook distorts design and header image

Hi Marketo Nation I need some help. I've designed a branded email template using one of the 2.0 email templates. Everything looks fine in marketo and on any MAC os version of outlook but when it is opened in any version of the PC version of outlook the styles get stripped and more importantly the header image gets distorted and squished.

It also strips the style on the template that has a round circle BG shape and turns it into a square.

Screen Shot 2017-11-28 at 2.54.52 PM.png  Screen Shot 2017-11-28 at 11.23.42 AM.png

Can someone offer some solutions if they have found any?

7 REPLIES 7
Highlighted
Level 5

Re: Outlook distorts design and header image

Hi Rachel Tate-Wong,

Danyelle Felchner

You have to resize the image according to the email width for all the email clients. Example: If you have created the email having the width 600px. Then the image banner will also be in 600px.

Also, for the best practice, we use the image in the image tag rather than the background image.

Thanks & Regards,

Akshay Pant

Highlighted
Anonymous
Not applicable

Re: Outlook distorts design and header image

I am having similar issues with email designs in Outlook. There are different versions seen throughout the office which has been the strangest experience. Any help with this would be great.

Highlighted
Level 5

Re: Outlook distorts design and header image

Hi Briona Brooks

Could you please share the HTML code of the email in which you are facing issue?

Regards

Akshay

Highlighted
Anonymous
Not applicable

Re: Outlook distorts design and header image

Is there another way I can send this to you? I didn't want to copy the entire page into the editor. It is quite long. I can only attach images here.

Highlighted

Re: Outlook distorts design and header image

Hi Rachel,

This is due to how your template if being developped. It obviously is not designed to support images of this size (your image is probably too high, and the styles are not implemented in a way that is "outlook" compliant). I am sorry for stating the bad news bluntly . There is not much we can do here and you should turn to your developper. Developping email templates that fly on all device is very tricky, and you need a developper who knows how to do it.

-Greg

Highlighted

Re: Outlook distorts design and header image

I believe Rachel said she is using a Marketo 2.0 email template. I've also experienced this issue, and when I reached out my understanding was that all Marketo email templated have been developed to work for all or a majority of devices and email systems. What I've found for me is that the content area in the emails is very specific and if I enter in more copy than the template originally included then it starts to skew the background image.  I also know based on analytics that our customer mainly use Outlook, so I make sure it looks good in Outlook even if it means I add extra copy space to make the image taller. It may not look good in hotmail or other but at least for my clients it will look good.

With all that said, if there is a better solution I'd love it too.

Highlighted
Level 10 - Champion Alumni

Re: Outlook distorts design and header image

We’ve found the Marketo templates aren’t fully tested and cause issues - especially in Outlook. Your best bet is to have your templates custom developed by an agency that fully understands the email editor framework and the challenge of having the emails render properly (for the most part) across all devices, clients and OS’s. Companies like knak, Grazitti, Hoosh, Perkuto, etc.