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 -></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)
Newsletters (or the use of HTML in emails) was last modified: March 18th, 2015 by