In this week’s article we are going to discuss the coding side of email marketing best practices. I will try to be as explanatory as possible, however please feel free to contact me with any possible questions.

We all know that creating/customizing email templates can be a pain, especially when you’re trying to keep the same look and feel of your email campaign across all those inboxes; Outlook versions (2000, 2002, 2003, 2007, 2010, 2011, 2013), Apple Mail, Hotmail (now Outlook on desktop), Yahoo, GMail, Thunderbird, SpiceBird, Windows Live Mail, GMX, AOL, Opera Mail, Fox Mail , Sparrow, IncrediMail, Lotus Notes, Eudora. The list goes on.

Then we also have mobiles and tablets, iPhones, Android devices, Windows Phone, etc.

If you’ve already been dealing with email templates and their rendering issues for a while, then you surely know that the ones that cause the most hair loss are the Outlook, Hotmail, and Gmail versions.

1 – First things first: you should use INLINE CSS, always

Some email services, especially GMail, will still remove CSS from your email header. Therefore, you should always use the inline CSS when sending your campaign.

The trick is to start with an embedded version and use all the CSS in the HEAD section of your email. This will help you customize styles much easier and faster than online styles.

Make all the presentation changes, and then when your email is done with all its content and presentation, just use an online application that successfully helps you align all your code CSS easily. I prefer Mailchimp’s Inliner tool.

2 – Never use PADS or MARGINS. Don’t use them for design, don’t use them for content

Fact: You can’t trust Paddings and Margins.

You should always use a table-based approach when it comes to HTML emails. If you need padding or margin, just use the HTML “tr” and “td” table tags to achieve this. This will save you a lot of headaches. Use tables, save your hair, especially within Outlook.

3 – Design your tables for a bulletproof Outlook experience

Your tables should always include some “special” styling for damn Outlook.

Within your table, make sure you have the cellpadding and cellpacing attributes, and set them to zero.

Never forget to add this style to the style attribute of your HTML table tags:

And never forget to add this style to the style attribute of your HTML td tags as well:

4 – A pixel gap below the image?

Well, this caused a lot of heart attacks for all of us involved in the email marketing business.

The td tag that encloses your image should be styled with a line height of 1px. I know it looks weird (hey, this is 90’s HTML), but it works.

5 – Outlook does not respect the line height of an empty table cell. Why is that?

Dealing with HTML email also means dealing with the 90s. We discussed using table-based padding and margins above, but some versions of Outlook will still ignore this approach and automatically assign a height of 20 pixels to the perfect cells in your email. board.

So here is the solution:

You should use the style below inside your td tags.

And don’t forget to put a “non-breaking space (nbsp)” between the opening and closing td tags.

6 – Why doesn’t Gmail show the complete email?

When your email exceeds 102KB, GMail cuts it off and displays the “view full message” statement. To prevent this from happening, try to make your email below 102 kb.