BRGmail App: Stacked Column Width Woes (No Media Queries)
I've been playing with Fabio's template from TEDC 2015 and making a template that is responsive without media queries for gmail app (with some media queries for iphone etc)
The original template looks great, but in my own application of it, some issues come to light.
1. For our design, each column will have a different colour and the background is the colour of the body background.
2. We have 1, 2 and 3 column stacks, all of which end up different widths when stacked because max-width has to be set at different values.
3. Because each of the columns are set on just the email background, it makes it look ugly because the widths of columns are different widths. It's made worse when there's a lot of text in the columns.
My question is, in gmail app (so without media queries) is there no way to force the width to 100% for all columns, or make them all the same width?
I eventually found some time to dug into the Gmail App for Android source code and to better understand what happens.
I wrote an article: http://mosaico.io/email-client-tricks/gmail-android-tries-to-shrink-your-email/
and also created a github project with a sample html page I setup to check the Gmail App behaviour with regard to its weird stacking behaviour: https://github.com/bago/android-gmail-emulator
The "simulator" I wrote does a lot of things to emulate the Gmail app, but it doesn't clean the style attributes, so it will accept many css properties that won't work on the real App, but I found it effective to preview the stacking behaviour of most of my emails.
My issue with Litmus preview is that litmus can't preview every device and so we can only check one device while Android App changes the behaviour mostly based in the viewport width, so ladnscape vs portrait matter, and every device can mungle your template differently. Using the "simulator" I can easily check many "device widths" and "predict" if the gmail app on that device will "mungle" or not.
What do you think?
I have developed a code that will stack multi columns (at full width) within the Gmail App. Have a look! https://litmus.com/builder/b4262aa
Oh, it also forces the images to be full width too!
It's not letting me see the builder code.
Thank you!
The seems to work real nicely - the lines underneath the headings aren't playing ball but the rest of it is. Need to take a good look at your code. Great job!!
Am I missing something? It still has all the problems as above? it doesn't expand past the original set width without media queries.
Litmus says it works, but having sent a test to my phone, it doesn't seem to work in gmail.
I have only tested it extensively via Litmus, and haven't had any issues.....I'll need to do some live testing as well. What device are you sending too?
The columns should go full width without media queries, no matter the set width. Are you not seeing it within the screenshots on the builder page?
@Chris Wise
this is not about removing media queries and trying out with your browser! This is about using some quirks in the Gmail App that in some condition will apply some weird styles (see my other comments in this thread). So it doesn't fill the full width on EVERY client not supporting media queries, but IT DOES on GMAIL APP. Just a step beyond basic hybrid design.
This code relies on converting <td> tags (or in this instance, I had to convert them to <th> tags in order to bypass issues with our old wysiwyg editor), into inline-tables. There is then a set width placed on the subsequent table, and the content is then added. What I think that the Gmail App is doing is converting the initial td/inline-table to a width:auto with a display:block style, and then striping the set width from the subsequent table. The content that is added will then stretch out the section to be full width. For the sections that do not have enough text to stretch the section out, I have placed a series of 5 inline tables that force it to be full width
Also, when you guys are testing to "Gmail", is it not the Gmail App? If it isn't, then what exactly is it?
Interesting, Nice Job! Your example is working on my device, but my quick tests are not. I'll have to jump in after work.
Thanks Chris. I'm finding it very interesting that some people say it works via Litmus but not their phone, and vice versa....I'm not sure what to make of that!
The code doesn't work for me either. Gmail App v4.1 for iOS.
Confirmed to work on real device Nexus 5 Android 6 Gmail App 5.7.105901136.release.
Maybe this work on Android but doesn't work on iOS: anyone else with real devices can test?
Looks like everything is working nicely on Gmail App for Android, but the issues are with the IOS version. I'm in the middle of doing some recoding, and I'm getting close to having it stack in IOS.....I'll repost as soon as I think it is ready and you guys can test it on your end,
Try
1) giving width to <td> with text in px, em, etc(different for desktop and mobile[media query].
2) giving width to table of column in px, em, etc(different for desktop and mobile[media query].
3) if images are being used, scale or resize images. You can do it with online services, different sized images for different screen width.
4) Try using properties like:
width,height,max-width,max-height.
5)See to inner child element ,if any is causing display issues, may be because of display:block; property.
6)For mobile if u want your content to be stacked in next row, use property "display:block;" in media query for the <td> that you want to be stacked.
For further queries you can mail me at iamabhinavchaturvedi@gmail.com
Could you post your code so I can see what you are working with already?
Sorry, Litmus Builder is failing so here's a CodePen link http://codepen.io/becskr/pen/QjrPpz
Try adding another table around each block with width="100%" and your backgound color. See if that works. I added my code below if you want to look through it (or use it). If you use it you will want to change some of the properties since we use a 650px layout with a padding of 30px on each side.
I just dropped my code into your template and I was able to get a solid color background on it. However, I'm not used to your way of coding so I am at a loss as to where I can add it to your existing code to get it to do the same thing. I keep getting an error message every time I go to add a style to the <td>.
Hi Jessica, I'm not bothered about the background, the background isn't the issue, it's the actual column width I'm trying to solve.
No, there is no way (not one known, yet) your 2 columns and 3 columns will end up having the same width in Gmail (both in narrow mobile screen and in the large desktop webmail). Unfortunately Gmail has limits. The most you can do is what you already do with Fabio solution, but it works because of that "min/max" sizes and "fixed width" on narrow viewports where media queries are not available.
If you want to obtain the best results using the "hybrid coding" you should probably stick to a 600px layout + 1x600 or 2x300 boxes and skip the 3 column layouts.
It is possible, I have it done but wanted to see what she is working with so I can give her suggestions on how to improve the code. The images do not take up the whole width of the screen but they do stack and are centered. Email Monks have a great template that it plays nice with GMail.
You say you have a template with both 2 and 3 columns blocks getting 100% widths (stacked) for each column in gmail mobile and correct width in gmail web?
This would be HUGE! can you share some code, please?
Absolutely!
I included the CSS as well since it is a hybrid code.
Sounds like gmail mobile ignores "width" attribute and "width" css property in <table> tags, and let your template work on gmail mobile.
This is a COOL solution, but it doesn't work on the "mobile webmail from Gmail" or other mobile clients stripping the <style> tag (in italy we have Libero.it, our major freemail provider, doing that).
So I'll stick to hybrid solution, that is a bit worse on gmail mobile, but still responsive and works fine also on "gmail webmail mobile" and other country-specific environments.
However I wasn't aware of the "trick" used in your email and I'll try to understand it better and see if this solution can be mixed with the hybrid coding solution.
This show the same issue as the one exposed by the author of this topic
The 3 columns, on Gmail Mobile, are not "full width": they stack on each other, but they don't fill the full width.
Unfortunately this is a "limit" of the "hybrid coding" and I guess we can't do anything to work around this.
The only "alternative" is to do it "Gmail Mobile" first, but then you will get "bad" results in Gmail for Desktop.
Hybrid coding is the current best solution, IMHO, but if you want to get the "best" results from it, you should stick to 1 column + 2 columns layouts and skip the 3 columns. The best way to use the 3 columns is to use them in a 3x2 (6 blocks) and with no background color as there is no way (not a known one) to make them 100% on gmail mobile.
It works for me every time. Here are screenshots.
Desktop:
Inbox by GMAIL Mobile:
Your tables have a set width so they can't be changed without media queries. However it definitely does look like it is spanning 100% in gmail in your screenshots which is super strange. Here is what happens when I send myself your email, it reacts like I would think and is limited to the set width:
As Chris and Me see a different thing from you, I guess the copy&paste here did not work fine.
Can you share the full source (this copy/paste starte with a style tag and ends with a table tag) for your email?
If you have an email with mixed 3 columns and 2 columns it would be even better (Becs issue is about having them mixed).
I see the same thing as Stefano and Chris, even just in Chrome when deleting the styles in the head.
Sorry for the delay in responding.
This is the code that I use to create all of my emails:
That last code you shared doesn't work "responsively" in gmail at all for me
After some more test, it seems the Gmail App on Android (tested both on litmus and real device) remove the style tag, but also add something like this:
This is not exactly what it does, but something I mocked in order to mimic what it does.
If the source email is larger than 329px then it will add some code that will remove the widths, if your email doesn't need more than 329px then it will leave it as is.
I didn't find articles explaining this finding, so maybe this is something new?
@Jessica did you write that template on your own? Otherwise, who coded it? Maybe he/she can share some other findings about this behaviour...
Stefano, it is pieces from a few templates and some that I have coded myself that I have compiled to create what I posted. My three column section originally came from here: https://www.emailonacid.com/blog/article/industry-news/email-monks-free-responsive-template/. The others I'm not fully sure where since it was in use before I started working on emails here. I've only been doing this for the past year and a half, but I like to look at the code of others on here because it gives me the chance to get better at it.
@stefano
I can say with some amount of confidence that the Gmail App on Android does strip the style tag and adds the head section below.
https://gist.github.com/brendanc/7b9f7eef1ecb823bbea1
@Brendan the style you link contains styling for special ".munged" classes, so maybe the application add this class to tables before rendering when the width would be greater than 329px as I found by repeated testing.
Just try yourself rendering a fixed width (say 200px) table on gmail app and then add another table in the same email with width >= 329px and see how the first table change the behaviour (like you added "width: auto" to it).
BTW: maybe we should open a new discussion about this Gmail app behaviour: here we are at the end of nesting and this is getting complex to read.
I guess these are android gmail sources:
In the "upper" you see the styles added:
https://android.googlesource.com/platform/packages/apps/UnifiedEmail/+/525dfca7775adf3e01bb033122c9c7ed226ed213/res/raw/template_conversation_upper.html
In the "lower" there are some variables (including MUNGED_TABLE_stuff) and including a script.
https://android.googlesource.com/platform/packages/apps/UnifiedEmail/+/525dfca7775adf3e01bb033122c9c7ed226ed213/res/raw/template_conversation_lower.html
In the script there is logic to add the "munged" class to tables, td, img:
https://android.googlesource.com/platform/packages/apps/UnifiedEmail/+/525dfca7775adf3e01bb033122c9c7ed226ed213/assets/script.js#245
Everything is based on a "CONSTANT" WEBVIEW_WIDTH that maybe is different on every device.
Also the code tries to do munging and then look at the resulting width: if he succeeded reducing the width then it keeps the munging, otherwise it is removed.. that's another reason it is hard to "test" how it work.. but now we have sources so we know what it does.
Now we have reports this is only valid for Gmail Android and at least an user reporting it doesn't work on Gmail in iOS: maybe because of different viewport size, or maybe because it doesn't use this "script" at all.
We need some more testing...