This Sexy Email Event presentation of Lisa Harmon is full of tips and tricks and recommended practices for creating email campaign concepts.

1. 2 december 2010 Lisa Harmon / Responsys Undercurrent - Amsterdam

2. © 2010 responsys email creative that works Lisa Harmon, Creative Services VP

3. the challenge © 2010 responsys the inbox & the client

4. what is good creative? © 2010 responsys Success is dependent on a unique set of considerations

5. what is good creative? © 2010 responsys Success is dependent on a unique set of considerations

6. Print, web & email design © 2010 responsys What works for print does not always translate well to email. Recipients rarely see an email in its entirety, so information hierarchy is critical, with the most important information at the top, working down. Images can help tell a story, but if they are to large and take too long to download, or they push the key points too far down along the page, or they are not properly alt-tagged, they hinder rather than help. The principles of web design often apply to email, but with notable exceptions. In email, complex coding increases cost and production times as well as jeopardizes rendering and user experience. In email, rich media including forms, scripting and flash usually don ’t render correctly. Email is very much it ’s own medium with it’s own set of unique rules…

8. client challenges © 2010 responsys Thanks to the combo of cluttered inboxes and an uncertain economic climate, batch-and-blast email isn’t like it used to. How can I leverage our customers’ lifecycle touch points to take our email program To the next level? “ ” Our email templates aren ’t working for us anymore. For starters, they look like a nightmare in Outlook 2007! What’s more – the suite evolved organically over time, and it shows – they’re all mismatched. Finally, they don’t support the dynamic content we’re starting to leverage in our messaging. “ ” I am woefully understaffed. My email creative support comes from an internal team that ’s (A) totally maxed out with website and print projects and (B) doesn’t know the first thing about email – and doesn’t care to learn. I need help with day-to-day management and production. “ ” Deliver innovative solutions to strategic and creative problems

9. design 101 © 2010 responsys defensive design

10. defensive design the trend toward disabled images and links is growing © 2010 Responsys email client default images on? default links on? default changeable? AOL 9.0 software no no yes AOL.com, AIM.com web no yes yes Gmail web no yes yes Hotmail web depends depends yes Lotus 7.1 software yes yes yes Mac web no yes no Outlook 2003, 2007 software no yes yes Yahoo web no yes yes

11. defensive design three ways to beat disabled images © 2010 Responsys

12. defensive design three ways to beat disabled images © 2010 Responsys

13. defensive design 9 of 10 users have a preview pane and 7 of 10 say they frequently or always use it! AT&T © 2010 Responsys email clients with preview panes email client preview pane? preview pane AOL 9.0 Express 6 + Lotus Notes 7 + Mac Mozilla Thunderbird Outlook XP Outlook 2003 Outlook 2007 Terra / Telefonica Windows Live Mail / Hotmail Yahoo web software software software web software software software software web web web yes yes yes yes yes yes yes yes yes yes yes yes off off off on off off on off off on off off

14. defensive design preview pane pain © 2010 Responsys Now you see it!

15. defensive design preview pane pain © 2010 Responsys Now you don’t!

16. design 101 © 2010 responsys email anatomy

17. © 2010 responsys email anatomy Preheader Header Navigation Table of Contents Primary Message Submessage(s) Siderail Recovery Module Footer

18. © 2010 responsys email anatomy Preheader Header Navigation Table of Contents Primary Message Submessage(s) Siderail Recovery Module Footer

19. © 2010 responsys email anatomy Preheader Header Navigation Table of Contents Primary Message Submessage(s) Siderail Recovery Module Footer

20. © 2010 responsys email anatomy Preheader Header Navigation Table of Contents Primary Message Submessage(s) Siderail Recovery Module Footer

21. © 2010 responsys email anatomy Preheader Header Navigation Table of Contents Primary Message Submessage(s) Siderail Recovery Module Footer

22. © 2010 responsys email anatomy Preheader Header Navigation Table of Contents Primary Message Submessage(s) Siderail Recovery Module Footer

23. © 2010 responsys email anatomy Preheader Header Navigation Table of Contents Primary Message Submessage(s) Siderail Recovery Module Footer

24. © 2010 responsys email anatomy Preheader Header Navigation Table of Contents Primary Message Submessage(s) Siderail Recovery Module Footer •

25. © 2010 responsys email anatomy Preheader Header Navigation Table of Contents Primary Message Submessage(s) Siderail Recovery Module Footer

26. © 2010 responsys email anatomy Preheader Header Navigation Table of Contents Primary Message Submessage(s) Siderail Recovery Module Footer

28. email anatomy preheader © 2010 Responsys

29. email anatomy header and navigation © 2010 Responsys

30. email anatomy primary message © 2010 Responsys

31. email anatomy submessages © 2010 Responsys

33. email anatomy the recovery module & footer © 2010 Responsys

34. design 202 © 2010 responsys animation & video

36. animation use animated gifs to get attention © 2010 Responsys

37. animation use animated gifs to highlight features © 2010 Responsys

41. video use video to demonstrate or instruct © 2010 Responsys

42. video use video for interviews and reporting © 2010 Responsys

43. video use video to deliver a cross-channel experience © 2010 Responsys

45. design 202 © 2010 responsys mobile

46. mobile overview © 2010 Responsys Based on the current estimates for internet usage on mobiles (31%) vs. laptops/PC’s (69%) and 1 smartphone to every 4 Computers, it is still recommended to optimise for the “big screen”. Following email design best practices should set you in good stead for mobile users too. IF you can identify who your mobile crowd are, then it might be worth doing a mobile optimised version. 1 smartphone to every 4 PC’s!

47. mobile screen dimensions © 2010 Responsys iPhone sets the base size for most modern smartphones at 320 x 480 pixels. Other smartphones are either similar, or possess a higher resolution. We recommend that this a good size to keep in mind as a foundation.

48. mobile online synergy © 2010 Responsys During design, it’s worth asking “is the landing page mobile friendly?” Otherwise, it can become a broken user experience. The best approach is designing at a slightly narrower width (500 & 600 pixels). Design between 500 / 600 Pixels wide!

49. mobile HTML light versions © 2010 Responsys If you know a large percentage of your audience may be viewing emails on mobile devices, a good alternative to creating mobile specific emails is to create an HTML light version that is linked to in the preheader section at the top of the email.

50. design 202 © 2010 responsys dialogue-drivers

55. design 202 © 2010 responsys testing

57. thank you for your time © 2010 responsys it’s been our pleasure