/
2010-12-03-render-styled-html-emails-consistently-with-litmus.html
37 lines (29 loc) · 2.77 KB
/
2010-12-03-render-styled-html-emails-consistently-with-litmus.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
---
title: Render styled HTML emails consistently with Litmus
tags: email litmus
---
<p>
Getting your HTML email to look the same on all mail clients is <a href="http://www.vomitron.com/blog/2010/05/07/html-email-is-hard/">hard</a>. Most clients only support a <a href="http://www.campaignmonitor.com/css/">small subset</a> of HTML. Outlook 2010 actually uses Word to display HTML, and we know <a href="http://www.email-standards.org/blog/entry/microsoft-to-ignore-web-standards/">how much that sucks</a>. But it's more endemic than that; there are simply no standards to code to.
</p>
<p>
When marketing wants an email to look exactly the same on all clients, tell them they need to use plaintext. When they say they need HTML, tell them that it's impossible. When they insist, tell them that you can get it to look 90% the same across clients, but it will take 40 hours. The first hour will be spent composing the email. For the next 39 hours you will be sending it to gmail, testing, tweaking, sending it to yahoo, testing, tweaking, sending it to Outlook... etc.
</p>
<p>
Enter <a href="http://litmus.com/">Litmus</a>. For $49 a month you can send <i>them</i> a copy of the email, and they will render screenshots of what it looks like on the <a href="http://litmus.com/email-previews">25 email clients</a> that actually matter.
</p>
<img src="http://lh4.ggpht.com/_EE2zVzGv1Ds/TPk2tdMV_II/AAAAAAAALZI/R3mELRSidf8/s800/litmus-dashboard.png">
<p>
You can zoom in on exactly what it looks like on a specific client, with or without images enabled, in plaintext or html mode. Litmus can show you the final rendered HTML code, as well as the entire MIME message. You can mark test cases as "failed", and then evaluate them again on subsequent revisions.
</p>
<img src="http://lh4.ggpht.com/_EE2zVzGv1Ds/TPk2tpPc15I/AAAAAAAALZM/IaWGkfJnQ_8/s800/litmus-iphone.png">
<p>
Having done this a couple of times recently, I came up with some rules of thumb.
</p>
<ul>
<li>Assume images won't load. Use alt/title attributes.</li>
<li>Many clients will not render style tags. Pretend it's 1995 and use <a href="http://www.quackit.com/css/inline_style_sheets.cfm">inline styles</a>.</li>
<li>Relative, absolute and float positioning will not work. Use tables.</li>
<li>Yahoo: add "margin-bottom: 1em;" to your <a href="http://www.email-standards.org/blog/entry/yahoo-drops-paragraph-spacing/">paragraph tags</a>.</li>
<li>Outlook: some links will break when they wrap in MIME. If you can, keep them under 80 characters, and put them on the start of a line.</li>
<li>Include a <a href="http://www.lshift.net/blog/2006/07/18/html-email-is-hard-to-get-right">plaintext section</a>. Some <a href="http://www.zeldman.com/2007/06/08/e-mail-is-not-a-platform-for-design/">users prefer it</a>, and some mobiles devices only show plaintext.</li>
</ul>