How to compose a XHTML Newsletter
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:
{codecitation class=”brush: xhtml;”}<td style=”background: #f3dc74 url(‘images/bg_email.jpg’) no-repeat center top;”>{/codecitation}
this might not always work!
Instead, consider using:
{codecitation class=”brush: xhtml;”}<td style=”background-color: #f3dc74;background-repeat:no-repeat;background-position: center top;”>{/codecitation}
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
{codecitation class=”brush: xhtml;”}<td background=”img/myimg.jpg”>Abc</td>{/codecitation}
instead of
{codecitation class=”brush: xhtml;”}<td style=”background: url(images/myimage.jpg)”>Abc</td>{/codecitation}
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
{codecitation class=”brush: xhtml;”}<a href=”#”>
<img src =”myimage.jpg” />
</a>{/codecitation}
Instead of:
{codecitation class=”brush: xhtml;”}<a href=”#”>
<img src =”myimage.jpg” />
</a>{/codecitation}
Issues with Hotmail:
<h2> and <h3> behave strange, consider using <h1> instead.
<p> leaves extra gap between adjacent elements. Use <div> instead
