WebSG - HTML Email Newsletters
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

WebSG - HTML Email Newsletters

on

  • 2,551 views

HTML Email Boilerplate, best practices and boundary-pushing tips and tricks. Shared at WebSG, 6th July 2011....

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

Statistics

Views

Total Views
2,551
Views on SlideShare
2,543
Embed Views
8

Actions

Likes
1
Downloads
18
Comments
0

5 Embeds 8

https://twitter.com 3
http://tweetedtimes.com 2
http://www.slideshare.net 1
http://twitter.com 1
http://www.docshut.com 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">Gmail & HotmailRemoves your DOCTYPE, and replaces it with:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">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'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'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.

WebSG - HTML Email Newsletters Presentation Transcript

  • 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 Boilerplatehttp://html5boilerplate.com
  • 11. HTML Email Boilerplatehttp://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 Blueprintshttps://github.com/mailchimp/Email-Blueprints/
  • 16.  Paragraphs p { margin: 1em 0; }
  • 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.  <img src="image.jpg" style="display: block;" />
  • 19. Use a background table and cellpadding/cellspacing in place of margins
  • 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.  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.  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. That’s what a 320x240 device sees
  • 24.  Text shadow Border Radius Animation
  • 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. It’s a good idea to make use of borders and backgrounds
  • 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. Not useful!“Divider” is subjective, a centered “---” would be good too“newsletter header + title”? Try “Envato mail” and style it!
  • 29. alt=“image”A better alt=“[image] The Complete Handbook by Envato CEO”
  • 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. Look ma! No images!
  • 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. J.Crew Newsletterhttp://www.stylecampaign.com/blog/blogmails/scroll/scroll.htm
  • 34. Toy Story 3 Newsletterhttp://www.stylecampaign.com/TS3/
  • 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.  facebook Like, Send and Comments Tweet, Retweet Share on Linked In Share anywhere All without JS in email *SEEMINGLY*
  • 37. Saks Newsletterhttp://www.stylecampaign.com/blog/blogmails/scroll/scroll4.htm
  • 38. Saks Newsletter (Web Version)http://www.stylecampaign.com/blog/blogmails/scroll/scroll4.htm
  • 39.  Tweet URL  http://twitter.com/share?url={URL}&text={POST} Twitter Share URL API http://dev.twitter.com/pages/tweet_button
  • 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. Tweetmemehttp://help.tweetmeme.com/2009/07/15/email-buttons/
  • 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. Premailerhttp://premailer.dialect.ca
  • 44. MailChimphttp://mailchimp.com/resources
  • 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.  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. WebSG July 2011 Sean Thambiah / @seantsg