Important Tips while creating Email Newsletter

15 / May / 2014 by Rajan Shergill 0 comments

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 xmlns:v="urn:schemas-microsoft-com:vml">
<style type="text/css">
v\:* { behavior: url(#default#VML); display:inline-block; }

<table width="100%" height="1157" border="0" align="center" cellpadding="0" cellspacing="0" background="../images/bg.jpg" >
<!–[if gte vml 1]>
<v:imagedata src="../images/bg.jpg"/>

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.


Leave a Reply

Your email address will not be published. Required fields are marked *