Mobile Responsive email design
•Download as PPTX, PDF•
0 likes•1,074 views
A download of a Smart insights webinar by Darren Hepburn of NewZapp explaining the business reasons for sending mobile responsive email, examples from different sectors and how to implement them using @mediaquery
Recommended
Recommended
More Related Content
More from Smart Insights
More from Smart Insights (20)
Recently uploaded
Recently uploaded (20)
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
Editor's Notes
- What is mobile responsive design? We’ll have an introduction at this growing phenomenon of email marketing We’ll also look at what mobile devices have done to email marketing in general before taking a look at the science behind good mobile responsive design. This will be a laypersons look at how they LOOK when work rather than how the code works! We’ve a team of designers here if you’ve any in-depth HTML specific queries which I’d be happy to pass on after the webinar. We’ll take a look at what impact this technology have on the end reader and how engaged with your brand they can become as a result. Does it work, some stats and pitfalls from our experiences at NewZapp Q & A
- Who am I Who are NewZapp? Established in 1998 and based in Exeter, NewZapp is one of the UK’s leading email marketing companies, started by the 2 founding directors who are still very much a part of the company. We've over 15 years of email marketing experience, knowledge, skills and expertise to help you deliver responsive email marketing campaigns.
- Responsive email design has been around in some way shape or form for many years, iPhones were the first with scalable design, When we launched LIVE! Client (which we’ll see later) we realised… The technology has matured now to a point where an email and its contents can be rendered differently depending on its environment. this progressions are often referred to as fluid and responsive email creative. This is achieved by a code driven reaction to the maximum screen width of the device your email is been read on. Here at NewZapp we focus on letting the customer concentrate on one email that works in all devices.
- Forrester Research “Global Email Marketing Customer Reference Online Survey” (2014) 72% of enterprise email marketers say they are using Responsive design, 27% say they plan or would like to. Finish with “why is it important?”
- This is the big stat - This is a 2013 figure which saw an increase of 21% on 2012. 47.5% of consumers have used their mobile devices to sort through their email before reading them on a desktop.- BlueHornet “Consumer Views of Email Marketing” (2014)
- If you are like me – your mobile is useless without internet. If it’s not connected to the outside world it’s just a fancy way of telling the time, it even rings occasionally. I’m surprised at facebook below web browsing and it’s interesting that twitter doesn’t get a look in considering as an email marketing provider I’m constantly been told social media will be the death of me and my business.
- Think we can see ourselves in 2 or 3 of these – I know I tick every single box Commuting, imagine how this will change with free wifi on tubes and trains These stats have a dramatic effect on the “when should I send my email question” Recite traditional stats – Tuesday – Thursday etc. we’ll touch back on this later
- Finish with So why is it important?
- Windows Mail is a desktop email client included with windows upto vista, Windows Live Mail is it’s successor. Outlook.com replaced Hotmail in April 2013 iPhone and Outlook remained 1 and 2 throughout 2013 iPhone and Ipad represent 38% total market share – great news for email marketers as its so mobile responsive friendly.
- Example of mobile responsive code 70 lines in the <head> of the email above the content I’ll give out my email at the end, we have 5 free ready to use mobile responsive templates to give away.
- Of course – as ESP like NewZapp takes all that science
- We touched on mobile friendly landing areas for your email clicks are you putting in the hard yards on a responsive email design only to lose user engagement at the second hurdle
- Lets compare those figures to some other marketing channels. Customers responding to email marketing and shoppers going directly to e-commerce sites (including app traffic) accounted for the highest share of purchases on phones. Email marketing generated 26.7% of sales on mobile phones, compared to only 20.9% on desktop, and 23.1% on tablet.