HTML email sucks But it can suck less

HTML email sucks. But it can suck less.

The problems you can’t solve Email doesn’t scale. Who are you again? Your recipient list is not your mother. Look at my new i. Thing!/The IT department gives me a Blackberry. ⑤ Go away I hate you. ⑥ The browser wars are alive and well. Code like it’s 1999! ⑦ Most clients don’t display images by default. ① ② ③ ④

What this means ① There is some stuff you just …can’t …do. ② So best practices for email are not like best practices for anything else. ③ And yet we still have to look cool and work on modern devices.

Specific gotchas ① 98% containing table* width. ② Font styles go in the table cells. ③ Float like a bee. ④ <span> is your new best friend. ⑤ Whitespace with HTML. ⑥ <img> </td> 1 px gap ⑦ Use absolute URLs for images. * Think of it as the <body>

Oh God, mobile ① Almost half of email is read on mobile devices. ② Preview is kind of like mobile! ③ Automatic text resizing, I love you.

Tools ① The Chart of Despair and Incompatibility: campaignmonitor. com/css ② Campaign Monitor Generator: campaignmonitor. com/templates ③ Litmus Builder: litmusbuilder. com/ ④ Zurb Templates: zurb. com/playground/responsive-emailtemplates ⑤ Premailer: premailer. dialect. ca ⑥ Litmus Tests: litmus. com/email-testing

Sources • • • Sitepoint 24 ways Zurb Campaign Monitor Mail. Chimp Litmus

Elizabeth Yalkut eg 2234@columbia. edu Powerpoint, including speaker notes, available at: columbia. edu/~eg 2234/emailsucks. ppt