Email Templates And Email Marketing – Bulletproof HTML/CSS Techniques To Keep You On The Safe Side
3 min read[ad_1]
In this week’s article we’re going to discuss the coding side of Email Marketing Best Practices. I’m going to try to be explanatory as much as possible, nevertheless, please do not ever hesitate to contact me for any possible questions.
We all know that creating / customizing email templates can be a pain, especially when you are trying to maintain the same look 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 Phones etc.
If you’re already dealing with email templates and their rendering issues for a while, then you surely know that the ones causing the most hair loss are Outlook Versions, Hotmail, and Gmail.
1 – First things first: You should use INLINED CSS, always
Some email services, especially GMail, will still strip the CSS from the head of your email. Thus you should always use the inlined CSS when sending your campaign.
The trick is, to start with an embedded version and use all of the CSS at the HEAD section of your email. This will help you to customize styles much easier and quicker than inline styles.
Make all the presentational changes, and then when you finalized your email with all of your content and presentation, just use an online app that successfully helps you to inline all of your code’s CSS easily. I prefer Mailchimp’s Inliner Tool.
2 – Never use PADDINGS or MARGINS. Don’t use them for the layout, don’t use them for the content
Fact: You can’t trust to Paddings and Margins.
You should always use a table based approach when it comes to HTML Emails. If you need a padding or a margin, just use “tr” and “td” HTML tags of the table to achieve it. This will save you from 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 bloody Outlook.
Inside your table, Please just be sure to have cellpadding and cellspacing attributes, and give them the value of Zero.
Never forget to add this style to your table HTML tags’ style attribute:
And never forget to add this style to your td HTML tags’ style attribute too:
4 – One pixel gaps below your Image’s?
Well, this caused many heart attacks for all of us who involved in email marketing business.
The td tag which includes your Image should have a style with a line-height of 1px. I know it looks weird (hey, this is HTML from the 90s), but it works.
5 – Outlook doesn’t respect the line height of an empty Table cell. Why is that?
Dealing with HTML email also means dealing with 90s. Above we discussed using Table based Paddings and Margins, but some versions of Outlook will still ignore this approach and they will automatically assign a 20px height to your pixel perfect table cells.
So here is the solution:
You should use the style below inside your td tags.
And please don’t forget to put a “non-breaking space(nbsp)” between the opening and closing td tags.
6 – Why Gmail doesn’t show the entire email?
When your email exceeds 102kb., GMail cuts it of, and displays the statement “view entire message” instead. To prevent this from happening, try to build your email below 102kb.
