Menu icon Foundation
Foundations-Email in Mobile Gmail ?

Hi,

I'm using Foundations For Email and am quite happy with it - thank you for a great tool!!!

However, one thing that doesn't work for me is correct rendering on mobile Gmail native apps. E.g. a mail would render beautifully - grid-wise, show/hide-wise, etc - on the iPhone Mail client and other clients, but on Android Gmail/Inbox apps - the desktop layout (both grid-wise and show/hide-wise) would appear.

I've been looking at reports and issues and trying to understand if this is a known issue due to Gmail's lack of support? Or is something wrong in my code? If so, any pointers about what could be some likely causes for this?

Thank you,

Itamar

gmailemailresponsiveness

Hi,

I'm using Foundations For Email and am quite happy with it - thank you for a great tool!!!

However, one thing that doesn't work for me is correct rendering on mobile Gmail native apps. E.g. a mail would render beautifully - grid-wise, show/hide-wise, etc - on the iPhone Mail client and other clients, but on Android Gmail/Inbox apps - the desktop layout (both grid-wise and show/hide-wise) would appear.

I've been looking at reports and issues and trying to understand if this is a known issue due to Gmail's lack of support? Or is something wrong in my code? If so, any pointers about what could be some likely causes for this?

Thank you,

Itamar

Corey Schaaf 2 months ago

Based on the compatibility docs for the latest version of foundation

*Gmail app for Android: Works - does not recognize media queries so it will render large breakpoint.

You can see the support docs for compatibility here:

https://foundation.zurb.com/emails/docs/compatibility.html

Hop you found this helpful!

 |
 |
 |
 |
 |
\/

Itamar Rogel 2 months ago

Thank you Corey! I don't know how I've missed that reference - thank you so much.

I am surprised that Gmail For Android stands out so much in its lack of support for media queries... Do you know if there are any best practices / alternatives for how to cope with this limitation?

Itamar Rogel 2 months ago

Okay, so I see that Gmail For Android should actually support media queries at this point. See here:

https://litmus.com/blog/gmail-to-support-responsive-email-design

and some pointers on how to troubleshoot that here:

https://emails.hteumeuleu.com/troubleshooting-gmails-responsive-design-support-ad124178bf81

I've tried to check for one of these pitfalls in my email but alas, I did not find an issue. I'm posting this here for two reasons:

1. Someone who bumps into this thread in the future might find this useful

2. Someone familiar with Foundations For Email might be able to shed some light if I'm supposed to expect F4E responsive features to work on Gmail at this point, and if not - given that they've rolled out support for it - why not?

Thanks,

Itamar

Wally Glenn 2 months ago

Gmail supports media queries, but there are some caveats.

 

There is no support for the following gmail types:

  • Gmail Android App
  • Gmail desktop using pop/IMAP to connect to another domain.
  • Android 5.1, 6.0, 7.0
  • mobile webmail
  • Google Apps Free Edition

 

Gmail supports some media queries:

  • Types: all, screen
  • Keywords: and, only
  • Queries: min-width, max-width, min-device-width, max-device-width, orientation, min-resolution, max-resolution

 

There is no support for:

  • External stylesheets
  • Absolute/fixed positioning
  • Negative margins
  • CSS animations
  • Web fonts
  • HTML video

 

Gmail will discard your entire block of code when it encounters a css value it doesn't support. The way around that is if you are using css it finds invalid, move it to it's own style block. For instance, I have a <style> block meant for Outlook issues. Gmail might clip that entire block, which is fine because there's no html that applies to anything but Outlook.

 

Finally, Gmail will discard an entire code block for anything with a nested media query. If you're concerned, move the query to it's own <style> block.

Good luck.

Itamar Rogel 2 months ago

Wally, thank you so much for the detailed and helpful response!

Itamar Rogel 2 months ago

@Wally, to ensure I understand you: When you say Gmail Android App is not supported, does that mean even within the limitations you're describing?

Does that mean that the sources I've referred to above, claiming support does exist in Gmail For Android (at least for real Gmail accounts), are not accurate?

Or, is the lack of support for Gmail Android App not a Gmail issue, but a Foundations For Email issue?

Wally Glenn 2 months ago

Email developer Rémi Parmentier did some extensive research into the different types of Gmail accounts and how email rendering differs per account.

https://emails.hteumeuleu.com/trying-to-make-sense-of-gmail-css-support-after-the-2016-update-53c15151063a

This is a good guide on email on Andoid:

https://litmus.com/blog/the-ultimate-guide-to-email-on-android

Despite the limitations, there's still much more to work with than there was. As an example, Gmail doesn't work with Web fonts, so you'll need a graceful fallback and that's the key to good looking responsive email design. Create something that gracefully degrades. Buttons in some versions of Outlook do not center, but you can make them default to flush left and they still work.

Itamar Rogel 2 months ago

Got it -- many thanks for helping out!