Stack Overflow users generally agree that HTML newsletters should consist of HTML tables and inline styling to ensure as many email clients as possible can handle the code. Some tags including images and anchors and properties such as text-decoration and border, however, render inconsistently according to various email clients.
Which tags, attributes and properties should be used -- and avoided -- in an HTML newsletter to ensure all email clients can read the code correctly? MailChimp decks out its templates with css, ids and classes. But Gmail, for example, clips most CSS. Here's a splash of my current code:
<!doctype html><html lang="en" dir="ltr">
<head>
<meta http-equiv="content-type" charset="utf-8">
<title>Twinkies maker threatens to liquidate</title>
<meta content="Hostess Brands says if its striking bakers don't return to work today, it will liquidate the entire company." name="description">
<link rel="image_src" href="http://www.mysite.com/i/logo.jpg">
<style type="text/css">
@media only screen and (max-width:480px){
*[class~=stackonmobile]{width:100%!important;margin:0;display:block!important;clear:both!important}
*[class~=hideonmobile]{display:none!important}
}
</style>
</head>
<body style="font-family:arial,sans-serif;color:#222;text-align:left;background-color:#fff;background:url(http://www.mysite.com/i/background.jpg) repeat-x;margin:0;padding:0"><center>
<table cellspacing="0" cellpadding="0" border="0" style="border-spacing:0;max-width:640px;text-align:left;margin:auto">
<tr>
<!-- following td is included for message preview only -->
<td style="height:0;font-size:0;color:#ffffff;text-indent:-9999px">Hostess Brands says if its striking bakers don't return to work today, it will liquidate the entire company.</td>
<!-- // -->
</tr>
<tr><td align="left" style="float:left;text-align:left;vertical-align:middle"><a href="http://www.mysite.com/" style="color:#b12124;text-decoration:none"><img src="http://mysite.com/i/header-logo-on-top-of-background-image.png" width="100" height="41" border="0"></a></td><td align="right" style="height:16px;float:right;text-align:right;font-size:16px;line-height:16px;font-family:georgia,serif;color:#ffffff;font-style:italic;padding-top:10px">January 27, 2013</td></tr>
<tr><td colspan="2" style="width:620px;padding-left:10px;padding-right:10px"><div style="height:5px;clear:both;margin-top:0;margin-bottom:14px;background:transparent url(http://www.mysite.com/i/1px-by-1px-white-spacer.jpg) repeat"></div></td></tr>
<tr><td colspan="2" style="padding-left:20px;padding-right:20px">
...
See anything here that you would do differently?
Gmail doesn't clip most CSS, it has very comparable support with other email clients. The issue is that it strips out the head and style tags. For this reason media queries (responsive email designs) don't work in Gmail, as you can't inline media queries.
I haven't debugged your code, but it looks good for a responsive technique. Noticed you have a transparent background set, that wont work consistently, use .png's for all transparency. If you want a background image, use this. Also, I wouldn't use div's inside of a table unless you are trying to float something.
An alternate method that will work in Gmail is a fluid template with a max-width. For desktop it will look like 600px (or whatever you set it), and anything less it will be 100% screen width across all major email clients.
Best reference for CSS support in email clients: http://www.campaignmonitor.com/css/