HTML Email Newsletters: Design, Code & Strategy

1. Tuesday, November 13, 12

2. The State of HTML
Email Newsletters
Email Client Obstacles
& Restrictions
Design for the Environment
Code like it’s 1999
Tuesday, November 13, 12

3. The Email Environment
WHAT DOES IT MEAN?!?
Tuesday, November 13, 12

4. The Email Environment
Gmail
Tuesday, November 13, 12

5. The Email Environment
outlook
Tuesday, November 13, 12

6. The Email Environment
mmmm hotmail
Tuesday, November 13, 12

7. Your mission:
Design with a goal in mind
Be useful
Less is more but still GET ATTENTION
Be trustworthy: make unsubscribing easy!
Tuesday, November 13, 12

8. Sizing it up
Use a fixed width of no more than 550-600px
Average preview pane is 300-500px
that’s generous
Design for vertical growth
Tuesday, November 13, 12

9. The Preview Pain...
It’s more like
250 x 250px
Tuesday, November 13, 12

10. The Preview Pain... Challenge!
Introduce yourself, entice further reading, offer
a link to site/view email in browser
Left-align your company logo.
It gives you credibility.
Try to get your call to action above the scroll.
Tuesday, November 13, 12

11. Retail Emails Do It Right
Tuesday, November 13, 12

12. Images not displayed?!
Tuesday, November 13, 12

13. Images not displayed?!
Link to view in browser
Tuesday, November 13, 12

14. Images not displayed?!
Use alt text
Some email clients will apply CSS to alt text.
Tuesday, November 13, 12

15. Plain Textin’
Include a plain text version
Blackberry Curve Other Blackberry Nokia Symbian
Tuesday, November 13, 12

16. Images not displayed?!
Stick with live text
Esp. for the important stuff
“Add me to your address book”
Send through a reputable provider
Tuesday, November 13, 12

17. Code like it’s 1999
Code for the Lowest Common Denominator
Provide fallbacks - Be degradable
Define EVERYTHING
Tuesday, November 13, 12

18. Woah There
Tuesday, November 13, 12

19. Think of it as a challenge
Tuesday, November 13, 12

20. Email Client Popularity
credit: campaignmonitor.com/resources/will-it-work/email-clients
Tuesday, November 13, 12

21. Top Clients for Grooveshark
Tuesday, November 13, 12

22. Mobile is in the Lead
credit: campaignmonitor.com/resources/will-it-work/email-clients
Tuesday, November 13, 12

23. Mobile is in the Lead
credit: campaignmonitor.com/resources/will-it-work/email-clients
Tuesday, November 13, 12

24. Layout: Use Tables
Use empty cells, nested tables
Be a Dreamweaver
Set width on every cell and Don’t rely on
margin or padding.
Avoid extra space in between <td> and
<img> tags
No floating!
Tuesday, November 13, 12

25. Reset & Define Everything
Don’t rely on header styling
Only inline styles on each instance of a tag
Leave nothing to interpretation
Set all margins and padding to zero
The Usuals: font-size, color, text-decoration,
font-weight, font-family
Tuesday, November 13, 12

26. Inline Styling Example
Hey y’all!
<p style=”font-weight:bold; font-size: 18px; font-color:
#ff6600; font-family: Helvetica, Arial, Lucida Grande,
Verdana, sans-serif; padding:0; margin:0; line-height:
20px;”>Hey y’all!</p>
Tuesday, November 13, 12

27. Avoid Shorthand
Good: color: #ff6600 Bad: color: #f60
Good:
font-weight: bold;
font-size: 12px;
font-family: georgia, times, serif;
Bad:
font: bold 12px georgia, times, serif;
Tuesday, November 13, 12

28. Images
Avoid spacer images
Include all dimensions and size image to
declared size
Avoid PNGs
Provide fallback colors for background images
Tuesday, November 13, 12

29. Display Hack for Hotmail
Windows Live Hotmail adds a few pixels of
additional padding below images.
Workaround: img {display: block;}
Tuesday, November 13, 12

30. Degradable Coding
Provide fallback colors for background images
Alt text or live text links for everything!
CSS for Alt tags
Tuesday, November 13, 12

31. Inspirations
Tuesday, November 13, 12

32. Inspirations
Tuesday, November 13, 12

33. Inspirations
Tuesday, November 13, 12

34. Tuesday, November 13, 12

35. Inspirations
Tuesday, November 13, 12

36. Inspirations
When it comes to email,
code like it's 1999.
Design like it's 2012.
- Some Campaign Monitor Blogger
Tuesday, November 13, 12

37. Just remember this okay?
Design:
Keep it simple
Take advantage of what you can do
Code:
Be Redundant
Be Degradable
Test, test, test
Also, just break a few rules.
Tuesday, November 13, 12

38. Resources
inlinestyler.torchboxapps.com/styler
premailer.dialect.ca
Tuesday, November 13, 12

39. Resources
campaignmonitor.com
mailchimp.com
htmlemailgallery.com, emaildesigngallery.com:
Email design galleries, some tips
emaildesignreview.com:
Inspiration, Tips & Insights into the industry
Inline Stylers:
inlinestyler.torchboxapps.com/styler
premailer.dialect.ca
Tuesday, November 13, 12

40. H ave Fun
ha ll th at!
wit
Tuesday, November 13, 12

41. Credits
Email Design Tip: The 250px box by Ben from MailChimp (mailchimp.com/blog/email-design-
tip-the-250-pixel-box)
Email Design Guidelines from Campaign Monitor (campaignmonitor.com/design-guidelines)
Design: HTML Email: Design Techniques: Part 1 by Think Vitamin with Nick Pettit
(membership.thinkvitamin.com/library/design/html-e-mail/design-techniques-part-1)
Rock Solid HTML Emails by David Greiner (24ways.org/2009/rock-solid-html-emails)
20 Email Design Best Practices and Resources for Beginners (net.tutsplus.com/tutorials/
html-css-techniques/20-email-design-best-practices-and-resources-for-beginners)
Make The Best First Impression: 7 Tips for the Most Effective Welcome and Confirmation
Emails (emaildesignreview.com/email-design-best-practice/make-the-best-first-
impression-7-tips-for-the-most-effective-welcome-and-confirmation-emails-192)
Stupid HTML Email Design Mistakes (http://www.mailchimp.com/articles/stupid-html-email-
design-mistakes)
Bernie Marger!
Tuesday, November 13, 12