|
 Coding the XHTML for emails (newsletters) can be a tricky business, especially because the end result depends upon the email clients used. Here are a few guide lines I found helpful while designing the newsletter templates.
Styles:
Only inline styles are accepted. Take special care with the inline styles with multiple properties viz:
<td style="background: #f3dc74 url('images/bg_email.jpg') no-repeat center top;">
this might not always work!
Instead, consider using:
<td style="background-color: #f3dc74;background-repeat:no-repeat;background-position: center top;"> This also applies for properties like margin and padding
Background Images:
Use BACKGROUND TAG to define background images, while style="background-image:..." will not work everywhere. The style tag might not render the bg-images most of the times (across different email clients).
Use
<td background="img/myimg.jpg">Abc</td>
instead of
<td style="background: url('/images/myimage.jpg')">Abc</td>
Gaps in between sliced images:
It is always adviced that no space is left on the adjacent sides of IMG tag. This might cause the images to leave behind un-intended spaces and/or breakage with sliced images.
Use
<a href="#">
<img src ="myimage.jpg" />
</a>
Instead of:
<a href="#">
<img src ="myimage.jpg" />
</a>
Issues with Hotmail:
<h2> and <h3> behave strange, consider using <h1> instead.
<p> leaves extra gap between adjacent elements. Use <div> instead
|
