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 feel free to contact me with any possible questions.

We all know that creating/customizing email templates can be a hassle, especially when you’re trying to keep your email campaign looking the same 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 been dealing with email templates and their rendering issues for a while, you’ll probably know that the ones causing the most hair loss are the versions of Outlook, Hotmail and Gmail.

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

Some email services, notably GMail, will still strip the CSS from your email header. Therefore, you should always use 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 layout changes, and then when your email is done with all its content and layout, just use an online application that successfully helps you to align all the CSS of your code 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 a padding or margin, simply use the table’s “tr” and “td” HTML 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” styles for damn Outlook.

Inside 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 too:

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 honor 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 earlier, but some versions of Outlook will still ignore this approach and automatically assign a height of 20 pixels to table cells. of perfect pixels.

So here is the solution:

You should use the style below within 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 full 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 102kb.