Email horribly broken in Gmail App on iPhone

[Guitarrista82]

Hello Community,

I am dealing with an email issue where the email appears horribly broken in the Gmail app on iPhone.

When viewing the email via my Outlook for Desktop and clicking on the View as Webpage link, the email appears fine (a little long, yes, but not "broken"):

However, when viewing it in my Gmail app on my iPhone (7 Plus), it looks like this:

(FYI, I have hidden the logos)

Top of Email:

Middle of Email:

Bottom of Email:

You can view the webpage version of the email here:  https://promos.ovstravel.com/index.php/email/emailWebview?mkt_tok=NTEyLUpKUC02MTUAAAGDduB20bbQWy7aOz... 

Any help would be much appreciated!

LK

[Jo_Pitts1]

@Guitarrista82 ,

As always, we'll need code to know what's going wrong here.

Out of interest, is this a gmail address you're sending to, or is it a GANGA (Gmail App for Non Google Accounts); i.e. an outlook account in gmail?

Cheers

[Guitarrista82]

Hi Jo,

Yes, I am sending to my Gmail address directly.

I was trying to share the code, but got the message below.

So, I've uploaded it to my Google Drive here instead.

Please let me know if you are not able to access it. 

Thank you,

LK

[Jo_Pitts1]

How should it be formatting?  Image full width, text underneath?

[Guitarrista82]

Ideally this is how the images and text would appear, and they do appear like this in desktop view.

Top of email:

Middle of Email:

Bottom of Email:

[Jo_Pitts1]

So is there not supposed to be a form of responsive behaviour for the image left/text right and text left/image right blocks?

[Guitarrista82 · Accepted solution]

Hi Jo,

Thanks for your help, again.

So, this was definitely a learning experience for me.

The issue, I discovered, was an extra } just before the </style> tag 😲 😥

In my research, I found that Gmail is very strict about CSS and things that don’t have a negative effect on email in other clients will break things in Gmail. 

If anyone wants to learn more about common issues with Gmail and email rendering, I found a few different articles, including this one: Developing HTML Emails for Gmail: 14 Tips for Coding | Email On Acid

I'm definitely going to keep this on my radar and triple check my templates using a code validation tool. Even if Marketo approves the template, there might be errors that could affect how the email renders in different email clients.

Best regards,

LK

[Jo_Pitts1]

@Guitarrista82,

I'm so happy you tracked it down.  I was guessing at a missing style - turns out I was mostly correct 🙂

Code as if EVERY email client is super strict... because often in their own (different) ways, they are.

Cheers

Jo

[Darshil_Shah1]

I would suggest using code editor/validator (there are a million of open source editors available to download) to ensure that all the braces are closed, balanced, there are no open tags, etc. 🙂

[Guitarrista82]

Yes, for sure Darshil! Thanks for the suggestion 🙂