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

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 iThing!/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> 1px 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-email-templates

⑤ Premailer: premailer.dialect.ca

⑥ Litmus Tests: litmus.com/email-testing

http://campaignmonitor.com/css

Sources

• Sitepoint

• 24ways

• Zurb

• Campaign Monitor

• MailChimp

• Litmus

http://www.sitepoint.com/code-html-email-newsletters

http://24ways.org/2009/rock-solid-html-emails/

Elizabeth Yalkut

[email protected]

Powerpoint, including speaker notes, available at:

columbia.edu/~eg2234/emailsucks.ppt

Documents

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