Time passes and my old post with newsletter coding tips is already seems to be a bit outdated. I want to write down my new tips based on latest coding experience and tests.
First of all new recommended DTD for mails is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
This is due to some mail clients automatic conversion to that DTD upon receival of mails.
Viewport property should be like that to avoid resizing problems on mobile clients:
<meta name="viewport" content= "width=device-width, initial-scale=1.0" />
This meta tag fixed me a very strange bug in latest Windows 8 mobile phone , like Nokia Lumia 1020. Apparently its mail client switches to some older mode without this tag:
<meta http-equiv="x-ua-compatible" content="IE=edge" />
So now most of mail clients can work with CSS styles, and media queries put in HTML’s head. First we need to reset some styles implied on different mail clients:
/* Client-specific Styles */
#outlook a {
padding:0;
}
body {
width:100% !important;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
margin:0;
padding:0;
}
.ExternalClass {
width:100%;
}
.ExternalClass, .ExternalClass p, .ExternalClass span,
.ExternalClass font, .ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
#backgroundTable {
margin:0;
padding:0;
width:100% !important;
line-height: 100% !important;
}
p {
margin: 1em 0;
line-height:normal;
}
/* End reset */Many mail clients would now support google fonts import to CSS, so preferred way to add it into your style tag is:
@import url(http://fonts.googleapis.com/css? family=Source+Sans+Pro:400,300,600);
HTML of a newsletter should have a containing table
<table id="backgroundTable" width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse; border-spacing:0; width:100%; max-width:100%;">
CSS of that ID:
#backgroundTable {
margin:0;
padding:0;
width:100% !important;
line-height: 100% !important;
}Microsoft Bugs
And here some conditional tags for mail clients, to fix different bugs in newsletter mail’s code:
<!-- Internet Explorer fix -->
<!--[if IE]>
<style type="text/css">
@media only screen and (max-width: 480px) {
td[class=container] {padding:0px !important;}
table[class=row] {width:450px !important;}
}
@media only screen and (max-width: 360px) {
td[class=container] {padding:0px !important;}
table[class=row] {width:320px !important;}
}
</style>
<![endif]-->
<!-- / Internet Explorer fix -->
<!-- MOBILE MAIL CLIENTS -->
<!--[if IEMobile]>
<style type="text/css">
td[class=container] {padding:0px !important;}
table[class=row] {width:450px !important;}
</style>
<![endif]-->
<!-- OUTLOOK -->
<!--[if gte mso 9]>
<style type="text/css">
/* from Outlook 2000 */
html {width: 100%;}
body {width:100% !important;}
.ReadMsgBody, .ExternalClass {width:100%; display:block !important;}
table, td {border-collapse: collapse; mso-table-lspace:0pt !important; mso-table-rspace:0pt !important;}
p {margin-top:8px !important;}
p.MsoNormal {margin: 0px}
ul {margin: 0 0 0 24px !important;} /* helps to display bullets on UL */
</style>
<![endif]-->Outlook
Outlook’s conditional tag can be used to add some vertical spacings, because vertical spacings are removed by old Outlook.
<!--[if gte mso 9]><br class="addbr" /><![endif]-->
Outlook first table row with margin from table.
Avoid adding margins to tables, Outlook will add them to a first table row.
Mail Media Queries
Media queries I’d recommend to use are as follow, but of cause there are could be more:
@media only screen and (max-width: 640px) {}
@media only screen and (max-width: 520px) {}
@media only screen and (max-width: 340px) {}I’ve found that using 340px instead of minimal 320px helps when testing the mail in different testing environments.
Other things, like coding in tables and adding inline styles everywhere are still valid. Newsletter must look good without any additional CSS in the head, because some clients will remove the head completely. But many mobile clients and web based services will use your CSS somehow.
Also remember to provide some nice placeholders, because many times images are not downloaded right away by mail clients. So adding backgrounds, fonts, line-height and colors to holding elements of image would help a lot. Also remember to add image sizes in HTML, otherwise when images are not loaded by default their placeholders can became very wide etc. And remember about alt tags – they will show your content when images are not loaded.
<td bgcolor="#e97a42" class="headimg" style="font-weight:bold; font-size:32px; text-align:center; color:#ffffff; line-height:75px; background-color:#000000;"> <img src="images/congrats.jpg" alt="Congrats" width="600" height="175" style="display:block;" /></td>
Later you will override image width in CSS media queries making images narrower:
img {
outline:none;
text-decoration:none;
-ms-interpolation-mode: bicubic;
max-width:100%;
height:auto !important;
line-height:100%;
}
a img {
border:none;
}-ms-interpolation-mode: bicubic; helps to change image size in a better way for Explorer based clients.
And finally a great free tool called PutsMail to send many email tests to different clients. Also MailChimp could be used, but it limits testing by 12 emails per campaign and by certain amount of emails send in 24 hours.
There is also a nice HTML email boilerplate template to start newsletter coding available.
very helpful for mobile mail clients, thanks!