Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

WebSG - HTML Email Newsletters

2,820 views

Published on

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

Published in: Technology, Art & Photos
  • Be the first to comment

WebSG - HTML Email Newsletters

  1. 1. WebSG July 2011 Sean Thambiah / @seantsg
  2. 2. WebSG July 2011 Sean Thambiah / @seantsg
  3. 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. 4.  Doctype Webshite #1 - April
  5. 5. Webshite #2 - June
  6. 6.  HTML Email Boilerplate Best Practices & Tips Pushing the boundaries Resources
  7. 7. Andy Clarke / @malarkey
  8. 8. Jeremy Keith / @adactio
  9. 9. Jeremy Keith / @adactio
  10. 10. HTML5 Boilerplatehttp://html5boilerplate.com
  11. 11. HTML Email Boilerplatehttp://htmlemailboilerplate.com
  12. 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. 13.  Support  Some clients strip out doctypes  Some replace doctypes  Some leave them be Impact  Padding / Box Model issues on IE
  14. 14.  Extracted from the Mailchimp Blueprint templates Resets formatting issues with several clients including some smart phones (webkit based/windows mobile)
  15. 15. Email Blueprintshttps://github.com/mailchimp/Email-Blueprints/
  16. 16.  Paragraphs p { margin: 1em 0; }
  17. 17.  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. */ }
  18. 18.  <img src="image.jpg" style="display: block;" />
  19. 19. Use a background table and cellpadding/cellspacing in place of margins
  20. 20.  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
  21. 21.  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
  22. 22.  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)
  23. 23. That’s what a 320x240 device sees
  24. 24.  Text shadow Border Radius Animation
  25. 25.  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
  26. 26. It’s a good idea to make use of borders and backgrounds
  27. 27.  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
  28. 28. Not useful!“Divider” is subjective, a centered “---” would be good too“newsletter header + title”? Try “Envato mail” and style it!
  29. 29. alt=“image”A better alt=“[image] The Complete Handbook by Envato CEO”
  30. 30.  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
  31. 31. Look ma! No images!
  32. 32.  They’re back! – and not just for eye-piercing-blinking! Higher engagement Increased sales Use them for Call to Actions to nudge users on
  33. 33. J.Crew Newsletterhttp://www.stylecampaign.com/blog/blogmails/scroll/scroll.htm
  34. 34. Toy Story 3 Newsletterhttp://www.stylecampaign.com/TS3/
  35. 35.  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
  36. 36.  facebook Like, Send and Comments Tweet, Retweet Share on Linked In Share anywhere All without JS in email *SEEMINGLY*
  37. 37. Saks Newsletterhttp://www.stylecampaign.com/blog/blogmails/scroll/scroll4.htm
  38. 38. Saks Newsletter (Web Version)http://www.stylecampaign.com/blog/blogmails/scroll/scroll4.htm
  39. 39.  Tweet URL  http://twitter.com/share?url={URL}&text={POST} Twitter Share URL API http://dev.twitter.com/pages/tweet_button
  40. 40.  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
  41. 41. Tweetmemehttp://help.tweetmeme.com/2009/07/15/email-buttons/
  42. 42.  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
  43. 43. Premailerhttp://premailer.dialect.ca
  44. 44. MailChimphttp://mailchimp.com/resources
  45. 45.  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
  46. 46.  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
  47. 47. WebSG July 2011 Sean Thambiah / @seantsg

×