Responsive email on gmail app

Hi,

I'm a web designer that's new to html emails.  I started designing since we've been using divs so I'm trying to get my head around tables.

I've built this html email that works fine on the standard android app and apple mail but it messes up in gmail so I've come to you guys to see if you can see what is wrong with it.

Here's the code for it

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <title>Parkinson Newsletter</title>
       <style type="text/css">
       a {
        color: #345296; display:block;
           width:100%;
        height:100%;
        text-decoration: none;
    }
    img {
        display: block;
    }
    #messageTopParkinson p, #bottom-message p {
        color: #3f4042; font-size: 12px; font-family: Arial, Helvetica, sans-serif; 
    }
    table.propertyParkinson {
        border-collapse:collapse;
    }
    
    table.propertyParkinson td {
        border:1px solid #ffffff;
    }









    /* Outlook link fix */
        #outlook a {padding:0;}
        /* Hotmail background & line height fixes */
        .ExternalClass {width:100% !important;}
        .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font,
        .ExternalClass td, .ExternalClass div {line-height: 100%;}
        /* Image borders & formatting */
        img {outline:none; text-decoration:none; -ms-interpolation-mode: bicubic;} 
        a img {border:none;} 
        /* Re-style iPhone automatic links (eg. phone numbers) */
        .applelinks a {color:#222222; text-decoration: none;}
        /* Hotmail symbol fix for mobile devices */
        .ExternalClass img[class^=Emoji] { width: 10px !important; height: 10px !important; display: inline !important; } 
        
        
        /* Media Query for mobile */
        
        @media screen and (max-width: 480px) {    
        
        /* This resizes tables and images to be 100% wide with a proportionate width */
        table[id=messageTopParkinson], table[id=headerParkinson], table[id=bannerImageParkinson], table[id=propertiesParkinson],  table[class=propertyParkinson], table[class=parkinsonDivider], img[class=emailwrapto100pc]{width:100% !important; height:auto !important;}
        
        /* Hide stuff on mobiles */
        table[class=emailnomob],td[class=emailnomob],img[class=emailnomob],span[class=emailnomob]{display:none !important;}
        
        td[class=emailcolsplit]{width:100%!important;  height:auto !important; float:left!important;}
        
        a[class=emailmobbutton]{display:block !important;font-size:14px !important; font-weight:bold !important; padding:6px 4px 8px 4px !important; line-height:18px !important; background:#dddddd !important; border-radius:5px !important; margin:10px auto;width:70%; text-align:center; color:#111 !important; text-decoration:none; text-shadow:#fff 1px 0 0 ;}

        /* This resizes body text for mobiles */
        span[class=emailbodytext],a[class=emailbodytext]{font-size:10px !important; line-height:16px !important;}
        span[class=emailh2],a[class=emailh2]{font-size:22px !important; line-height:26px !important;}
    
    .emailcolsplitPadding {    padding: 10px 0 10px 0; width:100%!important; height:auto !important; float:left!important;}
        }
        
        /* Additional Media Query for tablets */
        
        @media screen and (min-width: 480px) and (max-width: 1024px) {
        
        /* Same as above */
        table[id=messageTopParkinson], table[id=headerParkinson], table[id=bannerImageParkinson], table[id=propertiesParkinson], table[class=propertyParkinson], table[class=parkinsonDivider], img[class=emailwrapto100pc]{width:100% !important; height:auto !important;}
        /* Hide stuff on tablets */
        table[class=emailnomob],td[class=emailnomob],img[class=emailnomob],span[class=emailnomob]{display:none !important;}
        
        /* Same as above - make the text larger on a tablet*/
        span[class=emailbodytext],a[class=emailbodytext]{font-size:10px !important; line-height:16px !important;}
        span[class=emailh2],a[class=emailh2]{font-size:22px !important; line-height:26px !important;}
        
         /*Same as above - make links into buttons*/
        a[class=emailmobbutton]{display:block !important;font-size:14px !important; font-weight:bold !important; padding:6px 4px 8px 4px !important; line-height:18px !important; background:#dddddd !important; border-radius:5px !important; margin:10px auto;width:70%; text-align:center; color:#111 !important; text-decoration:none; text-shadow:#fff 1px 0 0 ;}

}










   </style>  
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body style="padding:0; margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:
100%; background-color:#ffffff;" bgcolor="#ffffff">
<table width="100%" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF"><tr><td align="center">

    <table id="headerParkinson" cellpadding="0" cellspacing="0" bgcolor="#345296" width="580" align="center" style="color:#FFFFFF;">
    <tr>
      <td height="20" colspan="3"></td>
    </tr>
    <tr>
      <td width="200" align="center" class="emailcolsplitPadding"> July 2013</td>
      <td width="260" align="center" class="emailcolsplit"><img src="http://www.sampleestateagent.com/email/logo.jpg" width="260" height="93"></td>
      <td width="200" align="center" class="emailcolsplitPadding">Visit website here</td>
    </tr>
    <tr>
      <td height="20" colspan="3"></td>
      </tr>
    </table>
    <!-- headerParkinson -->  
    
    <table id="bannerImageParkinson" cellpadding="0" cellspacing="0" width="100%" align="center">  
    <tr>
    <td height="5">
    </td>
    </tr>
    <tr>  
            <td width="832" align="center"><img src="http://www.sampleestateagent.com/email/banner.jpg" class="emailwrapto100pc" width="580" height="233">
<table id="propertiesParkinson" width="580" border="0" cellspacing="0" cellpadding="10">
              <tr>
                <td bgcolor="#c6d3f2">
<table border="0" cellspacing="0" cellpadding="0" width="560" class="propertyParkinson">
    <tr>
        <td class="emailcolsplit" align="center" valign="top" width="259">
        
        <!--Start of the first column -->
        
        <table border="0" cellspacing="0" cellpadding="0" width="100%">
  <tr>
    <td width="259" height="154"><img src="http://www.sampleestateagent.com/email/property1.jpg" width="259" height="154" class="emailwrapto100pc"></td>
  </tr>
</table>
        
            
        </td>
        <td class="emailcolsplit" align="center" valign="top" width="301">
        
        <!--Start of the second column -->
        
                    <table border="0" cellspacing="0" cellpadding="0" width="100%">
              <tr>
                <td width="301" height="20" align="center" valign="middle" bgcolor="#345296" class="emailcolsplit" style="font-size:10px; color: #FFFFFF;">MARTLAND MILL INDUSTRIAL ESTATE, wigan</td>
                </tr>
                <tr>
    <td width="301" height="20" align="center" valign="middle" bgcolor="#00a5dd" class="emailcolsplit" style="font-size:11px; color: #FFFFFF; ">1,740.26  SQ M  / 18,732 SQ FT</td>
  </tr>
              <tr>
    <td width="301" height="81" align="center" bgcolor="#FFFFFF" class="emailcolsplit" style="font-size:12px; color: #000000;">• Modern industrial units in popular location<br> 
• Ample communal parking spaces available to front <br>
• Close to motorway networks J27 M6 and J?? & M61 <br>
• Secure managed industrial estate</td>
  </tr>
   <tr>
    <td align="center" height="17" width="301" bgcolor="#ffcb08" class="emailcolsplit" style="font-size:11px; color: #345296; font-weight: bold; padding: 5px 0 5px 0;"><a href="#">>>>>> VIEW PROPERTY <<<<<</a></td>
  </tr>
              </table></td>
    </tr>
</table>
<table class="parkinsonDivider" width="560">
<tr>
<td height="10"></td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="560" class="propertyParkinson">
    <tr>
        <td class="emailcolsplit" align="center" valign="top" width="259">
        
        <!--Start of the first column -->
        
        <table border="0" cellspacing="0" cellpadding="0" width="100%">
  <tr>
    <td width="259" height="154"><img src="http://www.sampleestateagent.com/email/property1.jpg" width="259" height="154" class="emailwrapto100pc"></td>
  </tr>
</table>
        
            
        </td>
        <td class="emailcolsplit" align="center" valign="top" width="301">
        
        <!--Start of the second column -->
        
                    <table border="0" cellspacing="0" cellpadding="0" width="100%">
              <tr>
                <td width="301" height="20" align="center" valign="middle" bgcolor="#345296" class="emailcolsplit" style="font-size:10px; color: #FFFFFF; ">MARTLAND MILL INDUSTRIAL ESTATE, wigan</td>
                </tr>
                <tr>
    <td width="301" height="20" align="center" valign="middle" bgcolor="#00a5dd" class="emailcolsplit" style="font-size:11px; color: #FFFFFF; ">1,740.26  SQ M  / 18,732 SQ FT</td>
  </tr>
              <tr>
    <td width="301" height="81" align="center" bgcolor="#FFFFFF" class="emailcolsplit" style="font-size:12px; color: #000000;">• Modern industrial units in popular location<br> 
• Ample communal parking spaces available to front <br>
• Close to motorway networks J27 M6 and J?? & M61 <br>
• Secure managed industrial estate</td>
  </tr>
   <tr>
    <td align="center" height="17" width="301" bgcolor="#ffcb08" class="emailcolsplit" style="font-size:11px; color: #345296; font-weight: bold; padding: 5px 0 5px 0;"><a href="#">>>>>> VIEW PROPERTY <<<<<</a></td>
  </tr>
              </table></td>
    </tr>
</table>
<table class="parkinsonDivider" width="560">
<tr>
<td height="10"></td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="560" class="propertyParkinson">
    <tr>
        <td class="emailcolsplit" align="center" valign="top" width="259">
        
        <!--Start of the first column -->
        
        <table border="0" cellspacing="0" cellpadding="0" width="100%">
  <tr>
    <td width="259" height="154"><img src="http://www.sampleestateagent.com/email/property1.jpg" width="259" height="154" class="emailwrapto100pc"></td>
  </tr>
</table>
        
            
        </td>
        <td class="emailcolsplit" align="center" valign="top" width="301">
        
        <!--Start of the second column -->
        
                    <table border="0" cellspacing="0" cellpadding="0" width="100%">
              <tr>
                <td width="301" height="20" align="center" valign="middle" bgcolor="#345296" class="emailcolsplit" style="font-size:10px; color: #FFFFFF; ">MARTLAND MILL INDUSTRIAL ESTATE, wigan</td>
                </tr>
                <tr>
    <td width="301" height="20" align="center" valign="middle" bgcolor="#00a5dd" class="emailcolsplit" style="font-size:11px; color: #FFFFFF; ">1,740.26  SQ M  / 18,732 SQ FT</td>
  </tr>
              <tr>
    <td width="301" height="81" align="center" bgcolor="#FFFFFF" class="emailcolsplit" style="font-size:12px; color: #000000;">• Modern industrial units in popular location<br> 
• Ample communal parking spaces available to front <br>
• Close to motorway networks J27 M6 and J?? & M61 <br>
• Secure managed industrial estate</td>
  </tr>
   <tr>
    <td align="center" height="17" width="301" bgcolor="#ffcb08" class="emailcolsplit" style="font-size:11px; color: #345296; font-weight: bold; padding: 5px 0 5px 0;"><a href="#">>>>>> VIEW PROPERTY <<<<<</a></td>
  </tr>
              </table></td>
    </tr>
</table>
<table class="parkinsonDivider" width="560">
<tr>
<td height="10"></td>
</tr>
</table>
</td>

        </tr>
    </table><!-- bannerImageParkinsone -->
    <table class="parkinsonDivider" width="560">
<tr>
<td height="50"></td>
</tr>
</table>
<unsubscribe>Unsubscribe here</unsubscribe>

</table><!-- wrapper -->
</body>  
</html>  

Here is a screenshot of how it looks on my gmail app

http://i.imgur.com/iVlUiX8.jpg

and this is how it looks and should look in the native android app

http://i.imgur.com/jisrlo9.jpg

I've read that Gmail won't recognise the media quires (might of changed  since the article i read) but even if it doesn't why is the content only like 50px wide?

If anyone has any idea I would really appreciate it.

Thanks

Josh

roshodgekiss roshodgekiss, 3 years ago

Hi there Josh, I like your design - and your code was 99% there! After running it through the validator though, I noticed there were a few issues, including:

- Unclosed/missing table tags
- Symbol entities weren't being used (eg. & instead of &amp; in the code)
- Abbreviated hex color codes (#FFF instead of #FFFFFF) - this can cause issues in some email clients

Overall, I think the missing table tags may have been what was causing the issues here - once I fixed those up, the email started looking great in Gmail. Here's the fixed code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Parkinson Newsletter</title>
<style type="text/css">
a {
    color: #345296;
    display:block;
    text-decoration: none;
}
img {
    display: block;
}
#messageTopParkinson p, #bottom-message p {
    color: #3f4042;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
}
table.propertyParkinson {
    border-collapse:collapse;
}
table.propertyParkinson td {
    border:1px solid #ffffff;
}
/* Outlook link fix */
        #outlook a {
    padding:0;
}
/* Hotmail background & line height fixes */
        .ExternalClass {
    width:100% !important;
}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {
    line-height: 100%;
}
/* Image borders & formatting */
        img {
    outline:none;
    text-decoration:none;
    -ms-interpolation-mode: bicubic;
}
a img {
    border:none;
}
/* Re-style iPhone automatic links (eg. phone numbers) */
        .applelinks a {
    color:#222222;
    text-decoration: none;
}
        /* Hotmail symbol fix for mobile devices */
        .ExternalClass img[class^=Emoji] {
width: 10px !important;
height: 10px !important;
display: inline !important;
}
        
        
        /* Media Query for mobile */
        
        @media screen and (max-width: 480px) {
        
        /* This resizes tables and images to be 100% wide with a proportionate width */
        table[id=messageTopParkinson], table[id=headerParkinson], table[id=bannerImageParkinson], table[id=propertiesParkinson], table[class=propertyParkinson], table[class=parkinsonDivider], img[class=emailwrapto100pc] {
width:100% !important;
height:auto !important;
}
        
        /* Hide stuff on mobiles */
        table[class=emailnomob], td[class=emailnomob], img[class=emailnomob], span[class=emailnomob] {
display:none !important;
}
 td[class=emailcolsplit] {
width:100%!important;
height:auto !important;
float:left!important;
}
 a[class=emailmobbutton] {
display:block !important;
font-size:14px !important;
font-weight:bold !important;
padding:6px 4px 8px 4px !important;
line-height:18px !important;
background:#dddddd !important;
border-radius:5px !important;
margin:10px auto;
width:70%;
text-align:center;
color:#111 !important;
text-decoration:none;
text-shadow:#fff 1px 0 0;
}

        /* This resizes body text for mobiles */
        span[class=emailbodytext], a[class=emailbodytext] {
font-size:10px !important;
line-height:16px !important;
}
 span[class=emailh2], a[class=emailh2] {
font-size:22px !important;
line-height:26px !important;
}
 .emailcolsplitPadding {
padding: 10px 0 10px 0;
width:100%!important;
height:auto !important;
float:left!important;
}
}
        
        /* Additional Media Query for tablets */
        
        @media screen and (min-width: 480px) and (max-width: 1024px) {
        
        /* Same as above */
        table[id=messageTopParkinson], table[id=headerParkinson], table[id=bannerImageParkinson], table[id=propertiesParkinson], table[class=propertyParkinson], table[class=parkinsonDivider], img[class=emailwrapto100pc] {
width:100% !important;
height:auto !important;
}
        /* Hide stuff on tablets */
        table[class=emailnomob], td[class=emailnomob], img[class=emailnomob], span[class=emailnomob] {
display:none !important;
}
        
        /* Same as above - make the text larger on a tablet*/
        span[class=emailbodytext], a[class=emailbodytext] {
font-size:10px !important;
line-height:16px !important;
}
 span[class=emailh2], a[class=emailh2] {
font-size:22px !important;
line-height:26px !important;
}
        
         /*Same as above - make links into buttons*/
        a[class=emailmobbutton] {
display:block !important;
font-size:14px !important;
font-weight:bold !important;
padding:6px 4px 8px 4px !important;
line-height:18px !important;
background:#dddddd !important;
border-radius:5px !important;
margin:10px auto;
width:70%;
text-align:center;
color:#111 !important;
text-decoration:none;
text-shadow:#ffffff 1px 0 0;
}
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body bgcolor="#FFFFFF" style="padding:0; margin:0; -webkit-text-size-adjust:none; -ms-text-size-adjust:100%; background-color:#ffffff;">
<table width="100%" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
  <tr>
    <td align="center"><table id="headerParkinson" cellpadding="0" cellspacing="0" bgcolor="#345296" width="580" align="center" style="color:#FFFFFF;">
        <tr>
          <td height="20" colspan="3"></td>
        </tr>
        <tr>
          <td width="200" align="center" class="emailcolsplitPadding"> July 2013</td>
          <td width="260" align="center" class="emailcolsplit"><img src="http://www.sampleestateagent.com/email/logo.jpg" width="260" height="93" /></td>
          <td width="200" align="center" class="emailcolsplitPadding">Visit website here</td>
        </tr>
        <tr>
          <td height="20" colspan="3"></td>
        </tr>
      </table>
      <!-- headerParkinson -->
      <table id="bannerImageParkinson" cellpadding="0" cellspacing="0" width="100%" align="center">
        <tr>
          <td height="5"></td>
        </tr>
        <tr>
          <td width="832" align="center"><img src="http://www.sampleestateagent.com/email/banner.jpg" class="emailwrapto100pc" width="580" height="233" />
            <table id="propertiesParkinson" width="580" border="0" cellspacing="0" cellpadding="10">
              <tr>
                <td bgcolor="#c6d3f2"><table border="0" cellspacing="0" cellpadding="0" width="560" class="propertyParkinson">
                    <tr>
                      <td class="emailcolsplit" align="center" valign="top" width="259"><!--Start of the first column -->
                        <table border="0" cellspacing="0" cellpadding="0" width="100%">
                          <tr>
                            <td width="259" height="154"><img src="http://www.sampleestateagent.com/email/property1.jpg" width="259" height="154" class="emailwrapto100pc" /></td>
                          </tr>
                        </table></td>
                      <td class="emailcolsplit" align="center" valign="top" width="301"><!--Start of the second column -->
                        <table border="0" cellspacing="0" cellpadding="0" width="100%">
                          <tr>
                            <td width="301" height="20" align="center" valign="middle" bgcolor="#345296" class="emailcolsplit" style="font-size:10px; color: #FFFFFF;">MARTLAND MILL INDUSTRIAL ESTATE, wigan</td>
                          </tr>
                          <tr>
                            <td width="301" height="20" align="center" valign="middle" bgcolor="#00a5dd" class="emailcolsplit" style="font-size:11px; color: #FFFFFF; ">1,740.26  SQ M  / 18,732 SQ FT</td>
                          </tr>
                          <tr>
                            <td width="301" height="81" align="center" bgcolor="#FFFFFF" class="emailcolsplit" style="font-size:12px; color: #000000;">&bull; Modern industrial units in popular location<br />
                              &bull; Ample communal parking spaces available to front <br />
                              &bull; Close to motorway networks J27 M6 and J?? &amp; M61 <br />
                              &bull; Secure managed industrial estate</td>
                          </tr>
                          <tr>
                            <td align="center" height="17" width="301" bgcolor="#ffcb08" class="emailcolsplit" style="font-size:11px; color: #345296; font-weight: bold; padding: 5px 0 5px 0;"><a href="#">&gt;&gt;&gt;&gt; VIEW PROPERTY &lt;&lt;&lt;&lt;</a></td>
                          </tr>
                        </table></td>
                    </tr>
                  </table>
                  <table class="parkinsonDivider" width="560">
                    <tr>
                      <td height="10"></td>
                    </tr>
                  </table>
                  <table border="0" cellspacing="0" cellpadding="0" width="560" class="propertyParkinson">
                    <tr>
                      <td class="emailcolsplit" align="center" valign="top" width="259"><!--Start of the first column -->
                        <table border="0" cellspacing="0" cellpadding="0" width="100%">
                          <tr>
                            <td width="259" height="154"><img src="http://www.sampleestateagent.com/email/property1.jpg" width="259" height="154" class="emailwrapto100pc" /></td>
                          </tr>
                        </table></td>
                      <td class="emailcolsplit" align="center" valign="top" width="301"><!--Start of the second column -->
                        <table border="0" cellspacing="0" cellpadding="0" width="100%">
                          <tr>
                            <td width="301" height="20" align="center" valign="middle" bgcolor="#345296" class="emailcolsplit" style="font-size:10px; color: #FFFFFF; ">MARTLAND MILL INDUSTRIAL ESTATE, wigan</td>
                          </tr>
                          <tr>
                            <td width="301" height="20" align="center" valign="middle" bgcolor="#00a5dd" class="emailcolsplit" style="font-size:11px; color: #FFFFFF; ">1,740.26  SQ M  / 18,732 SQ FT</td>
                          </tr>
                          <tr>
                            <td width="301" height="81" align="center" bgcolor="#FFFFFF" class="emailcolsplit" style="font-size:12px; color: #000000;">&bull; Modern industrial units in popular location<br />
                              &bull; Ample communal parking spaces available to front <br />
                              &bull; Close to motorway networks J27 M6 and J?? &amp; M61 <br />
                              &bull; Secure managed industrial estate</td>
                          </tr>
                          <tr>
                            <td align="center" height="17" width="301" bgcolor="#ffcb08" class="emailcolsplit" style="font-size:11px; color: #345296; font-weight: bold; padding: 5px 0 5px 0;"><a href="#">&gt;&gt;&gt;&gt; VIEW PROPERTY &lt;&lt;&lt;&lt;</a></td>
                          </tr>
                        </table></td>
                    </tr>
                  </table>
                  <table class="parkinsonDivider" width="560">
                    <tr>
                      <td height="10"></td>
                    </tr>
                  </table>
                  <table border="0" cellspacing="0" cellpadding="0" width="560" class="propertyParkinson">
                    <tr>
                      <td class="emailcolsplit" align="center" valign="top" width="259"><!--Start of the first column -->
                        <table border="0" cellspacing="0" cellpadding="0" width="100%">
                          <tr>
                            <td width="259" height="154"><img src="http://www.sampleestateagent.com/email/property1.jpg" width="259" height="154" class="emailwrapto100pc" /></td>
                          </tr>
                        </table></td>
                      <td class="emailcolsplit" align="center" valign="top" width="301"><!--Start of the second column -->
                        <table border="0" cellspacing="0" cellpadding="0" width="100%">
                          <tr>
                            <td width="301" height="20" align="center" valign="middle" bgcolor="#345296" class="emailcolsplit" style="font-size:10px; color: #FFFFFF; ">MARTLAND MILL INDUSTRIAL ESTATE, wigan</td>
                          </tr>
                          <tr>
                            <td width="301" height="20" align="center" valign="middle" bgcolor="#00a5dd" class="emailcolsplit" style="font-size:11px; color: #FFFFFF; ">1,740.26  SQ M  / 18,732 SQ FT</td>
                          </tr>
                          <tr>
                            <td width="301" height="81" align="center" bgcolor="#FFFFFF" class="emailcolsplit" style="font-size:12px; color: #000000;">&bull; Modern industrial units in popular location<br />
                              &bull; Ample communal parking spaces available to front <br />
                              &bull; Close to motorway networks J27 M6 and J?? &amp; M61 <br />
                              &bull; Secure managed industrial estate</td>
                          </tr>
                          <tr>
                            <td align="center" height="17" width="301" bgcolor="#ffcb08" class="emailcolsplit" style="font-size:11px; color: #345296; font-weight: bold; padding: 5px 0 5px 0;"><a href="#">&gt;&gt;&gt;&gt; VIEW PROPERTY &lt;&lt;&lt;&lt;</a></td>
                          </tr>
                        </table></td>
                    </tr>
                  </table>
                  <table class="parkinsonDivider" width="560">
                    <tr>
                      <td height="10"></td>
                    </tr>
                  </table></td>
              </tr>
            </table>
            <!-- bannerImageParkinsone -->
            <table class="parkinsonDivider" width="560">
              <tr>
                <td height="50"></td>
              </tr>
            </table>
            <unsubscribe>Unsubscribe here</unsubscribe></td>
        </tr>
      </table>
      <!-- wrapper --></td>
  </tr>
</table>
</body>
</html>

Thanks, Josh - keep up the great work, it's all just practice, really! let us know if there's anything else we can help with here :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
j05hr, 3 years ago

Thank you so much for taking the time to go through the code and pick out the errors.  Really things I should know better about although the shorthand hex codes I'm guilty of from my general design and thanks for the comments on the design.

I copy and pasted your code and resent it to my gmail and the same thing is happening.  Are you using the Gmail app? Or is it the browser version?  Also which Android phone are you using?

The support here is brilliant and I will definitely tell all my clients to use Campaign Monitor.

Redferret, 3 years ago

I think this is the Gmail apps auto-sizing feature messing with your email, one way to find out is to turn auto-sizing off on the email and see if it looks more like Ros' version.

What i've found with the auto-sizing feature is that it manipulates the width of tables but not tds so if you make sure you set all your widths in each and every td you might fix the issue.


Gmail app apologist
j05hr, 3 years ago

Yeah that's exactly what it is, when I turn off the auto-sizing it works like a desktop version of the email.  I've added widths to every td but the same thing still happens.

I've also realised Ros's version is actually from an iPhone and not Android

Updated code just in case I'm getting it wrong

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Parkinson Newsletter</title>
<style type="text/css">
a {
    color: #345296;
    display:block;
    text-decoration: none;
}
img {
    display: block;
}
#messageTopParkinson p, #bottom-message p {
    color: #3f4042;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
}
table.propertyParkinson {
    border-collapse:collapse;
}
table.propertyParkinson td {
    border:1px solid #ffffff;
}
/* Outlook link fix */
        #outlook a {
    padding:0;
}
/* Hotmail background & line height fixes */
        .ExternalClass {
    width:100% !important;
}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {
    line-height: 100%;
}
/* Image borders & formatting */
        img {
    outline:none;
    text-decoration:none;
    -ms-interpolation-mode: bicubic;
}
a img {
    border:none;
}
/* Re-style iPhone automatic links (eg. phone numbers) */
        .applelinks a {
    color:#222222;
    text-decoration: none;
}
        /* Hotmail symbol fix for mobile devices */
        .ExternalClass img[class^=Emoji] {
width: 10px !important;
height: 10px !important;
display: inline !important;
}
        
        
        /* Media Query for mobile */
        
        @media screen and (max-width: 480px) {
        
        /* This resizes tables and images to be 100% wide with a proportionate width */
        table[id=messageTopParkinson], table[id=headerParkinson], table[id=bannerImageParkinson], table[id=propertiesParkinson], table[class=propertyParkinson], table[class=parkinsonDivider], img[class=emailwrapto100pc] {
width:100% !important;
height:auto !important;
}
        
        /* Hide stuff on mobiles */
        table[class=emailnomob], td[class=emailnomob], img[class=emailnomob], span[class=emailnomob] {
display:none !important;
}
 td[class=emailcolsplit] {
width:100%!important;
height:auto !important;
float:left!important;
}
 a[class=emailmobbutton] {
display:block !important;
font-size:14px !important;
font-weight:bold !important;
padding:6px 4px 8px 4px !important;
line-height:18px !important;
background:#dddddd !important;
border-radius:5px !important;
margin:10px auto;
width:70%;
text-align:center;
color:#111 !important;
text-decoration:none;
text-shadow:#fff 1px 0 0;
}

        /* This resizes body text for mobiles */
        span[class=emailbodytext], a[class=emailbodytext] {
font-size:10px !important;
line-height:16px !important;
}
 span[class=emailh2], a[class=emailh2] {
font-size:22px !important;
line-height:26px !important;
}
 .emailcolsplitPadding {
padding: 10px 0 10px 0;
width:100%!important;
height:auto !important;
float:left!important;
}
}
        
        /* Additional Media Query for tablets */
        
        @media screen and (min-width: 480px) and (max-width: 1024px) {
        
        /* Same as above */
        table[id=messageTopParkinson], table[id=headerParkinson], table[id=bannerImageParkinson], table[id=propertiesParkinson], table[class=propertyParkinson], table[class=parkinsonDivider], img[class=emailwrapto100pc] {
width:100% !important;
height:auto !important;
}
        /* Hide stuff on tablets */
        table[class=emailnomob], td[class=emailnomob], img[class=emailnomob], span[class=emailnomob] {
display:none !important;
}
        
        /* Same as above - make the text larger on a tablet*/
        span[class=emailbodytext], a[class=emailbodytext] {
font-size:10px !important;
line-height:16px !important;
}
 span[class=emailh2], a[class=emailh2] {
font-size:22px !important;
line-height:26px !important;
}
        
         /*Same as above - make links into buttons*/
        a[class=emailmobbutton] {
display:block !important;
font-size:14px !important;
font-weight:bold !important;
padding:6px 4px 8px 4px !important;
line-height:18px !important;
background:#dddddd !important;
border-radius:5px !important;
margin:10px auto;
width:70%;
text-align:center;
color:#111 !important;
text-decoration:none;
text-shadow:#ffffff 1px 0 0;
}
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body bgcolor="#FFFFFF" style="padding:0; margin:0; -webkit-text-size-adjust:none; -ms-text-size-adjust:100%; background-color:#ffffff;">
<table width="100%" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
  <tr>
    <td align="center" width="580"><table id="headerParkinson" cellpadding="0" cellspacing="0" bgcolor="#345296" width="580" align="center" style="color:#FFFFFF;">
        <tr>
          <td height="20" colspan="3" width="580"></td>
        </tr>
        <tr>
          <td width="200" align="center" class="emailcolsplitPadding"> July 2013</td>
          <td width="260" align="center" class="emailcolsplit"><img src="http://www.sampleestateagent.com/email/logo.jpg" width="260" height="93" /></td>
          <td width="200" align="center" class="emailcolsplitPadding">Visit website here</td>
        </tr>
        <tr>
          <td height="20" colspan="3" width="580"></td>
        </tr>
      </table>
      <!-- headerParkinson -->
      <table id="bannerImageParkinson" cellpadding="0" cellspacing="0" width="580" align="center">
        <tr>
          <td height="5" width="580"></td>
        </tr>
        <tr>
          <td align="center" width="580"><img src="http://www.sampleestateagent.com/email/banner.jpg" class="emailwrapto100pc" width="580" height="233" />
            <table id="propertiesParkinson" width="580" border="0" cellspacing="0" cellpadding="10">
              <tr>
                <td bgcolor="#c6d3f2" width="580">
                    <table border="0" cellspacing="0" cellpadding="0" width="560" class="propertyParkinson">
                        <tr>
                          <td class="emailcolsplit" align="center" valign="top" width="259"><!--Start of the first column -->
                            <table border="0" cellspacing="0" cellpadding="0" width="100%">
                              <tr>
                                <td width="259" height="154"><img src="http://www.sampleestateagent.com/email/property1.jpg" height="154" width="259" class="emailwrapto100pc" /></td>
                              </tr>
                            </table></td>
                          <td class="emailcolsplit" align="center" valign="top" width="301"><!--Start of the second column -->
                            <table border="0" cellspacing="0" cellpadding="0" width="100%">
                              <tr>
                                <td width="301" height="20" align="center" valign="middle" bgcolor="#345296" class="emailcolsplit" style="font-size:10px; color: #FFFFFF;">MARTLAND MILL INDUSTRIAL ESTATE, wigan</td>
                              </tr>
                              <tr>
                                <td width="301" height="20" align="center" valign="middle" bgcolor="#00a5dd" class="emailcolsplit" style="font-size:11px; color: #FFFFFF; ">1,740.26  SQ M  / 18,732 SQ FT</td>
                              </tr>
                              <tr>
                                <td width="301" height="81" align="center" bgcolor="#FFFFFF" class="emailcolsplit" style="font-size:12px; color: #000000;">&bull; Modern industrial units in popular location<br />
                                  &bull; Ample communal parking spaces available to front <br />
                                  &bull; Close to motorway networks J27 M6 and J?? &amp; M61 <br />
                                  &bull; Secure managed industrial estate</td>
                              </tr>
                              <tr>
                                <td align="center" height="17" width="301" bgcolor="#ffcb08" class="emailcolsplit" style="font-size:11px; color: #345296; font-weight: bold; padding: 5px 0 5px 0;"><a href="#">&gt;&gt;&gt;&gt; VIEW PROPERTY &lt;&lt;&lt;&lt;</a></td>
                              </tr>
                            </table></td>
                        </tr>
                  </table>
                </td>
              </tr>
            </table>
            <!-- bannerImageParkinsone -->
            <table class="parkinsonDivider" width="560">
              <tr>
                <td height="50"  width="560"></td>
              </tr>
            </table>
            <unsubscribe>Unsubscribe here</unsubscribe></td>
        </tr>
      </table>
      <!-- wrapper --></td>
  </tr>
</table>
</body>
</html>

So if I have done this right am I right in thinking that this can't be fixed as it's Gmails feature messing it up that is turned on by default?

roshodgekiss roshodgekiss, 3 years ago

Hey there j05hr, thank you! Happy to help where I can. :)

Yes, I only had an iPhone handy, but "in theory", they should be quite similar in results. That said, I really don't know much about Gmail's auto-fit, apart from what's in their docs. I'm not entirely sure if there's a way to override this, given that it's neither an HTML or CSS thing.

Out of curiosity, do you get different results, with and without the <viewport meta>? Keen to see if Gmail respects it.


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
j05hr, 3 years ago

If only it was as simple as in theory haha, 

It gets exactly the same results without the <viewport meta>? and also if I take all the responsive CSS out, it still has  the same results.  What I think happens is, it ignores the responsive CSS so it just displays it normally and then it scales the 600 wide email to fit the screen. 

The problem with my email is, is that the image will always be 259px and whatever is left of the screen will fit the text in thus making it render like it does in my image.

It's just really frustrating that it won't take the float left and move it onto a new line and being the only client that does this.

roshodgekiss roshodgekiss, 3 years ago

So so tricky - my only recommend here would be to stick to a 1-column layout where possible. Gmail has me stumped!


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
j05hr, 3 years ago

Well if it's got the staff at Campaign Monitor stumped that's good enough for me to show the client that it's not going to work.

Yeah you are definitely right about sticking to 1-column layouts if using responsive techniques.  It's a shame as it almost works so well apart from Gmail.

Thanks for the help again, you've been very helpful.  I'll definitely be recommending Campaign Monitor.

j05hr, 3 years ago

Problem solved just in case anyone comes across  this thread from a search engine.  Use min-width on the parent table like so

<table width="600" border="0" cellpadding="0" cellspacing="0" style="min-width:600px;">
  <tr>
    <td width="400" style="min-width:400px;">
      <img style="margin: 0; border: 0; padding: 0; display: block;" src="image here" width="400" height="200" alt="">
    </td>
    <td width="200">
      <img style="margin: 0; border: 0; padding: 0; display: block;" src="image here" width="200" height="200" alt="">
    </td>
  </tr>
</table>

and that will override Gmails auto-sizing feature.

roshodgekiss roshodgekiss, 3 years ago

This is so good. Redferret, you are our hero!


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
danielles, 3 years ago

I tried to get it right with all the info provided here but
OR I am missing something
OR the gmail app has changed in the mean time
but  looking at the result on an android phone with the gmail app, I did not get a one column format using the following code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Parkinson Newsletter</title>
<style type="text/css">
a {
    color: #345296;
    display:block;
    text-decoration: none;
}
img {
    display: block;
}
#messageTopParkinson p, #bottom-message p {
    color: #3f4042;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
}
table.propertyParkinson {
    border-collapse:collapse;
}
table.propertyParkinson td {
    border:1px solid #ffffff;
}
/* Outlook link fix */
        #outlook a {
    padding:0;
}
/* Hotmail background & line height fixes */
        .ExternalClass {
    width:100% !important;
}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {
    line-height: 100%;
}
/* Image borders & formatting */
        img {
    outline:none;
    text-decoration:none;
    -ms-interpolation-mode: bicubic;
}
a img {
    border:none;
}
/* Re-style iPhone automatic links (eg. phone numbers) */
        .applelinks a {
    color:#222222;
    text-decoration: none;
}
        /* Hotmail symbol fix for mobile devices */
        .ExternalClass img[class^=Emoji] {
width: 10px !important;
height: 10px !important;
display: inline !important;
}
        
        
        /* Media Query for mobile */
        
        @media screen and (max-width: 480px) {
        
        /* This resizes tables and images to be 100% wide with a proportionate width */
        table[id=messageTopParkinson], table[id=headerParkinson], table[id=bannerImageParkinson], table[id=propertiesParkinson], table[class=propertyParkinson], table[class=parkinsonDivider], img[class=emailwrapto100pc] {
width:100% !important;
height:auto !important;
}
        
        /* Hide stuff on mobiles */
        table[class=emailnomob], td[class=emailnomob], img[class=emailnomob], span[class=emailnomob] {
display:none !important;
}
 td[class=emailcolsplit] {
width:100%!important;
height:auto !important;
float:left!important;
}
 a[class=emailmobbutton] {
display:block !important;
font-size:14px !important;
font-weight:bold !important;
padding:6px 4px 8px 4px !important;
line-height:18px !important;
background:#dddddd !important;
border-radius:5px !important;
margin:10px auto;
width:70%;
text-align:center;
color:#111 !important;
text-decoration:none;
text-shadow:#fff 1px 0 0;
}

        /* This resizes body text for mobiles */
        span[class=emailbodytext], a[class=emailbodytext] {
font-size:10px !important;
line-height:16px !important;
}
 span[class=emailh2], a[class=emailh2] {
font-size:22px !important;
line-height:26px !important;
}
 .emailcolsplitPadding {
padding: 10px 0 10px 0;
width:100%!important;
height:auto !important;
float:left!important;
}
}
        
        /* Additional Media Query for tablets */
        
        @media screen and (min-width: 480px) and (max-width: 1024px) {
        
        /* Same as above */
        table[id=messageTopParkinson], table[id=headerParkinson], table[id=bannerImageParkinson], table[id=propertiesParkinson], table[class=propertyParkinson], table[class=parkinsonDivider], img[class=emailwrapto100pc] {
width:100% !important;
height:auto !important;
}
        /* Hide stuff on tablets */
        table[class=emailnomob], td[class=emailnomob], img[class=emailnomob], span[class=emailnomob] {
display:none !important;
}
        
        /* Same as above - make the text larger on a tablet*/
        span[class=emailbodytext], a[class=emailbodytext] {
font-size:10px !important;
line-height:16px !important;
}
 span[class=emailh2], a[class=emailh2] {
font-size:22px !important;
line-height:26px !important;
}
        
         /*Same as above - make links into buttons*/
        a[class=emailmobbutton] {
display:block !important;
font-size:14px !important;
font-weight:bold !important;
padding:6px 4px 8px 4px !important;
line-height:18px !important;
background:#dddddd !important;
border-radius:5px !important;
margin:10px auto;
width:70%;
text-align:center;
color:#111 !important;
text-decoration:none;
text-shadow:#ffffff 1px 0 0;
}
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body bgcolor="#FFFFFF" style="padding:0; margin:0; -webkit-text-size-adjust:none; -ms-text-size-adjust:100%; background-color:#ffffff;">
<table width="100%" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
  <tr>
    <td align="center" width="580"><table id="headerParkinson" cellpadding="0" cellspacing="0" bgcolor="#345296" width="580"  align="center" style="color:#FFFFFF;min-width:580px;">
        <tr>
          <td height="20" colspan="3" width="580"></td>
        </tr>
        <tr>
          <td width="200" align="center" class="emailcolsplitPadding"> July 2013</td>
          <td width="260" align="center" class="emailcolsplit"><img src="http://www.sampleestateagent.com/email/logo.jpg" width="260" height="93" /></td>
          <td width="200" align="center" class="emailcolsplitPadding">Visit website here</td>
        </tr>
        <tr>
          <td height="20" colspan="3" width="580"></td>
        </tr>
      </table>
      <!-- headerParkinson -->
      <table id="bannerImageParkinson" cellpadding="0" cellspacing="0" width="580" align="center" style="min-width:580px;">
        <tr>
          <td height="5" width="580"></td>
        </tr>
        <tr>
          <td align="center" width="580"><img src="http://www.sampleestateagent.com/email/banner.jpg" class="emailwrapto100pc" width="580" height="233" />
            <table id="propertiesParkinson" width="580" border="0" cellspacing="0" cellpadding="10">
              <tr>
                <td bgcolor="#c6d3f2" width="580">
                    <table border="0" cellspacing="0" cellpadding="0" width="560" class="propertyParkinson">
                        <tr>
                          <td class="emailcolsplit" align="center" valign="top" width="259" style="min-width:259px;"><!--Start of the first column -->
                            <table border="0" cellspacing="0" cellpadding="0" width="100%">
                              <tr>
                                <td width="259" height="154" ><img src="http://www.sampleestateagent.com/email/property1.jpg" height="154" width="259" class="emailwrapto100pc" /></td>
                              </tr>
                            </table></td>
                          <td class="emailcolsplit" align="center" valign="top"  style="min-width:301px;" width="301"><!--Start of the second column -->
                            <table border="0" cellspacing="0" cellpadding="0" width="100%">
                              <tr>
                                <td width="301" height="20" align="center" valign="middle" bgcolor="#345296" class="emailcolsplit" style="font-size:10px; color: #FFFFFF;">MARTLAND MILL INDUSTRIAL ESTATE, wigan</td>
                              </tr>
                              <tr>
                                <td width="301" height="20" align="center" valign="middle" bgcolor="#00a5dd" class="emailcolsplit" style="font-size:11px; color: #FFFFFF; ">1,740.26  SQ M  / 18,732 SQ FT</td>
                              </tr>
                              <tr>
                                <td width="301" height="81" align="center" bgcolor="#FFFFFF" class="emailcolsplit" style="font-size:12px; color: #000000;">&bull; Modern industrial units in popular location<br />
                                  &bull; Ample communal parking spaces available to front <br />
                                  &bull; Close to motorway networks J27 M6 and J?? &amp; M61 <br />
                                  &bull; Secure managed industrial estate</td>
                              </tr>
                              <tr>
                                <td align="center" height="17" width="301" bgcolor="#ffcb08" class="emailcolsplit" style="font-size:11px; color: #345296; font-weight: bold; padding: 5px 0 5px 0;"><a href="#">&gt;&gt;&gt;&gt; VIEW PROPERTY &lt;&lt;&lt;&lt;</a></td>
                              </tr>
                            </table></td>
                        </tr>
                  </table>
                </td>
              </tr>
            </table>
            <!-- bannerImageParkinsone -->
            <table class="parkinsonDivider" width="560">
              <tr>
                <td height="50"  width="560"></td>
              </tr>
            </table>
            <unsubscribe>Unsubscribe here</unsubscribe></td>
        </tr>
      </table>
      <!-- wrapper --></td>
  </tr>
</table>
</body>
</html>
roshodgekiss roshodgekiss, 3 years ago

Hi there danielles, Gmail for Android doesn't support media queries, so you won't get a one-column layout in this email client. Does that explain what's going on here?


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
danielles, 3 years ago

Sorry, but my question was perhaps not that well formulated. I do know that gmail ignores the media queries and in my search for ways to turn a 2 column format into a 1 column format in the gmail app, I found this thread. What I basically understood from the conversation above was that @j05hr found a way to turn a two column email into a one column email by setting a min-width on the parent table. Basically I have a layout similar to @j05hr's real estate example and I would like to know if it is possible to make the gmail app shift the text under the image.

Dion_Isgro, 3 years ago

Hi Rosanne or anyone :)

I am trying my had at responsive design, and for the most part my email is behaving exactly the way it should except in the Android Gmail App.
Tables are not rendering at 100% the width of the container, instead tables are wrapping at 100% the width of the content inside the table.
I am at a loss on how to fix this. Could some one please take a look at my attached code and let me know what I should fix, or point me in the right direction. (FYI Ignore the ExactTarget Amp script on some of the links) 

THANK YOU!


http://s27.postimg.org/b89q8qaqb/vudu_Screen.png




<!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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

<title>Receive 5 HDX Movies on the House</title>

<style type="text/css">
.ExternalClass * { line-height:100%; }
.ExternalClass { width:100%; }
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100%; }
body { -webkit-text-size-adjust:none;-ms-text-size-adjust:100%; mso-line-height-rule:exactly; -webkit-font-smoothing: antialiased; font-family:Arial, Helvetica, sans-serif; margin:0; padding:0; width: 100%; background-color: #ffffff;}
table td { border-collapse:collapse; }

@media only screen and (min-device-width: 320px) and (max-device-width: 481px){
table[class=deviceWidth] { width: 320px !important; min-width:320px !important; }
/* Hide sections on iphone */
table[class=content-table-hide], td[class=content-table-hide], img[class=content-table-hide], span[class=content-table-hide] { display:none !important;}
/* Center logo on iphone */
td[class=logo_image] { margin-right: auto; margin-left: auto !important; }
}
</style>
</head>



<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" yahoo="fix" >
%%=ContentArea("578225")=%%
<table width="640" border="0" align="center" cellpadding="0" cellspacing="0"  style="min-width:320px;" class="deviceWidth">
  <tr>
    <td align="center" valign="top">
    
    
    <table width="96%" border="0" cellpadding="0" cellspacing="0" align="center">
  <tr>
    <td align="left" valign="middle"><span style="font-family:Arial, Helvetica, sans-serif; font-size:10px; color:#464646;"><a href="%%view_email_url%%" title="View in a browser" target="_blank" style="color:#464646;">View this email in a browser.</a></span></td>
    </tr>
</table>


<table width="640" border="0" align="center" cellpadding="0" cellspacing="0" style="-webkit-border-radius:5px 5px 0px 0px; -moz-border-radius:5px 5px 0px 0px; border-radius:5px 5px 0px 0px; background-color:#000000; min-width:320px;" class="deviceWidth">
  <tr>
    <td align="center" valign="bottom">
    
    
    
    
    <table width="100%" border="0" cellspacing="0" cellpadding="0" style="min-width:320px;" class="deviceWidth">
  <tr>
    <td valign="bottom"><table border="0" cellpadding="0" cellspacing="0" class="logo_image">
      <tr>
        <td align="left" valign="top" style="padding:12px 14px 12px 14px;" class="logo_image">
        
        <a href="%%=v(@giftUrl)=%%" target="_blank"><img src="http://image.email.vudu.com/lib/fe9a15707167007871/m/4/logo_2013_Q4.png" alt="VUDU | HD Movies &amp; TV" width="263" height="50" hspace="0" vspace="0" border="0" style="display:block; color:#FFFFFF; font-family:Arial, Helvetica, sans-serif; font-size:16px;" /></a>
        
        </td>
        </tr>
      </table></td>
  </tr>
  </table>
    <table width="100%" border="0" cellspacing="0" cellpadding="0" style="min-width:320px;" class="deviceWidth">
      <tr>
        <td height="1" align="left"  bgcolor="#3D3D3D" ><img src="http://image.email.vudu.com/lib/fe9a15707167007871/m/3/breaking_bad_clear2.gif" width="1" height="1" style="display:block; "/></td>
        </tr>
    </table></td>
  </tr>
</table>
<table width="640" border="0" cellspacing="0" cellpadding="0" style="min-width:320px;" class="deviceWidth">
  <tr>
        <td align="left" valign="top" bgcolor="#000000" style=" padding:12px 14px 0 14px;"><span style="font-family:Arial, Helvetica, sans-serif; color:#FFF; font-size:20px; font-weight:bold;">%%=ProperCase(@senderName)=%% has gifted you a movie on VUDU.</span></td>
      </tr>
</table>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#000000">
  <tr>
    <td width="12" ></td>
    <td >
      
      <!-- Left Column START-->
      
      <table align="left" width="308" cellpadding="0" cellspacing="0" border="0" class="content-table-hide">
        <tr>
          <td align="center" valign="top" class="center"><table width="296" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td>&nbsp;</td>
            </tr>
          </table>            <span style="display:inline-block; border-style:solid; border-color:#666666; border-width:1px; border-collapse:collapse; color:#ffffff;"><a href="%%=v(@giftUrl)=%%" target="_blank"><img src="http://image.email.vudu.com/lib/fe9a15707167007871/m/4/VUDU_Wrapped_Gift-3.jpg" alt="Gift - Click to Open" width="300" height="203" border="0" class="gift_image" style="display:block; color:#FFFFFF; font-family:Arial, Helvetica, sans-serif; font-size:12px;" /></a></span></td>
          </tr>
        </table>
      
      <!-- Left Column END-->
      
      <!-- Right Column START-->
      
      <table align="right" width="308" cellpadding="0" cellspacing="0" border="0" >
        <tr>
          <td align="center" valign="top" ><table width="296" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td>&nbsp;</td>
            </tr>
          </table>
            <table width="296" border="0" cellpadding="0" cellspacing="0">
            <tr>
              <td align="left" valign="top"><span style="mso-table-lspace:0; mso-table-rspace:0; margin:0; font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#FFFFFF;">Dear %%=ProperCase(@recipientName)=%%,<br />
                <bR />
                %%=ProperCase(@senderName)=%% has gifted you a movie on VUDU.<br /><br />
                Enjoy unwrapping your gift in seconds and instantly watch this movie in your living room or on the go.           
                <br /><br />
                To get started click the button below, then follow the on-screen instructions to accept your gift. </span></td>
              </tr>
            </table>
            
            
            
            <table width="296" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td>&nbsp;</td>
                </tr>
              </table>
            
            <table width="174" border="0" align="center" cellpadding="1" cellspacing="0">
              <tr>
                <td align="center" bgcolor="#67DA3C"><table border="0" cellpadding="2" cellspacing="0">
                  <tr>
                    <td width="174" align="center" valign="middle"  style="background: #389242; color: #cccccc; text-decoration: none; font-family: Helvetica, Arial, sans-serif;"><a href="%%=v(@giftUrl)=%%" title="Open Your Gift" target="_blank"  style="color: #ffffff; text-decoration: none; font-family:Verdana, Geneva, sans-serif; font-size:16px; text-transform:uppercase;" ><strong>Open Your Gift</strong></a></td>
                    </tr>
                  </table></td>
                </tr>
              </table>
            <table width="296" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td height="22">&nbsp;</td>
              </tr>
            </table></td>
          </tr>
        </table>
      
      <!-- Right Column End-->
      
      
    </td>
    <td width="12" ></td>
    </tr>
</table>
<table width="640" border="0" cellspacing="0" cellpadding="0" style="min-width:320px;" class="deviceWidth">
  <tr>
    <td height="1"   bgcolor="#3D3D3D" ><img src="http://image.email.vudu.com/lib/fe9a15707167007871/m/3/breaking_bad_clear2.gif" width="1" height="1" style="display:block; "/></td>
    </tr>
</table>
<table width="640" border="0" cellspacing="0" cellpadding="0" style="min-width:320px;" class="deviceWidth">
  <tr>
    <td align="left" valign="top" bgcolor="#000000" style=" padding:12px 14px 0 14px;"><span style="font-family:Arial, Helvetica, sans-serif; color:#FFFFFF; font-size:13px; ">
      <strong>Message from %%=ProperCase(@senderName)=%%: </strong></span></td>
  </tr>
        <tr>
          <td align="left" valign="top" bgcolor="#000000" style=" padding:0 14px 12px 14px;">
            <span style="font-family:Arial, Helvetica, sans-serif; color:#FFFFFF; font-size:13px; font-style:italic;">
            &quot;%%=v(@message)=%%&quot;
          </span></td>
  </tr>
</table>
<!-- Footer table START-->

<table width="100%" border="0" cellspacing="0" cellpadding="0" style="min-width:320px;" class="deviceWidth">
  <tr>
    <td height="1"   bgcolor="#3D3D3D" ><img src="http://image.email.vudu.com/lib/fe9a15707167007871/m/3/breaking_bad_clear2.gif" width="1" height="1" style="display:block; "/></td>
  </tr>
</table>
<table width="640" border="0" align="center" cellpadding="0" cellspacing="0" style="min-width:320px;" class="deviceWidth">
  <tr>
    <td align="center" valign="middle" style="-webkit-border-radius:0px 0px 5px 5px; -moz-border-radius:0px 0px 5px 5px; border-radius:0px 0px 5px 5px; background-color:#242424;" ><table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
          <td align="center" valign="top" ><table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
            <tr>
              <td align="center" valign="middle" style="padding:10px 0 10px 0; font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#d2d2d2; line-height:17px;"><a href="%%=RedirectTo(Concat('http://support.',@domain,'?CID=Email&SCID=',@scid,'&KWID=',@kwid))=%%" target="_blank" style="color:#d2d2d2; ">support</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<a href="%%=RedirectTo(Concat('http://www.',@domain,'/privacypolicy.html?CID=Email&SCID=',@scid,'&KWID=',@kwid))=%%" target="_blank" style="color:#d2d2d2 ">privacy policy</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<a href="%%=RedirectTo(Concat('http://www.',@domain,'/egiftingtermsandconditions.html?CID=Email&SCID=',@scid,'&KWID=',@kwid))=%%" target="_blank" style="color:#d2d2d2 ">terms of service</a></td>
              </tr>
            </table></td>
          </tr>
        </table></td>
  </tr>
</table>

<!-- Footer table End-->


<!-- Fine Print Footer table START-->
<table width="640" border="0" cellpadding="0" cellspacing="0" style="min-width:320px;" class="deviceWidth" >
  <tr>
    <td align="center" valign="top"><table width="94%" border="0" align="center" cellpadding="0" cellspacing="0">
        <tr>
          <td align="left" valign="middle" style="padding:10px 0 10px 0; font-family:Arial, Helvetica, sans-serif; font-size:9px;  color:#464646; ">This email box is not monitored. To contact us, please email <a href="mailto:support@vudu.com" target="_blank" style="color:#464646;">support@vudu.com</a>.<br />
            <br />
            <strong>Security &amp; Privacy</strong> <br />
            VUDU respects your security and privacy.<br />We will never ask for personal information (such as passwords or payment card numbers)  by email. If you receive such a request, please do not respond to the email. See our <a href="%%=RedirectTo(Concat('http://www.',@domain,'/privacypolicy.html?CID=Email&SCID=',@scid,'&KWID=',@kwid))=%%" title="Privacy Policy" target="_blank" style="color:#464646; font-weight:bold;">Privacy Policy</a> <br />
            <br />
            VUDU, Inc., 2980 Bowers Ave. Santa Clara, CA, 95051, UNITED STATES <br />
            &copy; %%xtyear%% VUDU, Inc. All rights reserved. </td>
        </tr>
    </table></td>
  </tr>
</table>

<!-- Fine Print Footer table END-->

</td>
  </tr>
</table>


<!-- Tracking Start-->
<img src='http://pixel.mathtag.com/event/img?mt_id=344182&mt_adid=106716&v1=&v2=&v3=&s1=&s2=&s3=&ord=%n' width='1' height='1' />
<custom name="opencounter" type="tracking">
<!-- Tracking END-->


</body>
</html>

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098