If you\u2019re one of those who\u2019ve had the harrowing experience of coding an HTML E-newsletter, and spent hours trying to figure out what you\u2019ve done wrong that\u2019s causing the design to render differently on different email clients, this blog post is an effort to simplify things a bit.<\/p>\n
Before we go any further, it is most important to understand that coding for HTML newsletters<\/a> is vastly different from coding an HTML web page.\u00a0 Browser compatibility, coupled with email clients\u2019 compatibility, creates a unique challenge to programmers coding for HTML newsletters.\u00a0 The reason for this is that various email clients have different levels of CSS Support.<\/p>\n Pixel perfect or not, email newsletters are an important ingredient in the digital marketing strategy<\/em><\/strong> that speaks directly to the target audience. They are here to stay and so, while email clients may take years adapting themselves to the changing html and CSS standards, it is us, programmers who will have to pull up our socks and find innovative solutions to design outstanding email newsletters that send the message across effectively and beautifully.<\/p>\n Email services like Gmail, Lotus Notes & Outlook 2007 are most restrictive and therefore it is imperative that we code for these clients first. If the newsletter renders consistently on each of these platforms, there\u2019s a high likelihood that it\u2019ll work on most other email clients too.<\/p>\n Here are some of my top tips that I\u2019ve picked up \u2026 some through my experience, some from websites like Campaign Monitor and still others from forums and other blog posts:<\/p>\n HTML Coding<\/strong><\/p>\n STYLES<\/strong><\/p>\n IMAGES<\/strong><\/p>\n Email Services & their quirks<\/strong><\/p>\n <!DOCTYPE\u00a0html PUBLIC “-\/\/W3C\/\/DTD\u00a0XHTML\u00a01.0\u00a0Transitional\/\/EN”\u00a0“http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd”> <body\u00a0style=”margin:0;\u00a0padding:0;\u00a0width:100%\u00a0!important;”><\/em><\/p>\n <\/em><\/p>\n <table\u00a0width=”600″\u00a0cellpadding=”0″\u00a0cellspacing=”0″\u00a0border=”0″> The only way to get around this is to style the links to colors that blend with your design. The class applied to these links is: \u2018yshortcuts\u2019. So, style these in the <head> section of your document like below:<\/p>\n <style> GENERAL GUIDELINES:<\/strong><\/p>\n While pixel perfect HTML newsletters that render exactly the same on every email client are a myth; given the restrictive email client support of the new HTML & CSS Standards<\/strong>, most of the above steps result in some form of consistency in terms of display on different platforms and client services.\u00a0 It is always worthwhile however, to test the newsletter on different browsers to check for browser compatibility<\/a> and then test them on various platforms and various email services.<\/p>\n Similarly, it is worthwhile to note that while fancy HTML newsletters look great, it isn\u2019t worth the effort and resources spent, if it looks like that only to 10% of your customer base. A simple readable HTML that renders well and sends your message across to your target audience with a clear message and call to action is what makes the impact!<\/p>\n","protected":false},"excerpt":{"rendered":" If you\u2019re one of those who\u2019ve had the harrowing experience of coding an HTML E-newsletter, and spent hours trying to figure out what you\u2019ve done wrong that\u2019s causing the design to render differently on different …<\/a><\/p>\n","protected":false},"author":22,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[20],"tags":[72,97,98],"class_list":["post-423","post","type-post","status-publish","format-standard","hentry","category-digital-marketing","tag-digital-marketing-strategy","tag-html-e-newsletter","tag-html-newsletters"],"_links":{"self":[{"href":"https:\/\/www.ethinos.com\/blog\/wp-json\/wp\/v2\/posts\/423","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ethinos.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ethinos.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ethinos.com\/blog\/wp-json\/wp\/v2\/users\/22"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ethinos.com\/blog\/wp-json\/wp\/v2\/comments?post=423"}],"version-history":[{"count":6,"href":"https:\/\/www.ethinos.com\/blog\/wp-json\/wp\/v2\/posts\/423\/revisions"}],"predecessor-version":[{"id":426,"href":"https:\/\/www.ethinos.com\/blog\/wp-json\/wp\/v2\/posts\/423\/revisions\/426"}],"wp:attachment":[{"href":"https:\/\/www.ethinos.com\/blog\/wp-json\/wp\/v2\/media?parent=423"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ethinos.com\/blog\/wp-json\/wp\/v2\/categories?post=423"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ethinos.com\/blog\/wp-json\/wp\/v2\/tags?post=423"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n
\n
\n
\n
\n .ReadMsgBody{ width: 100%;}
\n.ExternalClass\u00a0 {width: 100%;}<\/em><\/li>\n
\n<html\u00a0xmlns:v=”urn:schemas-microsoft-com:vml”>
\n<head><\/em><\/p>\n
\n<tr>
\n<!–\u00a0Backup\u00a0background\u00a0color\u00a0is\u00a0#DDDDDD\u00a0–>
\n<td\u00a0bgcolor=”#DDDDDD”\u00a0style=”background-image:\u00a0url(\u2018image path\u2019);”\u00a0background=”image path”\u00a0width=”600″\u00a0height=”120″\u00a0valign=”top”>
\n<!–[if\u00a0gte\u00a0mso\u00a09]>
\n<v:rect\u00a0style=”width:600px;height:120px;”\u00a0strokecolor=”none”>
\n<v:fill\u00a0type=”tile”\u00a0color=”#DDDDDD”\u00a0src=”image path”\u00a0\/><\/v:fill>
\n<\/v:rect>
\n<v:shape\u00a0id=”theText”\u00a0style=”position:absolute;width:600px;height:120px;”>
\n<![endif]–>
\n<p>If\u00a0you\u00a0can\u00a0see\u00a0this\u00a0over\u00a0the\u00a0image,\u00a0background\u00a0images\u00a0are\u00a0successful.<\/p>
\n<!–[if\u00a0gte\u00a0mso\u00a09]>
\n<\/v:shape>
\n<![endif]–><\/td>
\n<\/tr>
\n<\/table><\/em><\/p>\n\n
\n.yshortcuts { color: #CCCCCC } \/* Body text color *\/
\n.yshortcuts a span { color: #00FF00 } \/* Link text color *\/
\n<\/style><\/em><\/p>\n\n