Gmail Background Color and Outlook Fonts/Widths

Hi CM community!

I'm preparing a new responsive email newsletter design that is giving me some specific headaches that I can't quite figure out. See the latest code and test results.

+ In the Gmail results, I'm getting inconsistent background color, which should be supported according to CM's CSS guide.

+ In the Outlook results, I'm dealing with a complete dismissal of my font-family stack, and the client is ignoring my table / td widths (it's opting to display 100% width instead).

I would be enormously grateful for any insights!

Thanks,
Armistead

roshodgekiss roshodgekiss, 3 years ago

Hi Armistead, happy to help out here :) I took a look at your campaign and code - which are wonderful! - and noticed a few things which can easily be fixed.

> + In the Gmail results, I'm getting inconsistent background color, which should be supported according to CM's CSS guide.

There are a couple of email clients, I think Gmail included, which don't honour hex colour shorthand. For example, the bgcolor in...

<table class="head-wrap" bgcolor="#000">

... should be bgcolor="#000000". Same goes for #fff -> #ffffff etc.

> + In the Outlook results, I'm dealing with a complete dismissal of my font-family stack, and the client is ignoring my table / td widths (it's opting to display 100% width instead).

Two things with Outlook. First of all, most recent editions don't support web fonts. So 'Open Sans' won't work in * { font-family: 'Open Sans', Helvetica, Arial, sans-serif; }

The second issue is that Outlook has issues with font names with spaces in them. So font stacks including "Open Sans", "Times New Roman" etc tend to fail catastrophically. There is one workaround and that is using <font family=""> tags around your text - this will solve the 'spaces in names' issue (and ensure fallbacks work), but not the lack of web font support.

Thanks, Armistead - if you send via CM, pop us a line as we'd love to consider your newsletter for our gallery :) Have an excellent day!


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
armisteadbooker armisteadbooker, 3 years ago

Thanks for your prompt and awesome help, Ros! As always the CM support team rocks! :)

The font-stack solution is totally helping now. Outlook is gracefully degrading to the non webfont choices and works great. And Gmail is respecting background colors now.

One additional question: are you aware of any reason that Gmail would show the mobile version only for a responsive template instead of the regular sized version? That's what my latest acid tests are showing. I only knew that Yahoo defaulted to the mobile media query, not Gmail. Any ideas?

roshodgekiss roshodgekiss, 3 years ago

> One additional question: are you aware of any reason that Gmail would show the mobile version only for a responsive template instead of the regular sized version?

That is certainly very strange - I just ran a test and I'm still getting a negative result for media query support. The campaign also displays the "desktop" version, as expected: http://cl.ly/image/1k0p1f2Y1S3V

Could you kindly try testing in a live Gmail account and let us know what result you get? How very odd!


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
Redferret, 3 years ago

My guess would be that it's not showing the mobile version, It's just collapsing some of the responsive tables.


Gmail app apologist

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098