Building, testing and sending HTML emails can be an absolute nightmare, there’s no doubt about it. Salvation can be found and if you’re using MailChimp it’s even easier. Here’s a few tips I’ve picked up for HTML email success, some apply even if you’re not using MailChimp. The number one thing you must do is to test, test and test again.
Give all of your tables, cells and images an exact width and height.
If your building an HTML email, you’ll be using tables, so you’ll need a keen eye to make sure they behave themselves. Setting exact dimensions is a thankless task but this way you’ll know none of those pesky email clients such as Hotmail, Gmail and Yahoo! will be able to set their own dimensions and distort your hard work. It makes sense to do the same with the images too – for piece of mind if anything else.
If you’re making the email editable in MailChimp, use <div> tags, but only within cells
After taking a detailed look at MailChimp’s templates I noticed they use <div> tags throughout and style them using embedded CSS in the <head> rather than using inline styles. MailChimp will do hard graft and convert your lovely embedded CSS into dirty inline styles for you, similar to Premailer. This is ideal if you’re going to be dropping MailChimp’s editing tags into your code to make it easy for your clients to edit them. However, you will still need to lay your email out using tables, but you can drop <div> tags into table cells, it works, i’ve tested it.
Use display:block for all of your images
If you’re using MailChimp, you can set a base style for all of your <img> tags in the within your embedded CSS rather than setting inline styles, otherwise you need to locate all of your images and set each inline style individually. There is an white spacing issue in Firefox and modern versions of Internet Explorer that ruins all designs that rely on embedded images. Adding display:block solves this issue and keeps your email looking how it should across all browsers. That saying, keeping your use of images to a minimum is good practice.
Style your fonts cell by cell
It makes sense to set an inline font style for the whole table, but I came across an issue in Microsoft Entourage on the Mac where it ignores the ‘master’ table font style. Styling each table cell that contains text will solve this issue. This also applies using MailChimp as any font style in your embedded CSS is ignored also.
Don’t assume
If the code previews perfect within a browser such as Firefox or Chrome do not assume this will be the case when you come to emailing it out. Avoid any issues by sending a test email out to some of the more popular email clients such as Hotmail, Gmail and Yahoo! – and if you know anybody who uses Outlook and Entourage send one to them too. Litmus is available within MailChimp and is free to monthly subscribers.
Finally, download MailChimp’s templates and learn from the experts
It makes a lot of sense to download MailChimp’s own email templates and study their code, that’s what I did. You can extract handy snippets of code that work without the need for MailChimp in some cases. You can simply bolt them onto your own email . Learn from the best. You can get MailChimp’s templates here.
If you have any more tips please tweet them to me @DesignSheffield.