Design by Numbers: Taking your creative beyond the code

557
-1

Published on

Learn how to utilize data to create smart, effective, and of course great
looking emails. We'll cover best practices for mobile, attention-grabbing
animations, how to optimize emails when images are turned off and much
more. Real-life industry examples and tactics will help you walk away with
a new creative outlook on email design

Published in: Business, Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
557
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Design by Numbers: Taking your creative beyond the code

  1. 1. Design by Numbers David KepetsCreative Director, Strategic Services
  2. 2. On average47% of openersread or skimwithin 4-11seconds.
  3. 3. Perfecting theright formulaof contentand layout.
  4. 4. Lets play alittle gameof memory.
  5. 5. Lets play alittle gameof memory.
  6. 6. Key components for any email MOBILE SUBJECT LINE | PRE-HEADER LINE BRAND CUSTOMER TARGETING CLEAR MESSAGING & HIERARCHY CALL-TO-ACTION SOCIAL
  7. 7. SUBJECT LINEChoosing the Right Words: 71%A Guide to Optimizing of subject lines are Direct messages butEmail Subject Lines Fun and Curiosity have the highest unique open rates.CURIOSITY, FUN, DIRECT, RELATIONSHIPS
  8. 8. SUBJECT LINE CURIOSITY What’s red, blue and waiting for you? Questions, riddles and unfinished thoughts evoke a sense of mystery and question in the reader so they will want to read more. FUNTravel to Ireland and feel like you’re walking on Eire Humor, puns, plays on words, and provocative language are used to surprise subscribers and keep them wanting to keep reading. DIRECT Extra 40% Off Sale (Today Only!) Clear and to the point, direct messages use urgency, succinctness, promotions, and price incentives. RELATIONSHIPS Adele Fans! Get Her New Album Here Subject lines help readers identify with the products by their association with some group or special interest. These can include social media, special events, member newsletters, or group buying sites.
  9. 9. PRE-HEADER LINE
  10. 10. PRE-HEADER LINE Overall clicks can range in this area but could show a lift if positioned right!
  11. 11. PRE-HEADER LINE Compliment If you are unable to see the message below, Entice click here to view. Actionable Personalize Limit to 75 characters Your Daily New York City Groupon Go to Groupon.com | UnsubscribeBe sure to add mail@e.groupon.com to your address book or safe sender list so our email get to your inbox. Learn how
  12. 12. CUSTOMER TARGETING
  13. 13. CUSTOMER TARGETING
  14. 14. CUSTOMER TARGETING 80 % Increase in Mobile opens over the last 6 months
  15. 15. CALL-TO-ACTION
  16. 16. CALL-TO-ACTION Test Be Relevant Buttons over text High contrast Size & position
  17. 17. CALL-TO-ACTION Test Be Relevant Buttons over text High contrast Size & position
  18. 18. SOCIAL 1-2-3 Pinterest cannot be ignored with over 100 million total visits per month
  19. 19. SOCIAL Be Relevant Add messaging Promote Position can vary
  20. 20. 80 %Increase in Mobileopens over the last6 months
  21. 21. Responsive Design Mobile Friendly RD MF 20 % iPhone and Outlook are in a near-tie for overall email opens
  22. 22. RD
  23. 23. Uses CSS Best used with aStacked content RD set template.Mostly HTML text Try adding it to aLimited imagery triggered Mailing.
  24. 24. Without Media Query With Media Query / Fluid Layouts
  25. 25. Gmail with Media Query / Fluid Layouts
  26. 26. MF
  27. 27. 1. Reduced width 3. Positioning2. Increase size of MF of CTA’s copy and CTA’s
  28. 28. Old Template New Mobile Friendly 560-600 pixels wide 40 pixel radius around each CTA 14-16+ point size
  29. 29. Design for mobileResponsive Design Mobile Friendly• Plan ahead • Reduced width• Use as a template 560-580 pixels• Mostly HTML Text • Increase point size & CTA• Limited Imagery • Radius of 40 pixels for• Extensive QA each CTA• Not compatible • Full compatibility with gmail apps
  30. 30. How can westand apart andpull ahead?
  31. 31. Add somemovementAnthropologieAnimation / Pinterest
  32. 32. Add somemovementSony Entertainment NetworkAnimation / Reactivation
  33. 33. Add somemovementSony Entertainment NetworkAnimation / Reactivation
  34. 34. Add life toimages offDIRECTVMobile Friendly
  35. 35. Add life toimages offDIRECTVMobile Friendly
  36. 36. Add life toimages offFox / Family Guy OnlineImages Off
  37. 37. Add life toimages offFox / Family Guy OnlineImages Off
  38. 38. Add real-timecontent withliveTweetsDIRECTV
  39. 39. Thank YouDavid.Kepets@Experian.com

×