People are often exasperated with the constraints around HTML email. This presentation is meant to teach more about HTML Email and how to get started while also inspiring others to push the boundaries and have fun with it.

1. BOXED INHow not to feel when you’re
making html emails.

2. You may have
heard some
bad rumors
about me.

3. MailChimp.com

4. Email Environment
Prepare for battle.

11. Handling the Preview Pain
• Left align your company logo
• Use your subject line to excite some mystery
(sometimes known as click bait)
• Start off copy strong, lead the user in.
• Try to get a strong CTA above the “scroll”.

12. Design Specs
Know your limitations, then test them.

13. • Throw out that idea of
650px or less and design
for mobile first.
• Simple layouts are best

15. Design Notes
• Optimize for mobile: avoid multiple column layouts,
• Limit the amount of images you use
• Strive to have live text rather than images

16. Coding for
email is
unique…

17. Code Specs
• Use tables for layout
• In-line styling
• Be redundant. Define styling on everything. Have a
hay day with the !important tag. Leave nothing up to
interpretation.
• Code for the lowest comment denominator

18. In-line styling
I like cheese
<span style=“font-size: 62px; font-weight: bold; color:
#ffcc66; line-height: 82px; margin:0; padding:0; font-
family: Open Sans, Helvetica, Arial, Lucida Grande,
sans-serif;”>I like cheese</span>

19. CSS support is inconsistent

20. Mobile is taking off

21. Can & Can’t
• No floating… be a dreamweaver instead. Use spacer
cells and nested tables.
• Don’t trust margins, padding
• Avoid using <p> or <h1> tags
• Avoid table cell padding: Outlook will take the
padding from any cell in a row and apply it to all of
the cells in the row.

22. Code Tips
• Full body background colors are hard to get.
• Background images not fully supported
• Avoid unnecessary whitespace in table cells
• Avoid extra space between <img> tags and their
containers.

23. Images not displayed
• Avoid spacer images
• Declare all dimensions
• Not much support for transparency
• Provide fallback colors or alt text

26. Use the title tag
strategically

27. Test, test, test!

28. Pro-active
• Announcements that are relative (New Features,
services)
• Welcomes & Check-ins (“Happy Birthday!”)
• Helpful tips, tricks (recipes, related services)
• Newsletters (Take the opportunity to create goodwill)

29. Reactive
• Transactionals: new share, comment, follow.
• Customers have experienced difficulty recently
• Customers have been inactive

30. Inspiration
Break those rules you just learned.

40. That’s it!
Thank you for your time :)

41. CampaignMonitor.com
Litmus.com
MailChimp.com
Resources
Everything you could need is on these 3 websites.

42. A Few Favorites
• CSS support chart: www.campaignmonitor.com/css
• Free templates: https://github.com/mailchimp/
email-blueprints/tree/master/templates
• GIFs guide: https://litmus.com/blog/a-guide-to-
animated-gifs-in-email
• Inspiration: http://reallygoodemails.com/

43. Rock Solid HTML Emails by David Greiner (24ways.org/2009/rock-solid-html-emails)
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)
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)
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)
Stupid HTML Email Design Mistakes (http://www.mailchimp.com/articles/stupid-html-email-
design-mistakes)
Ok, here’s everything