Re: Gmail changing font color of email signature

Amy_Goldfine · ‎09-07-2017

We're having a weird issue, and Marketo Support is not able to help. Thought I'd throw this out to the Nation.

We have a new email template, and in some emails (but not all), the text at the bottom that acts as a signature (name/title/company) displays lighter in Gmail. I ran it through Litmus and it's only in Gmail (mobile app and web). If I manually change the text color in the email, it stays.

I don't like Gmail messing with my emails! Is there anything I can do in my template to keep this from happening?

Amy Goldfine
Marketo Champion & Adobe Community Advisor

Josh_Hill13 · ‎09-08-2017

Support doesn't advise on html coding.

There's probably a note here or on Github or an email dev site on how to handle this. I've seen it happen before too.

Amy_Goldfine · ‎09-08-2017

I talked to support more, and they suggested using a global HTML token with the proper color for the signature. That actually worked, and has the benefit of scale. I'm still annoyed with Gmail, but it's a good enough workaround for me for now.

Amy Goldfine
Marketo Champion & Adobe Community Advisor

Dave_Roberts · ‎09-13-2017

Hey Amy-

In my experience, I've found that if there were an "order of operations" like in math (PEMDAS) for email, that gMail Apps would be the first 'order' of business when it comes to coding "safely" for the email universe. When I code up an email, I'll start with gMail mobile and scale up from there, b/c it's the "least capable" of the lot. Im a fan of Google products, so I like to think it's just modest and doesn't like to compete for attention

In terms of 'order' - inline styles with an !important tag are boss. Next in line for some clients are styles with an !important tag in the <style> element in of your <head> but this isn't read by all clients. gMail has made significant strides here in the last year and one of the things I've seen cause issues is email frameworks that were written before Oct 2016 - email literally "read" differently to gMail "back in the day".

Next, (#3) would be inline styles within your HTML. Aside from using !important tags, this is the most explicit way I've found to add styles "for sure" to my content. Attributes (i.e. width="100%") are about the same as inline styles in the style attribute (i.e. style="width:100%;"). #4 is the <style> element and if you start from a mobile-first frame of mind, you can use media queries to control the display of your content around 640px (I use both max and min 640px media queries).

It may be that you need to style "inside out" to get the expected functionality you're after here - if you'd like to post your code, I'd be happy to take a look and make a suggestion for the greater good.

Thanks,

Dave