Email Line Height Html - android

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.

Related

Android 6 Button View Problems in HTML - Email

Only on Android 6 all my Buttons looks different. Even in Outlook 10 the Buttons looks i expected. I don't understand that..Or is this a Litmus Bug?
Here ist my Button-Code Foundation Zurb Email):
<table class="button small-float-center"
style="Margin:0 0 16px 0;border-collapse:collapse;border-spacing:0;margin:0 0 16px 0;padding:0;
text-align:left;vertical-align:top;width:auto">
<tbody>
<tr style="padding:0;text-align:left;vertical-align:top">
<td style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;
color:#000;font-family:Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;
hyphens:auto;line-height:1.3;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:break-word">
<table style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%">
<tbody>
<tr style="padding:0;text-align:left;vertical-align:top">
<td style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;background:#fff;
border:1px solid #000;border-collapse:collapse!important;color:#000;font-family:Helvetica,Arial,sans-serif;font-size:14px;
font-weight:400;hyphens:auto;letter-spacing:1px;line-height:1.3;margin:0;padding:1px 12px;text-align:center;vertical-align:top;
word-wrap:break-word">
<a href="#" style="Margin:0;border:0 solid #fff;border-radius:0;color:#000;display:inline-block;
font-family:Helvetica,Arial,sans-serif;font-size:11px;font-weight:400;line-height:1.3;margin:0;
padding:7px 5px 7px 5px;text-align:left;text-decoration:none">WEITERLESEN</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>

HTML on Outlook for Android not showing buttons as expected

I am creating an HTML Email template following the next one: transactional html email templates and in particular: this one.
I have inlined my css using zurb foundation inliner, and hosted the template on SendGrid.
Inline HTML/CSS:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">
<meta name="viewport" content="width=device-width" style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">
<title style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">Alerts e.g. approaching your limit</title>
</head>
<body style="-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:none;background-color:#f6f6f6;box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;height:100%;line-height:1.6;margin:0;padding:0;width:100%!important">
<style type="text/css">
#media only screen and (max-width:640px) {
h1,
h2,
h3,
h4 {
font-weight: 600!important;
margin: 20px 0 5px!important
}
h1 {
font-size: 22px!important
}
h2 {
font-size: 18px!important
}
h3 {
font-size: 16px!important
}
.container {
width: 100%!important
}
.content,
.content-wrapper {
padding: 10px!important
}
.invoice {
width: 100%!important
}
}
</style>
<table class="body-wrap" style="background-color:#f6f6f6;box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0;width:100%">
<tbody>
<tr style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">
<td style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0;vertical-align:top"> </td>
<td class="container" style="box-sizing:border-box;clear:both!important;display:block!important;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0 auto!important;max-width:600px!important;padding:0;vertical-align:top"
width="600">
<div class="content" style="box-sizing:border-box;display:block;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0 auto;max-width:600px;padding:20px">
<table cellpadding="0" cellspacing="0" class="main" style="background:#fff;border:1px solid #e9e9e9;border-radius:3px;box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0" width="100%">
<tbody>
<tr style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">
<td class="alert alert-warning" style="background:#ff9f00;border-radius:3px 3px 0 0;box-sizing:border-box;color:#fff;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:500;margin:0;padding:20px;text-align:center;vertical-align:top">Warning: You're approaching your limit. Please upgrade.</td>
</tr>
<tr style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">
<td class="content-wrap" style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:20px;vertical-align:top">
<table cellpadding="0" cellspacing="0" style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0" width="100%">
<tbody>
<tr style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">
<td class="content-block" style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0 0 20px;vertical-align:top">You have <strong style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">1 free report</strong> remaining.</td>
</tr>
<tr style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">
<td class="content-block" style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0 0 20px;vertical-align:top">Add your credit card now to upgrade your account to a premium plan to ensure you don't miss out on any reports.</td>
</tr>
<tr style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">
<td class="content-block" style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0 0 20px;vertical-align:top"><a class="btn-primary" href="http://www.mailgun.com" style="background-color:#348eda;border:solid #348eda;border-radius:5px;border-width:10px 20px;box-sizing:border-box;color:#FFF;cursor:pointer;display:inline-block;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;font-weight:700;line-height:2;margin:0;padding:0;text-align:center;text-decoration:none;text-transform:capitalize">Upgrade my account</a></td>
</tr>
<tr style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">
<td class="content-block" style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0 0 20px;vertical-align:top">Thanks for choosing Acme Inc.</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<div class="footer" style="box-sizing:border-box;clear:both;color:#999;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:20px;width:100%">
<table style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0" width="100%">
<tbody>
<tr style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">
<td class="aligncenter content-block" style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:12px;margin:0;padding:0 0 20px;text-align:center;vertical-align:top">Unsubscribe from these alerts.</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
<td style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0;vertical-align:top"> </td>
</tr>
</tbody>
</table>
</body>
</html>
When I send it to Gmail:
When I send it to outlook (problem):
Question: How could I fix the button to look on Outlook for Android like intended?
Note that this doesn't happen on Desktop Outlook application, nor the outlook application for iOS.

There are a few different ways to add buttons to email using html, you can read more about the best ways here
I used a nested table padding approach which will work for outlook mobile, code below. Please bare in mind that this will only make the actual link clickable and not the whole button.
If you absolutely need the whole button to be clickable, use one of the other methods in the linked page.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">
<meta name="viewport" content="width=device-width" style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">
<title style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">Alerts e.g. approaching your limit</title>
</head>
<body style="-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:none;background-color:#f6f6f6;box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;height:100%;line-height:1.6;margin:0;padding:0;width:100%!important">
<style type="text/css">
#media only screen and (max-width:640px) {
h1,
h2,
h3,
h4 {
font-weight: 600 !important;
margin: 20px 0 5px !important;
}
h1 {
font-size: 22px !important;
}
h2 {
font-size: 18px !important;
}
h3 {
font-size: 16px !important;
}
.container {
width: 100% !important;
}
.content,
.content-wrapper {
padding: 10px !important;
}
.invoice {
width: 100% !important;
}
}
</style>
<table class="body-wrap" style="background-color:#f6f6f6;box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0;width:100%">
<tbody>
<tr style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">
<td style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0;vertical-align:top"> </td>
<td class="container" style="box-sizing:border-box;clear:both!important;display:block!important;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0 auto!important;max-width:600px!important;padding:0;vertical-align:top"
width="600">
<div class="content" style="box-sizing:border-box;display:block;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0 auto;max-width:600px;padding:20px">
<table cellpadding="0" cellspacing="0" class="main" style="background:#fff;border:1px solid #e9e9e9;border-radius:3px;box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0" width="100%">
<tbody>
<tr style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">
<td class="alert alert-warning" style="background:#ff9f00;border-radius:3px 3px 0 0;box-sizing:border-box;color:#fff;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:500;margin:0;padding:20px;text-align:center;vertical-align:top">Warning: You're approaching your limit. Please upgrade.</td>
</tr>
<tr style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">
<td class="content-wrap" style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:20px;vertical-align:top">
<table cellpadding="0" cellspacing="0" style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0" width="100%">
<tbody>
<tr style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">
<td class="content-block" style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0 0 20px;vertical-align:top">You have <strong style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">1 free report</strong> remaining.</td>
</tr>
<tr style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">
<td class="content-block" style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0 0 20px;vertical-align:top">Add your credit card now to upgrade your account to a premium plan to ensure you don't miss out on any reports.</td>
</tr>
<tr>
<td>
<table width="185" style="Margin:0;border-spacing:0;max-width:185px;">
<tr>
<td width="100%" style="padding:15px 5px 17px 5px;border-radius:4px;background-color:#348eda;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;line-height:22px;font-weight:bold;color:#ffffff;text-align:center;vertical-align:top;">
<a href="http://www.mailgun.com" style="text-decoration:none;color:#ffffff;display:block;">
Upgrade My Account
</a>
</td>
</tr>
</table>
</td>
</tr>
<tr style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">
<td class="content-block" style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0 0 20px;vertical-align:top">Thanks for choosing Acme Inc.</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<div class="footer" style="box-sizing:border-box;clear:both;color:#999;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:20px;width:100%">
<table style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0" width="100%">
<tbody>
<tr style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">
<td class="aligncenter content-block" style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:12px;margin:0;padding:0 0 20px;text-align:center;vertical-align:top">Unsubscribe from these alerts.</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
<td style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0;vertical-align:top"> </td>
</tr>
</tbody>
</table>
</body>
</html>

This is how I fixed the problem.
Outlook for Android was not centering my button. This code was centered in every other email client. My email width is 580px. I added margin: 0; Margin-right: 190px; Margin-left: 190px; to the table in-line style.
<table cellpadding="0" cellspacing="0" border="0" align="center" style="width: 200px; padding: 0px; margin: 0; Margin-right: 190px; Margin-left: 190px;">
<tr align="center">
<td bgcolor="#ffffff" align="center" width="200" class="center button large-button" style="padding: 8px; margin: 0;">
<p style="text-align: center; color: #6f5a95 !important; padding: 0px; margin: 0;">
View new plans </p>
</td>
</tr>
iPhone 5 and 6 shifted to the left, so I added margin: 0px which caused them to ignore the Margin with a capital M. Margin with a capital M gets picked up by Outlook, but ignored by most major email clients.

Responsive Image Alignment in GMail App

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

Getting Gmail app for Android to render my HTML email?

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>

Scale html email to fit within in mobile screen without scroll (android / iOS)

I'm trying to build a html email that will scale to fit within a mobile screen without the user need to scroll horizontally. I have tried using...
<meta name="viewport" content="width=device-width, initial-scale=1.0">
and setting the body width to 100% - but neither seems to work. Any other suggestions?
Here is my full html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">.ExternalClass .ecxReadMsgBody{width:100%;} .ExternalClass{width:100%;} body{margin: 0; padding: 0;} </style>
</head>
<body style="background: #dfdfe0; width:100%;">
<table align="center" border="0" cellpadding="0" cellspacing="0" style="background: #dfdfe0;color: #37383a;margin: 0px;width: 100%;" width="100%">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="576">
<tr>
<td colspan="2"></td>
<td colspan="34" style="background-color: red;" bgcolor="red"><img width="522" src="header2.png"></td>
<td colspan="2"></td>
</tr>
<tr> <!-- Start of the email grid -->
<td width="9"></td>
<td width="18" height="10" style="background-color: red; height: 10px;" bgcolor="red"></td>
<td width="27"></td>
<td width="9"></td>
<td width="9"></td>
<td width="27"></td>
<td width="9"></td>
<td width="9"></td>
<td width="27"></td>
<td width="9"></td>
<td width="9"></td>
<td width="27"></td>
<td width="9"></td>
<td width="9"></td>
<td width="27"></td>
<td width="9"></td>
<td width="9"></td>
<td width="27"></td>
<td width="9"></td>
<td width="9"></td>
<td width="27"></td>
<td width="9"></td>
<td width="9"></td>
<td width="27"></td>
<td width="9"></td>
<td width="9"></td>
<td width="27"></td>
<td width="9"></td>
<td width="9"></td>
<td width="27"></td>
<td width="9"></td>
<td width="9"></td>
<td width="27"></td>
<td width="9"></td>
<td width="9"></td>
<td width="27"></td>
<td width="18" style="background-color: red;" bgcolor="red"></td>
<td width="9"></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Many thanks!
EDIT
Please note I also reduced the amount of columns to 5 and I still get the same result

Your table width is set in pixels (576px) which is larger than the phone screen size. You could use a media query (responsive design) to disable or resize the desktop version to fit a mobile screen, otherwise you need to go with a fluid design.
Limitations are that media queries don't work in Gmail as you cant inline them. Fluid only really works with single column layouts.

<table border="0" cellpadding="0" cellspacing="0" width="100%">
You have specified an absolute width in your table. Change it to 100% width.

Categories

Resources