3

See here: Responsive emails on Gmail app (Android)

I'm trying to build a responsive email for use in all email clients. Gmail is stripping my style tags from the head/body and the queries are therefore also stripped.

I've tested using Email On Acid and Gmail just displays both versions!

What is the solution here:

1) Using a framework? - even these use style/media queries

2) External stylesheet - is there any way to make this work?

Has anyone found a permanent solution for this issue. Any advice would me much appreciated! :)

Community
  • 1
  • 1
Luke
  • 101
  • 1
  • 1
  • 8
  • HTML emails display in various clients is already a nightmare in itself. Making it responsive is a second nightmare. Unless you've got a client paying for the nights of research & test you'll have to get through to make this work eventually (with no guarantee), I would suggest to just let go... but I know this isn't the kind of answer anyone expects – Laurent S. Feb 27 '14 at 15:38
  • Possible duplicate: http://stackoverflow.com/questions/13604300/responsive-emails-on-gmail-app-android/13611105#13611105 – John Feb 27 '14 at 18:17
  • If you're looking for a framework, check out Zurb's [Ink responsive email framework](http://zurb.com/ink/). It's pretty solid and I'm currently using it for GitHub HTML emails. – Joel Glovier Oct 13 '14 at 17:12

1 Answers1

2

Gmail requires that all styles be inline, It will strip out all media queries and really anything that you have in the head... If you have not coded this way i would suggest running your entire email through this http://beaker.mailchimp.com/inline-css Might solve the issue right out.

Also worth mentioning if you are not using attribute selectors with your media queries then it is going to look funny in yahoo i usually start responsive emails from here

http://webdesign.tutsplus.com/articles/creating-a-simple-responsive-html-email--webdesign-12978

Travis
  • 2,185
  • 7
  • 27
  • 42
  • 1
    Inlining tools won't work with media queries because there is no way to declare a media query inline. – John Feb 27 '14 at 18:31
  • Correct but you shouldn't have a media query for displaying in GMail... Opps he made an edit to the post since i last say it i thought it was gmail from the browser not gmail from android totally different here, android has very spotty compatibility with responsive emails i dont think the Galaxy S4 even displays media queries correctly. – Travis Feb 27 '14 at 18:40
  • Thanks for your response guys, but what do people use to build responsive emails then. Because all I can find is Frameworks such as Ink but even these have media queries and styles that will be stripped by Gmail. Im also having problems in Outlook 2003 as the mso hide comment isn't working at all. Has anyone else found a fix for this? – Luke Mar 04 '14 at 15:31
  • If you have a responsive email it wont need to be responsive for gmail (desktop) version. If your like me and check your gmail through Mac Mail on iPhone/iPad your media queries are picked up by the Mac Mail not gmail (your not in gmail even thought it is going to gmail) – Travis Mar 10 '14 at 16:22
  • The yahoo mail selector bug has been fixed the attribute selector work around is no longer necessary. – otherDewi Jul 04 '15 at 14:19
  • 2
    FYI the linked tutorial has been superseded by the same author as of June 2015 here: http://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries--cms-23919 – Brian Moeskau Oct 23 '15 at 02:47
  • 1
    I really can't understand why in 2016 Gmail app doesn't support media queries. – Redoman Jan 16 '16 at 07:04