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 Outlook.com. 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 <table> tags instead of <div> tags.
- Remove spaces if you’ve tried everything else between elements.
- Use align and valign on your <td> tags.
Code Therapy - Identifying What Went Wrong When Coding Your HTML Email Infographic
Infographic by: Litmus and can be found here.