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/
