Mobile Responsive email design

1. How and Why Mobile Responsive Design is essential to today's email marketing Darren Hepburn - @DarrenHepburn Sales Director NewZapp Email Marketing 51% of all emails are opened on a mobile device. Is your email marketing looking its Sunday best or is it letting you down? Digital Marketing Priorities 2014 Brought to you by: #PlanToSucceed

2. About SmartInsights.com Plan, Manage and Opimize your Marketing Email capability review - free download www.slideshare.net/Smart-Insights

3. 3 Agenda  Responsive Email Design  Should I worry about it?  The science  User engagement  Does it work?  Q & A

4. 4 Who is this guy? Darren Hepburn - @DarrenHepburn Sales Director NewZapp Email Marketing www.NewZapp.co.uk Leader of the sales, support & marketing team at NewZapp Email Marketing consultant for over 10 years, Trade show speaker, blogger and training specialist.

5. Responsive Email Design 5 One Email All Devices A code driven reaction to the screen width of the device your email is been read on.

6. 6 Quick straw poll  How many of you use a mobile responsive template/design when building email campaigns  Yes  No  Thinking about it  I shamefully don’t do any email marketing currently

7. 7 5 1 % OF ALL EMAILS ARE OPENED ON MOBILE DEVICES

8. Most popular activity on mobile 8 EMAIL WEB BROWSING FACEBOOK MAPS / DIRECTIONS GAMES GENERAL SEARCH SHARE / POST PHOTOS 78% 73% 70% 64% 60% 57% 53%

9. 9 49% READ EMAILS ON A MOBILE WHEN WAKING UP 32% READ EMAILS ON A MOBILE WHILST COMMUTING 63% READ EMAILS ON A MOBILE DURING THE WEEKEND 58% READ EMAILS ON A MOBILE ON HOLIDAY 55% READ EMAILS ON A MOBILE BEFORE GOING TO BED Apsis “The email Barometer, Email on mobile devices” (2013)

10. 10 Quick straw poll  What mobile phones are we carrying today?  iPhone  Samsung  Sony  HTC  Blackberry  Other

11. 11 Who’s the Daddy? 2 Outlook 14% 3 Google Android 12% 4 Apple iPad 12% 5 Apple Mail 8% 6 Gmail 6% 7 Outlook.com 6% 8 Yahoo! Mail 5% 9 Windows Live Mail 3% 10 Windows Mail 2% NUMBER ONE Apple iPhone 26% Source: Litmus.com

12. 12 7 1 % OF EMAILS THAT DO NOT DISPLAY CORRECTLY DELETED

13. 13 The Science @media Telling the content how to display based on the width of the screen it’s been read on <style type="text/css"> @media only screen and (max-device-width: 480px) { /* mobile-specific CSS styles go here */ } /* regular CSS styles go here */ </style>

14. One Email All Devices 14

15. One Email All Devices 15

16. So what happened then? 16 Media Query

17. So what happened then? 17 Media Query 645 PX Max Device Width @media screen and (max-device-width: 645px), screen and (max-width:645px)

18. So what happened then? table td[id='banner-switcher'], table td img[class~='image-desktop'] Plus a lot more code here…. 18 Media Query 645 PX Header Switch Desktop Version

19. So what happened then? 19 Media Query 645 PX Stacked Content *[class~='responsive-sub'], *[class~='responsive-sub-centered'] { float:left !important; width:100% !important; height:auto !important; text-align:left !important; } *[class~='responsive-sub-centered'], table td [class~='responsive-sub-centered'] img { text-align:center !important; vertical-align:top !important; } *[class~='responsive-sub-centered'] table { float:none !important; margin:0 auto !important; }

20. So what happened then? 20 Media Query 645 PX Bigger Text Image Scaled table td[class~='text-to-12px'] { font-size:12px !important; } table td[class~='scale-me'] img { width:100% !important; height:auto !important; }

21. So what happened then? 21 Media Query 645 PX Hidden Areas *[class~='hide-me']{ display:none !important; } Desktop Version

22. 22 <!doctype html> <html> <head> <title>NewZapp Email Marketing</title> <meta http-equiv="Content-Type" content="text/html; charset=iso- 8859-1" /> <meta name="format-detection" content="telephone=no" /> <STYLE type="text/css"•> .ReadMsgBody { width: 100%; } .ExternalClass { width: 100%; } td a, td a:link, td a:visited, td a:hover, td a:active, div a, div a:link, div a:visited, div a:hover, div a:active { color:#115599; text-decoration:underline; } td span.bigger-text-plain-links a, td span.bigger-text-plain-links a:link, td span.bigger-text-plain-links a:visited, td span.bigger-text-plain-links a:hover, td span.bigger-text-plain-links a:active { text-decoration:none !important; } img { border:none !important; } @media only screen and (max-width: 645px) { table[class='responsive-table'] { width:100% !important; } table[class='responsive-sub'], td[class='responsive-sub'], td[class='responsive-sub-margin-below'] { float:left !important; width:100% !important; height:auto !important; } td[class='responsive-sub-margin-below'] { margin-bottom:15px !important; border-width:0px !important; } table[class='responsive-sub-with-margin-RL'] { width:95% !important; } td[class='responsive-sub-centered'], td[class='responsive-sub-centered'] img { text-align:center !important; vertical-align:top !important; } td[class='responsive-sub-centered'] img, td[class='responsive-sub-centered'] table { display:inline-block !important; } td img { width:auto !important; height:auto !important; } *[class='no-resize'] { width:auto !important; } table[class='table-with-margins-LR'] { width:95% !important; } td span[class="bigger-text"], td span[class='bigger-text-scale-img'] { font-size:1.2em !important; } td span[class='bigger-text-scale-img'] img { width:100% !important; } td[class='hide-me'] { display:none !important; } } </STYLE> </head>

23. 23

24. 24

25. 25 User Engagement TRASH Remember what happens to 71% of emails that don’t play nice in mobile devices? Engagement rates improve when emails are optimised for mobile screen sizes. When people are busy they need clear, easy to read messages or they don't respond.

26. 26

27. 27

28. 28

29. 29

30. 30

31. 31 Quick straw poll  Is your website mobile responsive?  Yes  No  Nearly

32. 32 Good User Engagement  Make sure your landing area is mobile responsive too.  Images are on automatically – so use them  Watch your text links  More meat less veg  Up down good – left right bad  You’re a reader too – what got you clicking

33. 33 Does it work? 1st 2nd 3rd 26.7% 23.1% 20.9% EMAIL MARKETING GENERATED 26.7% OF SALES ON MOBILE COMPARED TO 23.1% ON TABLET AND 20.9% ON DESKTOP Custora “E-commerce Pulse Mobile report” (2014)

34. 34 Email Marketing drives mobile purchases – social media doesn’t. Custora “E-commerce Pulse Mobile report” (2014)

35. 35

36. 36

37. Summary – questions please! 37  1. Responsive Email Design  2. Should I worry?  3. The science  4. User engagement  5. Does it work?  @NewZapp  NewZapp.co.uk  @DarrenHepburn  sales@newzapp.co.uk  Smart Insights member resources: http://bit.ly/smarteremail

38. 38 Further Resources www.NewZapp .co.uk www.emailmonday.com blog.NewZapp.co.uk www.litmus.com Get in touch with @DarrenHepburn for a free library of ready to go mobile responsive templates or a full demo of NewZapp Email Marketing