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.
Related
I am tearing my hair out on how to get things to display properly in email with signatures in Mobile devices.
I tried in HTML and Word.
I have tried making it in Word which had the best result, only that when reading it in Mobile version of Gmail and Outlook, for Android, that the line heights are way too big and tables are not displaying properly as seems theyre also getting this massive line heights in them even though they are blank.
I done some research and it says that Gmail seem to change your line heights? I havent been able to work out in how to fix it.
I have just ripped back the other parts and have the basic code here:
JS Fiddle
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
p {
font-size: 8pt;
line-height: 12pt!important;
margin: 0;
}
</style>
</head>
<body>
<table width="320px" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding:10.0pt 5.4pt 0pt 5.4pt; border-top: 5px solid #2E38A5; border-bottom: 5px solid #2E38A5; "><table width="320px" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td height="10pt" colspan="4" align="right" style="" >Logo</td>
</tr>
<tr>
<td colspan="4"></td>
</tr>
<tr>
<td colspan="3"><p style="line-height: 12pt; margin: 0">First Last</p>
<p style="line-height: 12pt; margin: 0">Sales Director</p></td>
<td width="30"> </td>
</tr>
<tr>
<td height="10pt" colspan="3"></td>
<td height="10pt"></td>
</tr>
<tr>
<td width="22" height="10pt"></td>
<td width="18"></td>
<td width="250" align="right"><p style="line-height: 8pt">+61 (0) 400 000 000 / +000 9000 0000</p>
<p style="line-height: 8pt">boris#email.com / www.website.com</p>
</td>
<td height="10pt"></td>
</tr>
<tr>
<td height="10pt" colspan="4"></td>
</tr>
<tr>
<td height="10pt" colspan="4"></td>
</tr>
<tr>
<td height="10pt" colspan="4"></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
<p> </p>
</body>
</html>
Also tried some methods other people had suggested to remove the links from phone numbers and email and have had no success with tags etc. Is there a more recent trick?
Thanks. Hopefully I am specific enough.
I'm aware the Android Gmail App does not allow media queries so should show the desktop version of the e-mail.
For the most part it does, however there is one section that should sit side-by-side and for some reason on the Android Gmail app, it stacks, it appears to be due to the image being the same width as the table, because it works fine if there is just text in each left-aligned table.
I'm wondering if anyone else has come across this issue and found a solution?
The only solution I've come across so far is to reduce the width of the image, which then leaves a gap to the right of the image.
Code below:
<table class="mobile_wrapper" bgcolor="#000000" border="0" width="640" cellpadding="0" cellspacing="0" style="background-color:#000000; width:640px;">
<tr>
<td>
<table align="left" class="mobile_wrapper" bgcolor="#000000" border="0" width="320" cellpadding="0" cellspacing="0" style="background-color:#000000;width:320px;">
<tr>
<td>
<img src="https://placehold.it/320x389" alt="image" width="100%" height="389" border="0" align="top" class="mobile_image" style="display:block;" />
</td>
</tr>
</table>
<table align="left" class="mobile_wrapper" bgcolor="#000000" border="0" width="50%" cellpadding="0" cellspacing="0" style="background-color:#000000;width:320px;">
<tr>
<td>
<img src="https://placehold.it/320x389" alt="image" width="100%" height="389" border="0" align="top" class="mobile_image" style="display:block;" />
</td>
</tr>
</table>
</td>
</tr>
</table>
I'm not sure why this was down-voted - but for anyone else that has this issue it was actually a simple fix - I think it's to do with Gmail's auto-sizing.
The way to get around it is to ensure the image has a width of 100% within a table with a fixed width - that way if the table shrinks - the image will shrink with it.
I almost had it - but for some reason had a 50% width on the second left-aligned table.
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
Trying to code a responsive email template, and the GMail app keeps throwing me for a loop.
I've got a 3-column of images that I want to display one on top of the other (align="center"). Yet for some reason, when it goes through the gmail app, the alignment goes all wacky (two are aligned left, with some padding, one aligned right).
Suggestions to fix?
It looks like this: !(https://drive.google.com/file/d/0B26Uw_LjUlM-LWNfWnZkR3VvVEU).
Heres the code:
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" class="wrap" style="border-collapse: collapse;background-color: #ffffff;">
<tr>
<td height="20">
<br />
</td>
</tr>
<tr>
<td class="padding2" style="padding: 0 20px;">
<table width="180" align="left" border="0" cellpadding="0" cellspacing="0" class="color-icon-s mid3" style="border-collapse: collapse;border: none;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tr>
<td> <img mc:edit="bottom-ad1" src="https://gallery.mailchimp.com/78524444e0a13e2b163d98bed/images/0cf0b81b-2194-4781-ae2e-5d2a55620756.jpg" width="180" style="width:180px; max-width: 180px;" alt="" />
</td>
</tr>
</table>
<table width="10" align="left" border="0" cellpadding="0" cellspacing="0" class="hide600" style="border-collapse: collapse;border: none;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tr>
<td height="10">
<br />
</td>
</tr>
</table>
<table width="180" align="left" border="0" cellpadding="0" cellspacing="0" class="color-icon-s mid3" style="border-collapse: collapse;border: none;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tr>
<td> <img mc:edit="bottom-ad2" src="https://gallery.mailchimp.com/78524444e0a13e2b163d98bed/images/0cf0b81b-2194-4781-ae2e-5d2a55620756.jpg" width="180" style="width:180px; max-width: 180px;" alt="" />
</td>
</tr>
</table>
<table width="180" align="right" border="0" cellpadding="0" cellspacing="0" class="color-icon-s mid3" style="border-collapse: collapse;border: none;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tr>
<td> <img mc:edit="bottom-ad3" src="https://gallery.mailchimp.com/78524444e0a13e2b163d98bed/images/0cf0b81b-2194-4781-ae2e-5d2a55620756.jpg" width="180" style="width:180px; max-width: 180px;" alt="" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="20">
<br />
</td>
</tr>
</table>
And the CSS:
#media only screen and (max-width: 599px) {
table[class~=button][class~=b], table[class~=color-icon-s], table[class~=color-icon-m] { width:240px !important; max-width:240px !important; height:auto;}
table[class~=color-icon-m], table[class~=color-icon-b], table[class~=color-icon-s] { float:none !important; margin:0 auto !important; }
table[class~=mid3] { margin-bottom:30px !important; }
td[class~=mid3] { margin-bottom:30px !important; }
table[class~=hide600], td[class~=hide600] { display:none !important; }
}
#media only screen and (max-width: 439px) {
td[class~=padding-2-440] { padding:0 20px !important; }
}
#media only screen and (max-width: 339px) {
table[class~=wrap], table[class~=version] { width:100% !important; }
}
Gmail App doesn't support media queries (source: https://litmus.com/help/email-clients/media-query-support/). Therefore any CSS that is not inlined will not be rendered.
That said, Gmail App should be scaling the view to fit the screen. I would change two things in your code.
Avoid setting fixed widths for your images. Do something like <img src="path/here/" style="width:100%;max-width:180px" width="180" />.
Set a width percentage for the <td> containing the image. You could try <td style="width:33.3333%;">.
I hope this helps.
You have to change the two tables align values to align="center". This will cause the tables to be centered in all clients. Then apply class "left" and "right" with floats in the media query in the head section like this:
.left { float: left !important; }
.right { float: right !important; }
Since gmail app strips the styles in the head this css won't have effect in gmail and they will remain centered. Then you will have align=centered issues with Outlook not supporting floats. To right/left align again just add conditional tags only for Outlook before and after the two centered and foated tables like this:
<!--[if (gte mso 9)|(lte ie 8)]>
<table align="right" valign="top" width="49%">
<tr>
<td valign="top" style="border-collapse: collapse;">
<![endif]-->
// your markup here: <table width="49%" align="center" ...
<!--[if (gte mso 9)|(lte ie 8)]>
</td>
</tr>
</table>
<![endif]-->
Set the align value to left and right for both tables in the conditional and you'll have it centered in gmail app and left/right in outlook.
Cheers
I'm currently at a stand still and could really use some help. I'm coding an HTML email which is a first for me. I have a basic understanding of CSS and HTML, but I can't figure out for the life of me how to fix this Gmail problem, and I even know what the cause is. It seems as though the problem is coming from the only editable text region, which is the address line (Hi [name],) and which is also the only row with multiple columns. It looks like the text isn't shrinking to fit the screen, causing the neighboring cells to go crazy and expand the picture. It works great in every other ESP I tested it on, even Outlook. I attached a picture and my code. Please, if you have any advice or resources please help a noob in need.
messed up version on Android Gmail app
code
<html>
<head>
<title>Tradeshow_email_PARTY</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (Tradeshow_email_PARTY.jpg) -->
<table id="Table_01" width="600" height="1046" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3">
<img src="http://i.imgur.com/m2GZSwm.png" style="display:block" width="600" height="408" alt="">
</td>
</tr>
<tr>
<td>
<img src="http://i.imgur.com/RyJDbPa.png" style="display:block" width="47" height="40" alt="">
</td>
<td width="123" height="40" style="line-height: 0pt; font-weight: bolder;"><font face="arial" size="2px" color="#636564">Hi [name],</font>
</td>
<td>
<img src="http://i.imgur.com/KUO971D.png" style="display:block" width="430" height="40" alt="">
</td>
</tr>
<tr>
<td colspan="3">
<img src="http://i.imgur.com/nWU4N6L.png" style="display:block" width="600" height="598" alt="">
</td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
You should nest your columns instead of colspanning it. Setting widths on the all table cells that are not 100% of the row is important also. Example:
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (Tradeshow_email_PARTY.jpg) -->
<table id="Table_01" width="600" height="1046" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="http://i.imgur.com/m2GZSwm.png" style="display:block" width="600" height="408" alt="">
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="47">
<img src="http://i.imgur.com/RyJDbPa.png" style="display:block" width="47" height="40" alt="">
</td>
<td width="123" height="40" style="font-family: Arial, Helvetica, sans-serif; font-size:12px; font-weight: bold; color:#636564;">
Hi [name],
</td>
<td width="40">
<img src="http://i.imgur.com/KUO971D.png" style="display:block" width="430" height="40" alt="">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<img src="http://i.imgur.com/nWU4N6L.png" style="display:block" width="600" height="598" alt="">
</td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
You'll notice a few other small things I fixed up for you also. Ultimately though, you are using a lot of images in places where you shouldn't. Your grey sides should be in html and so should all text from the red area down.
This is my try based on above code:
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (Tradeshow_email_PARTY.jpg) -->
<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="http://i.imgur.com/m2GZSwm.png" style="display:block" width="600" height="408" alt="">
</td>
</tr>
<tr>
<td width="600" style="width:600px;min-width:600px;max-width:600px;">
<table width="600" border="0" cellpadding="0" cellspacing="0" style="border-collapse:separate;">
<tr>
<td width="47" style="width:47px;;min-width:47px;padding:0px;margin:0px;">
<img src="http://i.imgur.com/RyJDbPa.png" style="display:block;min-width:47px;width:47px;" width="47" height="40" alt="">
</td>
<td width="123" style="font-family: Arial, Helvetica, sans-serif; font-size:12px; font-weight: bold; color:#636564;width:123px;min-width:123px;">
Hi [name],
</td>
<td width="430" style="width:430px;min-width:430px;">
<img src="http://i.imgur.com/KUO971D.png" style="display:block;width:430px;min-width:430px;" width="430" height="40" alt="">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<img src="http://i.imgur.com/nWU4N6L.png" style="display:block" width="600" height="598" alt="">
</td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>