Tips for building HTML emails

Building robust emails for a matrix of browsers, web-based mail clients and standalone clients can be a very tricky task because email clients sometimes strip out certain tags and render different elements in slightly different ways. I have gathered some usefull tips from various weblogs which I will write down in this post.

  • Most web-based clients use CSS and this can remove padding, borders and margin and there for the email can not have layout which relies on margin and padding, instead use table cells with fix widths and heights.
  • Avoid using the P and the BR tags as differences in line-height will cause your email to brake and appear differently from client to client. Instead use tables and cells with fix widths and height.
  • To overcome the inconsistency with the way clients underline links with formatting copy, links and fonts use a mixture of HTML and CSS as follows:

 

<span style="font-family: Arial, Helvetica, sans-serif; color: #666666; font-size: 10px;">
  text
  <a style="text-decoration:none;" href="LinkURL" target="_blank">
    <span style="color: #666666; text-decoration: underline;">link</span>
  </a> text
</span>
  • Read my post how to fix the problem with Images, Tables, and Mysterious Gaps
  • Make sure all images have the correct height and width set as Outlook 2003 and Outlook 2007 displays an alt message before downloading the images which reads ‘Right-click here to download pictures. To help protect your privacy, Outlook prevented automatic download of this picture from the internet.’ This alt message will cause your images to grow and push your design out of shape.
  • Avoid &nbsp; in blank table cells because its not needed and shouldn’t be used for anything other than stopping words from widowing on to the next line.
  • Sometimes table cells are pushed higher because of whitespace and line-height often by specifically telling the image to sit at the top or the bottom of the cell you can fix this problem ( valign=top and valign=bottom). Failing that make your image dimensions higher than 20px where possible.
  • If a TABLE has a set width make sure that each TD inside that TABLE has a width set on it. Make sure that all the TD widths actually add up to the combined number of the width of the TABLE.
  • Don’t use background images or animated GIF’s. Outlook 2007 doesn’t support either, if you do wish to use an animated GIF make sure the message of your email is present in the first frame of the animation. Outlook 2007 will only display the first frame of the GIF.
  • When using a script to generate you’re email spam filter sometimes block it when using \r\n. You can fix this by only using \n

Leave a Reply