Tips for Fixing Email Template Code Problems Infographic


Share on LinkedIn

If you’ve ever developed an email before, you know that the coding doesn’t stop when your design looks good in the browser. In fact, it doesn’t stop when it looks good in every browser (FireFox, Chrome, Internet Explorer, and Safari). Let’s not forget too that the email also needs to look great on every device that could potentially render it. I’m talking about phones, tablets, iPods, and anything else that gets dreamed up. Professional email designs should only be approved after they have been thoroughly checked in every email client (Outlook, Lotus Notes, Gmail, etc.) on every device.

Why do you need to check it on every device and email client? Seems a little overkill, no?

The reason you need to do so much “checking” is because every combination of device, browser and email clients produces a different result. Meaning, they render the email differently. For example, Outlook supports stylizing the email in the tags, Gmail does not. Gmail supports vertical alignment of content, and Outlook does not. Margin is supported in Outlook in all versions except for their new cloud version Minimum and maximum widths aren’t supported in Outlook but work great on Apple Mail and the iPhone/iPad. If you’re going to use heavy background images, you’ll get support from Outlook 2000 and 2003 but not Outlook 2007, 2010, or 2013. Click here for a useful chart.

Email Programming Tips and Tricks:

Below are some tips and tricks for coding emails taken from the infographic that Litmus, a leader in email testing and analytics, created for debugging common problems.

  • Media gets stripped from email and doesn’t work including: video, flash, rollovers, JavaScript, and forms.
  • Background images aren’t supported in Outlook versions 2007 or later. Don’t use.
  • Use absolute links over relative links to both images and website URLs.
  • Set your image borders to “0? if you’re seeing a blue border around them.
  • Choose a common image format such as GIF or JPG.
  • Remove gaps between images with the style tags line-spacing=”0? and style=”display:block;”.
  • Pick a common font that your subscriber will have installed on their computer.
  • Hard code the heights and widths of every cell in a table to reflect the space you need it to take up. Redundancy is not a bat thing here.
  • Code your emails in
    tags instead of

  • Remove spaces if you’ve tried everything else between elements.
  • Use align and valign on your tags.

Code Therapy – Identifying What Went Wrong When Coding Your HTML Email Infographic


Infographic by: Litmus and can be found here.

Republished with author's permission from original post.

Cody Ward
Cody Ward is a marketing leader, consultant, entrepreneur, blogger, and social media enthusiast living in the greater Chicago area. He has worked to help Fortune 500 companies and small businesses alike fit together the right pieces of their B2B or B2C marketing puzzle. By combining technical solutions with modern marketing strategy, Cody has developed a track record for executing digital marketing campaigns that deliver strong ROI results.


Please use comments to add value to the discussion. Maximum one link to an educational blog post or article. We will NOT PUBLISH brief comments like "good post," comments that mainly promote links, or comments with links to companies, products, or services.

Please enter your comment!
Please enter your name here