Foundation-emails: Gmail Performance
Sirs,
I have just tried the new demo template in 2.0 RC2, sending it using the Foundation for Emails own inlined build and sent as html in Putsmail (in case you imagine I got that wrong). Sadly, it still does not work responsively in the ubiquitous Gmail app.
For my last project I was forced to shift to a combination of http://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries--cms-23919 plus a smidgin of Email on Acid which is of a similar design to tutsplus.
These achieve their responsivity almost completely without media queries. A version of Foundation that did so would be great. I'm wondering if I could convert their sample templates to run under Foundation Emails 2.
bug
tazzydemon
All 10 comments
Looks like I missed this in v1.x:
http://foundation.zurb.com/emails/docs.html#gmail
But I was hoping that would be obsolete in 2.x
tazzydemon
on 2 Mar 2016
This might be because our template was injecting CSS into a <style> tag in the <head>, and some email clients strip the <head> from an email.
I made some refinements to the template, which you can see here: zurb/foundation-emails-template@241cfac452ff342cc7ceb79f776bbd3d7a4c7333
Note in src/templates/default.html, there's a commented-out <style> tag at the top of the <body>. This is the new injection point for CSS. I also shuffled around some npm packages used by the Gulpfile. If you want to update your template, copy/paste the gulpfile.babel.js and package.json from the latest version of the template, and add that inject comment exactly as-is.
Let me know if that helps!
gakimball
on 7 Mar 2016
Thank you for your attention. I did build and try the change but its still the same. This is not too much of a surprise given that, as far as I can determine, the Gmail app still does not support media queries. This then means "Gmail Responsive" technique which I mentioned. None of this would matter if it weren't for the fact that the Gmail app is everywhere. I use it myself. If I am furnished with an email address I can test a test copy to that to ensure I'm doing nothing stupid.
tazzydemon
on 7 Mar 2016
Could you post an HTML example so we can see which components you're using?
gakimball
on 8 Mar 2016
Its the vanilla one straight from the Zurb box. This is the base page and then the compiled and inline version...
I'm well aware of the fact that there is no block-grid in use and that is the key to using F. Emails V1.x
If you use the inlined version in a mail you should find that it is not responsive in Gmail. If that is not the case and it works for you then I will be both profusely apologetic and astounded.
tazzydemon
on 9 Mar 2016
I am experiencing a similar problem with my emails. They look fine on desktop, but in gmail on my phone the emails are not responsive. Would love to know what I've done wrong.
Here's the version that sends via localhost:
<!-- Inliner Build Version 4380b7741bb759d6cb997545f3add21ad48f010b -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.o=
rg/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns=3D"http://www.w3.org/1999/xhtml" xmlns=3D"http://www.w3.org/1=
999/xhtml" style=3D"min-height: 100%; background: #f3f3f3;">
<head>
<meta http-equiv=3D"Content-Type" content=3D"text/html; charset=3Dutf=
-8" />
<meta name=3D"viewport" content=3D"width=3Ddevice-width" />
</head>
<body style=3D"width: 100% !important; min-width: 100%; -webkit-text-si=
ze-adjust: 100%; -ms-text-size-adjust: 100%; -moz-box-sizing: border-box;=
-webkit-box-sizing: border-box; box-sizing: border-box; color: #0a0a0a; =
font-family: Helvetica,Arial,sans-serif; font-weight: normal; text-align:=
left; line-height: 19px; font-size: 14px; margin: 0; padding: 0;"><style=
type=3D"text/css">
@media only screen and (max-width: 596px) {
.small-float-center {
margin: 0 auto !important; float: none !important; text-align: center=
!important;
}
.small-text-center {
text-align: center !important;
}
.small-text-left {
text-align: left !important;
}
.small-text-right {
text-align: right !important;
}
table.body table.container .hide-for-large {
display: block !important; width: auto !important; overflow: visible =
!important;
}
table.body table.container .row.hide-for-large {
display: table !important; width: 100% !important;
}
table.body table.container .row.hide-for-large {
display: table !important; width: 100% !important;
}
table.body table.container .show-for-large {
display: none !important; width: 0; mso-hide: all; overflow: hidden;
}
table.body img {
width: auto !important; height: auto !important;
}
table.body center {
min-width: 0 !important;
}
table.body .container {
width: 95% !important;
}
table.body .columns {
height: auto !important; -moz-box-sizing: border-box; -webkit-box-siz=
ing: border-box; box-sizing: border-box; padding-left: 16px !important; p=
adding-right: 16px !important;
}
table.body .column {
height: auto !important; -moz-box-sizing: border-box; -webkit-box-siz=
ing: border-box; box-sizing: border-box; padding-left: 16px !important; p=
adding-right: 16px !important;
}
table.body .columns .column {
padding-left: 0 !important; padding-right: 0 !important;
}
table.body .columns .columns {
padding-left: 0 !important; padding-right: 0 !important;
}
table.body .column .column {
padding-left: 0 !important; padding-right: 0 !important;
}
table.body .column .columns {
padding-left: 0 !important; padding-right: 0 !important;
}
table.body .collapse .columns {
padding-left: 0 !important; padding-right: 0 !important;
}
table.body .collapse .column {
padding-left: 0 !important; padding-right: 0 !important;
}
td.small-1 {
display: inline-block !important; width: 8.33333% !important;
}
th.small-1 {
display: inline-block !important; width: 8.33333% !important;
}
td.small-2 {
display: inline-block !important; width: 16.66667% !important;
}
th.small-2 {
display: inline-block !important; width: 16.66667% !important;
}
td.small-3 {
display: inline-block !important; width: 25% !important;
}
th.small-3 {
display: inline-block !important; width: 25% !important;
}
td.small-4 {
display: inline-block !important; width: 33.33333% !important;
}
th.small-4 {
display: inline-block !important; width: 33.33333% !important;
}
td.small-5 {
display: inline-block !important; width: 41.66667% !important;
}
th.small-5 {
display: inline-block !important; width: 41.66667% !important;
}
td.small-6 {
display: inline-block !important; width: 50% !important;
}
th.small-6 {
display: inline-block !important; width: 50% !important;
}
td.small-7 {
display: inline-block !important; width: 58.33333% !important;
}
th.small-7 {
display: inline-block !important; width: 58.33333% !important;
}
td.small-8 {
display: inline-block !important; width: 66.66667% !important;
}
th.small-8 {
display: inline-block !important; width: 66.66667% !important;
}
td.small-9 {
display: inline-block !important; width: 75% !important;
}
th.small-9 {
display: inline-block !important; width: 75% !important;
}
td.small-10 {
display: inline-block !important; width: 83.33333% !important;
}
th.small-10 {
display: inline-block !important; width: 83.33333% !important;
}
td.small-11 {
display: inline-block !important; width: 91.66667% !important;
}
th.small-11 {
display: inline-block !important; width: 91.66667% !important;
}
td.small-12 {
display: inline-block !important; width: 100% !important;
}
th.small-12 {
display: inline-block !important; width: 100% !important;
}
.columns td.small-12 {
display: block !important; width: 100% !important;
}
.column td.small-12 {
display: block !important; width: 100% !important;
}
.columns th.small-12 {
display: block !important; width: 100% !important;
}
.column th.small-12 {
display: block !important; width: 100% !important;
}
table.body td.small-offset-1 {
margin-left: 8.33333% !important;
}
table.body th.small-offset-1 {
margin-left: 8.33333% !important;
}
table.body td.small-offset-2 {
margin-left: 16.66667% !important;
}
table.body th.small-offset-2 {
margin-left: 16.66667% !important;
}
table.body td.small-offset-3 {
margin-left: 25% !important;
}
table.body th.small-offset-3 {
margin-left: 25% !important;
}
table.body td.small-offset-4 {
margin-left: 33.33333% !important;
}
table.body th.small-offset-4 {
margin-left: 33.33333% !important;
}
table.body td.small-offset-5 {
margin-left: 41.66667% !important;
}
table.body th.small-offset-5 {
margin-left: 41.66667% !important;
}
table.body td.small-offset-6 {
margin-left: 50% !important;
}
table.body th.small-offset-6 {
margin-left: 50% !important;
}
table.body td.small-offset-7 {
margin-left: 58.33333% !important;
}
table.body th.small-offset-7 {
margin-left: 58.33333% !important;
}
table.body td.small-offset-8 {
margin-left: 66.66667% !important;
}
table.body th.small-offset-8 {
margin-left: 66.66667% !important;
}
table.body td.small-offset-9 {
margin-left: 75% !important;
}
table.body th.small-offset-9 {
margin-left: 75% !important;
}
table.body td.small-offset-10 {
margin-left: 83.33333% !important;
}
table.body th.small-offset-10 {
margin-left: 83.33333% !important;
}
table.body td.small-offset-11 {
margin-left: 91.66667% !important;
}
table.body th.small-offset-11 {
margin-left: 91.66667% !important;
}
table.body table.columns td.expander {
display: none !important;
}
table.body table.columns th.expander {
display: none !important;
}
table.body .right-text-pad {
padding-left: 10px !important;
}
table.body .text-pad-right {
padding-left: 10px !important;
}
table.body .left-text-pad {
padding-right: 10px !important;
}
table.body .text-pad-left {
padding-right: 10px !important;
}
table.menu {
width: 100% !important;
}
table.menu td {
width: auto !important; display: inline-block !important;
}
table.menu th {
width: auto !important; display: inline-block !important;
}
table.menu.vertical td {
display: block !important;
}
table.menu.vertical th {
display: block !important;
}
table.menu.small-vertical td {
display: block !important;
}
table.menu.small-vertical th {
display: block !important;
}
table.menu[align=3D"center"] {
width: auto !important;
}
}
</style>
<table class=3D"body" data-made-with-foundation=3D"" style=3D"border-spac=
ing: 0; border-collapse: collapse; vertical-align: top; text-align: left;=
height: 100%; width: 100%; color: #0a0a0a; font-family: Helvetica,Arial,=
sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; back=
ground: #f3f3f3; margin: 0; padding: 0;" bgcolor=3D"#f3f3f3"><tr style=3D=
"vertical-align: top; text-align: left; padding: 0;" align=3D"left"><td c=
lass=3D"float-center" align=3D"center" valign=3D"top" style=3D"word-wrap:=
break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; bo=
rder-collapse: collapse !important; vertical-align: top; text-align: cent=
er; float: none; color: #0a0a0a; font-family: Helvetica,Arial,sans-serif;=
font-weight: normal; line-height: 19px; font-size: 14px; margin: 0 auto;=
padding: 0;">
<center data-parsed=3D"" style=3D"width: 100%; min-width: 580px;">
<table class=3D"wrapper header float-center" align=3D"center" style=3D"wi=
dth: 100%; border-spacing: 0; border-collapse: collapse; vertical-align: =
top; text-align: center; float: none; background: #8a8a8a; margin: 0 auto=
; padding: 0;" bgcolor=3D"#8a8a8a"><tr style=3D"vertical-align: top; text=
-align: left; padding: 0;" align=3D"left"><td class=3D"wrapper-inner" sty=
le=3D"word-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; h=
yphens: auto; border-collapse: collapse !important; vertical-align: top; =
text-align: left; color: #0a0a0a; font-family: Helvetica,Arial,sans-serif=
; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; pad=
ding: 20px;" align=3D"left" valign=3D"top">
<table class=3D"container" style=3D"border-spacing: 0; border-collapse: c=
ollapse; vertical-align: top; text-align: inherit; width: 580px; backgrou=
nd: transparent; margin: 0 auto; padding: 0;" bgcolor=3D"transparent"><tb=
ody><tr style=3D"vertical-align: top; text-align: left; padding: 0;" alig=
n=3D"left"><td style=3D"word-wrap: break-word; -webkit-hyphens: auto; -mo=
z-hyphens: auto; hyphens: auto; border-collapse: collapse !important; ver=
tical-align: top; text-align: left; color: #0a0a0a; font-family: Helvetic=
a,Arial,sans-serif; font-weight: normal; line-height: 19px; font-size: 14=
px; margin: 0; padding: 0;" align=3D"left" valign=3D"top">
<table class=3D"row collapse" style=3D"border-spacing: 0; border-collapse=
: collapse; vertical-align: top; text-align: left; width: 100%; position:=
relative; display: table; padding: 0;"><tbody><tr style=3D"vertical-alig=
n: top; text-align: left; padding: 0;" align=3D"left"><th class=3D"small-=
6 large-6 columns first" style=3D"width: 298px; color: #0a0a0a; font-fami=
ly: Helvetica,Arial,sans-serif; font-weight: normal; text-align: left; li=
ne-height: 19px; font-size: 14px; margin: 0 auto; padding: 0;" align=3D"l=
eft">
<table style=3D"border-spacing: 0; border-collapse: collapse; vertical-al=
ign: top; text-align: left; width: 100%; padding: 0;"><tr style=3D"vertic=
al-align: top; text-align: left; padding: 0;" align=3D"left"><th style=3D=
"color: #0a0a0a; font-family: Helvetica,Arial,sans-serif; font-weight: no=
rmal; text-align: left; line-height: 19px; font-size: 14px; margin: 0; pa=
dding: 0;" align=3D"left"> <img src=3D"https://www.hearingtracker.com/ema=
il-logo.jpg" style=3D"outline: none; text-decoration: none; -ms-interpola=
tion-mode: bicubic; width: auto; max-width: 100%; clear: both; display: b=
lock;" /></th>
</tr></table></th>
<th class=3D"small-6 large-6 columns last" style=3D"width: 298px; color: =
#0a0a0a; font-family: Helvetica,Arial,sans-serif; font-weight: normal; te=
xt-align: left; line-height: 19px; font-size: 14px; margin: 0 auto; paddi=
ng: 0;" align=3D"left">
<table style=3D"border-spacing: 0; border-collapse: collapse; vertical-al=
ign: top; text-align: left; width: 100%; padding: 0;"><tr style=3D"vertic=
al-align: top; text-align: left; padding: 0;" align=3D"left"><th style=3D=
"color: #0a0a0a; font-family: Helvetica,Arial,sans-serif; font-weight: no=
rmal; text-align: left; line-height: 19px; font-size: 14px; margin: 0; pa=
dding: 0;" align=3D"left">
<p class=3D"text-right" style=3D"text-align: right; color: #fff; font-fam=
ily: Helvetica,Arial,sans-serif; font-weight: normal; line-height: 19px; =
font-size: 14px; margin: 0 0 10px; padding: 15px 0 0;" align=3D"right">He=
aring Tracker, Inc</p>
</th>
</tr></table></th>
</tr></tbody></table></td>
</tr></tbody></table></td>
</tr></table><table class=3D"container float-center" style=3D"border-spac=
ing: 0; border-collapse: collapse; vertical-align: top; text-align: cente=
r; width: 580px; float: none; background: #fefefe; margin: 0 auto; paddin=
g: 0;" bgcolor=3D"#fefefe"><tbody><tr style=3D"vertical-align: top; text-=
align: left; padding: 0;" align=3D"left"><td style=3D"word-wrap: break-wo=
rd; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-coll=
apse: collapse !important; vertical-align: top; text-align: left; color: =
#0a0a0a; font-family: Helvetica,Arial,sans-serif; font-weight: normal; li=
ne-height: 19px; font-size: 14px; margin: 0; padding: 0;" align=3D"left" =
valign=3D"top">
<table class=3D"spacer" style=3D"border-spacing: 0; border-collapse: coll=
apse; vertical-align: top; text-align: left; padding: 0;"><tbody><tr styl=
e=3D"vertical-align: top; text-align: left; padding: 0;" align=3D"left"><=
td height=3D"16px" style=3D"font-size: 16px; line-height: 16px; word-wrap=
: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; b=
order-collapse: collapse !important; vertical-align: top; text-align: lef=
t; color: #0a0a0a; font-family: Helvetica,Arial,sans-serif; font-weight: =
normal; margin: 0; padding: 0;" align=3D"left" valign=3D"top">=C2=A0</td>=
</tr></tbody></table><table class=3D"row" style=3D"border-spacing: 0; bor=
der-collapse: collapse; vertical-align: top; text-align: left; width: 100=
%; position: relative; display: table; padding: 0;"><tbody><tr style=3D"v=
ertical-align: top; text-align: left; padding: 0;" align=3D"left"><th cla=
ss=3D"small-12 large-12 columns first last" style=3D"width: 564px; color:=
#0a0a0a; font-family: Helvetica,Arial,sans-serif; font-weight: normal; t=
ext-align: left; line-height: 19px; font-size: 14px; margin: 0 auto; padd=
ing: 0 16px 16px;" align=3D"left">
<table style=3D"border-spacing: 0; border-collapse: collapse; vertical-al=
ign: top; text-align: left; width: 100%; padding: 0;"><tr style=3D"vertic=
al-align: top; text-align: left; padding: 0;" align=3D"left"><th style=3D=
"color: #0a0a0a; font-family: Helvetica,Arial,sans-serif; font-weight: no=
rmal; text-align: left; line-height: 19px; font-size: 14px; margin: 0; pa=
dding: 0;" align=3D"left">
<h1 style=3D"color: inherit; font-family: Helvetica,Arial,sans-serif; fon=
t-weight: normal; text-align: left; line-height: 1.3; word-wrap: normal; =
font-size: 34px; margin: 0 0 10px; padding: 0;" align=3D"left">Hearing Tr=
acker - New User</h1>
<p class=3D"lead" style=3D"color: #0a0a0a; font-family: Helvetica,Arial=
,sans-serif; font-weight: normal; text-align: left; line-height: 1.2; fon=
t-size: 20px; margin: 0 0 10px; padding: 0;" align=3D"left">Click <a href=
=3D"http://localhost:3000/users/46">here</a> to see the new user.</p>
<p style=3D"color: #0a0a0a; font-family: Helvetica,Arial,sans-serif; font=
-weight: normal; text-align: left; line-height: 19px; font-size: 14px; ma=
rgin: 0 0 10px; padding: 0;" align=3D"left">A new user has signed up. All=
is well in the world.</p>
<table class=3D"callout" style=3D"border-spacing: 0; border-collapse: col=
lapse; vertical-align: top; text-align: left; width: 100%; margin-bottom:=
16px; padding: 0;"><tr style=3D"vertical-align: top; text-align: left; p=
adding: 0;" align=3D"left"><th class=3D"callout-inner primary" style=3D"c=
olor: #0a0a0a; font-family: Helvetica,Arial,sans-serif; font-weight: norm=
al; text-align: left; line-height: 19px; font-size: 14px; width: 100%; ba=
ckground: #def0fc; margin: 0; padding: 10px 10px 0px; border: 1px solid #=
A2E2FF;" align=3D"left" bgcolor=3D"#def0fc">
<p style=3D"color: #0a0a0a; font-family: Helvetica,Arial,sans-serif; font=
-weight: normal; text-align: left; line-height: 19px; font-size: 14px; ma=
rgin: 0 0 10px; padding: 0;" align=3D"left">Want to know more? Check out =
our blog for the latest hearing news. <a href=3D"http://hearingtracker.co=
m/blog" style=3D"color: #2ba6cb; text-decoration: none !important">Blog =C2=
=BB</a></p>
</th>
<th class=3D"expander" style=3D"visibility: hidden; width: 0; color: #0a0=
a0a; font-family: Helvetica,Arial,sans-serif; font-weight: normal; text-a=
lign: left; line-height: 19px; font-size: 14px; margin: 0; padding: 0;" a=
lign=3D"left"></th>
</tr></table></th>
<th class=3D"expander" style=3D"visibility: hidden; width: 0; color: #0a0=
a0a; font-family: Helvetica,Arial,sans-serif; font-weight: normal; text-a=
lign: left; line-height: 19px; font-size: 14px; margin: 0; padding: 0;" a=
lign=3D"left"></th>
</tr></table></th>
</tr></tbody></table><table class=3D"wrapper secondary" align=3D"center" =
style=3D"width: 100%; border-spacing: 0; border-collapse: collapse; verti=
cal-align: top; text-align: left; background: #f3f3f3; padding: 0;" bgcol=
or=3D"#f3f3f3"><tr style=3D"vertical-align: top; text-align: left; paddin=
g: 0;" align=3D"left"><td class=3D"wrapper-inner" style=3D"word-wrap: bre=
ak-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border=
-collapse: collapse !important; vertical-align: top; text-align: left; co=
lor: #0a0a0a; font-family: Helvetica,Arial,sans-serif; font-weight: norma=
l; line-height: 19px; font-size: 14px; margin: 0; padding: 0;" align=3D"l=
eft" valign=3D"top">
<table class=3D"spacer" style=3D"border-spacing: 0; border-collapse: coll=
apse; vertical-align: top; text-align: left; padding: 0;"><tbody><tr styl=
e=3D"vertical-align: top; text-align: left; padding: 0;" align=3D"left"><=
td height=3D"16px" style=3D"font-size: 16px; line-height: 16px; word-wrap=
: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; b=
order-collapse: collapse !important; vertical-align: top; text-align: lef=
t; color: #0a0a0a; font-family: Helvetica,Arial,sans-serif; font-weight: =
normal; margin: 0; padding: 0;" align=3D"left" valign=3D"top">=C2=A0</td>=
</tr></tbody></table><table class=3D"row" style=3D"border-spacing: 0; bor=
der-collapse: collapse; vertical-align: top; text-align: left; width: 100=
%; position: relative; display: table; padding: 0;"><tbody><tr style=3D"v=
ertical-align: top; text-align: left; padding: 0;" align=3D"left"><th cla=
ss=3D"small-12 large-6 columns first" style=3D"width: 274px; color: #0a0a=
0a; font-family: Helvetica,Arial,sans-serif; font-weight: normal; text-al=
ign: left; line-height: 19px; font-size: 14px; margin: 0 auto; padding: 0=
8px 16px 16px;" align=3D"left">
<table style=3D"border-spacing: 0; border-collapse: collapse; vertical-al=
ign: top; text-align: left; width: 100%; padding: 0;"><tr style=3D"vertic=
al-align: top; text-align: left; padding: 0;" align=3D"left"><th style=3D=
"color: #0a0a0a; font-family: Helvetica,Arial,sans-serif; font-weight: no=
rmal; text-align: left; line-height: 19px; font-size: 14px; margin: 0; pa=
dding: 0;" align=3D"left">
<h5 style=3D"color: inherit; font-family: Helvetica,Arial,sans-serif; fon=
t-weight: normal; text-align: left; line-height: 1.3; word-wrap: normal; =
font-size: 20px; margin: 0 0 10px; padding: 0;" align=3D"left">Connect Wi=
th Us:</h5>
<table class=3D"button facebook expand" style=3D"border-spacing: 0; borde=
r-collapse: collapse; vertical-align: top; text-align: left; width: 100% =
!important; margin: 0 0 16px; padding: 0;"><tr style=3D"vertical-align: t=
op; text-align: left; padding: 0;" align=3D"left"><td style=3D"word-wrap:=
break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; bo=
rder-collapse: collapse !important; vertical-align: top; text-align: left=
; color: #0a0a0a; font-family: Helvetica,Arial,sans-serif; font-weight: n=
ormal; line-height: 19px; font-size: 14px; margin: 0; padding: 0;" align=3D=
"left" valign=3D"top">
<table style=3D"border-spacing: 0; border-collapse: collapse; vertical-al=
ign: top; text-align: left; width: 100%; padding: 0;"><tr style=3D"vertic=
al-align: top; text-align: left; padding: 0;" align=3D"left"><td style=3D=
"word-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphen=
s: auto; border-collapse: collapse !important; vertical-align: top; text-=
align: left; color: #fefefe; font-family: Helvetica,Arial,sans-serif; fon=
t-weight: normal; line-height: 19px; font-size: 14px; background-color: #=
3B5998 !important; margin: 0; padding: 0; border: 2px solid #3b5998;" ali=
gn=3D"left" bgcolor=3D"#3B5998 !important" valign=3D"top">
<center data-parsed=3D"" style=3D"width: 100%; min-width: 0;"><a href=3D"=
https://www.facebook.com/hearingtracker/" align=3D"center" class=3D"float=
-center" style=3D"color: #fefefe; font-family: Helvetica,Arial,sans-serif=
; font-weight: bold; text-align: center; line-height: 1.3; text-decoratio=
n: none; font-size: 16px; display: inline-block; border-radius: 3px; widt=
h: 100%; margin: 0; padding: 8px 0; border: 0px solid #2199e8;">Facebook<=
/a></center>
</td>
</tr></table></td>
<td class=3D"expander" style=3D"word-wrap: break-word; -webkit-hyphens: a=
uto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !import=
ant; vertical-align: top; text-align: left; visibility: hidden; width: 0;=
color: #0a0a0a; font-family: Helvetica,Arial,sans-serif; font-weight: no=
rmal; line-height: 19px; font-size: 14px; margin: 0; padding: 0;" align=3D=
"left" valign=3D"top"></td>
</tr></table><table class=3D"button twitter expand" style=3D"border-spaci=
ng: 0; border-collapse: collapse; vertical-align: top; text-align: left; =
width: 100% !important; margin: 0 0 16px; padding: 0;"><tr style=3D"verti=
cal-align: top; text-align: left; padding: 0;" align=3D"left"><td style=3D=
"word-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphen=
s: auto; border-collapse: collapse !important; vertical-align: top; text-=
align: left; color: #0a0a0a; font-family: Helvetica,Arial,sans-serif; fon=
t-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding:=
0;" align=3D"left" valign=3D"top">
<table style=3D"border-spacing: 0; border-collapse: collapse; vertical-al=
ign: top; text-align: left; width: 100%; padding: 0;"><tr style=3D"vertic=
al-align: top; text-align: left; padding: 0;" align=3D"left"><td style=3D=
"word-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphen=
s: auto; border-collapse: collapse !important; vertical-align: top; text-=
align: left; color: #fefefe; font-family: Helvetica,Arial,sans-serif; fon=
t-weight: normal; line-height: 19px; font-size: 14px; background-color: #=
1daced !important; margin: 0; padding: 0; border: 2px solid #1daced;" ali=
gn=3D"left" bgcolor=3D"#1daced !important" valign=3D"top">
<center data-parsed=3D"" style=3D"width: 100%; min-width: 0;"><a href=3D"=
https://twitter.com/HearingTracker" align=3D"center" class=3D"float-cente=
r" style=3D"color: #fefefe; font-family: Helvetica,Arial,sans-serif; font=
-weight: bold; text-align: center; line-height: 1.3; text-decoration: non=
e; font-size: 16px; display: inline-block; border-radius: 3px; width: 100=
%; margin: 0; padding: 8px 0; border: 0px solid #2199e8;">Twitter</a></ce=
nter>
</td>
</tr></table></td>
<td class=3D"expander" style=3D"word-wrap: break-word; -webkit-hyphens: a=
uto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !import=
ant; vertical-align: top; text-align: left; visibility: hidden; width: 0;=
color: #0a0a0a; font-family: Helvetica,Arial,sans-serif; font-weight: no=
rmal; line-height: 19px; font-size: 14px; margin: 0; padding: 0;" align=3D=
"left" valign=3D"top"></td>
</tr></table><table class=3D"button google expand" style=3D"border-spacin=
g: 0; border-collapse: collapse; vertical-align: top; text-align: left; w=
idth: 100% !important; margin: 0 0 16px; padding: 0;"><tr style=3D"vertic=
al-align: top; text-align: left; padding: 0;" align=3D"left"><td style=3D=
"word-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphen=
s: auto; border-collapse: collapse !important; vertical-align: top; text-=
align: left; color: #0a0a0a; font-family: Helvetica,Arial,sans-serif; fon=
t-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding:=
0;" align=3D"left" valign=3D"top">
<table style=3D"border-spacing: 0; border-collapse: collapse; vertical-al=
ign: top; text-align: left; width: 100%; padding: 0;"><tr style=3D"vertic=
al-align: top; text-align: left; padding: 0;" align=3D"left"><td style=3D=
"word-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphen=
s: auto; border-collapse: collapse !important; vertical-align: top; text-=
align: left; color: #fefefe; font-family: Helvetica,Arial,sans-serif; fon=
t-weight: normal; line-height: 19px; font-size: 14px; background-color: #=
DB4A39 !important; margin: 0; padding: 0; border: 2px solid #db4a39;" ali=
gn=3D"left" bgcolor=3D"#DB4A39 !important" valign=3D"top">
<center data-parsed=3D"" style=3D"width: 100%; min-width: 0;"><a href=3D"=
https://plus.google.com/+hearingtracker" align=3D"center" class=3D"float-=
center" style=3D"color: #fefefe; font-family: Helvetica,Arial,sans-serif;=
font-weight: bold; text-align: center; line-height: 1.3; text-decoration=
: none; font-size: 16px; display: inline-block; border-radius: 3px; width=
: 100%; margin: 0; padding: 8px 0; border: 0px solid #2199e8;">Google+</a=
></center>
</td>
</tr></table></td>
<td class=3D"expander" style=3D"word-wrap: break-word; -webkit-hyphens: a=
uto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !import=
ant; vertical-align: top; text-align: left; visibility: hidden; width: 0;=
color: #0a0a0a; font-family: Helvetica,Arial,sans-serif; font-weight: no=
rmal; line-height: 19px; font-size: 14px; margin: 0; padding: 0;" align=3D=
"left" valign=3D"top"></td>
</tr></table></th>
</tr></table></th>
<th class=3D"small-12 large-6 columns last" style=3D"width: 274px; color:=
#0a0a0a; font-family: Helvetica,Arial,sans-serif; font-weight: normal; t=
ext-align: left; line-height: 19px; font-size: 14px; margin: 0 auto; padd=
ing: 0 16px 16px 8px;" align=3D"left">
<table style=3D"border-spacing: 0; border-collapse: collapse; vertical-al=
ign: top; text-align: left; width: 100%; padding: 0;"><tr style=3D"vertic=
al-align: top; text-align: left; padding: 0;" align=3D"left"><th style=3D=
"color: #0a0a0a; font-family: Helvetica,Arial,sans-serif; font-weight: no=
rmal; text-align: left; line-height: 19px; font-size: 14px; margin: 0; pa=
dding: 0;" align=3D"left">
<h5 style=3D"color: inherit; font-family: Helvetica,Arial,sans-serif; fon=
t-weight: normal; text-align: left; line-height: 1.3; word-wrap: normal; =
font-size: 20px; margin: 0 0 10px; padding: 0;" align=3D"left">Contact In=
fo:</h5>
<p style=3D"color: #0a0a0a; font-family: Helvetica,Arial,sans-serif; font=
-weight: normal; text-align: left; line-height: 19px; font-size: 14px; ma=
rgin: 0 0 10px; padding: 0;" align=3D"left">Call: (775) 372-8346</p>
<p style=3D"color: #0a0a0a; font-family: Helvetica,Arial,sans-serif; font=
-weight: normal; text-align: left; line-height: 19px; font-size: 14px; ma=
rgin: 0 0 10px; padding: 0;" align=3D"left">Email: <a href=3D"mailto:info=
@hearingtracker.com" style=3D"color: #2199e8; font-family: Helvetica,Aria=
l,sans-serif; font-weight: normal; text-align: left; line-height: 1.3; te=
xt-decoration: none; margin: 0; padding: 0;">[email protected]</a><=
/p>
<p style=3D"color: #0a0a0a; font-family: Helvetica,Arial,sans-serif; font=
-weight: normal; text-align: left; line-height: 19px; font-size: 14px; ma=
rgin: 0 0 10px; padding: 0;" align=3D"left">PO Box 40702</p>
<p style=3D"color: #0a0a0a; font-family: Helvetica,Arial,sans-serif; font=
-weight: normal; text-align: left; line-height: 19px; font-size: 14px; ma=
rgin: 0 0 10px; padding: 0;" align=3D"left">Austin TX 78704</p>
</th>
</tr></table></th>
</tr></tbody></table></td>
</tr></table></td>
</tr></tbody></table></center>
</td>
</tr></table></body>
</html>
Here's the version that arrives via Gmail:
<!-- Inliner Build Version 4380b7741bb759d6cb997545f3add21ad48f010b -->=0D=
=0A<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.o=
rg/TR/xhtml1/DTD/xhtml1-strict.dtd">=0D=0A<html xmlns=3D"http://www.w3.org/1=
999/xhtml" xmlns=3D"http://www.w3.org/1999/xhtml" style=3D"min-height: 100%;=
background: #f3f3f3;">=0D=0A <head>=0D=0A <meta http-equiv=3D"Content-T=
ype" content=3D"text/html; charset=3Dutf-8" />=0D=0A <meta name=3D"viewpo=
rt" content=3D"width=3Ddevice-width" />=0D=0A </head>=0D=0A <body style=3D=
"width: 100% !important; min-width: 100%; -webkit-text-size-adjust: 100%; -m=
s-text-size-adjust: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: b=
order-box; box-sizing: border-box; color: #0a0a0a; font-family: Helvetica,Ar=
ial,sans-serif; font-weight: normal; text-align: left; line-height: 19px; fo=
nt-size: 14px; margin: 0; padding: 0;"><style type=3D"text/css">=0D=0A@media=
only screen and (max-width: 596px) {=0D=0A .small-float-center {=0D=0A =
margin: 0 auto !important; float: none !important; text-align: center !impor=
tant;=0D=0A }=0D=0A .small-text-center {=0D=0A text-align: center !impo=
rtant;=0D=0A }=0D=0A .small-text-left {=0D=0A text-align: left !importa=
nt;=0D=0A }=0D=0A .small-text-right {=0D=0A text-align: right !importan=
t;=0D=0A }=0D=0A table.body table.container .hide-for-large {=0D=0A dis=
play: block !important; width: auto !important; overflow: visible !important=
;=0D=0A }=0D=0A table.body table.container .row.hide-for-large {=0D=0A =
display: table !important; width: 100% !important;=0D=0A }=0D=0A table.bod=
y table.container .row.hide-for-large {=0D=0A display: table !important; =
width: 100% !important;=0D=0A }=0D=0A table.body table.container .show-for=
-large {=0D=0A display: none !important; width: 0; mso-hide: all; overflo=
w: hidden;=0D=0A }=0D=0A table.body img {=0D=0A width: auto !important;=
height: auto !important;=0D=0A }=0D=0A table.body center {=0D=0A min-w=
idth: 0 !important;=0D=0A }=0D=0A table.body .container {=0D=0A width: =
95% !important;=0D=0A }=0D=0A table.body .columns {=0D=0A height: auto =
!important; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box=
-sizing: border-box; padding-left: 16px !important; padding-right: 16px !imp=
ortant;=0D=0A }=0D=0A table.body .column {=0D=0A height: auto !importan=
t; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: =
border-box; padding-left: 16px !important; padding-right: 16px !important;=
=0D=0A }=0D=0A table.body .columns .column {=0D=0A padding-left: 0 !imp=
ortant; padding-right: 0 !important;=0D=0A }=0D=0A table.body .columns .co=
lumns {=0D=0A padding-left: 0 !important; padding-right: 0 !important;=0D=
=0A }=0D=0A table.body .column .column {=0D=0A padding-left: 0 !importa=
nt; padding-right: 0 !important;=0D=0A }=0D=0A table.body .column .columns=
{=0D=0A padding-left: 0 !important; padding-right: 0 !important;=0D=0A =
}=0D=0A table.body .collapse .columns {=0D=0A padding-left: 0 !important=
; padding-right: 0 !important;=0D=0A }=0D=0A table.body .collapse .column =
{=0D=0A padding-left: 0 !important; padding-right: 0 !important;=0D=0A }=
=0D=0A td.small-1 {=0D=0A display: inline-block !important; width: 8.333=
33% !important;=0D=0A }=0D=0A th.small-1 {=0D=0A display: inline-block =
!important; width: 8.33333% !important;=0D=0A }=0D=0A td.small-2 {=0D=0A =
display: inline-block !important; width: 16.66667% !important;=0D=0A }=0D=
=0A th.small-2 {=0D=0A display: inline-block !important; width: 16.66667=
% !important;=0D=0A }=0D=0A td.small-3 {=0D=0A display: inline-block !i=
mportant; width: 25% !important;=0D=0A }=0D=0A th.small-3 {=0D=0A displ=
ay: inline-block !important; width: 25% !important;=0D=0A }=0D=0A td.small=
-4 {=0D=0A display: inline-block !important; width: 33.33333% !important;=
=0D=0A }=0D=0A th.small-4 {=0D=0A display: inline-block !important; wid=
th: 33.33333% !important;=0D=0A }=0D=0A td.small-5 {=0D=0A display: inl=
ine-block !important; width: 41.66667% !important;=0D=0A }=0D=0A th.small-=
5 {=0D=0A display: inline-block !important; width: 41.66667% !important;=
=0D=0A }=0D=0A td.small-6 {=0D=0A display: inline-block !important; wid=
th: 50% !important;=0D=0A }=0D=0A th.small-6 {=0D=0A display: inline-bl=
ock !important; width: 50% !important;=0D=0A }=0D=0A td.small-7 {=0D=0A =
display: inline-block !important; width: 58.33333% !important;=0D=0A }=0D=
=0A th.small-7 {=0D=0A display: inline-block !important; width: 58.33333=
% !important;=0D=0A }=0D=0A td.small-8 {=0D=0A display: inline-block !i=
mportant; width: 66.66667% !important;=0D=0A }=0D=0A th.small-8 {=0D=0A =
display: inline-block !important; width: 66.66667% !important;=0D=0A }=0D=
=0A td.small-9 {=0D=0A display: inline-block !important; width: 75% !imp=
ortant;=0D=0A }=0D=0A th.small-9 {=0D=0A display: inline-block !importa=
nt; width: 75% !important;=0D=0A }=0D=0A td.small-10 {=0D=0A display: i=
nline-block !important; width: 83.33333% !important;=0D=0A }=0D=0A th.smal=
l-10 {=0D=0A display: inline-block !important; width: 83.33333% !importan=
t;=0D=0A }=0D=0A td.small-11 {=0D=0A display: inline-block !important; =
width: 91.66667% !important;=0D=0A }=0D=0A th.small-11 {=0D=0A display:=
inline-block !important; width: 91.66667% !important;=0D=0A }=0D=0A td.sm=
all-12 {=0D=0A display: inline-block !important; width: 100% !important;=
=0D=0A }=0D=0A th.small-12 {=0D=0A display: inline-block !important; wi=
dth: 100% !important;=0D=0A }=0D=0A .columns td.small-12 {=0D=0A displa=
y: block !important; width: 100% !important;=0D=0A }=0D=0A .column td.smal=
l-12 {=0D=0A display: block !important; width: 100% !important;=0D=0A }=
=0D=0A .columns th.small-12 {=0D=0A display: block !important; width: 10=
0% !important;=0D=0A }=0D=0A .column th.small-12 {=0D=0A display: block=
!important; width: 100% !important;=0D=0A }=0D=0A table.body td.small-off=
set-1 {=0D=0A margin-left: 8.33333% !important;=0D=0A }=0D=0A table.bod=
y th.small-offset-1 {=0D=0A margin-left: 8.33333% !important;=0D=0A }=0D=
=0A table.body td.small-offset-2 {=0D=0A margin-left: 16.66667% !importa=
nt;=0D=0A }=0D=0A table.body th.small-offset-2 {=0D=0A margin-left: 16.=
66667% !important;=0D=0A }=0D=0A table.body td.small-offset-3 {=0D=0A m=
argin-left: 25% !important;=0D=0A }=0D=0A table.body th.small-offset-3 {=
=0D=0A margin-left: 25% !important;=0D=0A }=0D=0A table.body td.small-o=
ffset-4 {=0D=0A margin-left: 33.33333% !important;=0D=0A }=0D=0A table.=
body th.small-offset-4 {=0D=0A margin-left: 33.33333% !important;=0D=0A =
}=0D=0A table.body td.small-offset-5 {=0D=0A margin-left: 41.66667% !imp=
ortant;=0D=0A }=0D=0A table.body th.small-offset-5 {=0D=0A margin-left:=
41.66667% !important;=0D=0A }=0D=0A table.body td.small-offset-6 {=0D=0A =
margin-left: 50% !important;=0D=0A }=0D=0A table.body th.small-offset-6=
{=0D=0A margin-left: 50% !important;=0D=0A }=0D=0A table.body td.small=
-offset-7 {=0D=0A margin-left: 58.33333% !important;=0D=0A }=0D=0A tabl=
e.body th.small-offset-7 {=0D=0A margin-left: 58.33333% !important;=0D=0A=
}=0D=0A table.body td.small-offset-8 {=0D=0A margin-left: 66.66667% !i=
mportant;=0D=0A }=0D=0A table.body th.small-offset-8 {=0D=0A margin-lef=
t: 66.66667% !important;=0D=0A }=0D=0A table.body td.small-offset-9 {=0D=
=0A margin-left: 75% !important;=0D=0A }=0D=0A table.body th.small-offs=
et-9 {=0D=0A margin-left: 75% !important;=0D=0A }=0D=0A table.body td.s=
mall-offset-10 {=0D=0A margin-left: 83.33333% !important;=0D=0A }=0D=0A =
table.body th.small-offset-10 {=0D=0A margin-left: 83.33333% !important;=
=0D=0A }=0D=0A table.body td.small-offset-11 {=0D=0A margin-left: 91.66=
667% !important;=0D=0A }=0D=0A table.body th.small-offset-11 {=0D=0A ma=
rgin-left: 91.66667% !important;=0D=0A }=0D=0A table.body table.columns td=
.expander {=0D=0A display: none !important;=0D=0A }=0D=0A table.body t=
able.columns th.expander {=0D=0A display: none !important;=0D=0A }=0D=0A=
table.body .right-text-pad {=0D=0A padding-left: 10px !important;=0D=0A=
}=0D=0A table.body .text-pad-right {=0D=0A padding-left: 10px !importa=
nt;=0D=0A }=0D=0A table.body .left-text-pad {=0D=0A padding-right: 10px=
!important;=0D=0A }=0D=0A table.body .text-pad-left {=0D=0A padding-ri=
ght: 10px !important;=0D=0A }=0D=0A table.menu {=0D=0A width: 100% !imp=
ortant;=0D=0A }=0D=0A table.menu td {=0D=0A width: auto !important; dis=
play: inline-block !important;=0D=0A }=0D=0A table.menu th {=0D=0A widt=
h: auto !important; display: inline-block !important;=0D=0A }=0D=0A table.=
menu.vertical td {=0D=0A display: block !important;=0D=0A }=0D=0A table=
.menu.vertical th {=0D=0A display: block !important;=0D=0A }=0D=0A tab=
le.menu.small-vertical td {=0D=0A display: block !important;=0D=0A }=0D=
=0A table.menu.small-vertical th {=0D=0A display: block !important;=0D=
=0A }=0D=0A table.menu[align=3D"center"] {=0D=0A width: auto !important=
;=0D=0A }=0D=0A}=0D=0A</style>=0D=0A<table class=3D"body" data-made-with-fo=
undation=3D"" style=3D"border-spacing: 0; border-collapse: collapse; vertica=
l-align: top; text-align: left; height: 100%; width: 100%; color: #0a0a0a; f=
ont-family: Helvetica,Arial,sans-serif; font-weight: normal; line-height: 19=
px; font-size: 14px; background: #f3f3f3; margin: 0; padding: 0;" bgcolor=3D=
"#f3f3f3"><tr style=3D"vertical-align: top; text-align: left; padding: 0;" a=
lign=3D"left"><td class=3D"float-center" align=3D"center" valign=3D"top" sty=
le=3D"word-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyph=
ens: auto; border-collapse: collapse !important; vertical-align: top; text-a=
lign: center; float: none; color: #0a0a0a; font-family: Helvetica,Arial,sans=
-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0 a=
uto; padding: 0;">=0D=0A<center data-parsed=3D"" style=3D"width: 100%; min-w=
idth: 580px;">=0D=0A<table class=3D"wrapper header float-center" align=3D"ce=
nter" style=3D"width: 100%; border-spacing: 0; border-collapse: collapse; ve=
rtical-align: top; text-align: center; float: none; background: #8a8a8a; mar=
gin: 0 auto; padding: 0;" bgcolor=3D"#8a8a8a"><tr style=3D"vertical-align: t=
op; text-align: left; padding: 0;" align=3D"left"><td class=3D"wrapper-inner=
" style=3D"word-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto;=
hyphens: auto; border-collapse: collapse !important; vertical-align: top; t=
ext-align: left; color: #0a0a0a; font-family: Helvetica,Arial,sans-serif; fo=
nt-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 2=
0px;" align=3D"left" valign=3D"top">=0D=0A<table class=3D"container" style=
=3D"border-spacing: 0; border-collapse: collapse; vertical-align: top; text-=
align: inherit; width: 580px; background: transparent; margin: 0 auto; paddi=
ng: 0;" bgcolor=3D"transparent"><tbody><tr style=3D"vertical-align: top; tex=
t-align: left; padding: 0;" align=3D"left"><td style=3D"word-wrap: break-wor=
d; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse=
: collapse !important; vertical-align: top; text-align: left; color: #0a0a0a=
; font-family: Helvetica,Arial,sans-serif; font-weight: normal; line-height:=
19px; font-size: 14px; margin: 0; padding: 0;" align=3D"left" valign=3D"top=
">=0D=0A<table class=3D"row collapse" style=3D"border-spacing: 0; border-col=
lapse: collapse; vertical-align: top; text-align: left; width: 100%; positio=
n: relative; display: table; padding: 0;"><tbody><tr style=3D"vertical-align=
: top; text-align: left; padding: 0;" align=3D"left"><th class=3D"small-6 la=
rge-6 columns first" style=3D"width: 298px; color: #0a0a0a; font-family: Hel=
vetica,Arial,sans-serif; font-weight: normal; text-align: left; line-height:=
19px; font-size: 14px; margin: 0 auto; padding: 0;" align=3D"left">=0D=0A<t=
able style=3D"border-spacing: 0; border-collapse: collapse; vertical-align: =
top; text-align: left; width: 100%; padding: 0;"><tr style=3D"vertical-align=
: top; text-align: left; padding: 0;" align=3D"left"><th style=3D"color: #0a=
0a0a; font-family: Helvetica,Arial,sans-serif; font-weight: normal; text-ali=
gn: left; line-height: 19px; font-size: 14px; margin: 0; padding: 0;" align=
=3D"left"> <img src=3D"https://www.hearingtracker.com/email-logo.jpg" style=
=3D"outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; w=
idth: auto; max-width: 100%; clear: both; display: block;" /></th>=0D=0A</tr=
></table></th>=0D=0A<th class=3D"small-6 large-6 columns last" style=3D"widt=
h: 298px; color: #0a0a0a; font-family: Helvetica,Arial,sans-serif; font-weig=
ht: normal; text-align: left; line-height: 19px; font-size: 14px; margin: 0 =
auto; padding: 0;" align=3D"left">=0D=0A<table style=3D"border-spacing: 0; b=
order-collapse: collapse; vertical-align: top; text-align: left; width: 100%=
; padding: 0;"><tr style=3D"vertical-align: top; text-align: left; padding: =
0;" align=3D"left"><th style=3D"color: #0a0a0a; font-family: Helvetica,Arial=
,sans-serif; font-weight: normal; text-align: left; line-height: 19px; font-=
size: 14px; margin: 0; padding: 0;" align=3D"left">=0D=0A<p class=3D"text-ri=
ght" style=3D"text-align: right; color: #fff; font-family: Helvetica,Arial,s=
ans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: =
0 0 10px; padding: 15px 0 0;" align=3D"right">Hearing Tracker, Inc</p>=0D=0A=
</th>=0D=0A</tr></table></th>=0D=0A</tr></tbody></table></td>=0D=0A</tr></tb=
ody></table></td>=0D=0A</tr></table><table class=3D"container float-center" =
style=3D"border-spacing: 0; border-collapse: collapse; vertical-align: top; =
text-align: center; width: 580px; float: none; background: #fefefe; margin: =
0 auto; padding: 0;" bgcolor=3D"#fefefe"><tbody><tr style=3D"vertical-align:=
top; text-align: left; padding: 0;" align=3D"left"><td style=3D"word-wrap: =
break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border=
-collapse: collapse !important; vertical-align: top; text-align: left; color=
: #0a0a0a; font-family: Helvetica,Arial,sans-serif; font-weight: normal; lin=
e-height: 19px; font-size: 14px; margin: 0; padding: 0;" align=3D"left" vali=
gn=3D"top">=0D=0A<table class=3D"spacer" style=3D"border-spacing: 0; border-=
collapse: collapse; vertical-align: top; text-align: left; padding: 0;"><tbo=
dy><tr style=3D"vertical-align: top; text-align: left; padding: 0;" align=3D=
"left"><td height=3D"16px" style=3D"font-size: 16px; line-height: 16px; word=
-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto;=
border-collapse: collapse !important; vertical-align: top; text-align: left=
; color: #0a0a0a; font-family: Helvetica,Arial,sans-serif; font-weight: norm=
al; margin: 0; padding: 0;" align=3D"left" valign=3D"top">=C2=A0</td>=0D=0A<=
/tr></tbody></table><table class=3D"row" style=3D"border-spacing: 0; border-=
collapse: collapse; vertical-align: top; text-align: left; width: 100%; posi=
tion: relative; display: table; padding: 0;"><tbody><tr style=3D"vertical-al=
ign: top; text-align: left; padding: 0;" align=3D"left"><th class=3D"small-1=
2 large-12 columns first last" style=3D"width: 564px; color: #0a0a0a; font-f=
amily: Helvetica,Arial,sans-serif; font-weight: normal; text-align: left; li=
ne-height: 19px; font-size: 14px; margin: 0 auto; padding: 0 16px 16px;" ali=
gn=3D"left">=0D=0A<table style=3D"border-spacing: 0; border-collapse: collap=
se; vertical-align: top; text-align: left; width: 100%; padding: 0;"><tr sty=
le=3D"vertical-align: top; text-align: left; padding: 0;" align=3D"left"><th=
style=3D"color: #0a0a0a; font-family: Helvetica,Arial,sans-serif; font-weig=
ht: normal; text-align: left; line-height: 19px; font-size: 14px; margin: 0;=
padding: 0;" align=3D"left">=0D=0A<h1 style=3D"color: inherit; font-family:=
Helvetica,Arial,sans-serif; font-weight: normal; text-align: left; line-hei=
ght: 1.3; word-wrap: normal; font-size: 34px; margin: 0 0 10px; padding: 0;"=
align=3D"left">Welcome to Hearing Tracker</h1>=0D=0A <p class=3D"lead" sty=
le=3D"color: #0a0a0a; font-family: Helvetica,Arial,sans-serif; font-weight: =
normal; text-align: left; line-height: 1.2; font-size: 20px; margin: 0 0 10p=
x; padding: 0;" align=3D"left">Your new profile is available <a href=3D"http=
://go.sparkpostmail1.com/f/a/WUAth70l5yIgZqZ8R2ezLg~~/AACoBwA~/RgRZA_gLP0EIA=
OuRRn8JVj0XWAQAAAAAWQZzaGFyZWRCCgADi8QiVyBF0aBSGWZ1bmtkaWZpZWQrbHdsd0BnbWFpb=
C5jb20JUQQAAAAARCVodHRwczovL2hlYXJpbmd0cmFja2VyLmNvbS91c2Vycy8yMjMzRwJ7fQ~~"=
>here</a>.</p>=0D=0A<p style=3D"color: #0a0a0a; font-family: Helvetica,Arial=
,sans-serif; font-weight: normal; text-align: left; line-height: 19px; font-=
size: 14px; margin: 0 0 10px; padding: 0;" align=3D"left">Thank you for sign=
ing up at HearingTracker.com! We are building the most comprehensive and aut=
horitative hearing aid review system in the world, and we thank you for your=
time and valuable input.</p>=0D=0A<table class=3D"callout" style=3D"border-=
spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left=
; width: 100%; margin-bottom: 16px; padding: 0;"><tr style=3D"vertical-align=
: top; text-align: left; padding: 0;" align=3D"left"><th class=3D"callout-in=
ner primary" style=3D"color: #0a0a0a; font-family: Helvetica,Arial,sans-seri=
f; font-weight: normal; text-align: left; line-height: 19px; font-size: 14px=
; width: 100%; background: #def0fc; margin: 0; padding: 10px 10px 0px; borde=
r: 1px solid #A2E2FF;" align=3D"left" bgcolor=3D"#def0fc">=0D=0A<p style=3D"=
color: #0a0a0a; font-family: Helvetica,Arial,sans-serif; font-weight: normal=
; text-align: left; line-height: 19px; font-size: 14px; margin: 0 0 10px; pa=
dding: 0;" align=3D"left">Want to know more=3F Check out our blog for the la=
test hearing news. <a href=3D"http://go.sparkpostmail1.com/f/a/1B1CkAylSVzMI=
rhhDdaM2g~~/AACoBwA~/RgRZA_gLP0EIAOuRRn8JVj0XWAQAAAAAWQZzaGFyZWRCCgADi8QiVyB=
F0aBSGWZ1bmtkaWZpZWQrbHdsd0BnbWFpbC5jb20JUQQAAAAARB5odHRwOi8vaGVhcmluZ3RyYWN=
rZXIuY29tL2Jsb2dHAnt9" style=3D"color: #2ba6cb; text-decoration: none !impor=
tant">Blog =C2=BB</a></p>=0D=0A</th>=0D=0A<th class=3D"expander" style=3D"vi=
sibility: hidden; width: 0; color: #0a0a0a; font-family: Helvetica,Arial,san=
s-serif; font-weight: normal; text-align: left; line-height: 19px; font-size=
: 14px; margin: 0; padding: 0;" align=3D"left"></th>=0D=0A</tr></table></th>=
=0D=0A<th class=3D"expander" style=3D"visibility: hidden; width: 0; color: #=
0a0a0a; font-family: Helvetica,Arial,sans-serif; font-weight: normal; text-a=
lign: left; line-height: 19px; font-size: 14px; margin: 0; padding: 0;" alig=
n=3D"left"></th>=0D=0A</tr></table></th>=0D=0A</tr></tbody></table><table cl=
ass=3D"wrapper secondary" align=3D"center" style=3D"width: 100%; border-spac=
ing: 0; border-collapse: collapse; vertical-align: top; text-align: left; ba=
ckground: #f3f3f3; padding: 0;" bgcolor=3D"#f3f3f3"><tr style=3D"vertical-al=
ign: top; text-align: left; padding: 0;" align=3D"left"><td class=3D"wrapper=
-inner" style=3D"word-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens:=
auto; hyphens: auto; border-collapse: collapse !important; vertical-align: =
top; text-align: left; color: #0a0a0a; font-family: Helvetica,Arial,sans-ser=
if; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padd=
ing: 0;" align=3D"left" valign=3D"top">=0D=0A<table class=3D"spacer" style=
=3D"border-spacing: 0; border-collapse: collapse; vertical-align: top; text-=
align: left; padding: 0;"><tbody><tr style=3D"vertical-align: top; text-alig=
n: left; padding: 0;" align=3D"left"><td height=3D"16px" style=3D"font-size:=
16px; line-height: 16px; word-wrap: break-word; -webkit-hyphens: auto; -moz=
-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertica=
l-align: top; text-align: left; color: #0a0a0a; font-family: Helvetica,Arial=
,sans-serif; font-weight: normal; margin: 0; padding: 0;" align=3D"left" val=
ign=3D"top">=C2=A0</td>=0D=0A</tr></tbody></table><table class=3D"row" style=
=3D"border-spacing: 0; border-collapse: collapse; vertical-align: top; text-=
align: left; width: 100%; position: relative; display: table; padding: 0;"><=
tbody><tr style=3D"vertical-align: top; text-align: left; padding: 0;" align=
=3D"left"><th class=3D"small-12 large-6 columns first" style=3D"width: 274px=
; color: #0a0a0a; font-family: Helvetica,Arial,sans-serif; font-weight: norm=
al; text-align: left; line-height: 19px; font-size: 14px; margin: 0 auto; pa=
dding: 0 8px 16px 16px;" align=3D"left">=0D=0A<table style=3D"border-spacing=
: 0; border-collapse: collapse; vertical-align: top; text-align: left; width=
: 100%; padding: 0;"><tr style=3D"vertical-align: top; text-align: left; pad=
ding: 0;" align=3D"left"><th style=3D"color: #0a0a0a; font-family: Helvetica=
,Arial,sans-serif; font-weight: normal; text-align: left; line-height: 19px;=
font-size: 14px; margin: 0; padding: 0;" align=3D"left">=0D=0A<h5 style=3D"=
color: inherit; font-family: Helvetica,Arial,sans-serif; font-weight: normal=
; text-align: left; line-height: 1.3; word-wrap: normal; font-size: 20px; ma=
rgin: 0 0 10px; padding: 0;" align=3D"left">Connect With Us:</h5>=0D=0A<tabl=
e class=3D"button facebook expand" style=3D"border-spacing: 0; border-collap=
se: collapse; vertical-align: top; text-align: left; width: 100% !important;=
margin: 0 0 16px; padding: 0;"><tr style=3D"vertical-align: top; text-align=
: left; padding: 0;" align=3D"left"><td style=3D"word-wrap: break-word; -web=
kit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: colla=
pse !important; vertical-align: top; text-align: left; color: #0a0a0a; font-=
family: Helvetica,Arial,sans-serif; font-weight: normal; line-height: 19px; =
font-size: 14px; margin: 0; padding: 0;" align=3D"left" valign=3D"top">=0D=
=0A<table style=3D"border-spacing: 0; border-collapse: collapse; vertical-al=
ign: top; text-align: left; width: 100%; padding: 0;"><tr style=3D"vertical-=
align: top; text-align: left; padding: 0;" align=3D"left"><td style=3D"word-=
wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; =
border-collapse: collapse !important; vertical-align: top; text-align: left;=
color: #fefefe; font-family: Helvetica,Arial,sans-serif; font-weight: norma=
l; line-height: 19px; font-size: 14px; background-color: #3B5998 !important;=
margin: 0; padding: 0; border: 2px solid #3b5998;" align=3D"left" bgcolor=
=3D"#3B5998 !important" valign=3D"top">=0D=0A<center data-parsed=3D"" style=
=3D"width: 100%; min-width: 0;"><a href=3D"http://go.sparkpostmail1.com/f/a/=
9YsksgcVr3LOUws57UiCMA~~/AACoBwA~/RgRZA_gLP0EIAOuRRn8JVj0XWAQAAAAAWQZzaGFyZW=
RCCgADi8QiVyBF0aBSGWZ1bmtkaWZpZWQrbHdsd0BnbWFpbC5jb20JUQQAAAAARChodHRwczovL3=
d3dy5mYWNlYm9vay5jb20vaGVhcmluZ3RyYWNrZXIvRwJ7fQ~~" align=3D"center" class=
=3D"float-center" style=3D"color: #fefefe; font-family: Helvetica,Arial,sans=
-serif; font-weight: bold; text-align: center; line-height: 1.3; text-decora=
tion: none; font-size: 16px; display: inline-block; border-radius: 3px; widt=
h: 100%; margin: 0; padding: 8px 0; border: 0px solid #2199e8;">Facebook</a>=
</center>=0D=0A</td>=0D=0A</tr></table></td>=0D=0A<td class=3D"expander" sty=
le=3D"word-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyph=
ens: auto; border-collapse: collapse !important; vertical-align: top; text-a=
lign: left; visibility: hidden; width: 0; color: #0a0a0a; font-family: Helve=
tica,Arial,sans-serif; font-weight: normal; line-height: 19px; font-size: 14=
px; margin: 0; padding: 0;" align=3D"left" valign=3D"top"></td>=0D=0A</tr></=
table><table class=3D"button twitter expand" style=3D"border-spacing: 0; bor=
der-collapse: collapse; vertical-align: top; text-align: left; width: 100% !=
important; margin: 0 0 16px; padding: 0;"><tr style=3D"vertical-align: top; =
text-align: left; padding: 0;" align=3D"left"><td style=3D"word-wrap: break-=
word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-colla=
pse: collapse !important; vertical-align: top; text-align: left; color: #0a0=
a0a; font-family: Helvetica,Arial,sans-serif; font-weight: normal; line-heig=
ht: 19px; font-size: 14px; margin: 0; padding: 0;" align=3D"left" valign=3D"=
top">=0D=0A<table style=3D"border-spacing: 0; border-collapse: collapse; ver=
tical-align: top; text-align: left; width: 100%; padding: 0;"><tr style=3D"v=
ertical-align: top; text-align: left; padding: 0;" align=3D"left"><td style=
=3D"word-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphen=
s: auto; border-collapse: collapse !important; vertical-align: top; text-ali=
gn: left; color: #fefefe; font-family: Helvetica,Arial,sans-serif; font-weig=
ht: normal; line-height: 19px; font-size: 14px; background-color: #1daced !i=
mportant; margin: 0; padding: 0; border: 2px solid #1daced;" align=3D"left" =
bgcolor=3D"#1daced !important" valign=3D"top">=0D=0A<center data-parsed=3D""=
style=3D"width: 100%; min-width: 0;"><a href=3D"http://go.sparkpostmail1.co=
m/f/a/eqJX9iwJj5kfi5_8VU-xXg~~/AACoBwA~/RgRZA_gLP0EIAOuRRn8JVj0XWAQAAAAAWQZz=
aGFyZWRCCgADi8QiVyBF0aBSGWZ1bmtkaWZpZWQrbHdsd0BnbWFpbC5jb20JUQQAAAAARCJodHRw=
czovL3R3aXR0ZXIuY29tL0hlYXJpbmdUcmFja2VyRwJ7fQ~~" align=3D"center" class=3D"=
float-center" style=3D"color: #fefefe; font-family: Helvetica,Arial,sans-ser=
if; font-weight: bold; text-align: center; line-height: 1.3; text-decoration=
: none; font-size: 16px; display: inline-block; border-radius: 3px; width: 1=
00%; margin: 0; padding: 8px 0; border: 0px solid #2199e8;">Twitter</a></cen=
ter>=0D=0A</td>=0D=0A</tr></table></td>=0D=0A<td class=3D"expander" style=3D=
"word-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: =
auto; border-collapse: collapse !important; vertical-align: top; text-align:=
left; visibility: hidden; width: 0; color: #0a0a0a; font-family: Helvetica,=
Arial,sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; m=
argin: 0; padding: 0;" align=3D"left" valign=3D"top"></td>=0D=0A</tr></table=
><table class=3D"button google expand" style=3D"border-spacing: 0; border-co=
llapse: collapse; vertical-align: top; text-align: left; width: 100% !import=
ant; margin: 0 0 16px; padding: 0;"><tr style=3D"vertical-align: top; text-a=
lign: left; padding: 0;" align=3D"left"><td style=3D"word-wrap: break-word; =
-webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: c=
ollapse !important; vertical-align: top; text-align: left; color: #0a0a0a; f=
ont-family: Helvetica,Arial,sans-serif; font-weight: normal; line-height: 19=
px; font-size: 14px; margin: 0; padding: 0;" align=3D"left" valign=3D"top">=
=0D=0A<table style=3D"border-spacing: 0; border-collapse: collapse; vertical=
-align: top; text-align: left; width: 100%; padding: 0;"><tr style=3D"vertic=
al-align: top; text-align: left; padding: 0;" align=3D"left"><td style=3D"wo=
rd-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: aut=
o; border-collapse: collapse !important; vertical-align: top; text-align: le=
ft; color: #fefefe; font-family: Helvetica,Arial,sans-serif; font-weight: no=
rmal; line-height: 19px; font-size: 14px; background-color: #DB4A39 !importa=
nt; margin: 0; padding: 0; border: 2px solid #db4a39;" align=3D"left" bgcolo=
r=3D"#DB4A39 !important" valign=3D"top">=0D=0A<center data-parsed=3D"" style=
=3D"width: 100%; min-width: 0;"><a href=3D"http://go.sparkpostmail1.com/f/a/=
jcjXaK_SeTpd-zOdukZQzQ~~/AACoBwA~/RgRZA_gLP0EIAOuRRn8JVj0XWAQAAAAAWQZzaGFyZW=
RCCgADi8QiVyBF0aBSGWZ1bmtkaWZpZWQrbHdsd0BnbWFpbC5jb20JUQQAAAAARCdodHRwczovL3=
BsdXMuZ29vZ2xlLmNvbS8raGVhcmluZ3RyYWNrZXJHAnt9" align=3D"center" class=3D"fl=
oat-center" style=3D"color: #fefefe; font-family: Helvetica,Arial,sans-serif=
; font-weight: bold; text-align: center; line-height: 1.3; text-decoration: =
none; font-size: 16px; display: inline-block; border-radius: 3px; width: 100=
%; margin: 0; padding: 8px 0; border: 0px solid #2199e8;">Google+</a></cente=
r>=0D=0A</td>=0D=0A</tr></table></td>=0D=0A<td class=3D"expander" style=3D"w=
ord-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: au=
to; border-collapse: collapse !important; vertical-align: top; text-align: l=
eft; visibility: hidden; width: 0; color: #0a0a0a; font-family: Helvetica,Ar=
ial,sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; mar=
gin: 0; padding: 0;" align=3D"left" valign=3D"top"></td>=0D=0A</tr></table><=
/th>=0D=0A</tr></table></th>=0D=0A<th class=3D"small-12 large-6 columns last=
" style=3D"width: 274px; color: #0a0a0a; font-family: Helvetica,Arial,sans-s=
erif; font-weight: normal; text-align: left; line-height: 19px; font-size: 1=
4px; margin: 0 auto; padding: 0 16px 16px 8px;" align=3D"left">=0D=0A<table =
style=3D"border-spacing: 0; border-collapse: collapse; vertical-align: top; =
text-align: left; width: 100%; padding: 0;"><tr style=3D"vertical-align: top=
; text-align: left; padding: 0;" align=3D"left"><th style=3D"color: #0a0a0a;=
font-family: Helvetica,Arial,sans-serif; font-weight: normal; text-align: l=
eft; line-height: 19px; font-size: 14px; margin: 0; padding: 0;" align=3D"le=
ft">=0D=0A<h5 style=3D"color: inherit; font-family: Helvetica,Arial,sans-ser=
if; font-weight: normal; text-align: left; line-height: 1.3; word-wrap: norm=
al; font-size: 20px; margin: 0 0 10px; padding: 0;" align=3D"left">Contact I=
nfo:</h5>=0D=0A<p style=3D"color: #0a0a0a; font-family: Helvetica,Arial,sans=
-serif; font-weight: normal; text-align: left; line-height: 19px; font-size:=
14px; margin: 0 0 10px; padding: 0;" align=3D"left">Call: (775) 372-8346</p=
>=0D=0A<p style=3D"color: #0a0a0a; font-family: Helvetica,Arial,sans-serif; =
font-weight: normal; text-align: left; line-height: 19px; font-size: 14px; m=
argin: 0 0 10px; padding: 0;" align=3D"left">Email: <a href=3D"mailto:info@h=
earingtracker.com" style=3D"color: #2199e8; font-family: Helvetica,Arial,san=
s-serif; font-weight: normal; text-align: left; line-height: 1.3; text-decor=
ation: none; margin: 0; padding: 0;">[email protected]</a></p>=0D=0A<p=
style=3D"color: #0a0a0a; font-family: Helvetica,Arial,sans-serif; font-weig=
ht: normal; text-align: left; line-height: 19px; font-size: 14px; margin: 0 =
0 10px; padding: 0;" align=3D"left">PO Box 40702</p>=0D=0A<p style=3D"color:=
#0a0a0a; font-family: Helvetica,Arial,sans-serif; font-weight: normal; text=
-align: left; line-height: 19px; font-size: 14px; margin: 0 0 10px; padding:=
0;" align=3D"left">Austin TX 78704</p>=0D=0A</th>=0D=0A</tr></table></th>=
=0D=0A</tr></tbody></table></td>=0D=0A</tr></table></td>=0D=0A</tr></tbody><=
/table></center>=0D=0A</td>=0D=0A</tr></table>=0D=0A<img border=3D"0" width=
=3D"1" height=3D"1" src=3D"http://go.sparkpostmail1.com/q/VJmfOXRWH_-5k7mjea=
2NlQ~~/AACoBwA~/RgRZA_gLPkEIAOuRRn8JVj0XWAQAAAAAWQZzaGFyZWRCCgADi8QiVyBF0aBS=
GWZ1bmtkaWZpZWQrbHdsd0BnbWFpbC5jb20JUQQAAAAARwJ7fQ~~">=0D=0A</body>=0D=0A</h=
tml>
abrambailey
on 30 Apr 2016
You didnt really need to post the whole thing!! As far as I know only one element works correctly. Even their own litmus test is a fail. Have a look at this gmail version:
https://litmus.com/checklist/emails/public/23f9c67#androidgmailapp
and then straight android:
https://litmus.com/checklist/emails/public/23f9c67#android4
You were doing nothing wrong (although I have not managed to recreate your mail successfully).
tazzydemon
on 2 May 2016
Unfortunately Gmail does not support media queries: https://litmus.com/help/email-clients/media-query-support/
This doesn't seem to be something Gmail will address anytime soon. There has been a workaround grid: the one you linked above http://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries--cms-23919 . This was too complex to actually ship with the framework but we are open to having this optional grid built with Inky. It's on the roadmap here as a community project opportunity: https://github.com/zurb/foundation-emails/wiki/Roadmap
We'll close this here - thanks!
rafibomb
on 7 Jun 2016
A big announcement happened yesterday! Gmail seems to be reporting that they will be including <style> tags instead of removing them... which means, gmail and it's apps should working later this week!
Check out the announcement here:
http://googleappsdeveloper.blogspot.com/2016/09/your-emails-optimized-for-every-screen-with-responsive-design.html
tdhartwick
on 15 Sep 2016
🎉1
OMG YAY!!!!!! This has stopped me using F2 so far
tazzydemon
on 16 Sep 2016
🎉1
Was this page helpful?
0 / 5 - 0 ratings
Related issues
andreimoment
路
4Comments
iampstew
路
5Comments
timaschew
路
6Comments
ryangall7
路
3Comments
tayvano
路
5Comments