create html email newsletter - email newsletter templates



email newsletter design

  • Code all the email structure using simple table element.
  • html email should have thee CSS simple. Avoid compound style declarations (IE: “font:#000 12px Arial, Helvetica, sans-serif;”), shorthand code (IE: #000 instead of #000000)
  • email templates should account for mobile-friendliness
  • Send html in email -> Test, test, test. Create email accounts across various services / web servers, and send your html email form to yourself and check whether its coming to your inbox.
  • The below email template is a reference for,
    • newsletter templates
    • email marketing templates that work
    • email brochure template
    • responsive email newsletter templates
    • e marketing template
    • ecommerce email template

How to create html email template by your own :

For html email design best practices these are the steps to follow.

1.Use table tag as starting tag:

  • To design an html Email template prefer <table> tag after <body> tag.
  • Use <div> tag inside the table tag.
<body>
  <table>
    <tr>
      <td>
         <div>
         //write your tag's here. 
         </div> 
      </td>
    </tr> 
  </table>
</body>


2.How Use <tr> and <td> tag:

  • We can use <tr> and <td> tag for placing content in Email.
  • We can use many <tr> and <td> depends upon our needs.
<body>
      <table>
          <tr>
             <td>
             //write your tag's here.
             </td>
          </tr>
          <tr>
             <td>
             //write your tag's here.
             </td>
          </tr>
      </table>
</body>

3.How to Use images in html email:

  • To use image in Email template design these are the terms we should remember
  • Always use absolute path for the image source.
  • We should define alt attribute for each and every image this is a required property in Email design.
  • Use <img> tag inside <a> tag because Gmail offers user to download image when mouse over to the image, so we use <a> tag with valid href attribute.
  • email template code
<a href="#"><img src="absolute path" alt="alternate text about image" 
style="display:block;" /></a>


4.html email size :

  • Height of the template is no problem, but we should keep mind in width.
  • Recommended width size should be 650px.

5.html email style:

  • Use this inline styles to enhance the Email <table>.
<table style="margin:0; padding:0; cellpadding:0; cellspacing:0;">

6.How to style Email <td>:

  • Use this inline styles to enhance the Email <td>.
<td style="margin:0 auto;">

7.How to style Email Template:

  • Always Use inline styles (html email css) instead of internal or external styles.
<html>
   <head>
      <link href="css/style.css" rel="stylesheet" type="text/css" />//External
          CSS
          <style>//Internal CSS
            body{
            background-color:#eee;
            }
          </style>
  </head>
     <body>
        <table style="margin:0; cellspacing:0;">//Inline CSS
        </table> 
     </body>
</html>


8.Style <table> tag instead of <body> tag:

  • Most of the HTML Email developers prefer styling table tag instead of <body> tag. So prefer styling starting table tag taking more advantages.
<html>
    <body>
       <table style="margin:0; cellspacing:0;" ></table>
    </body>
</html>

9.Unsupported CSS styles:

  • Never use these CSS styles which are not supported by some Email clients.
float: none | left | right | initial | inherit;
position: static | absolute | fixed | relative | initial | inherit;

10.How to use Background-image in Email - images in html email

  • Don’t use background-image attribute that is not supported in many email clients, use bgcolor or background-color.

11. How to use javascript in html email

  • Never use JavaScript in Email that will be stripped by the Email Client for some security reasons.

12. How to define CSS styles:

  • Use this inline style syntax for define styles.
style="border-width:1px
border-style:solid;
border-color:grey;"
  • Never use short hand methods for defining styles.
style="border:1 px solid grey;"


13.Which is best <span> or <p>:

  • Use <span> tag instead of <p> tag, because <p> tag creates a line break at the end of line that may make some design issues.

14.How to align Email elements:

  • Use CSS styles for align content in the Email for more effective design.
style="border-width:1px;
border-style:solid;
border-color:grey;"

15.Use HTML Entities:

  • Use HTML Entities for special characters, because some of the special characters does not recognized by some email clients, but HTML entities supported by major Email Clients.
[&#34;] [&#8217;] [&copy;]

    html email templates is ready to go.

Browser Support for marketing email template in HTML

Yes Yes Yes Yes Yes

Related Searches tomarketing email template in html