I am trying to get a responsive email going and it looks good in everything but Outlook 07,10,13. I cannot figure out for the life of me why it is not working. I know it is probably something super simple I am missing.
Any help would be greatly appreciated.
Heres a screenshot,
Here is the code I am using.
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Stop guessing and start growing with PlayMaker CRM</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
<style type="text/css">
.ReadMsgBody {width: 100%; background-color: #ffffff;}
.ExternalClass {width: 100%; background-color: #ffffff;}
body {width: 100%; background-color: #ffffff; margin:0; padding:0; -webkit-font-smoothing: antialiased;font-family: Georgia, Times, serif}
table {border-collapse: collapse;}
span.preheader { display: none !important; }
@media only screen and (max-device-width: 640px) {
body[yahoo] .deviceWidth {width:440px!important; padding:0;}
body[yahoo] .center {text-align: center!important;}
}
@media only screen and (max-device-width: 479px) {
body[yahoo] .deviceWidth {width:320px!important; padding:0;}
body[yahoo] .center {text-align: center!important;}
}
@media only screen and (max-device-width: 479px) {
#mobile {display:block}
#desktop {display:none;mso-hide: all;}
}
/* Special Rules for Tablets */
@media only screen and (min-device-width: 480px) {
#mobile {display:none;mso-hide: all;}
#desktop {display:block}
}
}
</style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" yahoo="fix" style="font-family: Georgia, Times, serif">
<span class="preheader">Here is where our preheader would go. We can change it to anything we want.</span>
<!-- Wrapper -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="100%" valign="top" bgcolor="#ffffff" style="padding-top:20px">
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td bgcolor="#e6e6e7" height="31">
<table width="600" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
<tr>
<td valign="top" style="font-size: 12px; color: #5f6062; font-family: Helvetica, sans-serif; text-align:center" class="deviceWidth">
Can't see this email? <a href="http://playmakercrm.com/email/2014/2/web.html" style="text-decoration:underline; color:#214897">Click here</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<div style="height:20px"> </div><!-- spacer -->
<!-- Start Header-->
<table width="600" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
<tr>
<td width="100%" bgcolor="#ffffff">
<!-- Logo -->
<table border="0" cellpadding="0" cellspacing="0" align="left" class="deviceWidth">
<tr>
<td style="padding:10px 20px" class="center">
<img src="http://playmakercrm.com/email/2014/Mobile/logo.png" alt="" border="0" >
</td>
</tr>
</table><!-- End Logo -->
<!-- Nav -->
<table border="0" cellpadding="0" cellspacing="0" align="right" class="deviceWidth">
<tr>
<td class="center" style="font-size: 17px; font-style:italic; color: #959595; font-weight: normal; text-align: left; font-family: Helvetica, sans-serif; line-height: 26px; padding-top:40px">
Sales Innovation for Home Care
</td>
</tr>
</table><!-- End Nav -->
</td>
</tr>
</table><!-- End Header -->
<!-- One Column -->
<table width="600" class="deviceWidth" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td valign="top" style="padding:0" bgcolor="#ffffff">
<img class="deviceWidth" src="http://playmakercrm.com/email/2014/1/divider.png" alt="" border="0" style="display: block; border-radius: 4px;" />
</td>
</tr>
</table><!-- End One Column -->
<div style="height:15px"> </div><!-- spacer -->
<table width="600" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
<tr>
<td>
<table width="48%" border="0" cellpadding="0" cellspacing="0" align="left" class="deviceWidth">
<tr>
<td>
<a href="http://playmakercrm.com/demo/"><img width="295" src="http://playmakercrm.com/email/2014/2/pm-screen.png" alt="" border="0" style="border-radius: 4px; display: block;padding-top:80px" class="deviceWidth" /></a>
</td>
</tr>
</table>
<table width="50%" border="0" cellpadding="0" cellspacing="0" align="right" class="deviceWidth">
<tr>
<td>
<p style="font-size: 28px; color: #ab1620; font-weight: normal; text-align: left; line-height:34px; font-family: Helvetica, sans-serif; margin:-3px 0">~Contact.FirstName~,</p>
<p style="font-size: 31px; color: #ab1620; font-weight: normal; text-align: left; line-height:34px; font-family: Helvetica, sans-serif; margin:-3px 0">Here’s the proven tool to grow your referrals and profits!</p>
<p style="font-size: 14px; color: #646468; font-weight: normal; text-align: left; line-height:22px; font-family: Helvetica, sans-serif;">Stop guessing and start growing with PlayMaker CRM's TargetWatch, the must-have tool to immediately identify and target the top referring physicians and facilities in your market.</p>
<p style="font-size: 14px; color: #646468; font-weight: normal; text-align: left; line-height:22px; font-family: Helvetica, sans-serif;">With TargetWatch, high-value referral sources are easier to identify, target and monitor in real-time to rapidly take your referrals to another level.</p>
<p style="font-size: 14px; color: #191a1d; font-weight: bold; text-align: left; line-height:22px; font-family: Helvetica, sans-serif;">Don’t wait… dominate your market now. Contact us today for your free demo.</p>
</td>
</tr>
</table>
</td>
</tr>
</table><!-- End 2 Column Images & Text Side by SIde -->
<div style="height:15px"> </div><!-- spacer -->
<!--Button-->
<table width="600" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
<tr>
<td width="100%" bgcolor="#ffffff">
<table cellspacing="0" border="0" cellpadding="0" width="260" align="center">
<tr>
<td height="50" bgcolor="#FFA500" style="border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; font-size: 16px; font-family: sans-serif; color: #FFFFFF; margin: 0; padding: 0; text-align: center;" class='vero-editable'><a href="http://playmakercrm.com/demo/" style="font-weight:bold; text-decoration:underline;color: #ffffff;text-decoration:none;">Request your free demo →</a>
</td>
</tr>
</table>
</td>
</tr>
</table><!--End Button-->
<div style="height:20px"> </div><!-- spacer -->
<table width="600" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
<tr>
<td width="100%" bgcolor="#ffffff">
<!-- Number -->
<table border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
<tr>
<td class="deviceWidth" style="font-size: 16px; color: #191a1d ; font-weight: normal; text-align: left; font-family: Helvetica, sans-serif; vertical-align: top;">Ready to see a free demo? <span style="color: #ab1620">1-866-930-6847</span>
</td>
</tr>
</table><!-- End Number -->
</td>
</tr>
</table>
<div style="height:15px"> </div><!-- spacer -->
<!-- One Column -->
<table width="600" class="deviceWidth" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#eeeeed">
<tr>
<td valign="top" style="padding:0" bgcolor="#ffffff">
<img class="deviceWidth" src="http://playmakercrm.com/email/2014/1/divider.png" alt="" border="0" style="display: block; border-radius: 4px;" />
</td>
</tr>
</table><!-- End One Column -->
<div style="height:15px"> </div><!-- spacer -->
<table width="600" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
<tr>
<td width="100%" bgcolor="#ffffff">
<table border="0" cellpadding="0" cellspacing="0" align="left" class="deviceWidth">
<tr>
<td width="600" style="font-size: 14px; color: #ab1620; font-weight: normal; text-align: left; font-family: Verdana, Geneva, sans-serif; vertical-align: top;">
Here’s what our satisfied customers are saying…
</td>
</tr>
</table>
</td>
</tr>
</table>
<div id="desktop" style="height:15px"> </div><!-- spacer -->
<!-- 2 Column Images & Text Side by SIde -->
<table width="600" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
<tr>
<td style="padding:10px 0">
<table align="left" width="51%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth">
<tr>
<td style=" font-size: 14px; font-style:italic; color: #959595; font-weight: normal; text-align: left; font-family: Helvetica, sans-serif; line-height: 24px; padding-top:20px">
<p>What I was really looking for in a CRM is something that would make us more efficient in general, and I found it with PlayMaker CRM. Year to date we have increased our referrals by 2,000 over the prior year.</p>
</td>
</tr>
</table>
<table align="center" width="5%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth">
<tr>
<td valign="top" align="left" class="center" style="padding-top:5px">
</td>
</tr>
</table>
<table align="right" width="44%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth">
<tr>
<td valign="top" align="left" class="center" style="padding-top:5px">
<img width="220" src="http://playmakercrm.com/email/2014/2/vna-logo.png" alt="" border="0" style="border-radius: 4px; width: 267px; display: block;" class="deviceWidth" />
<p style="font-family:Helvetica, sans-serif; font-size:11px; color:323338; line-height:15px;"><span style="font-weight:bold">Joseph Allen</span><br>
Director of Business Development<br>
VNA California</p>
</td>
</tr>
</table>
</td>
</tr>
</table><!-- End 2 Column Images & Text Side by SIde -->
<!-- 2 Column Images & Text Side by SIde -->
<table width="600" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
<tr>
<td style="padding:10px 0">
<table align="left" width="51%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth">
<tr>
<td style=" font-size: 14px; font-style:italic; color: #959595; font-weight: normal; text-align: left; font-family: Helvetica, sans-serif; line-height: 24px; padding-top:20px">
<p>We’ve had substantial referral growth since fully implementing PlayMaker. As we are able to monitor performance more accurately and measure it, we have seen referrals grow at least 6-and-a-half percent higher than last year.</p>
</td>
</tr>
</table>
<table align="center" width="5%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth">
<tr>
<td valign="top" align="left" class="center" style="padding-top:5px">
</td>
</tr>
</table>
<table align="right" width="44%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth">
<tr>
<td valign="top" align="left" class="center" style="padding-top:5px">
<img width="220" src="http://playmakercrm.com/email/2014/2/3hc-logo.png" alt="" border="0" style="border-radius: 4px; width: 267px; display: block;" class="deviceWidth" />
<p style="font-family:Helvetica, sans-serif; font-size:11px; color:323338; line-height:15px"><b>Ed Holt</b><br>
Director of Marketing<br>
3HC - Home Health and Hospice Care, Inc.</p>
</td>
</tr>
</table>
</td>
</tr>
</table><!-- End 2 Column Images & Text Side by SIde -->
<div style="height:25px"> </div><!-- spacer -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" >
<tr>
<td width="100%" bgcolor="#e6e6e7" height="57">
<table width="600" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
<tr>
<td valign="top" style="font-size: 12px; color: #5f6062; font-family: Helvetica, sans-serif; text-align:center">
<img src="http://playmakercrm.com/email/2014/1/inc500.png" width="170" height="45"> </td>
</tr>
</table>
</td>
</tr>
</table>
<!-- 4 Columns -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td bgcolor="#323338" style="padding:30px 0">
<table width="600" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
<tr>
<td>
<table width="78%" cellpadding="0" cellspacing="0" border="0" align="left" class="deviceWidth">
<tr>
<td valign="top" style="font-size: 11px; color: #f1f1f1; color:#999; font-family: Arial, sans-serif; padding-bottom:20px" class="center">
© 2014 PlayMaker CRM. All rights reserved.<br/>
866.930.6847 | <a href="http://playmakercrm.com/demo/" style="color:#9fa1a4;text-decoration:underline;">playmakercrm.com</a>
</td>
</tr>
</table>
<table width="22%" cellpadding="0" cellspacing="0" border="0" align="right" class="deviceWidth">
<tr>
<td valign="top" style="font-size: 14px; color: #ffffff; font-weight: bold; font-family: Helvetica, sans-serif; text-align:left; line-height:15px; vertical-align: top; text-align:left" class="center">
Connect with us!<br>
<a href="http://twitter.com/playmakercrm" target="_blank"><img src="http://playmakercrm.com/email/2014/1/twitter.png" width="36" height="36" alt="Twitter" title="Twitter" border="0" style="padding:5px 7px 5px 0" /></a>
<a href="http://www.facebook.com/playmakercrmhomecare" target="_blank"><img src="http://playmakercrm.com/email/2014/1/facebook.png" width="36" height="36" alt="Facebook" title="Facebook" border="0" style="padding:5px 7px 5px 0" /></a>
<a href="http://www.linkedin.com/company/playmaker-crm" target="_blank"><img src="http://playmakercrm.com/email/2014/1/linkedin.png" width="36" height="36" alt="LinkedIn" title="LinkedIn" border="0" style="padding:5px 0 " /></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table><!-- End 4 Columns -->
</td>
</tr>
</table> <!-- End Wrapper -->
</body>
</html>