Pre-built Templates Aren't Responsive in Gmail App on iPhone 5

  • 0
  • 2
  • Question
  • Updated 4 years ago
  • Answered
Hi there, 

I have tried a couple of Emma's pre-built templates and when I open the emails on my Gmail app on my iPhone 5, the emails are not responsive. When I open them from the Mail app on my application, they are responsive, and the same for a coworker with an Android. Why is this happening? 

Thanks,katie
Photo of Gravie

Gravie

  • 2 Posts
  • 1 Reply Like
  • bummed!

Posted 5 years ago

  • 0
  • 2
Photo of Ben Vance

Ben Vance, Alum

  • 328 Posts
  • 14 Reply Likes
Hi, Katie - great question!  Not all email clients support mobile-responsive emails, and the Gmail app is one of those.  The app itself ignores the HTML code that makes the email responsive to the smaller screen on your phone.  For a quick list of the other apps out there that don’t recognize responsive code, take a look here.  I hope this helps!
Photo of Gravie

Gravie

  • 2 Posts
  • 1 Reply Like
Hi Ben. I am no longer an Emma user, but I wanted to let you know that MailChimp's emails are mobile-optimized for the Gmail app. Wanted to give you the heads up since I know it is possible to make it happen. 
Photo of Ben Vance

Ben Vance, Alum

  • 328 Posts
  • 14 Reply Likes
Interesting to hear! All of the research and reporting we’ve read (including from other email service providers like MailChimp) points to the Gmail app still stripping out the mobile responsive code. We’ll continue to keep our eyes and ears out for developments in this area.
Photo of Emily Hollingsworth

Emily Hollingsworth, Alum

  • 2203 Posts
  • 158 Reply Likes
Official Response
It's been a while since any new information was posted here, and while the responses here are still relevant, I wanted to chime in with some more recent updates. Gmail and newer versions of Android (which now default to the Gmail app as the native client) ignore CSS media queries, which means that the mobile-optimization built into Emma templates doesn’t work. Instead, the email client tries to scale the entire mailing to fit the screen.

While we don't currently have a way to work around this, we have learned a lot of good tricks for designing your emails in a way that will play nicely with these platforms. Utilizing a single column for your mailing content does wonders here, because your content doesn't have to stack to fit the mobile screen. If you're designing your own template, sticking with single images per row (as opposed to multiple image slices per row) is also a good approach. This should avoid any strange breaks in content resulting from Gmail shrinking those images down to fit the smaller screen.

We are researching and developing changes new ways of coding our templates that will better accommodate Gmail and other similar platforms in regards to mobile-optimization, as we know these are widely used! I'll be sure to update this thread when any new accommodations are made!
Photo of Cedarville University

Cedarville University

  • 19 Posts
  • 2 Reply Likes
Any update on this? I recently began testing a new template and was basing it on one of Emma's "responsive" templates and am quite disappointed to find out that it doesn't work in the Gmail mobile app?! This clarification or caveat should be clearly noted wherever the "responsive" claim is made.
Photo of Emily Hollingsworth

Emily Hollingsworth, Alum

  • 2203 Posts
  • 158 Reply Likes
Hi Cedarville -- As the Gmail app becomes more prevalent, we are looking at what it would take to change the way we code (which necessitates changes to the Emma editor) to help make our email display better on Gmail.
Google mentioned last December in a Reddit AMA that they’d like to support media queries, but were researching how to do it in the “right way." As far as I can tell, there hasn’t been any further buzz about that online. While I don't have an update for you here, I do know that one of two things will happen. Either Gmail will update their app to recognize media queries, or we will update our application which will then allow us to change our coding practices to account for Gmail’s sub-par mobile display.

This is definitely on our design and product team radars. I understand the desire to have these limitations more clearly outlined and readily available, and I'll be sure to pass this concern along to those teams! I'll update you here as I have more information.

Photo of romboutv

romboutv

  • 3 Posts
  • 0 Reply Likes
IM wondering if anything has changed. As said before gmail app strips the code, although the template says its gmail app proof. Ive also tried different queries from online but fail to achieve my goal. I also see a difference when i test one by mailchimp webapp and do a test with the downloaded html and send it by my own mailapp.

Are there any other tips else than single column design?
Photo of Emily Hollingsworth

Emily Hollingsworth, Alum

  • 2203 Posts
  • 158 Reply Likes
Hi there -- No change yet. Single column is the best way to go here. If images span the width of the email keeping them to single slices, Gmail will scale them down more smoothly. I'll be sure to update this thread in the case that we make changes on our end that might affect this. Thanks!
Photo of romboutv

romboutv

  • 3 Posts
  • 0 Reply Likes
Ive found a method that actually works, if i use float :left. I found some code that also is read in gmail i believe
Photo of Emily Hollingsworth

Emily Hollingsworth, Alum

  • 2203 Posts
  • 158 Reply Likes
Great! Can you share that bit of code here? I'd love to elevate that to our design team to see if they are familiar with it!
Photo of romboutv

romboutv

  • 3 Posts
  • 0 Reply Likes
Here's the complete page, is that what you want??? I used some parts of the base, im i cant really remember from where though :)

Ive also found some code which will swap in smaller images for mobile use, a lot of work but makes the mobile version work better with the images. Now they scale smaller. BUt for width images its not always that good.

www.tooby.nl/mailing/mailing.html

I couldnt find a code bracket in this editor. Though pasting in the complete page is is a bit to much