Important Tips while creating Email Newsletter
In many of our projects we sometimes need to create the E-mail newsletters for our clients so that it can help them market their products well.
Following are some of the tips that we can keep in our mind while creating e-mail newsletters:
1. Color Hexa-Code
Make sure you specify the six digits color codes esp. for the ones which have the same number or character. For ex: if you want to specify the color #000000, then do NOT make use of “#000” color code as it may not work in some e-mail clients.
2. Do not put ‘line-height’ CSS property in table cell
In some of the e-mail clients that I have worked with, the ‘line-height’ CSS property would not work with the <td>’s. Instead you can make use of block-level elements (such as <p>) inside the table cell (<td>) and specify the ‘line-height’ attribute inside those block-level elements.
3. Applying background images to your email newsletters
At times, background images would not show properly in Microsoft Outlook email client. So to ensure that it renders properly in MS Outlook we can make use of VML code as specified below:
[html]
<html xmlns:v="urn:schemas-microsoft-com:vml">
<style type="text/css">
<!–
v\:* { behavior: url(#default#VML); display:inline-block; }
–>
</style>
<table width="100%" height="1157" border="0" align="center" cellpadding="0" cellspacing="0" background="../images/bg.jpg" >
<!–[if gte vml 1]>
<v:shape
stroked=’f’
style=’position:absolute;
z-index:-1;
visibility:visible;
width:;
height:;
top:0px;
left:;
border:0;’>
<v:imagedata src="../images/bg.jpg"/>
</v:shape>
<![endif]–>
<tr>
<td>…</td>
</tr>
</table>
[/html]
4. Always use inline CSS in table
When we create HTML for email newsletter, we must use inline CSS only, because ‘class’ and ‘id’ attributes are not supported.
5. Make use <table> as a higher-level element to create newsletters
It is always a best practice to create the e-mail newsletters as some e-mail clients do not show <div> elements when used as a higher-level element.
6. How to fix the extra-spaces when using <img> tag in e-mail newsletters
Use inline CSS style: “display:block” to fix the extra space issue below images. Always put description of the image in ‘alt’ attribute.
