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:
<body>
<table>
<tr>
<td>
<div>
//write your tag's here.
</div>
</td>
</tr>
</table>
</body>2.How Use <tr> and <td> tag:
<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.
["] [’] [©]html email templates is ready to go.
Browser Support for marketing email template in HTML
 |
 |
 |
 |
 |
|---|---|---|---|---|
| Yes | Yes | Yes | Yes | Yes |