WebSG July 2011   Sean Thambiah / @seantsg
WebSG July 2011   Sean Thambiah / @seantsg
 Sean Thambiah, Connoisseur of Fine HTML Emails   currently Project Executive at Qais Consulting   interested in Conten...
 Doctype            Webshite #1 - April
Webshite #2 - June
 HTML Email Boilerplate Best Practices & Tips Pushing the boundaries Resources
Andy Clarke / @malarkey
Jeremy Keith / @adactio
Jeremy Keith / @adactio
HTML5 Boilerplatehttp://html5boilerplate.com
HTML Email Boilerplatehttp://htmlemailboilerplate.com
 Doctype Mailchimp CSS Reset Yahoo Fixes    Paragraph Fix    Link Color Fix    Shortcut Fix Hotmail Header Resets ...
 Support   Some clients strip out doctypes   Some replace doctypes   Some leave them be Impact   Padding / Box Model...
 Extracted from the Mailchimp Blueprint templates Resets formatting issues with several clients including some smart  ph...
Email Blueprintshttps://github.com/mailchimp/Email-Blueprints/
 Paragraphs p {     margin: 1em 0; }
   h1, h2, h3, h4, h5, h6 {        color: black !important;        line-height: 100% !important;    }    h1 a, h2 a, h3 a...
   <img src="image.jpg" style="display: block;" />
Use a background table and cellpadding/cellspacing in place of margins
 Design like it’s 2011, Code like it’s 1999    Use tables for layout, forget CSS positioning    Don’t just rely on padd...
 Follow the best practices Push the boundaries    Design for mobile    CSS3    Horizontal/Vertical Scrolling Emails  ...
 Design for mobile screens and preview panes    If you’re selling something, squeeze important content in the top left  ...
That’s what a 320x240 device sees
 Text shadow Border Radius Animation
 Blame it on porn spam    all your pretty images and graphics are blocked by default by most     email clients. Best so...
It’s a good idea to make use of borders and backgrounds
 Make ALT text useful. Descriptive is not enough    Instead of   alt=“life size portrait made of steel”     go with alt=...
Not useful!“Divider” is subjective, a centered “---” would be good too“newsletter header + title”? Try “Envato mail” and s...
alt=“image”A better alt=“[image] The Complete Handbook by Envato CEO”
 Convert important images to HTML   Use STYLECampaign’s converter      Get it free when you sign up for their newslette...
Look ma! No images!
 They’re back! – and not just for eye-piercing-blinking! Higher engagement Increased sales Use them for Call to Action...
J.Crew Newsletterhttp://www.stylecampaign.com/blog/blogmails/scroll/scroll.htm
Toy Story 3 Newsletterhttp://www.stylecampaign.com/TS3/
 Caveats   Outlook 2007/2010 block animated gifs – showing only the first frame      Workaround: Put important informat...
 facebook Like, Send and Comments Tweet, Retweet Share on Linked In Share anywhere All without JS in email *SEEMINGLY*
Saks Newsletterhttp://www.stylecampaign.com/blog/blogmails/scroll/scroll4.htm
Saks Newsletter (Web Version)http://www.stylecampaign.com/blog/blogmails/scroll/scroll4.htm
 Tweet URL   http://twitter.com/share?url={URL}&text={POST}                                                             ...
 LinkedIn Share URL   http://www.linkedin.com/shareArticle?mini=true&url={articleUrl}&title={ar     ticleTitle}&summary=...
Tweetmemehttp://help.tweetmeme.com/2009/07/15/email-buttons/
 Get background images working in your HTML Emails    Even in individual table cells! Target Outlook 2007 (I can see th...
Premailerhttp://premailer.dialect.ca
MailChimphttp://mailchimp.com/resources
 Know your CSS   CSS for HTML Emails Read   Campaign Monitor Blog      Campaign Monitor Tips & Resources   MailChimp...
 Analyze Designer Templates   Campaign Monitor       45royale, Elliot Jay Stocks, Meagan Fisher, MetaLab, Mike Kus, New...
WebSG July 2011   Sean Thambiah / @seantsg
WebSG - HTML Email Newsletters
WebSG - HTML Email Newsletters
WebSG - HTML Email Newsletters
WebSG - HTML Email Newsletters
WebSG - HTML Email Newsletters
WebSG - HTML Email Newsletters
WebSG - HTML Email Newsletters
WebSG - HTML Email Newsletters
WebSG - HTML Email Newsletters
Upcoming SlideShare
Loading in...5
×

WebSG - HTML Email Newsletters

2,053

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
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,053
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
20
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Todo: Best time to send emailSpam FilterSlide 27, Tips and Best Practices
  • Todo: Best time to send emailSpam FilterSlide 27, Tips and Best Practices
  • STRIP or IGNORE your DOCTYPE entirelyAOLAndroid Gmail ApplicationLotus Notes 6.5, 7, 8 and 8.5Outlook 2007 and 2010Thunderbird 2 and 3Yahoo NewACCEPT your DOCTYPEAndroid Mail ClientEntourage 04 and 08iPad and iPad GmailiPhone and iPhone GmailLive MailOutlook 2003Outlook ExpressWindows MailEach will remove your DOCTYPE, and replace it with:&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;&gt;Gmail &amp; HotmailRemoves your DOCTYPE, and replaces it with:&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot; &quot;http://www.w3.org/TR/html4/loose.dtd&quot;&gt;Yahoo Classic
  • Hotmail replaces your header color styles with a green color on H2, H3, H4, H5, and H6 tags. In this example, the color is reset to black. Replace black with your choice of color. The !important is really what is overriding Hotmail&apos;s styling.NOTE: Hotmail also sets the H1 and H2 tags to the same size.
  • Hotmail replaces your header color styles with a green color on H2, H3, H4, H5, and H6 tags. In this example, the color is reset to black. Replace black with your choice of color. The !important is really what is overriding Hotmail&apos;s styling.NOTE: Hotmail also sets the H1 and H2 tags to the same size.
  • Text-shadow, animation for WebkitBorder Radius works on mobile clients too
  • A/B Testing, involving a vertical emailer and a horizontal one.The horizontal one won.
  • Transcript of "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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×