I have created an email template utilizing tables,tr,td's. All seems to be ok except the fact that on android phones it is not re-sizing to fit the screen.. it works perfectly on apple products.. I have searched some online and the word seems to be that android has disabled responsiveness for some reason. There has to be a way around this as most all emails are checked on mobile phones and quite a few of them are on android.
Html Email Template on Android not responsive
7.6k Views Asked by Riz At
5
There are 5 best solutions below
4
On
Have you tried setting up Viewport metatag to your html template?
<meta name="viewport" content="width=device-width, initial-scale=1">
0
On
If your talking about the Gmail app on Android (which is what you tagged this question as) the app itself does not mobilize with media queries or style tags, it strips them as you have found. Make sure you inline as much as possible to get the best support across email clients.
There is a way to get it to mobilize by using a combination of fluid and fixed width tables. But it won't be pixel perfect. Think about fixed width tables as the blocks inside a fluid table (width=100%). Tables will stack on top of one another once they reach the width they are set for. This is of course for any multi column layout. Single column is the safest approach because there is no need to focus on stacking. Don't hesitate to use tables nested in tables that are nested in tables. For the approach I mentioned above of using fluid and fixed width tables, for a two column layout you would have your outer table be 100% width and two fixed width tables inside that table that are a specific width and aligned right and left.
It is possible to get it to look decent in Gmail app, but there are two concepts you have to ask yourself, are you going for graceful degradation or lowest common denominator?
Graceful degradation meaning it looks great in a lot of email clients and decent in gmail app or lowest common denominator being single column and designing around that.
0
On
I definitely agree with setting:
<meta name="viewport" content="width=device-width, initial-scale=1">
I would also suggest using an css-inlining tool such as this one http://templates.mailchimp.com/resources/inline-css/ (if your external source doesn't already do it on your behalf) to ensure that gmail picks up the styles.
In addition, in terms of general scaling issues in Gmail, I would suggest adding the following block just before your closing body element (as recommended here: http://freshinbox.com/blog/gmail-on-ios-increases-font-size-on-some-emails/):
<div style="display:none; white-space:nowrap; font:15px courier; line-height:0; color: #ffffff;">
----------------------------------------
</div>
0
On
Android doesn't support responsive emails but there are some workarounds. For example you can change all the to . This will solve the problem. It will also make the text bold in those cells but you can change the styles to force it to render as you like.
If you are talking about Gmail on Android, Gmail app doesn't support responsive either but you can force it to render as desktop. Unfortunately no workarounds for Gmail and this will be the only solution so far.
It is all explained step by step here: Hot to get a responsive email to work on Android
As some other have noted, Gmail and some Android stock email clients do not support media queries. To cover these clients, you need Hybrid Design.
Hybrid design achieves a responsive, shape-shifting layout without using media queries. At its core, it uses max-width and min-width to impose rigid baselines (allowing some movement) and imposes a fixed, wide width for Outlook who is shackled to desktop anyway. Once a mobile-friendly baseline is set, media queries progressively enhance the email further in clients that support it (like iOS Mail).
Here is a basic 2-column scaffolding from Fabio Carneiro's code samples on GitHub (all credit to him!):
There are more scaffolds and patterns in that repo and elsewhere, but this shows the basic principle in action.