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
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*
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)
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. */
}
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)
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!
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
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*
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
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.