{"id":13482,"date":"2012-05-01T21:01:36","date_gmt":"2012-05-01T13:01:36","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=13482"},"modified":"2025-04-04T00:45:25","modified_gmt":"2025-04-03T16:45:25","slug":"design-perfect-newsletter","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/design-perfect-newsletter\/","title":{"rendered":"9 Tricks to Design The Perfect HTML Newsletter"},"content":{"rendered":"<p>Businesses often have product updates, or information on upcoming events that they\u2019d like to share with their clients and one of the best ways to do that is through a nicely designed email <a href=\"https:\/\/www.hongkiat.com\/blog\/tag\/newsletters\/\">newsletter<\/a>.<\/p>\n<p>We have compiled some fantastic <a href=\"https:\/\/www.hongkiat.com\/blog\/tag\/newsletter-tools\/\">tips and tools<\/a> to help you design high-quality HTML newsletters. Even if you\u2019re a newbie to the subject you\u2019ll surely find some invaluable information to get you started in the e-mail marketing process.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/open-source-email-templates\/\" class=\"ref-block__link\" title=\"Read More: 25 Open-source Email Template Websites\" rel=\"bookmark\"><span class=\"screen-reader-text\">25 Open-source Email Template Websites<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/open-source-email-templates.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-24915 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/open-source-email-templates.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">25 Open-source Email Template Websites<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tCoding for a newsletter or email design manually is not an easy task. To simplify this process, there...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>Goals of a Newsletter<\/h2>\n<p>Before getting into the design aspects we should clarify your purpose for building a newsletter. Depending on the type of website you run, the information contained in your newsletter may vary dramatically from others, but the core purpose of a newsletter <strong>is to deliver convenient updates right to your reader\u2019s Inbox<\/strong>.<\/p>\n<p>Heavy Internet users are likely to check their e-mail more than twice a day. Even those who are constantly busy will take the time to go through their messages at least once a day.<\/p>\n<p>This is the perfect time to <strong>capture attention<\/strong> even without requiring visits to your site. Even if nobody is clicking through your links, the information is <strong>still received<\/strong>, which is great for building a brand name.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/design-perfect-newsletter\/email-newsletter.jpg?2\" alt=\"email newsletter\" width=\"800\" height=\"643\"><\/figure>\n<p>Consider some of the topics you would need to offer in your design. Are you including links to signup for your service; possibly blog links, or most recently published articles on your site?<\/p>\n<p>The layout of your newsletter will reflect how you wish for your readers to respond, but ultimately you are looking to drum up interest and pass around some interesting tidbits of information to the masses.<\/p>\n<h2>1. Utilize Tables in your Layouts<\/h2>\n<p>This may seem a bit contradictory towards today\u2019s modern web standards, but e-mails are still archaic in their rendering engines, thus you have to build towards older models.<\/p>\n<p>Unfortunately tables are <strong>the easiest way<\/strong> to get everything working properly among the various e-mail clients. Depending on your knowledge of building table-based layouts, this might actually come as good news!<\/p>\n<p>You may also wonder why <code>div<\/code> and other block elements are not such a good idea. Most e-mail clients are <strong>built to strip away any extraneous CSS<\/strong> content. This means you won\u2019t be able to use much of anything except for <strong>inline CSS<\/strong> (and even full support is shoddy).<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/design-perfect-newsletter\/newsletter.jpg?2\" alt=\"newsletter\" width=\"800\" height=\"713\"><\/figure>\n<p>Clients such as Microsoft Outlook 2007 and Google\u2019s Gmail have very poor support for floated elements and direct positioning.<\/p>\n<p>The best solution would be to <strong>nest multiple tables inside each other<\/strong>. Padding and margins are not set to a particular scale between many e-mail clients. This is a reason to stick to using <code>width=\"value\"<\/code> on all of your table cell elements.<\/p>\n<p>These will always display the same width no matter which e-mail client your readers are using, so it\u2019s a lot <strong>safer<\/strong> and <strong>more consistent<\/strong> to set padding and margins using empty table cells.<\/p>\n<h2>2. Fixed-width positioning<\/h2>\n<p>You have a few options when building the drafts of your newsletter layout, however the best option to follow is <strong>to set fixed widths for your containing table<\/strong>.<\/p>\n<p>There are many varying monitor resolutions \u2014 you won\u2019t be able to please everybody. If you don\u2019t have particular elements with static widths, you could always use <code>width=\"100%\"<\/code> on your containing table. This will allow your content to fill the entire width of all e-mail clients.<\/p>\n<p>However, for many this method is a little too lax. <strong>Constructive newsletters<\/strong> will require a fixed width in most cases, especially if you\u2019ll be using banners and images set to a particular size.<\/p>\n<p>I recommend working with <strong>500px \u2013 600px maximum document width<\/strong>. The horizontal screen size of the iPhone and some BlackBerry models are limited to 320px, so even at 500px your e-mail template will be <strong>scaled down to fit properly<\/strong>.<\/p>\n<p>Considering that many mobile users choose to view e-mail without HTML anyways, this shouldn\u2019t be a huge problem. Users of desktop and webmail clients will likely experience a similar setup regardless of the Operating System they use. When in doubt <strong>create a few template designs<\/strong> and <strong>choose the ones you like best<\/strong>!<\/p>\n<h2>3. Pixel units<\/h2>\n<p>Unless you\u2019ll be using fluid elements in your newsletter it\u2019s likely that you\u2019ll need to size a few things. Try to keep it in <strong>pixels (px)<\/strong> rather than in another type of unit.<\/p>\n<p>Percentages can easily get mixed up with the many webmail clients and software windows. With fewer page elements, fluid layouts can come out unscathed, albeit with a few bugs.<\/p>\n<p>But pixels are always a sure thing. Working within the 600px max width limit, you can actually fit a lot of content inside. Exposure is easier if you split your layouts into two or three columns, and always write your sizes in pixels.<\/p>\n<p>The only exception may be to <strong>font sizes<\/strong> where <strong>ems<\/strong> can support your readers better, but <code>em<\/code> sizing will differ in a similar way percentages would \u2013 so <strong>for simplicity\u2019s sake, stick to pixel-based alignments<\/strong>.<\/p>\n<h2>4. The possibilities with CSS<\/h2>\n<p>It may seem like e-mail design is out to destroy the use of CSS styles. Although there are a lot of unsupported features, CSS is still perfectly acceptable in many cases.<\/p>\n<p>Campaign Monitor has a beautiful <a href=\"https:\/\/www.campaignmonitor.com\/css\/\">table of supported CSS properties<\/a> listed by e-mail client. All will support the basics like <code>font-family<\/code> and <code>font-style<\/code>, so you can skip over the <code>&lt;font&gt;<\/code> tag if you wish.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/design-perfect-newsletter\/possibilities-with-css.jpg?2\" width=\"800\" height=\"347\" alt=\"possibilities with css\"><\/figure>\n<p>Be cautious about your font styles as to not push the boundaries too far. If you do feel uncomfortable with inline styles, it\u2019s always possible to use the HTML font tag even though it\u2019s been deprecated.<\/p>\n<p>If you\u2019re a CSS designer, you don\u2019t need to quit the system, but any shorthand CSS coding may result in buggy designs. As an example the <code>font: 12px\/14px Arial,sans-serif;<\/code> shorthand can help save a lot of space, but it isn\u2019t fully accepted for e-mail design, even when it\u2019s used with inline styles.<\/p>\n<p>Even your color choices <strong>should be written out longhand<\/strong>. Hex colors such as <code>#ccc<\/code> or <code>#e3f<\/code> must be written in full as <code>#cccccc<\/code> or <code>#ee33ff<\/code>, respectively. If you can build what you need without CSS I would recommend that path, but don\u2019t completely shy away from CSS in e-mail designs because contrary to popular belief it is supported in most cases.<\/p>\n<h2>5. Anchor links best practices<\/h2>\n<p>You\u2019ll surely want to include some links into your newsletter. These could be outbound links to other pages around the web, or maybe links leading to the most popular pages on your website.<\/p>\n<p>Additionally most footers will contain an unsubscribe link for your readers to opt out of the e-mail process, but how should you handle all of these links in your design?<\/p>\n<p>Well it should be noted first that e-mail clients are very finicky with their designs. Many will choose to overwrite your link styles, even with inline CSS. A neat trick is to <strong>include both inline color and an additional span tag within the anchor element<\/strong>.<\/p>\n<p>If the color and styling of your links are important to the overall design you\u2019ll want to take the extra precaution. I\u2019ve added a small code example below:<\/p>\n<pre>&lt;a href=\"https:\/\/www.google.com\" style=\"color:#3147ca;\"&gt;&lt;span style=\"color:#3147ca;\"&gt;some link text&lt;\/span&gt;&lt;\/a&gt;\r\n<\/pre>\n<p>Hover effects are <strong>not supported in Outlook 2007\/2010, Gmail, iOS or Android<\/strong>. You may still want to include the <code>a:hover<\/code> style for all supporting clients: Outlook 2000\/2003, Hotmail, Apple Mail, and Yahoo! mail.<\/p>\n<p>However, personally I don\u2019t see much benefit in the partial user experience, since the anchor selectors aren\u2019t heavily supported I recommend <strong>just offering 2-3 link colors<\/strong> to use throughout your design.<\/p>\n<p>As a presumption users will also expect your links to open in a new tab or window. Ideally the <code>target=\"_blank\"<\/code> attribute should be enough for all browsers to recognize this functionality, and the inclusion of this attribute on your anchor links shouldn\u2019t negatively effect e-mail software such as Lotus Notes, or Outlook either.<\/p>\n<h2>6. Test in all major clients<\/h2>\n<p>A recent study of <a href=\"https:\/\/www.campaignmonitor.com\/resources\/guides\/most-popular-email-clients\/\">most popular e-mail clients<\/a> (done by Campaign Monitor) shows ten of the most popular e-mail clients in the past year. It may seem a bit tedious but designers <strong>should get into the habit of checking their newsletters on all major e-mail clients<\/strong>, at the very least on some of the more common clients such as Gmail, Hotmail or Yahoo! Mail.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/design-perfect-newsletter\/testing-in-major-browsers.jpg?2\" width=\"800\" height=\"399\" alt=\"testing in major browsers\"><\/figure>\n<p>This doesn\u2019t include webmail solely, but also operating software on both Mac OS X and Windows. Also according to their diagram <strong>iOS Mail<\/strong> and <strong>Android<\/strong> have both rocketed into the top 10 list over the past few years.<\/p>\n<p>In fact iPhone, iPod Touch, and iPad Mail ranks the #2 most popular right under Outlook! Unfortunately there isn\u2019t a way to test these without owning one of the devices \u2014 so you\u2019ll have to settle with other options.<\/p>\n<p>One bug with the mobile support comes in many iPhone and Android models. Mobile e-mail rendering will often <strong>resize the text inside your template<\/strong>. This may not affect your design very much, but it can be annoying to some readers. Using the CSS <code>-webkit-text-size-adjust: none;<\/code>, will <strong>ensure an even default text size throughout all parsing engines<\/strong> without needing to test it.<\/p>\n<p>If you know any friends or colleagues who use alternative software, you may wish to <strong>ask for their help on testing the newsletter<\/strong>. You can either <strong>send them a copy of the e-mail<\/strong> to check on their device or <strong>borrow the device<\/strong> to actively clear out coding bugs.<\/p>\n<p>Luckily Outlook does offer a Mac install version so you won\u2019t need to track down a Windows user for those optimizations, but when it comes to Lotus Notes or Windows Mail, you may be out of luck.<\/p>\n<h2>7. Always offer web-based views<\/h2>\n<p>Readers won\u2019t always be able (or be willing) to view your e-mail natively. <strong>Offering another version somewhere on the Web<\/strong> will give a sense of ease and compatibility. This process can\u2019t be completely automated unless you\u2019re looking to include a <strong>plain text<\/strong> version.<\/p>\n<p>This way, you would <strong>strip all HTML tags<\/strong> from the newsletter layout. You wouldn\u2019t be able to include links or styles for anything. All content would simply <strong>be laid out as a plain text file<\/strong> for readers without the rendering capabilities.<\/p>\n<p>This is certainly a good alternative, but when you offer a full Web version of the same newsletter it <strong>takes away the damage done by any rendering bug<\/strong>. Most readers will be running an up-to-date Web browser which you can style and build your newsletter on and to perfection.<\/p>\n<p>How you set up the page is <strong>entirely your choice<\/strong>. Some websites will <strong>dedicate an entire blog post to duplicating the e-mail\u2019s content<\/strong>, maybe with some <strong>additional information<\/strong>.<\/p>\n<p>Others will <strong>create a separate page off the main website without any direct links in the navigation<\/strong>. This method can be beneficial since readers won\u2019t be distracted by your main website template or sidebar content.<\/p>\n<h2>8. Adding image content<\/h2>\n<p>Images are another reason to offer your readers a web-based solution. By default, e-mail clients <strong>are set to strip images out of the content<\/strong>. If your address is added to a safe list, all images will be displayed by default, but the user <strong>has to accept this setup<\/strong> so it\u2019s certainly not a guarantee.<\/p>\n<p>Just <strong>make sure images aren\u2019t required as part of the main content<\/strong>, but included as an extra topping for page aesthetics.<\/p>\n<p>Once you get to exporting graphics there are a few tips to building images specifically for e-mail. You\u2019ll want to always <strong>set both width and height attributes on your <code>img<\/code> tags<\/strong>.<\/p>\n<p>Without these specifications in order, <strong>some clients will distort the image content<\/strong>. An <code>alt<\/code> tag will also prove useful, so visitors will know what the image content contains before it\u2019s loaded.<\/p>\n<p>As mentioned before, positioning the images in your e-mail can get tricky. <strong>Avoid using floats<\/strong> at all costs! The image <code>align=\"left\"<\/code> attribute will work much better, or alternatively <strong>map out exact table cells<\/strong> to fit your images along the top, left, or right side of your newsletter.<\/p>\n<p>You won\u2019t be able to get a perfect match-up with so many clients out there (especially mobile clients), but <strong>optimize your images<\/strong> and <strong>keep file sizes small for best results<\/strong>.<\/p>\n<p>As for image storage, it\u2019s recommended that you <strong>keep all files in your own Web server<\/strong>. This is the better option instead of using another image host, or by uploading the files to an online newsletter service.<\/p>\n<p>Additionally you should <strong>separate the content for your newsletters away from the rest of your images in a folder structure<\/strong> like so <em>\/img\/email<\/em> or <em>\/img\/email\/2011<\/em>.<\/p>\n<h2>9. Avoid the spam folder!<\/h2>\n<p>This can be difficult to hear, but <strong>not all e-mail clients are friendly towards newsletters<\/strong>. There are billions of e-mails sent every day and the majority contain spam or malicious content, thus having these security measures built into the Inbox is clearly for safety precautions.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/design-perfect-newsletter\/spam-folder.jpg?2\" alt=\"spam folder\" width=\"800\" height=\"640\"><\/figure>\n<p>However, when it comes to Internet marketing, you can easily be discouraged to see your latest newsletter end up with the junk. To reduce the chances of this happening you should <strong>clean up your design for simplicity<\/strong>. <strong>Don\u2019t make annoying images<\/strong> or <strong>blow up your title text with hundreds of keywords<\/strong>.<\/p>\n<p>Also try to <strong>keep your content brief and on-topic<\/strong>. You don\u2019t need to include full content for all of your articles or pages. Try adding a sentence or two with an alternate link out to your website in place of a long listing. The <strong>more brief your e-mail looks, the more likely it\u2019ll pass spam inspection<\/strong>.<\/p>","protected":false},"excerpt":{"rendered":"<p>Businesses often have product updates, or information on upcoming events that they\u2019d like to share with their clients and one of the best ways to do that is through a nicely designed email newsletter. We have compiled some fantastic tips and tools to help you design high-quality HTML newsletters. Even if you\u2019re a newbie to&hellip;<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[352],"tags":[3495,3648,740,1953],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>9 Tricks to Design The Perfect HTML Newsletter - Hongkiat<\/title>\n<meta name=\"description\" content=\"Businesses often have product updates, or information on upcoming events that they&#039;d like to share with their clients and one of the best ways to do that\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/design-perfect-newsletter\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"9 Tricks to Design The Perfect HTML Newsletter\" \/>\n<meta property=\"og:description\" content=\"Businesses often have product updates, or information on upcoming events that they&#039;d like to share with their clients and one of the best ways to do that\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/design-perfect-newsletter\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2012-05-01T13:01:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T16:45:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/design-perfect-newsletter\/email-newsletter.jpg?2\" \/>\n<meta name=\"author\" content=\"Jake Rocheleau\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jake Rocheleau\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/design-perfect-newsletter\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/design-perfect-newsletter\\\/\"},\"author\":{\"name\":\"Jake Rocheleau\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\"},\"headline\":\"9 Tricks to Design The Perfect HTML Newsletter\",\"datePublished\":\"2012-05-01T13:01:36+00:00\",\"dateModified\":\"2025-04-03T16:45:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/design-perfect-newsletter\\\/\"},\"wordCount\":2204,\"commentCount\":36,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/design-perfect-newsletter\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/design-perfect-newsletter\\\/email-newsletter.jpg?2\",\"keywords\":[\"Newsletter Tips and Tools\",\"Newsletters\",\"Online Marketing\",\"User Engagement\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/design-perfect-newsletter\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/design-perfect-newsletter\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/design-perfect-newsletter\\\/\",\"name\":\"9 Tricks to Design The Perfect HTML Newsletter - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/design-perfect-newsletter\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/design-perfect-newsletter\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/design-perfect-newsletter\\\/email-newsletter.jpg?2\",\"datePublished\":\"2012-05-01T13:01:36+00:00\",\"dateModified\":\"2025-04-03T16:45:25+00:00\",\"description\":\"Businesses often have product updates, or information on upcoming events that they'd like to share with their clients and one of the best ways to do that\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/design-perfect-newsletter\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/design-perfect-newsletter\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/design-perfect-newsletter\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/design-perfect-newsletter\\\/email-newsletter.jpg?2\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/design-perfect-newsletter\\\/email-newsletter.jpg?2\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/design-perfect-newsletter\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"9 Tricks to Design The Perfect HTML Newsletter\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\",\"name\":\"Jake Rocheleau\",\"description\":\"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers\",\"sameAs\":[\"https:\\\/\\\/www.hongkiat.com\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/jake\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"9 Tricks to Design The Perfect HTML Newsletter - Hongkiat","description":"Businesses often have product updates, or information on upcoming events that they'd like to share with their clients and one of the best ways to do that","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/design-perfect-newsletter\/","og_locale":"en_US","og_type":"article","og_title":"9 Tricks to Design The Perfect HTML Newsletter","og_description":"Businesses often have product updates, or information on upcoming events that they'd like to share with their clients and one of the best ways to do that","og_url":"https:\/\/www.hongkiat.com\/blog\/design-perfect-newsletter\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2012-05-01T13:01:36+00:00","article_modified_time":"2025-04-03T16:45:25+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/design-perfect-newsletter\/email-newsletter.jpg?2","type":"","width":"","height":""}],"author":"Jake Rocheleau","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Jake Rocheleau","Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/design-perfect-newsletter\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/design-perfect-newsletter\/"},"author":{"name":"Jake Rocheleau","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a"},"headline":"9 Tricks to Design The Perfect HTML Newsletter","datePublished":"2012-05-01T13:01:36+00:00","dateModified":"2025-04-03T16:45:25+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/design-perfect-newsletter\/"},"wordCount":2204,"commentCount":36,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/design-perfect-newsletter\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/design-perfect-newsletter\/email-newsletter.jpg?2","keywords":["Newsletter Tips and Tools","Newsletters","Online Marketing","User Engagement"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/design-perfect-newsletter\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/design-perfect-newsletter\/","url":"https:\/\/www.hongkiat.com\/blog\/design-perfect-newsletter\/","name":"9 Tricks to Design The Perfect HTML Newsletter - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/design-perfect-newsletter\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/design-perfect-newsletter\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/design-perfect-newsletter\/email-newsletter.jpg?2","datePublished":"2012-05-01T13:01:36+00:00","dateModified":"2025-04-03T16:45:25+00:00","description":"Businesses often have product updates, or information on upcoming events that they'd like to share with their clients and one of the best ways to do that","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/design-perfect-newsletter\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/design-perfect-newsletter\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/design-perfect-newsletter\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/design-perfect-newsletter\/email-newsletter.jpg?2","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/design-perfect-newsletter\/email-newsletter.jpg?2"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/design-perfect-newsletter\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"9 Tricks to Design The Perfect HTML Newsletter"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a","name":"Jake Rocheleau","description":"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers","sameAs":["https:\/\/www.hongkiat.com"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/jake\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-3vs","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/13482","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=13482"}],"version-history":[{"count":5,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/13482\/revisions"}],"predecessor-version":[{"id":73517,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/13482\/revisions\/73517"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=13482"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=13482"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=13482"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=13482"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}