Email Best Practices

This is a presentation (my very first!) I recently did highlighting some email best design practices.

Transcript

1. EMAIL BEST PRACTICES How to get the best results. Guaranteed or your money back.* *No, it’s not really guaranteed. At all. And this is free.
2. Who Am I?
3. Ryan Boone • Graphic Designer at Inprov 
 for 8 years • Clients include Joel Osteen, 
 The A21 Campaign and Christine Caine • Avid door opener • I LOVE web development
4. HTML email is hard “Designing HTML email is like performing brain surgery with a ballpeen hammer and a spoon while strapped to the back of a Russian tank traveling at full speed.” — someone unimportant
5. • Outdated coding techniques from the 90’s • There are no standards and spotty support for consistent styling • Super buggy implementations of features
6. • It allows you to engage with your audience through hyperlinks • It allows you to design elements that reinforce you brand • It can make emails easier to scan/read • It allows you to track and optimize your marketing efforts So, why use HTML email? http://alistapart.com/article/can-email-be-responsive
7. So, we’re using HTML (duh), but there are several hurdles 
 to overcome.
9. I don’t like Spam • Don’t use spammy language • DON’T USE ALL CAPS • Don’t go crazy with the exclamation points!!!!!!!!!!!!!!!!! • Use a reputable list with a tested email service provider 
 (Campaign Monitor) • High hard bounce rates could mean your email’s been blacklisted
11. Gain trust • Use a clear, recognizable From Name 
 (usually the company name or personality) • Don’t use a no-reply as the Reply To 
 (no-reply@mail.never.contact.me.ever) • Make it clear that they subscribed to your email list
12. Get the open • Use a straightforward Subject Line (50 character max) • Use a relevant Snippet (first 100 characters in the email) • Offer content the mailing list wants
14. • Layout – Design for a variety of screens and screen sizes • Images – Design it to be readable with blocked images • CTA – Optimize the calls to action for easy identification 
 and clickability (is that a word?) Design for the worst case scenario
15. Layout • Scalable (Mobile Aware) • Fluid Design • Responsive Email
16. Scalable • Large text (16px minimum with 150% line height) • Large calls-to-action/buttons • Simple layout (usually single column)
17. Scalable • Easy to implement • One-size-fits-all approach • Not very dynamic
18. Scalable
19. Fluid Design • Flexible container • Text “flows” in the container • Simple layout
20. Fluid Design • Relatively easy to implement • Adjusts to the width of the device • Can result in line lengths that are uncomfortable for reading • Outdated format
21. Fluid Design
22. Responsive Design • Determines what layout to use based on code • Can hide or show different elements, shrink or expand images, and change the font size based on the device the email is viewed on • Can go from complex, multicolumn layouts for desktop to a simple, single column layout for mobile
23. Responsive Design • Very dynamic • Serve up the content in the best possible manner to individuals • Very difficult to produce correctly • Support is spotty • Responsive templates (Campaign Monitor)
24. Responsive Design
25. • Don’t make the email all images Images
26. Images
27. Images • Use alt text for images (style with inline styles)
28. Images
29. Images • Consider enhancing your no-images version with faked graphics
30. Images
31. • Can be an image, text or button • If it looks like a link, make it a link • Touch friendly (44px x 44px minimum, ample space surrounding it) Call-to-action (CTA)
32. • As high in the layout as possible • Use contrast of color, size, shape, and negative space 
 to grab attention • If the email's long, consider repeating the CTA later in the email Call-to-action (CTA)
33. Conclusion (finally)
34. So, how do you get 
 the best results with email?
35. • A/B test everything (Campaign Monitor has some great tools 
 to make this easier to do) • Actually use the data, don't rely on other campaigns; every audience is different and responds differently • Always check what your layout looks like on multiple devices. • Read email blogs; there is always new research to use Test. Test. Test.
36. Resources • Campaign Monitor • Mailchimp • Litmus
37. Thank you. May you make emails with the burning passion of a thousand suns.