970_90

Friday, 30 January 2015

How to display HTML Correctly in Email?

How to display HTML Correctly in Email?

When we send a email to users from web application, many times we see HTML email is distorted in Gmail, Yahoo, Iphone and Ipad etc.

 If you want to removed such type of issue, then keep following points in mind while creating html template. 


  Use tables for layout
<table>
<!--- html code -->
<!--- html code -->
</table>



Set the width in each cell
<table border="0" cellpadding="10" cellspacing="0">
 <tbody>
<tr>
  <td width="50">Sr</td>
  <td width="100">Name</td>
  <td width="100">Email</td>
  <td width="100">Billing Date</td>
 </tr>
</tbody></table>



Use a container table for body background colors
<table border="0" cellpadding="10" cellspacing="0">
<tbody>
<tr>
<td bgcolor="#000000">Background Color </td>
</tr>
</tbody></table>



Avoid unnecessary whitespace and in table
<table border="0" cellpadding="10" cellspacing="0">
<tbody>
<tr>
<td></td>
</tr>
</tbody></table>



Use "nbsp;" for doubly space


Avoid shorthand, use as below
 font-weight: bold;
 font-size: 1em;
 line-height: 1.2em;
 font-family: georgia,serif;


Always use inline CSS
<div style="color: red;">
Inline CSS</div>



Set link color in following way
<a href="http://web-technology-experts-notes.in/" style="color: black;"><span style="color: magenta;">this is a link</span></a>



Images in HTML emails
a. Avoid spacer images
b. Always include the dimensions of your image
c. Avoid PNGs image
d. Always add alt text in image attribute


Never use floats attribute 


Check CSS support in email
https://www.campaignmonitor.com/css/






1 comment:

  1. FreshMail provides an excellent resource for determining which email clients will support the various parts of CSS, and it's online for free at: http://freshmail.com/developers/best-practices-for-email-coding/

    ReplyDelete