Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Designing Emails That Actually Work

28,078 views

Published on

These are the slides I presented at Mixwest 2014, a digital marketing conference in Indianapolis, Indiana. My topic was designing and building emails that perform well and deliver results on screens and devices of all kinds.

Published in: Design, Marketing
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Lindsay, would you NOT agree that -Design alone is not the same as good messaging alone; while Design WITH Messaging is most powerful to build (and retain) response.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Lindsay, while i agree with the bulk of your "design' comments in terms of increased visibility where was the messaging writing tips that keep all good communication (whatever the platform) communicating? Design will not work without a strong memorable message to make the mails point...
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Thanks for sharing such an informative and interesting presentation with us.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Designing Emails That Actually Work

  1. @lindsaylee13
  2. @lindsaylee13
  3. @lindsaylee13 @lindsaylee13
  4. Email is Your Friend; It Does Not Suck. @lindsaylee13
  5. You Can Create Emails That Perform Well and Deliver Results. @lindsaylee13
  6. @lindsaylee13
  7. @lindsaylee13
  8. @lindsaylee13
  9. @lindsaylee13
  10. @lindsaylee13
  11. @lindsaylee13
  12. The subscriber experience is the flow in which someone digests your email before converting. @lindsaylee13
  13. From Name Subject Line Preheader Open Preview Pane Full Message Tap/Click Landing Page @lindsaylee13
  14. From Name ✔
  15. @lindsaylee13 Subject Line ✔
  16. @lindsaylee13 Preheader ✔
  17. @lindsaylee13 Open
  18. @lindsaylee13 Preview Pane
  19. @lindsaylee13 Full Message
  20. @lindsaylee13 Tap/Click
  21. @lindsaylee13 Landing Page
  22. @lindsaylee13
  23. Concise Content Over Length • Your email is a doorway into other channels • Tell them the essentials
  24. Scannable Layout • Clear headings • One or two column layout • Contrast of weight and color for content distinction
  25. Make Your Calls to Action Obvious • Only have a few moments to catch attention • Can you narrow down to one main CTA? • Repeat your main CTAs
  26. Be Transparent in Your Language NO • Click Here • Big Announcement! • You Don’t Want to Miss This! • New Items YES • Donate Now • Sign Up for Our Webinar • Start Your Free Trial Now • We Have New Shoes
  27. Remember Image Blocking • When possible, use HTML text instead of graphical text • Alt text is your friend
  28. Design with Mobile in Mind • 65% of all opens are on mobile • Single column layout • Make headlines ~28px • Body copy ~16-20px
  29. …More Mobile Considerations • Think about elements you see in apps • What can be communicated through icons? • Let your content breathe • Huge buttons
  30. Fun Stuff • Animated GIFs can add extra interactivity • Video…
  31. @lindsaylee13
  32. Email HTML CSS Images Text Design Links Hierarchy Web HTML CSS Images Text Design Links Hierarchy ✔ ✔ ✔ ✔ ✔ ✔ ✔ Some Ways Email and the Web are the Same
  33. Web <div> <h1> <p> em <style> background-color margin Email <table> <td> <td> px style=“font-face” bgcolor padding Some Ways Email and the Web are Different
  34. Time to Code Like its 1999
  35. Tables are Your BFFs • Use nested tables to structure the layout of your email • Poor support for CSS positioning, floats, and clears <table width=“600”><tr><td> <table width=“100%” cellspacing="0" cellpadding="0" border="0"> <tr> <td width=“250”></td> <td width="350"></td> </tr> </table> </td></tr></table>
  36. KYSS (Keep Your Styles Simple) • Inline CSS • Don’t attach styles externally • Can use some CSS3 but proceed with caution <table> <tr> <td style=“font-family:Helvetica, sans-serif; font-size:16px; font- weight:bold; color:#e98300;>Hi, I’m text!</td> </tr> </table> Hi, I’m text!
  37. Styling Block-Level Elements <h1>I am a headline</h1> <td style=“font-size:24px;font-weight:bold;>This is a headline in email</td> <p>I am a paragraph</p> <td style=“font-size:18px;font-weight:bold;>This is a paragraph in email</td> ✔ ✔
  38. Format Perfect Images • Style alt attributes • Set borders to “0” • Add style=“display:block” to prevent gaps • Set height and widths <img src=“http://www.emails.com/image/cat.j pg” height=“250” width=“200” alt=“Cute kitty” style=“display:block; font- family:Helvetica; color:#0084ff; font- size:18px;” border=“0”>
  39. What About Responsiveness?
  40. Responsive Email Uses Media Queries
  41. @lindsaylee13
  42. There are tons of email clients out there @lindsaylee13
  43. Know Your Audience • You never know…sometimes plain text emails will do the trick • Look for the lowest common denominator
  44. Email Client Market Share Stats from Litmus’ emailclientmarketshare.com, June 2014
  45. 65%of all emails are opened on a mobile device
  46. Test, test, test
  47. @lindsaylee13
  48. @lindsaylee13 Litmus Learning Center litmus.com/learning • Email client market share • Code tips
  49. @lindsaylee13 Email Design Review emaildesignreview.com • Lots of inspirational email design
  50. @lindsaylee13 ExactTarget Blog blog.exacttarget.com • Current market trends • Home to the Email Swipe Files
  51. @lindsaylee13 Email Swipe File on Pinterest pinterest.com/exacttarget/ email-swipe-file/ • Curated examples of great email design
  52. @lindsaylee13 Some People I Follow on Twitter ETMC Design @ETMC_Design Andrea Smith @andreasmith77 Chad White @chadswhite Justine Jordan @meladorri Brian Graves @briangraves Anna Yeaman @stylecampaign
  53. Thank You! @lindsaylee13

×