View
212
Download
0
Category
Preview:
Citation preview
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
Sources
• Sitepoint
• 24ways
• Zurb
• Campaign Monitor
• MailChimp
• Litmus
Elizabeth Yalkut
eg2234@columbia.edu
Powerpoint, including speaker notes, available at:
columbia.edu/~eg2234/emailsucks.ppt
Recommended