Newsletters (or the use of HTML in emails)

There are a few rules to keep in mind when creating an HTML email:

    • HTML fixed width tables should be used for layout.  Using div tags may work, but is not recommended as this is more suited for dynamic rather than fixed page layouts.
    • You can use CSS for inline elements such as background colors and fonts styling.
    • You can use CSS img tags for images.  Use absolute links like “http://…” and not relative links like “/images/…”
    • Give your images alt attributes; it’s absolutely vital in HTML emails.  By default, many email clients do not display images when an email is first opened. Instead, they ask users to actively choose to display images.
    • Remember to wrap each block of text in span tags.  This allows you to specify formatting styles.  Set the font-family to arial, sans-serif; and the color to black.

Example

<table style="border-left: 2px solid #e6e6e6; border-right: 2px solid #e6e6e6;" cellspacing="0" cellpadding="25" width="605">
<td width="596" align="center" style="background-color: #ffffff; border-top: 0px solid #000000; text-align: left; height: 50px;">
<p style="margin-bottom: 10px; font-size: 22px; font-weight: bold; color: #494a48; font-family: arial; line-height: 110%;">
Newsletter - Your monthly source of information</p></td>
<tr>
<td style="background-color: #ffffff; border-top: 0px solid #333333; border-bottom: 10px solid #FFFFFF;" align="middle" valign="middle">
<a href="#"><img src="http://mywebsite.com/images/banner.jpg" border="0" alt="Banner Image" align="center" /></a></td>
<tr>
<td style="background-color: #ffffff; border-top: 0px solid #000000; text-align: left; height: 50px;" align="center">
<p><span style="margin-bottom: 10px; font-size: 12px; font-weight: normal; color: #494a48; font-family: arial; line-height: 110%;">Paragraph text here!</span></p>
<p><a href="link" style="font-family: arial"><span style="font-family: arial; font-size: 12px; color:#b0589d">Link -&gt;</span></a></p>
<p><a href="#"><img src="http://mywebsite.com/images/spacer.jpg" border="0" alt="Frog on a log" align="center" /></a></p> </tr> </table>

The result would look something like this:
(Note: images are not shown as the website address used -‘http://mywebsite.com’- is not real)

newsletter

Newsletters (or the use of HTML in emails) was last modified: March 18th, 2015 by tabcom