The document is a presentation by Sean Thambiah focusing on best practices for creating effective HTML emails, emphasizing strategies for design, coding, and content strategies. It includes tips on layout, typography, and troubleshooting issues with various email clients, while also providing links to resources and tools. Additionally, it discusses mobile design considerations and engagement tactics to enhance email effectiveness.

1. WebSG July 2011 Sean Thambiah / @seantsg

2. WebSG July 2011 Sean Thambiah / @seantsg

3.  Sean Thambiah, Connoisseur of Fine HTML Emails
 currently Project Executive at Qais Consulting
 interested in Content Strategy, Information Architecture, User
Experience, Typography, HTML & CSS, whatever makes the web
beautiful
 curates http://htmlemailnuthouse.tumblr.com/ *SHAMELESS PLUG*

4.  Doctype
Webshite #1 - April

5. Webshite #2 - June

6.  HTML Email Boilerplate
 Best Practices & Tips
 Pushing the boundaries
 Resources

7. Andy Clarke / @malarkey

8. Jeremy Keith / @adactio

9. Jeremy Keith / @adactio

10. HTML5 Boilerplate
http://html5boilerplate.com

11. HTML Email Boilerplate
http://htmlemailboilerplate.com

12.  Doctype
 Mailchimp CSS Reset
 Yahoo Fixes
 Paragraph Fix
 Link Color Fix
 Shortcut Fix
 Hotmail Header Resets
 Gmail/Hotmail Image Gap Fix
 Tables, tables, tables, tables, tables, tables, tables and tables

13.  Support
 Some clients strip out doctypes
 Some replace doctypes
 Some leave them be
 Impact
 Padding / Box Model issues on IE

14.  Extracted from the Mailchimp Blueprint templates
 Resets formatting issues with several clients including some smart
phones (webkit based/windows mobile)

15. Email Blueprints
https://github.com/mailchimp/Email-Blueprints/

17.  Paragraphs
p {
margin: 1em 0;
}

19.  h1, h2, h3, h4, h5, h6 {
color: black !important;
line-height: 100% !important;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
color: blue !important;
}
h1 a:active, h2 a:active, h3 a:active, h4 a:active, h5 a:active, h6 a:active {
color: red !important; /* Preferably not the same color as the normal header link color. There is
limited support for psuedo classes in email clients, this was added just for good measure. */
}
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited {
color: purple !important; /* Preferably not the same color as the normal header link color. There is
limited support for psuedo classes in email clients, this was added just for good measure. */
}

21.  <img src="image.jpg" style="display: block;" />

24. Use a background table and cellpadding/cellspacing in place of margins

25.  Design like it’s 2011, Code like it’s 1999
 Use tables for layout, forget CSS positioning
 Don’t just rely on padding / margins
 Take advantage of cellpadding and cellspacing
 Include extra whitespace in images to serve as padding
 Typography Tips
 Try using other web-safe fonts like Century Gothic
 Don’t forget fallback fonts
 Play around with letter-spacing
 Use ‘Arial Unicode MS’ for foreign language support

26.  Follow the best practices
 Push the boundaries
 Design for mobile
 CSS3
 Horizontal/Vertical Scrolling Emails
 Deal with Image Blocking
 Dust off the animated gifs
 Bring sharing to email

27.  Design for mobile screens and preview panes
 If you’re selling something, squeeze important content in the top left
 Logo
 Products, Services
 Offer, Promotion
 Go BIG with font-size
 Go micro with copy
 Tip: W3C advises to keep mobile emails under 20K (HTML + Images)

28. That’s what a 320x240 device sees

29.  Text shadow
 Border Radius
 Animation

33.  Blame it on porn spam
 all your pretty images and graphics are blocked by default by most
email clients.
 Best solution? Get on the trusted sender list
 Email sent by you will show images automatically
 Get users to add you to their address books in your welcome email

34. It’s a good idea to make use of borders and backgrounds

35.  Make ALT text useful. Descriptive is not enough
 Instead of alt=“life size portrait made of steel”
go with alt=“[image] life size portrait made of steel”
 ‚[image/photo] …‛ lets readers know there are images so they’ll want to
see them
 Go a step further – style alt text and define buttons

36. Not useful!
“Divider” is subjective, a centered “---” would be good too
“newsletter header + title”? Try “Envato mail” and style it!

37. alt=“image”
A better alt=“[image] The Complete Handbook by Envato CEO”

38.  Convert important images to HTML
 Use STYLECampaign’s converter
 Get it free when you sign up for their newsletter (you won’t regret it!)
 Great for pixel art or solid color graphics with little or no details
 HTML output is too heavy for graphics with gradients

39. Look ma! No images!

40.  They’re back! – and not just for eye-piercing-blinking!
 Higher engagement
 Increased sales
 Use them for Call to Actions to nudge users on

41. J.Crew Newsletter
http://www.stylecampaign.com/blog/blogmails/scroll/scroll.htm

42. Toy Story 3 Newsletter
http://www.stylecampaign.com/TS3/

43.  Caveats
 Outlook 2007/2010 block animated gifs – showing only the first frame
 Workaround: Put important information on the first/last frame
 Poor mobile support
 iPhone’s render them. Webkit based phones to follow (Android, Blackberry OS 6)
 Image size
 Although, some industry leaders report campaigns that worked well with
animations that pushed 700kb

44.  facebook Like, Send and Comments
 Tweet, Retweet
 Share on Linked In
 Share anywhere
 All without JS in email *SEEMINGLY*

45. Saks Newsletter
http://www.stylecampaign.com/blog/blogmails/scroll/scroll4.htm

46. Saks Newsletter (Web Version)
http://www.stylecampaign.com/blog/blogmails/scroll/scroll4.htm

47.  Tweet URL
 http://twitter.com/share?url={URL}&text={POST}
Twitter Share URL API
http://dev.twitter.com/pages/tweet_button

48.  LinkedIn Share URL
 http://www.linkedin.com/shareArticle?mini=true&url={articleUrl}&title={ar
ticleTitle}&summary={articleSummary}&source={articleSource}
LinkedIn Share URL API
http://developer.linkedin.com/docs/DOC-1075

49. Tweetmeme
http://help.tweetmeme.com/2009/07/15/email-buttons/

51.  Get background images working in your HTML Emails
 Even in individual table cells!
 Target Outlook 2007 (I can see the IE6 fixing shudders)
 If you’ve tested with <ul> or <ol> you know how frustrating this can be
<!--[if gte mso 9]>
// This CSS will only be seen in Outlook 2007
<![endif]-->
 Get CSS inline when you’re ready to send with Pre-Mailer
 Check out Mailchimp’s ebooks

52. Premailer
http://premailer.dialect.ca

53. MailChimp
http://mailchimp.com/resources

54.  Know your CSS
 CSS for HTML Emails
 Read
 Campaign Monitor Blog
 Campaign Monitor Tips & Resources
 MailChimp Blog
 MailChimp Resources (check out their PDFs too!)
 STYLECampaign Blog
 Smith-Harmon
 Email Design Review

55.  Analyze Designer Templates
 Campaign Monitor
 45royale, Elliot Jay Stocks, Meagan Fisher, MetaLab, Mike Kus, Newism, Simon
Collison & Veerle Pieters
 MailChimp
 Dan Rubin, Elliot Jay Stocks, Jon Hicks, Khoi Vinh, Matthew Smith, Metalab, Mike
Kus & Veerle Pieters
 Be Inspired
 Beautiful Email Newsletters
 Campaign Monitor Gallery
 HTML Email Gallery

56. WebSG July 2011 Sean Thambiah / @seantsg