{"id":897,"date":"2010-01-27T11:30:51","date_gmt":"2010-01-27T15:30:51","guid":{"rendered":"http:\/\/webvideouniversity.com\/blog\/?p=897"},"modified":"2010-01-27T11:30:51","modified_gmt":"2010-01-27T15:30:51","slug":"html-email-101","status":"publish","type":"post","link":"https:\/\/webvideouniversity.com\/blog\/2010\/01\/27\/html-email-101\/","title":{"rendered":"HTML Email 101"},"content":{"rendered":"<p>Last month I started sending HTML emails to my mailing lists.\u00a0 HTML emails are the emails you receive with lots of nice graphics, as opposed to emails containing plain text.\u00a0 And I&#8217;ve received a number of questions on how to create attractive looking emails like these.<\/p>\n<p>So here&#8217;s what you need to know.<\/p>\n<p>First, an HTML email is basically an HTML web page.\u00a0 That means you create an HTML email the same way you create a web page.\u00a0 So if you can create web pages, you can create HTML emails.\u00a0 But there are some differences.<\/p>\n<p>First, when creating an HTML email, you can&#8217;t use CSS.\u00a0 You have to use old-fashioned tables (technically you can use <em>inline CSS<\/em>, but it&#8217;s really best to avoid it).\u00a0 And second, you have to consider the width of your email.\u00a0 When creating a web page, that page might have a width of 900 pixels.\u00a0 That&#8217;s going to be too wide for an email, where the width is usually in the 500 pixel range.<\/p>\n<p>Follow those two things and you&#8217;re almost all of the way there.<\/p>\n<p>I say <em>almost<\/em> because there is still one huge issue that you need to deal with.\u00a0 And that&#8217;s <strong>email clients<\/strong>.\u00a0 You see, web pages are viewed in browsers which adhere to HTML standards (meaning a web page looks the same in Firefox, IE, Chrome, etc.)&#8230;but HTML emails are viewed in <strong>email clients<\/strong> which do not follow HTML standards.<\/p>\n<p>Every email client renders HTML differently (there are dozens of them too, by the way).\u00a0 That means your HTML email might look fine to someone using Outlook, but looks like a mess to someone using Gmail.<\/p>\n<p>To make sure your HTML emails look the same in all the major email clients, you can use a service like <a href=\"http:\/\/www.emailonacid.com\" target=\"_blank\"><strong>EmailOnAcid<\/strong><\/a>.\u00a0 It&#8217;s not free, but it will display your HTML email in 15 different email clients.\u00a0 If your email looks fine in some but breaks in others, you then need to go back to your email template and tweak things&#8230;then run an EmailOnAcid test again.<\/p>\n<p>What if you don&#8217;t know the first thing about coding HTML?\u00a0 In that case, there are plenty of HTML email templates available on the web.\u00a0 For example, from <a href=\"http:\/\/themeforest.net\/category\/email-templates\" target=\"_blank\"><strong>ThemeForest<\/strong><\/a>.<\/p>\n<p>Just be aware that rarely do the developers of these templates test them in different email clients, so you&#8217;ll still want to run any template you choose through EmailOnAcid.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Last month I started sending HTML emails to my mailing lists.\u00a0 HTML emails are the emails you receive with lots of nice graphics, as opposed to emails containing plain text.\u00a0 And I&#8217;ve received a number of questions on how to create attractive looking emails like these. So here&#8217;s what you need to know. First, an [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0},"categories":[19],"tags":[428,427,430,429],"_links":{"self":[{"href":"https:\/\/webvideouniversity.com\/blog\/wp-json\/wp\/v2\/posts\/897"}],"collection":[{"href":"https:\/\/webvideouniversity.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webvideouniversity.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webvideouniversity.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webvideouniversity.com\/blog\/wp-json\/wp\/v2\/comments?post=897"}],"version-history":[{"count":5,"href":"https:\/\/webvideouniversity.com\/blog\/wp-json\/wp\/v2\/posts\/897\/revisions"}],"predecessor-version":[{"id":903,"href":"https:\/\/webvideouniversity.com\/blog\/wp-json\/wp\/v2\/posts\/897\/revisions\/903"}],"wp:attachment":[{"href":"https:\/\/webvideouniversity.com\/blog\/wp-json\/wp\/v2\/media?parent=897"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webvideouniversity.com\/blog\/wp-json\/wp\/v2\/categories?post=897"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webvideouniversity.com\/blog\/wp-json\/wp\/v2\/tags?post=897"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}