HTML Email Boilerplate, best practices and boundary-pushing tips and tricks. Shared at WebSG, 6th July 2011. Be sure to view the Ice Cream and Toy Story emails in your browser. Links in a bundle here: http://bit.ly/websg-htmlemail Download the presentation here: http://seanthambiah.com/speaking/WebSG_HTMLEmail_6thJul.zip

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