{"id":554,"date":"2009-02-25T22:46:59","date_gmt":"2009-02-25T22:46:59","guid":{"rendered":"http:\/\/bme2.flywheelsites.com\/blog\/html-email-tips-for-web-designers\/"},"modified":"2020-01-20T15:48:39","modified_gmt":"2020-01-20T15:48:39","slug":"html-email-tips-for-web-designers","status":"publish","type":"post","link":"https:\/\/www.benchmarkemail.com\/in\/html-email-tips-for-web-designers\/","title":{"rendered":"HTML Email Tips for Web Designers"},"content":{"rendered":"<p><span style=\"color: #cc0000;\">Note: This article is valid only for people using their <b>own custom HTML<\/b>. If you use our pre-designed email templates you don&#8217;t have to worry about this. <\/span><\/p>\n<p>An HTML email communication might look good on your computer but fail completely on the contact&#8217;s because it depends on graphics, fonts, and CSS files which only reside on your system. When you are creating your email in outside HTML editors like Microsoft Publisher, Dreamweaver, or FrontPage, remember that you are designing for email and not a website. If you design the email as if it were a web page, it may not display correctly in your contacts&#8217; different email and web mail clients.<\/p>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li><b>Do not reference external CSS files.<\/b><br \/>\nMost email clients (Gmail, Yahoo, .Mac, AOL Web, etc) wont reference these external files, because it interferes with their own CSS coding. Use in-line CSS if you have to use CSS at all, and make sure you test your email in the top email clients so you can check for mistakes and inconsistencies.<b>i) Reference to external CSS file will not work<\/b><br \/>\n<code> &lt;link href=\"css1.css\" rel=\"stylesheet\"      type=\"text\/css\"&gt;<\/code><b>ii) Putting css style in the head of the email and calling the it in the body will not work<\/b><br \/>\n<code>&lt;style&gt;<br \/>\n.main{font-size:16px;}<br \/>\n.subhead{font-size:14px; font-weight:bold; color:#cc0000;}<br \/>\n&lt;\/style&gt;<br \/>\n&lt;span class=\"subhead\"&gt;Newsletter Article&lt;\/span&gt;<br \/>\n<\/code><br \/>\n<strong> Use Inline Stylesheet:<\/strong><br \/>\n<code>&lt;span style=\"font-size:14px; font-weight:bold; color:#cc0000;\"&gt;Newsletter      Article&lt;\/span&gt;<\/code><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li><b>Do not use one large image that takes up your whole email.<\/b><br \/>\nMost email programs will block images by default, so all your recipients will see a blank screen when you send it.<\/li>\n<li><b>Make sure your email is not too wide.<\/b><br \/>\nThe idea is to design an email that will fit in the viewing area of most email clients. A width of 650 pixels is ideal and would fit in most email client windows. If you have any doubts about this, set up a few free accounts with Yahoo!, Gmail and the like, and send your email to see how it shows up.<\/li>\n<li><b>Remove junk code from your HTML.<\/b><br \/>\nIf you have used Microsoft Front Page, Microsoft Word, or Microsoft Publisher to design your email, please note that your template will include all sorts of junk code that can break up your layout and cause problems. At worst, sloppy code can get your email filtered into the spam file. Make certain you clean up unwanted\/empty tags, unnecessary attributes, comments and other junk code before you you upload your email. The following are some examples:<br \/>\n<code>&lt;v:shape&gt;<br \/>\n&lt;o:column&gt;<br \/>\n&lt;b:Xl&gt;<br \/>\n![endif]<\/code><\/li>\n<li><b>Flash, JavaScript, ActiveX, embedded movies and sound files do not work in an HTML email. <\/b><br \/>\nEven though those things may make your email cooler, anti-virus software will block all those things. Save the movies, sound files and more for your landing pages and link to them from your email.<\/li>\n<li><b>Make sure all links to images are complete, Web-based URLs. <\/b><br \/>\nIn many cases where this has become a problem, we&#8217;ve found that clients have linked to images on their hard drive rather than on a Web page.<b>Relative URL (will not work): <\/b><code>&lt;p&gt;&lt;a      href=\"lastpage.htm\"&gt;This text&lt;\/a&gt; is a link to a local      page, either on your computer or within the same website.&lt;\/p&gt;<\/code><b>Full URL (will work): <\/b><code>&lt;p&gt;&lt;a href=\"http:\/\/www.microsoft.com\/\"&gt;This      text&lt;\/a&gt; is a link to a live webpage on the World Wide Web.&lt;\/p&gt;<\/code><\/li>\n<li><b>Test your emails in at least three or four email clients like Yahoo!, Gmail, AOL and Hotmail,<\/b> just so you can check your layout and see any mistakes. You should send a test email to all the free email accounts you&#8217;ve created and check your layout to make sure the images show up, your links work, your colors look like you want them to and more.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Note: This article is valid only for people using their own custom HTML. If you use our pre-designed email templates you don&#8217;t have to worry about this. An HTML email communication might look good on your computer but fail completely on the contact&#8217;s because it depends on graphics, fonts, and CSS files which only reside&hellip;<\/p>\n","protected":false},"author":44,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[2171],"tags":[19,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39],"class_list":["post-554","post","type-post","status-publish","format-standard","hentry","category-beyond","tag-email","tag-cod","tag-css","tag-custom","tag-design","tag-dreamweaver","tag-frontpage","tag-htm","tag-layout","tag-own","tag-problem","tag-publisher","tag-style","tag-templat","tag-tip","tag-web"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>HTML Email Tips for Web Designers - in<\/title>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML Email Tips for Web Designers - in\" \/>\n<meta property=\"og:description\" content=\"Note: This article is valid only for people using their own custom HTML. If you use our pre-designed email templates you don&#8217;t have to worry about this. An HTML email communication might look good on your computer but fail completely on the contact&#8217;s because it depends on graphics, fonts, and CSS files which only reside&hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.benchmarkemail.com\/in\/html-email-tips-for-web-designers\/\" \/>\n<meta property=\"og:site_name\" content=\"in\" \/>\n<meta property=\"article:published_time\" content=\"2009-02-25T22:46:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-01-20T15:48:39+00:00\" \/>\n<meta name=\"author\" content=\"Benchmark Team\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Benchmark Team\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.benchmarkemail.com\\\/in\\\/html-email-tips-for-web-designers\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.benchmarkemail.com\\\/in\\\/html-email-tips-for-web-designers\\\/\"},\"author\":{\"name\":\"Benchmark Team\",\"@id\":\"https:\\\/\\\/www.benchmarkemail.com\\\/in\\\/#\\\/schema\\\/person\\\/bb441e78bfef71cd3c31f51bbbbc627d\"},\"headline\":\"HTML Email Tips for Web Designers\",\"datePublished\":\"2009-02-25T22:46:59+00:00\",\"dateModified\":\"2020-01-20T15:48:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.benchmarkemail.com\\\/in\\\/html-email-tips-for-web-designers\\\/\"},\"wordCount\":557,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.benchmarkemail.com\\\/in\\\/#organization\"},\"keywords\":[\"email\",\"cod\",\"CSS\",\"custom\",\"Design\",\"dreamweaver\",\"frontpage\",\"htm\",\"layout\",\"own\",\"problem\",\"publisher\",\"style\",\"templat\",\"tip\",\"web\"],\"articleSection\":[\"Beyond\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.benchmarkemail.com\\\/in\\\/html-email-tips-for-web-designers\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.benchmarkemail.com\\\/in\\\/html-email-tips-for-web-designers\\\/\",\"url\":\"https:\\\/\\\/www.benchmarkemail.com\\\/in\\\/html-email-tips-for-web-designers\\\/\",\"name\":\"HTML Email Tips for Web Designers - in\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.benchmarkemail.com\\\/in\\\/#website\"},\"datePublished\":\"2009-02-25T22:46:59+00:00\",\"dateModified\":\"2020-01-20T15:48:39+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.benchmarkemail.com\\\/in\\\/html-email-tips-for-web-designers\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.benchmarkemail.com\\\/in\\\/html-email-tips-for-web-designers\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.benchmarkemail.com\\\/in\\\/html-email-tips-for-web-designers\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.benchmarkemail.com\\\/in\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML Email Tips for Web Designers\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.benchmarkemail.com\\\/in\\\/#website\",\"url\":\"https:\\\/\\\/www.benchmarkemail.com\\\/in\\\/\",\"name\":\"in\",\"description\":\"Email Marketing Software\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.benchmarkemail.com\\\/in\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.benchmarkemail.com\\\/in\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.benchmarkemail.com\\\/in\\\/#organization\",\"name\":\"Benchmark Internet Group, LLC\",\"url\":\"https:\\\/\\\/www.benchmarkemail.com\\\/in\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.benchmarkemail.com\\\/in\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/benchmarkemail.com\\\/in\\\/wp-content\\\/uploads\\\/sites\\\/11\\\/2019\\\/09\\\/benchmark-logo.svg\",\"contentUrl\":\"https:\\\/\\\/benchmarkemail.com\\\/in\\\/wp-content\\\/uploads\\\/sites\\\/11\\\/2019\\\/09\\\/benchmark-logo.svg\",\"width\":1,\"height\":1,\"caption\":\"Benchmark Internet Group, LLC\"},\"image\":{\"@id\":\"https:\\\/\\\/www.benchmarkemail.com\\\/in\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.benchmarkemail.com\\\/in\\\/#\\\/schema\\\/person\\\/bb441e78bfef71cd3c31f51bbbbc627d\",\"name\":\"Benchmark Team\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/7cad2eb67e1b5399c3fc91a36587b732111adaecc965daecca556ef6a03c5041?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/7cad2eb67e1b5399c3fc91a36587b732111adaecc965daecca556ef6a03c5041?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/7cad2eb67e1b5399c3fc91a36587b732111adaecc965daecca556ef6a03c5041?s=96&d=mm&r=g\",\"caption\":\"Benchmark Team\"},\"url\":\"https:\\\/\\\/www.benchmarkemail.com\\\/in\\\/author\\\/benchmarkteam\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"HTML Email Tips for Web Designers - in","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"en_US","og_type":"article","og_title":"HTML Email Tips for Web Designers - in","og_description":"Note: This article is valid only for people using their own custom HTML. If you use our pre-designed email templates you don&#8217;t have to worry about this. An HTML email communication might look good on your computer but fail completely on the contact&#8217;s because it depends on graphics, fonts, and CSS files which only reside&hellip;","og_url":"https:\/\/www.benchmarkemail.com\/in\/html-email-tips-for-web-designers\/","og_site_name":"in","article_published_time":"2009-02-25T22:46:59+00:00","article_modified_time":"2020-01-20T15:48:39+00:00","author":"Benchmark Team","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Benchmark Team","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.benchmarkemail.com\/in\/html-email-tips-for-web-designers\/#article","isPartOf":{"@id":"https:\/\/www.benchmarkemail.com\/in\/html-email-tips-for-web-designers\/"},"author":{"name":"Benchmark Team","@id":"https:\/\/www.benchmarkemail.com\/in\/#\/schema\/person\/bb441e78bfef71cd3c31f51bbbbc627d"},"headline":"HTML Email Tips for Web Designers","datePublished":"2009-02-25T22:46:59+00:00","dateModified":"2020-01-20T15:48:39+00:00","mainEntityOfPage":{"@id":"https:\/\/www.benchmarkemail.com\/in\/html-email-tips-for-web-designers\/"},"wordCount":557,"commentCount":0,"publisher":{"@id":"https:\/\/www.benchmarkemail.com\/in\/#organization"},"keywords":["email","cod","CSS","custom","Design","dreamweaver","frontpage","htm","layout","own","problem","publisher","style","templat","tip","web"],"articleSection":["Beyond"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.benchmarkemail.com\/in\/html-email-tips-for-web-designers\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.benchmarkemail.com\/in\/html-email-tips-for-web-designers\/","url":"https:\/\/www.benchmarkemail.com\/in\/html-email-tips-for-web-designers\/","name":"HTML Email Tips for Web Designers - in","isPartOf":{"@id":"https:\/\/www.benchmarkemail.com\/in\/#website"},"datePublished":"2009-02-25T22:46:59+00:00","dateModified":"2020-01-20T15:48:39+00:00","breadcrumb":{"@id":"https:\/\/www.benchmarkemail.com\/in\/html-email-tips-for-web-designers\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.benchmarkemail.com\/in\/html-email-tips-for-web-designers\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.benchmarkemail.com\/in\/html-email-tips-for-web-designers\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.benchmarkemail.com\/in\/"},{"@type":"ListItem","position":2,"name":"HTML Email Tips for Web Designers"}]},{"@type":"WebSite","@id":"https:\/\/www.benchmarkemail.com\/in\/#website","url":"https:\/\/www.benchmarkemail.com\/in\/","name":"in","description":"Email Marketing Software","publisher":{"@id":"https:\/\/www.benchmarkemail.com\/in\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.benchmarkemail.com\/in\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.benchmarkemail.com\/in\/#organization","name":"Benchmark Internet Group, LLC","url":"https:\/\/www.benchmarkemail.com\/in\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.benchmarkemail.com\/in\/#\/schema\/logo\/image\/","url":"https:\/\/benchmarkemail.com\/in\/wp-content\/uploads\/sites\/11\/2019\/09\/benchmark-logo.svg","contentUrl":"https:\/\/benchmarkemail.com\/in\/wp-content\/uploads\/sites\/11\/2019\/09\/benchmark-logo.svg","width":1,"height":1,"caption":"Benchmark Internet Group, LLC"},"image":{"@id":"https:\/\/www.benchmarkemail.com\/in\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.benchmarkemail.com\/in\/#\/schema\/person\/bb441e78bfef71cd3c31f51bbbbc627d","name":"Benchmark Team","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/7cad2eb67e1b5399c3fc91a36587b732111adaecc965daecca556ef6a03c5041?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/7cad2eb67e1b5399c3fc91a36587b732111adaecc965daecca556ef6a03c5041?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7cad2eb67e1b5399c3fc91a36587b732111adaecc965daecca556ef6a03c5041?s=96&d=mm&r=g","caption":"Benchmark Team"},"url":"https:\/\/www.benchmarkemail.com\/in\/author\/benchmarkteam\/"}]}},"_links":{"self":[{"href":"https:\/\/www.benchmarkemail.com\/in\/wp-json\/wp\/v2\/posts\/554","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.benchmarkemail.com\/in\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.benchmarkemail.com\/in\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.benchmarkemail.com\/in\/wp-json\/wp\/v2\/users\/44"}],"replies":[{"embeddable":true,"href":"https:\/\/www.benchmarkemail.com\/in\/wp-json\/wp\/v2\/comments?post=554"}],"version-history":[{"count":0,"href":"https:\/\/www.benchmarkemail.com\/in\/wp-json\/wp\/v2\/posts\/554\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.benchmarkemail.com\/in\/wp-json\/wp\/v2\/media?parent=554"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.benchmarkemail.com\/in\/wp-json\/wp\/v2\/categories?post=554"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.benchmarkemail.com\/in\/wp-json\/wp\/v2\/tags?post=554"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}