Tuesday, November 13, 12
The State of HTML            Email Newsletters            Email Client Obstacles            & Restrictions            Desi...
The Email Environment            WHAT DOES IT MEAN?!?Tuesday, November 13, 12
The Email Environment            GmailTuesday, November 13, 12
The Email Environment            outlookTuesday, November 13, 12
The Email Environment            mmmm hotmailTuesday, November 13, 12
Your mission:             Design with a goal in mind             Be useful             Less is more but still GET ATTENTIO...
Sizing it up            Use a fixed width of no more than 550-600px            Average preview pane is 300-500px           ...
The Preview Pain...            It’s more like            250 x 250pxTuesday, November 13, 12
The Preview Pain... Challenge!            Introduce yourself, entice further reading, offer            a link to site/view...
Retail Emails Do It RightTuesday, November 13, 12
Images not displayed?!Tuesday, November 13, 12
Images not displayed?!            Link to view in browserTuesday, November 13, 12
Images not displayed?!             Use alt text             Some email clients will apply CSS to alt text.Tuesday, Novembe...
Plain Textin’            Include a plain text version          Blackberry Curve     Other Blackberry   Nokia SymbianTuesda...
Images not displayed?!             Stick with live text             Esp. for the important stuff             “Add me to yo...
Code like it’s 1999            Code for the Lowest Common Denominator            Provide fallbacks - Be degradable        ...
Woah ThereTuesday, November 13, 12
Think of it as a challengeTuesday, November 13, 12
Email Client Popularity            credit: campaignmonitor.com/resources/will-it-work/email-clientsTuesday, November 13, 12
Top Clients for GroovesharkTuesday, November 13, 12
Mobile is in the Lead            credit: campaignmonitor.com/resources/will-it-work/email-clientsTuesday, November 13, 12
Mobile is in the Lead            credit: campaignmonitor.com/resources/will-it-work/email-clientsTuesday, November 13, 12
Layout: Use Tables            Use empty cells, nested tables            Be a Dreamweaver            Set width on every cel...
Reset & Define Everything            Don’t rely on header styling            Only inline styles on each instance of a tag ...
Inline Styling Example            Hey y’all!            <p style=”font-weight:bold; font-size: 18px; font-color:          ...
Avoid Shorthand            Good: color: #ff6600     Bad: color: #f60            Good:             font-weight: bold;      ...
Images            Avoid spacer images            Include all dimensions and size image to            declared size        ...
Display Hack for Hotmail             Windows Live Hotmail adds a few pixels of             additional padding below images...
Degradable Coding             Provide fallback colors for background images             Alt text or live text links for ev...
InspirationsTuesday, November 13, 12
InspirationsTuesday, November 13, 12
InspirationsTuesday, November 13, 12
Tuesday, November 13, 12
InspirationsTuesday, November 13, 12
Inspirations             When it comes to email,             code like its 1999.             Design like its 2012.        ...
Just remember this okay?            Design:             Keep it simple             Take advantage of what you can do      ...
Resources            inlinestyler.torchboxapps.com/styler            premailer.dialect.caTuesday, November 13, 12
Resources            campaignmonitor.com            mailchimp.com            htmlemailgallery.com, emaildesigngallery.com:...
H ave Fun                               ha ll th at!                           witTuesday, November 13, 12
Credits            Email Design Tip: The 250px box by Ben from MailChimp (mailchimp.com/blog/email-design-            tip-...
Upcoming SlideShare
Loading in …5
×

HTML Email Newsletters: Design, Code & Strategy

4,260 views

Published on

HTML Email Newsletters: Design, Code & Strategy

Published in: Design
1 Comment
6 Likes
Statistics
Notes
  • Damn Microsoft once again and their stupid hotmail.
    Display: Block! thank you!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
4,260
On SlideShare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
68
Comments
1
Likes
6
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • HTML Email Newsletters: Design, Code & Strategy

    1. 1. Tuesday, November 13, 12
    2. 2. The State of HTML Email Newsletters Email Client Obstacles & Restrictions Design for the Environment Code like it’s 1999Tuesday, November 13, 12
    3. 3. The Email Environment WHAT DOES IT MEAN?!?Tuesday, November 13, 12
    4. 4. The Email Environment GmailTuesday, November 13, 12
    5. 5. The Email Environment outlookTuesday, November 13, 12
    6. 6. The Email Environment mmmm hotmailTuesday, November 13, 12
    7. 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. 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 growthTuesday, November 13, 12
    9. 9. The Preview Pain... It’s more like 250 x 250pxTuesday, November 13, 12
    10. 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. 11. Retail Emails Do It RightTuesday, November 13, 12
    12. 12. Images not displayed?!Tuesday, November 13, 12
    13. 13. Images not displayed?! Link to view in browserTuesday, November 13, 12
    14. 14. Images not displayed?! Use alt text Some email clients will apply CSS to alt text.Tuesday, November 13, 12
    15. 15. Plain Textin’ Include a plain text version Blackberry Curve Other Blackberry Nokia SymbianTuesday, November 13, 12
    16. 16. Images not displayed?! Stick with live text Esp. for the important stuff “Add me to your address book” Send through a reputable providerTuesday, November 13, 12
    17. 17. Code like it’s 1999 Code for the Lowest Common Denominator Provide fallbacks - Be degradable Define EVERYTHINGTuesday, November 13, 12
    18. 18. Woah ThereTuesday, November 13, 12
    19. 19. Think of it as a challengeTuesday, November 13, 12
    20. 20. Email Client Popularity credit: campaignmonitor.com/resources/will-it-work/email-clientsTuesday, November 13, 12
    21. 21. Top Clients for GroovesharkTuesday, November 13, 12
    22. 22. Mobile is in the Lead credit: campaignmonitor.com/resources/will-it-work/email-clientsTuesday, November 13, 12
    23. 23. Mobile is in the Lead credit: campaignmonitor.com/resources/will-it-work/email-clientsTuesday, November 13, 12
    24. 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. 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-familyTuesday, November 13, 12
    26. 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. 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. 28. Images Avoid spacer images Include all dimensions and size image to declared size Avoid PNGs Provide fallback colors for background imagesTuesday, November 13, 12
    29. 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. 30. Degradable Coding Provide fallback colors for background images Alt text or live text links for everything! CSS for Alt tagsTuesday, November 13, 12
    31. 31. InspirationsTuesday, November 13, 12
    32. 32. InspirationsTuesday, November 13, 12
    33. 33. InspirationsTuesday, November 13, 12
    34. 34. Tuesday, November 13, 12
    35. 35. InspirationsTuesday, November 13, 12
    36. 36. Inspirations When it comes to email, code like its 1999. Design like its 2012. - Some Campaign Monitor BloggerTuesday, November 13, 12
    37. 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. 38. Resources inlinestyler.torchboxapps.com/styler premailer.dialect.caTuesday, November 13, 12
    39. 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.caTuesday, November 13, 12
    40. 40. H ave Fun ha ll th at! witTuesday, November 13, 12
    41. 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

    ×