Update: I've logged a bug report with Google - http://code.google.com/p/android/issues/detail?id=22447&can=4&colspec=ID%20Type%20Status%20Owner%20Summary%20Stars
Update: #benni_mac_b points out that the problem goes away if you disable auto-fit pages. This 'solution' works on 2.1 and 2.2 - turns out that the 2.3 phone I was testing on had disabled auto-fit to start with, and when enabled the table breaks again.
Guess I'm now looking for a way to tell Android not to auto-fit the table (and override the browser setting). Not liking my chances judging by my Google searches so far.
I've encountered an odd issue with the Android web-browser and spanned columns - for example, if I have this structure:
<table class="amhtable">
<col width="16.72%" />
<col width="16.62%" />
<col width="16%" />
<col width="16%" />
<col width="34.67%" />
<thead>
<tr class="heading">
<td>Modifying circumstance</td>
<td>Common pathogens</td>
<td>First choice</td>
<td>Alternative</td>
<td>Additional information</td>
</tr>
</thead>
<tr class="heading2">
<td colspan="5" width="100%">SECTION TITLE</td>
</tr>
<tr class="body">
<td>column 1</td>
<td>column 2</td>
<td>column 3</td>
<td>column 4</td>
<td>column 5</td>
</tr>
</table>
The spanned row will reduce to fit the size of the screen, even if the table itself is still wider. This means that the heading2 row's background is missing across most of the table in some cases, making it look quite odd.
This is not happening on iPhone, or any desktop browser (Chrome, IE, FF, Safari) that we're aware of - just on Android (multiple devices and versions).
The CSS:
.amhtable {
border-width:1px;
border-style:solid;
border-color:#000000;
border-collapse: collapse;
border-spacing: 0;
padding: 5px;
font-weight: normal;
color: #000000;
}
.amhtable td {
border-width:1px;
border-style:solid;
border-color:black;
padding: 3px;
}
.amhtable th {
border-width:1px;
border-style:solid;
border-color:#777777;
background-color:#0084D6;
}
.amhtable .heading {
border-width:1px;
border-style:solid;
border-color:#000000;
background-color:#567ac4;
font-weight: bold;
font-style: italic;
font-family: Verdana, Arial, Helvetica, DejaVu Sans, Bitstream Vera Sans, sans-serif;
}
.amhtable .heading2 {
border-width:1px;
border-style:solid;
border-color:#000000;
background-color:#82a3e7;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, DejaVu Sans, Bitstream Vera Sans, sans-serif;
}
So far, I've tried the following:
Removing the <col> elements
Adding a sixth column and empty <td> elements into each row
Removing the border-collapse style ( after reading Webkit Browsers Rendering for Table Depending on colspan )
Setting the width of the spanned column to 100% (along with the changes above)
Setting a fixed width on the table and setting the spanned column to 100%
Replaced the % based widths of the columns with fixed pixel widths
Set the position to be relative for the spanned cell (and then the row) and set left and right to 0.
Set the position to be relative for the row with left as 0, and width as 1000px
Wrapped the table in a 100% wide <div>
One thing that we noticed yesterday is that the table should have a 1px black border - but there is a gap on the 2.1/2.2 devices we're testing on where the row doesn't complete. It really does seem to be a rendering problem on these devices.
I wonder if the following will help:
Wrap those body rows in a tbody element:
Remove the width="100%" from your header row. Colspan="5" should span the width of the table anyway, with the browser sizing accordingly. I wonder if the Google browser is interpreting that literally as the width of the current screen.
Add the following to the class for .amhtable:
float: left;
width: 100%;
To see if it's a relative sizing bug.
Out of interest, does this happen if the heading row appears anywhere in the table? Or is it just the first time it occurs after thead?
<table class="amhtable">
<col width="16.72%" />
<col width="16.62%" />
<col width="16%" />
<col width="16%" />
<col width="34.67%" />
<thead>
<tr class="heading">
<td>Modifying circumstance</td>
<td>Common pathogens</td>
<td>First choice</td>
<td>Alternative</td>
<td>Additional information</td>
</tr>
</thead>
<tbody>
<tr class="heading2">
<td colspan="5">SECTION TITLE</td>
</tr>
<tr class="body">
<td>column 1</td>
<td>column 2</td>
<td>column 3</td>
<td>column 4</td>
<td>column 5</td>
</tr>
</tbody>
</table>
What happens if you try that?
Other things you might try are putting the actual heading text in an element like:
<tr class="heading2">
<td colspan="5"><span style="100%">SECTION TITLE</span></td>
</tr>
Maybe it's a mistake but did you tried to put on your table :
table class="amhtable" **cellspacing="0"**
Is the total width of the columns suppose to be 100.01%?
Try reducing first column to 16.71%?
I'm not sure, but try this method http://jsfiddle.net/DhAYd/9/
The (X)HTML document in your bug report is not Valid; at best it is incomplete. A DOCTYPE declaration (HTML 4.01, XHTML 1.0) or a doctype (HTML5) is required. In the current HTML5 Working Draft, the col element does not have a width attribute (the W3C Validator says it is obsolete; you should use CSS instead). But this also cannot be Valid HTML or XHTML 1.0, as the title element is missing.
As a result of the missing DOCTYPE declaration, the layout engine is likely going into Quirks Mode, and you cannot expect interoperable behavior.
Also, percentages in (X)HTML are not specified to support decimals, although it is not explicitly forbidden. A HTML syntax validator would not catch this error as %Length is an alias for CDATA (any character data).
You should
Validate your document: W3C Validator
Make it Valid.
See if using integer percentages or CSS helps.
Only if you are still seeing different behavior, you should file a bug.
Related
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.
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've created my website, but now at a mobile device (my Samsung Galaxy S4 Android phone), the contact form ignores the set width for the fields.
Part of the HTML code:
<tr>
<td valign="top">
<label for="name">Name *</label>
</td>
<td>
<input type="text" name="name" maxlength="50">
</td>
</tr>
Part of the CSS code:
input, textarea {
border-radius: 9px;
border-style: solid;
border-width: 1px;
border-color: #000000;
padding-left: 10px;
width: 450px;
}
Now everything exept for the width** works just fine, and everything including the width works on my laptop (using google chrome). My question: why does my android device (using Chrome for Android) not work?
** the width is too big for the container, which makes the submit button disappear outside of the container as well, this is because the button's float is set to right
I'm designing an email and I got a problem with autofit feature of the gmail app in Android and iPhone.
The email is doing well in other clients.
To prevent the auto, I've tried so far:
Setting max-width and min-width on table / wrapper
add meta viewport like this one:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
None of these are working.
Do you have an idea?
I was having the same problem. I added min-width to, not only the table, but the column (td) tag as well. This seemed to overwrite Gmail's auto fit feature.
Below is an example of how I implement this. I found the answer from this forum: https://www.emailonacid.com/forum/viewthread/566/#827
<table width="590" height="900" border="0" cellpadding="0" cellspacing="0" style="margin:0 auto; min-width:590px;">
<tr>
<td style="font-size: 1px; line-height: 1%; mso-line-height-rule: exactly; min-width:295px;">
<a href="#">
<img style="display:block;border:0px;line-height:50%;" src="example.jpg" width="295" height="900" alt="">
</a>
</td>
<td style="font-size: 1px; line-height: 1%; mso-line-height-rule: exactly; min-width:295px;">
<a href="#">
<img style="display:block;border:0px;line-height:50%;" src="example.jpg" width="295" height="900" alt="">
</a>
</td>
</tr>
</table>
As you can see, I set the table to a min-width of 590px; and each column (td) has a min-width of 295px. The same as the image size.
I'm struggling against this problem at the moment, and the thing I'm planning to test next, is taking a "Mobile First" tack to designing the emails. I'm going to design the emails for width of 320-480px and use media queries to make the larger for desktop clients instead of designing for 600px wide and making it smaller. I hope that this will make the emails look great in the GMail App where media queries are not supported.
I just heard of two resources that seem pretty good, check out:
lit.ms/KISSresources and www.responsiveemailresources.com
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)