Templates that had previously worked are now exhibiting very odd behavior on Outlook for Android (11). Our logo image is strangely HUGE and wrapped in all sorts of weird ways. The actual file is 8bit, PNG, 300x79. Outlook desktop and OWA appear fine, as does iOS mail, Gmail etc. Our image code is this:
<table width="100%" role="presentation" bgcolor="#FFFFFF" cellpadding="0" cellspacing="0" border="0" style="max-width:640px;background:#ffffff !important">
<tr>
<td bgcolor="#ffffff" width="10"> </td>
<td bgcolor="#ffffff" style="padding-top:5px;">
<!--[if mso]>
<table width="50%"><tr><td>
<img width="280" src="cid:logo" style="text-align: right; width: 280px; border: 0; text-decoration:none; vertical-align: baseline;" border="0" />
</td></tr></table>
<div style="display:none;">
<![endif]-->
<img style="max-width:300px !important;height:auto;" src="cid:logo" border="0" />
<!--[if mso]>
</div>
<![endif]-->
</td>
</tr>
</table>
What we're seeing here is actually a portion of the letter "A". The orange is a 10px high orange bar that runs across the top of our emails.
I've cleared all data and cache from my Outlook mobile. No difference. Before I go any crazier, am I missing something here in this code? What's even weirded is if I change the template to just text and do not include the image (inline displayed using contentid) is Outlook on Android still shows the image as below.
Turns out it was minified CSS. When I took the exact same CSS, un-minified it and put that in the head section, Outlook mobile worked as expected. Swap back to minified and it broke again.
Related
I'm currently working on an HTML email & the background Image doesn't render, its an phone with another photo inside the screen. It works with other email clients but for Android 6.0 & Gmail App IMAP Android 4.4 I just get a grey background behind the image that is suppose to be in the phone screen. Is there something missing or something android does to background in HTML or CSS
<td class="rightContainr" width="260" style="max-width: 260px; max-width: 260px;">
<!--[if (gte mso 9)|(IE)]>
<table width="200" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table class="phoneContainr" width="152" border="0" cellspacing="0" cellpadding="0" style="align:left; max-width: 152px;">
<tr>
<td class="phone" align="center" background="http://mailimages.texture.com/print-toGo_2016/background_day0_phone_200x360.png" style="background-image: url('http://mailimages.texture.com/print-toGo_2016/background_day0_phone_200x360.png'); background-size: 180px 324px;" bgcolor="#F2F2F2" width="152" height="312" valign="middle">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:153px;height:324px;">
<v:fill type="tile" src="http://mailimages.texture.com/print-toGo_2016/background_day0_phone_200x360.png" color="#F2F2F2" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<table class="cover" align="center" width="140" border="0" cellspacing="0" cellpadding="0" style="align:left; max-width: 126px;">
<tr>
<td class="cover"><img class="cover" src="http://image.email.texture.com/lib/fe9a12717365047e71/m/14/featured_story_280x330.jpg" width="126px" height="auto" alt="" style="display: block; max-width: 126px;"></td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
Background images on Gmail app has issues. Please read the below for more info.
Background images show up fine in the Gmail app if the email was sent
to and retrieved from a Gmail email address (ie. gmail.com).
This problem will become more acute as Google has dropped the native
Android mail client in favor of the Gmail mobile app for their newest
operating system starting from 5.0 (Lollipop). Users on Android
devices who need to access their work email would have to use the
Gmail app or a 3rd party mail app.
Full article
If you do really want to go down this path, you can use use two images and control it on Gmail app using media queries. Place one image over another (only for mobile screen widths) using position and you should be good to go. Remember media queries are now supported in Gmail apps (the latest versions) and this will be possible.
Hope this answers you question.
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.
Have you tried setting up Viewport metatag to your html template?
<meta name="viewport" content="width=device-width, initial-scale=1">
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>
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!):
<!doctype html>
<html>
<body style="margin:0;">
<center>
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
<!-- // 2-COLUMN SCAFFOLD [CENTERING, FLUID] -->
<tr>
<td align="center" height="100%" valign="top" width="100%">
<!--[if mso]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="660">
<tr>
<td align="center" valign="top" width="660">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:660px;">
<tr>
<td align="center" valign="top" style="font-size:0;">
<!--// DEVELOPER NOTES:
1. Setting font-size:0; is necessary to ensure
that there is no extra spacing introduced
between the centering divs that wrap each
of the columns. //-->
<!--[if mso]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="660">
<tr>
<td align="left" valign="top" width="330">
<![endif]-->
<div style="display:inline-block; max-width:50%; min-width:240px; vertical-align:top; width:100%;">
<!--// DEVELOPER NOTES:
1. To have each column center upon stacking,
wrap them in individual divs, set the same
max-width and width as the table within it,
and set display to inline-block; using
vertical-align is optional.
2. Setting min-width determines when the two
columns of this block will wrap; in this
case, when the total available width is
less than or equal to 480px. //-->
<table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:330px;">
<tr>
<td align="center" valign="top">
<!-- // REPLACE WITH BLOCK -->
<p style="background-color:#2BAADF; color:#FFFFFF; font:16px Helvetica, sans-serif, normal; margin:0 !important; padding:10px;">LEFT</p>
<!-- REPLACE WITH BLOCK // -->
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
<td align="left" valign="top" width="330">
<![endif]-->
<div style="display:inline-block; max-width:50%; min-width:240px; vertical-align:top; width:100%;">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:330px;">
<tr>
<td align="center" valign="top">
<!-- // REPLACE WITH BLOCK -->
<p style="background-color:#51BBE5; color:#FFFFFF; font:16px Helvetica, sans-serif, normal; margin:0 !important; padding:10px;">RIGHT</p>
<!-- REPLACE WITH BLOCK // -->
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- 2-COLUMN SCAFFOLD [CENTERING, FLUID] // -->
</table>
</center>
</body>
</html>
There are more scaffolds and patterns in that repo and elsewhere, but this shows the basic principle in action.
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.
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
I'm trying to build a responsive email – it's actually working pretty great across the board, except for some small pieces that aren't co-operating in Gmail for Android.
I have these seriously simple black stripes that sit at the top of the email as a decorative element:
<table width="100%" cellpadding="0" cellspacing="0" align="center" valign="top">
<tr><td width="100%" height="11" bgcolor="#000000"></td></tr>
<tr><td width="100%" height="2" bgcolor="#FFFFFF"></td></tr>
<tr><td width="100%" height="1" bgcolor="#000000"></td></tr>
<tr><td width="100%" height="30" bgcolor="#FFFFFF"></td></tr>
</table>
Yet they don't display as anything more than a tiny strip of black and white that resembles an ultra-thin exclamation point on the Gmail Android app.
Likewise, there is a footer that isn't spanning the full width of the email:
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#000000">
<tr>
<td>
<table width="650" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#000000">
<tr>
<td align="right" class="footer">
<img src="images/footer.png" />
</td>
</tr>
</table>
</td>
</tr>
</table>
Any suggestions on how to make these span the full width of the email?
If you haven't found a solution try
style="width:100%!important" like
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#000000" style="width:100%!important">
Gmail likes to strip most of the CSS, but if you add a label !important will keep them most of the time.
So remind Gmail that 100% means 100% by adding min-width:100% to our <table>.
source
After extensive testing the solution as follows will work for any vertical spacing issues across all email clients (available on Litmus), incl. Gmail App on Andriod.
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100% !important;">
<tr>
<td bgcolor="#00a0cc" height="25" style="background:#00a0cc;height:25px;line-height:0;font-size:0;"> <br /></td>
</tr>
</table>
Key point is to apply width:100% !important to the table, will not work on applying to the td.
This is also the best solution for replacing vertical spacer images.
Looks like we have faced same full-width table color issue on Gmail app; while my case was on iOS version. You can see the background-color cannot fill with full-width below:
My fix is adding min-width:100% in css style, i.e.
<table border="0" cellspacing="0" cellpadding="0" width="100%" style="min-width: 100%; color: #555555; background-color:#def6f7" bgcolor="#def6f7">
I'm not familiar with making clients/sites/etc for anything that's not designed for PC, so I'm not sure if this will work or not, but try doing this.
<center>
<h1 style="color:#888888;">Android Client Header</h1>
<p>Demonstration</p>
</center>
<hr color="#000000" style="height:11px;">
<hr color="#FF0000" style="height:2px;">
<hr color="#000000" style="height:1px;">
<hr color="#FF0000" style="height:30px;">
<h3 style="color:#0070ff;">Content 1</h3>
<p color="#808080">E-mail Here</p>
<hr color="#000000">
<center>
<h1 style="color:#db880f;text-size:10px;">Android Client Footer</h1>
<p style="color:#888888;">Demonstration</p>
</center>
Even though you lose the "table" element feature, this is a sample example I came up with, trying my best to matchup your color and size settings for the line decorations.
I've a test layout which uses tables for displaying two columns and media queries which stacks the two columns to one on email clients which support media queries. I am sticking with tables instead of divs as we need to support Outlook as well :(. The layout works great in Android 4.3 and below (the columns stack up) but blows up on Nexus 5 (Android 4.4.2). The two columns still show up next to each other with the second column being completely squished. It seems like 4.4.2 does not support display block at td. Has anyone else experienced this? If yes, is there any work around for this? By the way, it seems like only display block and display:inline-block are not supported on Nexus 5, if I set the tds to display:none in my media query, they are hidden on the screen. Below is a basic html email template which doesn't work:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1.0;width:device-width">
<!-- So that mobile webkit will display zoomed in -->
<title>Email template</title>
<!-- disable auto telephone linking in iOS -->
<meta name="format-detection" content="telephone=no">
<style type="text/css">
#media screen and (max-width:640px) {
table[class="container"] {
width: 100%!important;
}
td[class="cell"] {
background-color: #cc3333;
width: 100%!important;
display: block!important;
}
}
</style>
</head>
<body>
<table width="640" align="center" cellpadding="0" cellspacing="0" class="container">
<tr>
<td class="cell">Hello world</td>
<td class="cell">Hello world</td>
</tr>
</table>
</body>
</html>
Edit 1/14 So using tables as block elements works. Since the tables are floated (using align) they wrap in case the width is less than 640px. Now the only issue is, when the two tables wrap, since their width is set to 320px the text doesn't reflow to 100% on devices with native resolution of more than 320px but less than 640px (say iPhone in landscape mode which is 480px) but instead wraps at 320px (leaving around 160px of white space on the right). I know I can change the width using media query but unfortunately it doesn't work on Gmail app (grrh). Any thoughts/suggestions? Simple table structure -
<table align="center" style="width: 640px;max-width:100%" cellpadding="0" cellspacing="0">
<tr>
<td>
<table align="left" style="width:49%;" border="1">
<tr>
<td style="max-width: 100%">long text which should take about 480px
</td>
</tr>
</table>
<table style="width:49%;max-width: 100%" align="left">
<tr>
<td style="width:100%;">long text which should take about 480px
</td>
</tr>
</table>
</td>
</tr>
</table>
I think, that it will be better to use only table for your css styles, because td tag is more unpredictable
you can find a good example of 2-columns layout here:
http://www.campaignmonitor.com/guides/mobile/responsive/
I might be a little late for the party, but for those that still encounter this problem and need a solid solution while keeping their code clean, here is one:
Use your best practice, just instead of using <td>'s for multi-column layouts, use <th>'s. And put a align="left" and font-weight: normal; on them to overwrite it's standard styles.
<th>'s still behave responsive in 4.4, while <td>'s do not.
I hope this helps.
P.S.
And if you also want mobile for gmail app, you might also want to try the responsive mobile-first variant: http://julie.io/writing/responsive-layout-email-ux-munich-newsletter/
Please try gmail android app hack and use th instead of td.
I use this layout code for email template.
This code shows two columns on all email client except iphone.
This code shows two block contents on iphone.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1.0;width:device-width">
<!-- So that mobile webkit will display zoomed in -->
<title>Email template</title>
<!-- disable auto telephone linking in iOS -->
<meta name="format-detection" content="telephone=no">
<style type="text/css">
.gmailfix {display:none;display:none!important;}
#media only screen and (max-width: 640px) {
*[class].ablock {
display:block !important;
text-align:center;
background-color: #cc3333;
width: 100%!important;
display: block!important;
}
}
#media screen and (max-width:480px) {
.tblock{
display: block !important;
text-align: center !important;
max-width:600% !important;
width:100% !important;
}
}
</style>
</head>
<body>
<div class="gmailfix" style="white-space:nowrap;line-height:0;">
</div>
<table align="center" style="width: 640px;max-width:100%" cellpadding="0" cellspacing="0">
<tr>
<td>
<table class="tblock" style="width:100%;">
<tr>
<th class="ablock">long text which should take about 480px
</th>
<th class="ablock">long text which should take about 480px
</th>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
I'm laying out an email to be viewed across browsers and mobile platforms and mostly all is going well. It's laid out in tables, using inline styling etc. However, despite a media-query to the effect of a 600px max-width, the Gmail app on at least my and one other Android I have access to is opting to resize the images and layout to fit into it's area instead of using the media query or letting it fit itself into the window normally, either of which would be fine.
For personal use, I'm able to 'turn off auto-resize' on my phone, and then the email lays out as it would in a browser.
Is there a means to either tell the Gmail app not to auto-resize from the email size or to use the media query instead?
As Google does itself (sic!) here you should add a small hack on top of your template, right after your <body> tag:
<!-- Gmail hack -->
<div style="display:none; white-space:nowrap; font:15px courier; color:#ffffff; line-height:0; width:600px !important; min-width:600px !important; max-width:600px !important;"> </div>
<!-- /Gmail hack -->
Since Gmail and Inbox will ignore the display:none, the hack will affect only those two clients.
<meta name="viewport" content="width=device-width, initial-scale=1"/>
Then set the style attribute on an image (1px gif works) that spans the full width of the page (style="min-width:600px;"). Everything will be laid out correctly, and it'll be scrollable.
Gmail in general doesn't support media queries, or the style tag in general, which is why we have to move everything inline.
Inspired by css-tricks.com, this block of code solved my issue.
Place it right before </body>.
<table class="gmail-app-fix">
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" align="center" width="600">
<tr>
<td cellpadding="0" cellspacing="0" border="0" height="1"; style="line-height: 1px; min-width: 200px;">
<img src="transparent.gif" width="200" height="1" style="display: block; max-height: 1px; min-height: 1px; min-width: 200px; width: 200px;"/>
</td>
<td cellpadding="0" cellspacing="0" border="0" height="1"; style="line-height: 1px; min-width: 200px;">
<img src="transparent.gif" width="200" height="1" style="display: block; max-height: 1px; min-height: 1px; min-width: 200px; width: 200px;"/>
</td>
<td cellpadding="0" cellspacing="0" border="0" height="1"; style="line-height: 1px; min-width: 200px;">
<img src="transparent.gif" width="200" height="1" style="display: block; max-height: 1px; min-height: 1px; min-width: 200px; width: 200px;"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
(Tested with Gmail 6.0 and Inbox 1.20 on Android 5.0.1, resolution 720x1280 (works on both portrait and landscape orientation)).
I just added style="min-width:290px;" to my outer most table, which is the smallest size my responsive emails view and its stopped moveong my blocks around and doesn't auto-resize. This means in Gmail App the email shows as a whole email.
The solution that worked for me was to apply a min-width: 600px to the outermost table in my template. This worked on the Android Gmail application. (Note that my layout uses 600 pixels. Your layout might be different)